1. Rich single page applications with SharePoint
Dinusha Kumarasiri
LB Finance PLC

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

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

4. 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

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

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

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

8. 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

9. 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?

10. Single Page Applications(SPA)
Frameworks available

11. 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.

12. SPA with AngularJS
AngularJS Bootstrapping

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

14. 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

15. 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

16. 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

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

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

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

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

21. Questions Email – kumarasiri048@gmail.com
Blog –