single page apps
DESCRIPTION
Presentation on Single Page Applications I recently gave for a client. Feel free to contact Omni Resources at http://www.omniresources.com or myself on LinkedIn at https://www.linkedin.com/in/michaelacord if you would like to learn more about builiding Single Page Apps.TRANSCRIPT
Single Page AppsPresented By Mike Acord
Microsoft Solutions Architect
May 12, 2014http://www.omniresources.comhttps://www.linkedin.com/in/michaelacord
SPA Agenda
• What is a SPA?• Examples• Advantages/Challenges• SPA Technologies• SPA Frameworks• Q & A
So, What is SPA?
Single Page Applications
• Native-like user interface• Fluid• Fast• Page loaded once, updates with
JavaScript• Interactive
Traditional Characteristics
• HTML5• JSON• Routing• RESTful web services• Data binding• Templates
Traditional Page Lifecycle
Credit:http://msdn.microsoft.com/en-us/magazine/dn463786.aspx
SPA Page Lifecycle
Credit:http://msdn.microsoft.com/en-us/magazine/dn463786.aspx
SPA Examples
Example: Twitter
Advantages
• Fluid interface• Native feel• Server scale• Mobile friendly• Can distribute as an App• Ability to work offline• Client-side caching• Trendy
Challenges
• New skills required (JavaScript)• SEO• Bookmarking• Duplicate logic server/client side• Testing• Debugging• Large initial page load
SPA TechnologiesWelcome to your new tech stack
SPA Technologies
Routing
{{View Templates}}
RESTful API
• "REpresentational State Transfer• Alternative to complex SOAP/WSDL• Use HTML Action headers to distinguish
actions• Methods:
• GET: Get the item details• PUT: Update an item• POST: Create an item• DELETE: Delete the item
RESTful API
• Tree-like hierarchy URI, often human readable• Example: /food/fruit/apples/fuji
• Typically returns JavaScript Object Notation (JSON)
• Stateless: server does not keep track of user state
• Standard: most libraries understand REST
Routing
• Determines what page to display
Routing
Routing
• Allows direct linking• Allows bookmarking• Allows History (Back/Forward)• Preserves page state
Routing
View Templates
• Clean separation of html (View) from JavaScript
• Allows reuse• Use separate template files
{{View Templates}}
Other SPA Technologies
• HTML5 Storage• PushState• Data Binding• On-demand file loading• OAuth• PhoneGap
SPA FrameworksHelping put it all together
SPA Frameworks
Thank you!Q & A
http://www.omniresources.comhttps://www.linkedin.com/in/michaelacord