The Characteristics of a Successful SPA

Gil Fink
Founder and Owner at sparXys
Mar. 25, 2015

More Related Content


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 • 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
  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 - • My Blog – • Follow me on Twitter – @gilfink
  47. Thank You!