Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
The Characteristics of a Successful
SPA
Gil Fink
CEO and Senior Consultant, sparXys
Join the conversation on Twitter: @Dev...
Single Page Applications
Managers and SPA
Trying to solve the puzzle of single page application…
Even the Shortened Name
is Misleading…
Let’s build a SPA?
About Me
• sparXys CEO and Senior consultant
• ASP.NET/IIS Microsoft MVP
• Pro Single Page Application Development (Apress...
Agenda
• The Road to Single Page Applications
• What is a SPA?
• SPA Building Blocks
• Characteristics of a Successful SPA
The Road to SPAs
1990
HTML
HTTP
1995
Java
Applets
1996
CSS
JavaScript
Flash
1997
HTML 4
2005
Ajax is a
buzzword
2006
Start...
Traditional Websites
OMG! not this kind of traditional website please!
Traditional Native Apps
Native apps – we love installation experience… Not!
What is a SPA?
Web Application
No full page
submit
No full page
refresh
No embedded
objects
(plugins)
Client-side
templati...
Why to Develop SPAs?
Feature Web App Native App Single Page
App
Cross Platform
functionality
V X V
Client State
Management...
SPA Building Blocks
HTML5
JavaScript Libraries
Ajax
REST
SPA
Web API
Routing
HTML5
• Supported by most modern browsers
o www.caniuse.com
• Includes new JavaScript APIs that can help to:
o Store data ...
Ajax
• Asynchronous JavaScript and XML
o No XML these days…
o Asynchronous JavaScript and JSON (Ajaj) today
• Asynchronous...
JavaScript
Libraries/Frameworks
Any application that can be
written in
JavaScript, will eventually
be written in JavaScript
Atwood's Law
REST
• REpresntational State Transfer
• Architecture style for working with HTTP
• Using HTTP verbs (POST, GET, PUT, DELET...
Web API
• The server is used mostly as API
o Each API function is an endpoint
• No need for server page rendering
• No nee...
Client-Side Routing
• All routing is performed in the client-side
• You use a routing library/framework
o Or your own impl...
DEMO
TheAgency
What Makes a Successful
SPA?
What Make a Successful
SPA?
• Choosing the working environment
• Choosing the main framework
• Choosing supporting librari...
Choose Your Battlefield
• Choosing your working environment
Choose Your Working
Environment
• Many Choices
o WebStorm
o Visual Studio
o Eclipse
o Sublime text
o And more
Demo
WebStorm/Visual Studio/Sublime Text
Many IDEs, What to Pick?
• Choose the IDE that fits your needs
o You work in .NET – Visual Studio
o You work in Java – Ecl...
Organizing SPA Folder
Structure
• By logical modules• By file types
Choose Your Team
• Choosing the main framework
Frameworks
• There is a variety of SPA frameworks/libraries:
Demo
TodoMVC
http://todomvc.com/
Many Frameworks, What
To Do?
• Ask yourself
o How easy it is to use the framework?
o Does the framework has good documenta...
Choose Your Weapons
• Choosing supporting libraries
Supporting Libraries
• Most of the time, supporting libraries will be
connected to the framework you have chosen
Supporting Library Types
• DOM Manipulation
o Examples: jQuery, Prototype, MooTools
• Utilities
o Examples: Underscore, Lo...
Million Libraries, What to
Do?
• Pick the libraries that:
o Support the functionality that you need
o Have good performanc...
Choose Your Supportive
Platform
• Server Web API
Server Web API
• Build a
o Robust API
o Stable and consistent API
• Don’t break your API occasionally
o Flexible API
• Sup...
Keep Performance in
Mind
Performance Tuning
• Make your SPA fast and fluid
o Don’t count on the platforms to do that for you
• Keep performance in ...
Know The Running
Environment
Repaints and Reflows
• Reflow might occurs whenever a visual change
requires a change in the layout of the page
o Examples...
Use The Right Tools to
Find Performance Issues
• Developer Tools include profilers
o Chrome DevTools
o Firebug
o IE Develo...
Demo
Profiling JavaScript using Chrome DevTools
Questions?
Summary
• SPAs are entire web applications built upon one
page and JavaScript interactions
• Very suitable for mobile deve...
Resources
• The slide deck - http://bit.ly/1BnxPLt
• My Blog – http://www.gilfink.net
• Follow me on Twitter – @gilfink
Thank You!
Upcoming SlideShare
Loading in …5
×

The Characteristics of a Successful SPA

1,252 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

The Characteristics of a Successful SPA

  1. 1. The Characteristics of a Successful SPA Gil Fink CEO and Senior Consultant, sparXys Join the conversation on Twitter: @DevWeek #DW2015
  2. 2. Single Page Applications
  3. 3. Managers and SPA Trying to solve the puzzle of single page application…
  4. 4. Even the Shortened Name is Misleading… Let’s build a SPA?
  5. 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. 6. Agenda • The Road to Single Page Applications • What is a SPA? • SPA Building Blocks • Characteristics of a Successful SPA
  7. 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. 8. Traditional Websites OMG! not this kind of traditional website please!
  9. 9. Traditional Native Apps Native apps – we love installation experience… Not!
  10. 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. 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. 12. SPA Building Blocks HTML5 JavaScript Libraries Ajax REST SPA Web API Routing
  13. 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. 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. 15. JavaScript Libraries/Frameworks
  16. 16. Any application that can be written in JavaScript, will eventually be written in JavaScript Atwood's Law
  17. 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. 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. 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. 20. DEMO TheAgency
  21. 21. What Makes a Successful SPA?
  22. 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. 23. Choose Your Battlefield • Choosing your working environment
  24. 24. Choose Your Working Environment • Many Choices o WebStorm o Visual Studio o Eclipse o Sublime text o And more
  25. 25. Demo WebStorm/Visual Studio/Sublime Text
  26. 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. 27. Organizing SPA Folder Structure • By logical modules• By file types
  28. 28. Choose Your Team • Choosing the main framework
  29. 29. Frameworks • There is a variety of SPA frameworks/libraries:
  30. 30. Demo TodoMVC http://todomvc.com/
  31. 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. 32. Choose Your Weapons • Choosing supporting libraries
  33. 33. Supporting Libraries • Most of the time, supporting libraries will be connected to the framework you have chosen
  34. 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. 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. 36. Choose Your Supportive Platform • Server Web API
  37. 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. 38. Keep Performance in Mind
  39. 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. 40. Know The Running Environment
  41. 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. 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. 43. Demo Profiling JavaScript using Chrome DevTools
  44. 44. Questions?
  45. 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. 46. Resources • The slide deck - http://bit.ly/1BnxPLt • My Blog – http://www.gilfink.net • Follow me on Twitter – @gilfink
  47. 47. Thank You!

×