Rich single page applications with SharePoint Dinusha Kumarasiri LB Finance PLC

Dinusha Kumarasiri LB Finance PLC MVP - SharePoint server Solutions Architect focusing on SharePoint and related technologies Experienced in SharePoint, Office365 and Microsoft Azure Email : kumarasiri048@gmail.com Twitter : kumarasiri048 Facebook : dinushak LinkedIn : dinushak

Agenda Single Page Applications (SPA) SPA with AngularJS Integrate SPA with SharePoint Enhancements

Single Page Applications(SPA) What is SPA? Fits the application on one page Web application or web site that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from a server Redraw parts of the UI without refreshing the page

Single Page Applications(SPA) Benefits of SPA Reduced round trips Works with low bandwidth scenarios Load data and views on demand Highly interactive

Single Page Applications(SPA) Real world examples of SPA Gmail Twitter Azure Portal

Single Page Applications(SPA) Risks of SPA SEO can be complicated Potential memory leaks

Single Page Applications(SPA) SPA Architecture MVC (Model-View-Controller) pattern MVVM (Model-View-ViewModel) pattern Initial page render - Shell Data binding Routing Data binding – bind viewmodel to a view For every route, you create an HTML template

Single Page Applications(SPA) Architectural concerns What frameworks, tooling to use? How to manage navigation/routing? How to access and present data? How to test the application?

Single Page Applications(SPA) Frameworks available

SPA with AngularJS AngularJS Taxonomy Module Controller Directive Service Block of code dedicated for a single purpose. Module per feature Business logic for views Extension for HTML Reusable business logic independent of Views Routing Enables navigation from one view to the next as users perform application tasks The ngRoute module routes your application to different pages without reloading the entire application.

SPA with AngularJS AngularJS Bootstrapping

Integrate SPA with SharePoint SharePoint and SPA Is SharePoint a SPA? What about Minimal Download Strategy (MDS)?

Integrate SPA with SharePoint SharePoint application development Farm Solutions SharePoint Add-Ins SharePoint Framework based Apps F Event Receivers SharePoint Hosted Client Side Web Parts Web Parts Provider Hosted Timer Jobs

Integrate SPA with SharePoint Approaches to build SPAs with SharePoint Upload SPA assets to SharePoint libraries Build SharePoint hosted add-in Build Provider hosted add-in

Integrate SPA with SharePoint Build SPA as a SharePoint Hosted add-in Runs on client web browser Add-in is decoupled from SharePoint Access resources in SharePoint using JSOM or REST API Decouple business logic using Workflows or BCS Protect scripts by minifying

Integrate SPA with SharePoint Accessing data Via SharePoint REST API Breeze.js to assist the process

Integrate SPA with SharePoint Create SharePoint Hosted Add-In Install HotTowel.Angular package Add Breeze Create applauncher Access SharePoint resources Demo : SPA with SharePoint

Enhancements Real time data using web sockets Integrating LOB systems Unit test using Jasmine

Summary SPAs will bring a lot of benefits We can use AngularJS as the framework Build SharePoint hosted add-in as a SPA Enhancements

Questions Email – kumarasiri048@gmail.com Blog – http://dinushaonline.blogspot.com