Managers and SPA
Trying to solve the puzzle of single page application…
Even the Shortened Name
Let’s build a SPA?
• sparXys CEO and Senior consultant
• ASP.NET/IIS Microsoft MVP
• Pro Single Page Application Development (Apress)
• Co-author of 4 Microsoft Official Courses (MOCs)
• GDG Rashlatz Co-organizer
• The Road to Single Page Applications
• What is a SPA?
• SPA Building Blocks
• Characteristics of a Successful SPA
The Road to SPAs
Ajax is a
OMG! not this kind of traditional website please!
Traditional Native Apps
Native apps – we love installation experience… Not!
What is a SPA?
No full page
No full page
Why to Develop SPAs?
Feature Web App Native App Single Page
V X V
X V V
V X V
SPA Building Blocks
• Supported by most modern browsers
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
o No XML these days…
• Asynchronously call server endpoints
• You can
o Maintain state in the client side
o Go to the server asynchronously
Any application that can be
• 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
• 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
• 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
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.
o Bower, Nuget – package management
o Gulp, Grunt – tasks management
• Make your battlefield as comfortable as possible!
Organizing SPA Folder
• By logical modules• By file types
Choose Your Team
• Choosing the main framework
• There is a variety of SPA frameworks/libraries:
Many Frameworks, What
• 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!
Choose Your Weapons
• Choosing 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
o Examples: Underscore, Lodash
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
Million Libraries, What to
• 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!
Choose Your Supportive
• 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
• 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!
• 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
• Remember that most of the application is front-end based
o Your backend code
• If you have a backend
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
Use The Right Tools to
Find Performance Issues
• Developer Tools include profilers
o Chrome DevTools
o IE Developer Tools
• Static page analysis tools
• Poor performance === Less users