Building Single Page Applications (SPAs) in SharePoint with JavaScript Marc D Anderson Sympraxis Consulting LLC

Marc D Anderson Sympraxis Consulting LLC Co-Founder and President of Sympraxis Consulting LLC, located in the Boston suburb of Newton, MA, USA. Sympraxis focuses on enabling collaboration throughout the enterprise using the SharePoint application platform. Over 30 years of experience in technology professional services and software development. Over a wide-ranging career in consulting as well as line manager positions, Marc has proven himself as a problem solver and leader who can solve difficult technology problems for organizations across a wide variety of industries and organization sizes. Author of SPServices Awarded Microsoft MVP for SharePoint Server 2011-2018 Email : marc.anderson@sympraxisconsulting.com Twitter : @sympmarc Facebook : LinkedIn : https://www.linkedin.com/in/marcanderson/

Session Overview While the SharePoint Framework (SPFx) matures, we can continue to build Single Page Applications (SPAs) using lists and libraries for our data model, building with AngularJS, and deploying using Webpack and gulp-spsave. While this approach doesn’t utilize SPFx yet, you can build in such a way that you are ready when SPFx gives us the capability to take over an entire “modern” page.​ You Will Learn: How to build an SPA in SharePoint An approach to development that takes you from DB design through deployment What tools you can use to get ready for SPFx How to deploy your code to SharePoint without copy/pasting What Webpack does and how to configure it

Agenda What Is a Single Page Application (SPA)? Data Constructs Design Your UI Choose a Framework Deployment Toolchain Build it!

What Is a Single Page Application (SPA)? An application where the user generally stays on one page to accomplish all tasks In SharePoint, we can build "hybrid" SPAs, leveraging native functionality

Design Your Data Constructs Use lists and libraries like relational tables Set up Content Types using Site Columns Take advantage of Lookup columns for better data consistency Use Multiple lines of text columns to store JSON

Data Construct Caveats Managed metadata can be difficult to deal with Beware the 5000 item limit – but it doesn't have to be a problem Caching can really speed things up Flat tables are great, but you may end up with too many

Choose a Framework Don't base your decisions on what is popular, instead: Know your team's skills Understand your requirements Look to SPFx for future direction

Deployment Toolchain There are multiple ways to deploy to SharePoint Your choices will depend on: SDLC processes Number of instances Size of team Content Editor Web Parts (CEWPs) are still a decent option in "classic"

Webpack Can Simplify Deployment Webpack manages dependencies and bundling Takes some manual lifting Over time, will save you effort and simplify your code management

Design Your UI Web developers know HTML and CSS – and that's what SharePoint developers are becoming Rough things out, layer in data binding

Write Your JavaScript JavaScript provides the business logic Use the framework you've chosen – don't fight with it

Demo

Contact Information Email marc.anderson@sympraxisconsulting.com Twitter @sympmarc Blog http://sympmarc.com SPServices http://spservices.codeplex.com SPXSLT http://spxslt.codeplex.com Books http://sympmarc.com/books The Middle Tier Manifesto http://bit.ly/middletier