A session I delivered in DevWeek 2015 about the characteristics of a successful SPA

1. The Characteristics of a Successful
SPA
Gil Fink
CEO and Senior Consultant, sparXys
Join the conversation on Twitter: @DevWeek #DW2015

2. Single Page Applications

3. Managers and SPA
Trying to solve the puzzle of single page application…

4. Even the Shortened Name
is Misleading…
Let’s build a SPA?

5. About Me
• sparXys CEO and Senior consultant
• ASP.NET/IIS Microsoft MVP
• Pro Single Page Application Development (Apress)
Co-author
• Co-author of 4 Microsoft Official Courses (MOCs)
• GDG Rashlatz Co-organizer

6. Agenda
• The Road to Single Page Applications
• What is a SPA?
• SPA Building Blocks
• Characteristics of a Successful SPA

7. The Road to SPAs
1990
HTML
HTTP
1995
Java
Applets
1996
CSS
JavaScript
Flash
1997
HTML 4
2005
Ajax is a
buzzword
2006
Starting to
work on
HTML5
2007
Silverlight
Mobile Web

8. Traditional Websites
OMG! not this kind of traditional website please!

9. Traditional Native Apps
Native apps – we love installation experience… Not!

10. What is a SPA?
Web Application
No full page
submit
No full page
refresh
No embedded
objects
(plugins)
Client-side
templating
and routing

11. Why to Develop SPAs?
Feature Web App Native App Single Page
App
Cross Platform
functionality
V X V
Client State
Management
X V V
No Installation
required
V X V
Web
App
Native
App
SPA

12. SPA Building Blocks
HTML5
JavaScript Libraries
Ajax
REST
SPA
Web API
Routing

13. HTML5
• Supported by most modern browsers
o www.caniuse.com
• Includes new JavaScript APIs that can help to:
o Store data locally
o Persist data across application shutdowns
o Communicate with the server in new ways
o Increase web performance with new specifications and APIs

14. Ajax
• Asynchronous JavaScript and XML
o No XML these days…
o Asynchronous JavaScript and JSON (Ajaj) today
• Asynchronously call server endpoints
• You can
o Maintain state in the client side
o Go to the server asynchronously
o Render elements without full page refresh using JavaScript

15. JavaScript
Libraries/Frameworks

16. Any application that can be
written in
JavaScript, will eventually
be written in JavaScript
Atwood's Law

17. REST
• REpresntational State Transfer
• Architecture style for working with HTTP
• Using HTTP verbs (POST, GET, PUT, DELETE)
o Performs Create, Read, Update and Delete operations respectively
o Can also use other HTTP verbs
• Can receive and send data in variety of formats
o JSON, XML, HTML, XHTML, Blob and more

18. Web API
• The server is used mostly as API
o Each API function is an endpoint
• No need for server page rendering
• No need for server routing

19. Client-Side Routing
• All routing is performed in the client-side
• You use a routing library/framework
o Or your own implementation on top of HTML5 History API
• When a route changes
o The library/framework intercepts the navigation and performs your
functionality

20. DEMO
TheAgency

21. What Makes a Successful
SPA?

22. What Make a Successful
SPA?
• Choosing the working environment
• Choosing the main framework
• Choosing supporting libraries
• Server Web API platform
• Keep performance in mind
Let’s play a game

23. Choose Your Battlefield
• Choosing your working environment

24. Choose Your Working
Environment
• Many Choices
o WebStorm
o Visual Studio
o Eclipse
o Sublime text
o And more

25. Demo
WebStorm/Visual Studio/Sublime Text

26. Many IDEs, What to Pick?
• Choose the IDE that fits your needs
o You work in .NET – Visual Studio
o You work in Java – Eclipse
o You mainly do front-end development – WebStorm or Sublime Text
• Check that the IDE includes support for tools you will
use in the project.
For example:
o Bower, Nuget – package management
o Gulp, Grunt – tasks management
• Make your battlefield as comfortable as possible!

27. Organizing SPA Folder
Structure
• By logical modules• By file types

28. Choose Your Team
• Choosing the main framework

29. Frameworks
• There is a variety of SPA frameworks/libraries:

30. Demo
TodoMVC
http://todomvc.com/

31. Many Frameworks, What
To Do?
• Ask yourself
o How easy it is to use the framework?
o Does the framework has good documentation?
o Does the framework has a supportive community?
o Does the framework is supported by known companies?
• A question you will be asked by managers
o Do known web applications/sites use the framework?
o And many more
• Choose the team that will be the most productive
and effective for you!

32. Choose Your Weapons
• Choosing supporting libraries

33. Supporting Libraries
• Most of the time, supporting libraries will be
connected to the framework you have chosen

34. Supporting Library Types
• DOM Manipulation
o Examples: jQuery, Prototype, MooTools
• Utilities
o Examples: Underscore, Lodash
• Routing
o Examples: Sammy.js, History.js, Crossroads.js
• Async Module Definition (AMD)
o Examples: RequireJS, Almond
• CSS Libraries
o Examples: Bootstrap, Foundation
• Data Manipulation
o Example: Breeze.js

35. Million Libraries, What to
Do?
• Pick the libraries that:
o Support the functionality that you need
o Have good performance
o Have large community behind them
o Are modular
o Have good documentation
• Don’t be tempted to choose weapons you don’t
really need just because they are cool!

36. Choose Your Supportive
Platform
• Server Web API

37. Server Web API
• Build a
o Robust API
o Stable and consistent API
• Don’t break your API occasionally
o Flexible API
• Support more than just JSON format
o Make the API simple
• Helps for the adoption
o Make the API extensible
• Web API doesn’t mean just CRUD/RPC!

38. Keep Performance in
Mind

39. Performance Tuning
• Make your SPA fast and fluid
o Don’t count on the platforms to do that for you
• Keep performance in mind during the development
process
• Optimize
o Your JavaScript code
• Remember that most of the application is front-end based
o Your backend code
• If you have a backend

40. Know The Running
Environment

41. Repaints and Reflows
• Reflow might occurs whenever a visual change
requires a change in the layout of the page
o Examples: browser resize, DOM manipulation and etc.
• Repaint occurs when a visual change doesn’t
require recalculation of the whole layout
o Examples: element visibility change, changes in text color or background
colors and etc.
• These processes are expensive
• Controlled by the browser
• Can be minimized

42. Use The Right Tools to
Find Performance Issues
• Developer Tools include profilers
o Chrome DevTools
o Firebug
o IE Developer Tools
• Static page analysis tools
o PageSpeed
o YSlow
• Poor performance === Less users

43. Demo
Profiling JavaScript using Chrome DevTools

44. Questions?

45. Summary
• SPAs are entire web applications built upon one
page and JavaScript interactions
• Very suitable for mobile development
• SPAs are one of the ways to build your next web
apps!

46. Resources
• The slide deck - http://bit.ly/1BnxPLt
• My Blog – http://www.gilfink.net
• Follow me on Twitter – @gilfink

47. Thank You!