SharePoint-Hosted Apps
All resources required to implemented app stored in an AppWeb & served up by SharePoint
Single Page Apps
One page, multiple screens yet no traditional page refreshes
Why Build Single Page Apps (SPAs)?
- Reduced round tripping to the server
- Works great in low bandwidth & offline
- Highly interactive
Characteristics of Single Page Apps?
- Routing & navigation
- Page history
- Deep linking
- Templated views & data binding
Why SharePoint hosted Apps as SPAs?
- Minimal additional deployment steps (sort of)
- No extra costs & concerns
- SPA's yield a richer user experience
- SPA's facilitate modular app development
- Leverage SharePoint for services & data storage
Organizing your Project
- Put all JavaScript libraries / vendor scripts in
/Scripts
- Just like
References
is for server side assemblies
Put your custom JavaScript in /App

Why? Because you don't want to mix your custom code with scripts & libraries with
Recommendation: Look at John Papa's AngularJS style guide, specifically the section on application structure
DEMO

Thinking Ahead...
- Challenging stuff
- Cool techniques
Challenging stuff
- SharePoint creates a new AppWeb & throws away the old one when updating the app
- Storing app data in AppWeb's lists/libraries? You'll lose it all on updates!
- Handling app authentication (tokens)
- DO NOT RETURN OAUTH ACCESS TOKENS TO CLIENT
- May need an intermediary (see Research Project Code Sample in Resources section for example)
Cool techniques
- Use Google Analytics & virtual page views & custom events to track app usage
- Externalize JavaScript & CSS references to a CDN
- Enables app updates without actually updating the SharePoint app
- Doesn't help with new views
- Utilize A/B testing to see what UX works better for your users
- Combined with Google Analytics => killer customer service offered to your customers
- Use SharePoint workflows to protect sensitive business logic
- If server-side code needed, have workflow call it... app never sees where it went / came from
- Use BCS External Lists to hide where external data came from
Resources (2) - Pluralsight on-demand courses
Resources (3) - Sample SharePoint SPA Projects