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