SlideShare a Scribd company logo

The Characteristics of a Successful SPA

Gil Fink
Gil Fink

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

1 of 47
Download to read offline
The Characteristics of a Successful
SPA
Gil Fink
CEO and Senior Consultant, sparXys
Join the conversation on Twitter: @DevWeek #DW2015
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)
Co-author
• Co-author of 4 Microsoft Official Courses (MOCs)
• GDG Rashlatz Co-organizer
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
Starting to
work on
HTML5
2007
Silverlight
Mobile Web
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
templating
and routing
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
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 locally
o Persist data across application shutdowns
o Communicate with the server in new ways
o Increase web performance with new specifications and APIs
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
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, 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
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
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
DEMO
TheAgency
What Makes a Successful
SPA?
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
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 – 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!
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 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
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, 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
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!
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
• 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!
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 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
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: 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 Firebug
o IE Developer Tools
• Static page analysis tools
o PageSpeed
o YSlow
• Poor performance === Less users
Demo
Profiling JavaScript using Chrome DevTools
Questions?
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!
Resources
• The slide deck - http://bit.ly/1BnxPLt
• My Blog – http://www.gilfink.net
• Follow me on Twitter – @gilfink
Thank You!

Recommended

Tech Stack Ideas
Tech Stack IdeasTech Stack Ideas
Tech Stack Ideasnsclark
 
Introduction to Web Technology Stacks
Introduction to Web Technology StacksIntroduction to Web Technology Stacks
Introduction to Web Technology StacksPrakarsh -
 
Meanstack Introduction by Kishore Chandra
Meanstack Introduction by Kishore ChandraMeanstack Introduction by Kishore Chandra
Meanstack Introduction by Kishore ChandraKishore Chandra
 
Saving Time By Testing With Jest
Saving Time By Testing With JestSaving Time By Testing With Jest
Saving Time By Testing With JestBen McCormick
 
Technology Stack Discussion
Technology Stack DiscussionTechnology Stack Discussion
Technology Stack DiscussionZaiyang Li
 
Journey To The Front End World - Part3 - The Machine
Journey To The Front End World - Part3 - The MachineJourney To The Front End World - Part3 - The Machine
Journey To The Front End World - Part3 - The MachineIrfan Maulana
 

More Related Content

What's hot

What is a good technology stack today?
What is a good technology stack today?What is a good technology stack today?
What is a good technology stack today?Netlight Consulting
 
Php Indonesia x Bliblidotcom - Architecting Scalable CSS
Php Indonesia x Bliblidotcom - Architecting Scalable CSSPhp Indonesia x Bliblidotcom - Architecting Scalable CSS
Php Indonesia x Bliblidotcom - Architecting Scalable CSSIrfan Maulana
 
Platforms based on WordPress
Platforms based on WordPressPlatforms based on WordPress
Platforms based on WordPressMario Peshev
 
What is Mean Stack Development ?
What is Mean Stack Development ?What is Mean Stack Development ?
What is Mean Stack Development ?Balajihope
 
Microsoft Azure DocumentDB - Global Azure Bootcamp 2016
Microsoft Azure DocumentDB -  Global Azure Bootcamp 2016Microsoft Azure DocumentDB -  Global Azure Bootcamp 2016
Microsoft Azure DocumentDB - Global Azure Bootcamp 2016Sunny Sharma
 
Python to go
Python to goPython to go
Python to goWeng Wei
 
Ruby on Rails from an ASP.NET Perspective
Ruby on Rails from an ASP.NET PerspectiveRuby on Rails from an ASP.NET Perspective
Ruby on Rails from an ASP.NET PerspectiveBuddy Lindsey
 
Blazor - .NET in the Browser!
Blazor - .NET in the Browser!Blazor - .NET in the Browser!
Blazor - .NET in the Browser!David Paquette
 
Joomla! multiplied - How to run Multi-Sites - JandBeyond 2014
Joomla! multiplied - How to run Multi-Sites - JandBeyond 2014Joomla! multiplied - How to run Multi-Sites - JandBeyond 2014
Joomla! multiplied - How to run Multi-Sites - JandBeyond 2014Viktor Vogel
 
PHP Frameworks Review - Mar 19 2015
PHP Frameworks Review - Mar 19 2015PHP Frameworks Review - Mar 19 2015
PHP Frameworks Review - Mar 19 2015kyphpug
 
5 reasons to program javascript
5 reasons to program javascript5 reasons to program javascript
5 reasons to program javascriptMichael Banzon
 
WordPress as a CMS - Case Study of an Organizational Intranet
WordPress as a CMS - Case Study of an Organizational IntranetWordPress as a CMS - Case Study of an Organizational Intranet
WordPress as a CMS - Case Study of an Organizational IntranetTech Liminal
 
Less\sass done right in .NET
Less\sass done right in .NETLess\sass done right in .NET
Less\sass done right in .NETPawelPabich
 
PHP, LAMP Stack & WordPress
PHP, LAMP Stack & WordPressPHP, LAMP Stack & WordPress
PHP, LAMP Stack & WordPressSuman Srinivasan
 

What's hot (19)

What is a good technology stack today?
What is a good technology stack today?What is a good technology stack today?
What is a good technology stack today?
 
MEAN Stack
MEAN StackMEAN Stack
MEAN Stack
 
Php Indonesia x Bliblidotcom - Architecting Scalable CSS
Php Indonesia x Bliblidotcom - Architecting Scalable CSSPhp Indonesia x Bliblidotcom - Architecting Scalable CSS
Php Indonesia x Bliblidotcom - Architecting Scalable CSS
 
Platforms based on WordPress
Platforms based on WordPressPlatforms based on WordPress
Platforms based on WordPress
 
Client server
Client serverClient server
Client server
 
What is Mean Stack Development ?
What is Mean Stack Development ?What is Mean Stack Development ?
What is Mean Stack Development ?
 
Microsoft Azure DocumentDB - Global Azure Bootcamp 2016
Microsoft Azure DocumentDB -  Global Azure Bootcamp 2016Microsoft Azure DocumentDB -  Global Azure Bootcamp 2016
Microsoft Azure DocumentDB - Global Azure Bootcamp 2016
 
Python to go
Python to goPython to go
Python to go
 
Ruby on Rails from an ASP.NET Perspective
Ruby on Rails from an ASP.NET PerspectiveRuby on Rails from an ASP.NET Perspective
Ruby on Rails from an ASP.NET Perspective
 
Blazor - .NET in the Browser!
Blazor - .NET in the Browser!Blazor - .NET in the Browser!
Blazor - .NET in the Browser!
 
Joomla! multiplied - How to run Multi-Sites - JandBeyond 2014
Joomla! multiplied - How to run Multi-Sites - JandBeyond 2014Joomla! multiplied - How to run Multi-Sites - JandBeyond 2014
Joomla! multiplied - How to run Multi-Sites - JandBeyond 2014
 
PHP Frameworks Review - Mar 19 2015
PHP Frameworks Review - Mar 19 2015PHP Frameworks Review - Mar 19 2015
PHP Frameworks Review - Mar 19 2015
 
Java script
Java scriptJava script
Java script
 
5 reasons to program javascript
5 reasons to program javascript5 reasons to program javascript
5 reasons to program javascript
 
Mean stack
Mean stackMean stack
Mean stack
 
Module 4 - Dreamweaver Templates (Static vs. Dynamic Content)
Module 4 - Dreamweaver Templates (Static vs. Dynamic Content)Module 4 - Dreamweaver Templates (Static vs. Dynamic Content)
Module 4 - Dreamweaver Templates (Static vs. Dynamic Content)
 
WordPress as a CMS - Case Study of an Organizational Intranet
WordPress as a CMS - Case Study of an Organizational IntranetWordPress as a CMS - Case Study of an Organizational Intranet
WordPress as a CMS - Case Study of an Organizational Intranet
 
Less\sass done right in .NET
Less\sass done right in .NETLess\sass done right in .NET
Less\sass done right in .NET
 
PHP, LAMP Stack & WordPress
PHP, LAMP Stack & WordPressPHP, LAMP Stack & WordPress
PHP, LAMP Stack & WordPress
 

Similar to The Characteristics of a Successful SPA

How To Use Selenium Successfully
How To Use Selenium SuccessfullyHow To Use Selenium Successfully
How To Use Selenium SuccessfullyDave Haeffner
 
Week01 jan19 introductionto_php
Week01 jan19 introductionto_phpWeek01 jan19 introductionto_php
Week01 jan19 introductionto_phpJeanho Chu
 
Best Practices for WordPress in Enterprise
Best Practices for WordPress in EnterpriseBest Practices for WordPress in Enterprise
Best Practices for WordPress in EnterpriseTaylor Lovett
 
Best practices-wordpress-enterprise
Best practices-wordpress-enterpriseBest practices-wordpress-enterprise
Best practices-wordpress-enterpriseTaylor Lovett
 
Building Enterprise Grade Front-End Applications with JavaScript Frameworks
Building Enterprise Grade Front-End Applications with JavaScript FrameworksBuilding Enterprise Grade Front-End Applications with JavaScript Frameworks
Building Enterprise Grade Front-End Applications with JavaScript FrameworksFITC
 
SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017
SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017
SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017Marc D Anderson
 
Code for Startup MVP (Ruby on Rails) Session 1
Code for Startup MVP (Ruby on Rails) Session 1Code for Startup MVP (Ruby on Rails) Session 1
Code for Startup MVP (Ruby on Rails) Session 1Henry S
 
Custom Development for SharePoint
Custom Development for SharePointCustom Development for SharePoint
Custom Development for SharePointTalbott Crowell
 
Single page application and Framework
Single page application and FrameworkSingle page application and Framework
Single page application and FrameworkChandrasekar G
 
HTML5: the new frontier of the web
HTML5: the new frontier of the webHTML5: the new frontier of the web
HTML5: the new frontier of the webIvano Malavolta
 
After the LAMP, it's time to get MEAN
After the LAMP, it's time to get MEANAfter the LAMP, it's time to get MEAN
After the LAMP, it's time to get MEANJeff Fox
 
Scaling with swagger
Scaling with swaggerScaling with swagger
Scaling with swaggerTony Tam
 
Presentation 1 Web--dev
Presentation 1 Web--devPresentation 1 Web--dev
Presentation 1 Web--devaltsav
 
WordPress as an Application Framework
WordPress as an Application FrameworkWordPress as an Application Framework
WordPress as an Application FrameworkNazmul Hasan Rupok
 
Notes From Velocity Conference Europe
Notes From Velocity Conference EuropeNotes From Velocity Conference Europe
Notes From Velocity Conference EuropeSiriusWay
 
How to Use Selenium, Successfully
How to Use Selenium, SuccessfullyHow to Use Selenium, Successfully
How to Use Selenium, SuccessfullySauce Labs
 
Lifecycle Management with SharePoint Apps and Solutions
Lifecycle Management with SharePoint Apps and SolutionsLifecycle Management with SharePoint Apps and Solutions
Lifecycle Management with SharePoint Apps and SolutionsSPC Adriatics
 
Web Fundamentals Crash Course
Web Fundamentals Crash CourseWeb Fundamentals Crash Course
Web Fundamentals Crash CourseMrAbbas
 

Similar to The Characteristics of a Successful SPA (20)

How To Use Selenium Successfully
How To Use Selenium SuccessfullyHow To Use Selenium Successfully
How To Use Selenium Successfully
 
Week01 jan19 introductionto_php
Week01 jan19 introductionto_phpWeek01 jan19 introductionto_php
Week01 jan19 introductionto_php
 
Best Practices for WordPress in Enterprise
Best Practices for WordPress in EnterpriseBest Practices for WordPress in Enterprise
Best Practices for WordPress in Enterprise
 
Best practices-wordpress-enterprise
Best practices-wordpress-enterpriseBest practices-wordpress-enterprise
Best practices-wordpress-enterprise
 
Building Enterprise Grade Front-End Applications with JavaScript Frameworks
Building Enterprise Grade Front-End Applications with JavaScript FrameworksBuilding Enterprise Grade Front-End Applications with JavaScript Frameworks
Building Enterprise Grade Front-End Applications with JavaScript Frameworks
 
SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017
SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017
SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017
 
Code for Startup MVP (Ruby on Rails) Session 1
Code for Startup MVP (Ruby on Rails) Session 1Code for Startup MVP (Ruby on Rails) Session 1
Code for Startup MVP (Ruby on Rails) Session 1
 
Custom Development for SharePoint
Custom Development for SharePointCustom Development for SharePoint
Custom Development for SharePoint
 
Single page application and Framework
Single page application and FrameworkSingle page application and Framework
Single page application and Framework
 
HTML5: the new frontier of the web
HTML5: the new frontier of the webHTML5: the new frontier of the web
HTML5: the new frontier of the web
 
After the LAMP, it's time to get MEAN
After the LAMP, it's time to get MEANAfter the LAMP, it's time to get MEAN
After the LAMP, it's time to get MEAN
 
Scaling with swagger
Scaling with swaggerScaling with swagger
Scaling with swagger
 
Presentation 1 Web--dev
Presentation 1 Web--devPresentation 1 Web--dev
Presentation 1 Web--dev
 
WordPress as an Application Framework
WordPress as an Application FrameworkWordPress as an Application Framework
WordPress as an Application Framework
 
Notes From Velocity Conference Europe
Notes From Velocity Conference EuropeNotes From Velocity Conference Europe
Notes From Velocity Conference Europe
 
How to Use Selenium, Successfully
How to Use Selenium, SuccessfullyHow to Use Selenium, Successfully
How to Use Selenium, Successfully
 
Java script
Java scriptJava script
Java script
 
Java script
Java scriptJava script
Java script
 
Lifecycle Management with SharePoint Apps and Solutions
Lifecycle Management with SharePoint Apps and SolutionsLifecycle Management with SharePoint Apps and Solutions
Lifecycle Management with SharePoint Apps and Solutions
 
Web Fundamentals Crash Course
Web Fundamentals Crash CourseWeb Fundamentals Crash Course
Web Fundamentals Crash Course
 

More from Gil Fink

Becoming a Tech Speaker
Becoming a Tech SpeakerBecoming a Tech Speaker
Becoming a Tech SpeakerGil Fink
 
Web animation on steroids web animation api
Web animation on steroids web animation api Web animation on steroids web animation api
Web animation on steroids web animation api Gil Fink
 
The Time for Vanilla Web Components has Arrived
The Time for Vanilla Web Components has ArrivedThe Time for Vanilla Web Components has Arrived
The Time for Vanilla Web Components has ArrivedGil Fink
 
Stencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrivedStencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrivedGil Fink
 
Stencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrivedStencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrivedGil Fink
 
Stencil: The Time for Vanilla Web Components has Arrived
Stencil: The Time for Vanilla Web Components has ArrivedStencil: The Time for Vanilla Web Components has Arrived
Stencil: The Time for Vanilla Web Components has ArrivedGil Fink
 
Stencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrivedStencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrivedGil Fink
 
Being a tech speaker
Being a tech speakerBeing a tech speaker
Being a tech speakerGil Fink
 
Working with Data in Service Workers
Working with Data in Service WorkersWorking with Data in Service Workers
Working with Data in Service WorkersGil Fink
 
Demystifying Angular Animations
Demystifying Angular AnimationsDemystifying Angular Animations
Demystifying Angular AnimationsGil Fink
 
Redux data flow with angular
Redux data flow with angularRedux data flow with angular
Redux data flow with angularGil Fink
 
Redux data flow with angular
Redux data flow with angularRedux data flow with angular
Redux data flow with angularGil Fink
 
Who's afraid of front end databases?
Who's afraid of front end databases?Who's afraid of front end databases?
Who's afraid of front end databases?Gil Fink
 
One language to rule them all type script
One language to rule them all type scriptOne language to rule them all type script
One language to rule them all type scriptGil Fink
 
End to-end apps with type script
End to-end apps with type scriptEnd to-end apps with type script
End to-end apps with type scriptGil Fink
 
Web component driven development
Web component driven developmentWeb component driven development
Web component driven developmentGil Fink
 
Web components
Web componentsWeb components
Web componentsGil Fink
 
Redux data flow with angular 2
Redux data flow with angular 2Redux data flow with angular 2
Redux data flow with angular 2Gil Fink
 
Biological Modeling, Powered by AngularJS
Biological Modeling, Powered by AngularJSBiological Modeling, Powered by AngularJS
Biological Modeling, Powered by AngularJSGil Fink
 
Who's afraid of front end databases
Who's afraid of front end databasesWho's afraid of front end databases
Who's afraid of front end databasesGil Fink
 

More from Gil Fink (20)

Becoming a Tech Speaker
Becoming a Tech SpeakerBecoming a Tech Speaker
Becoming a Tech Speaker
 
Web animation on steroids web animation api
Web animation on steroids web animation api Web animation on steroids web animation api
Web animation on steroids web animation api
 
The Time for Vanilla Web Components has Arrived
The Time for Vanilla Web Components has ArrivedThe Time for Vanilla Web Components has Arrived
The Time for Vanilla Web Components has Arrived
 
Stencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrivedStencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrived
 
Stencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrivedStencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrived
 
Stencil: The Time for Vanilla Web Components has Arrived
Stencil: The Time for Vanilla Web Components has ArrivedStencil: The Time for Vanilla Web Components has Arrived
Stencil: The Time for Vanilla Web Components has Arrived
 
Stencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrivedStencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrived
 
Being a tech speaker
Being a tech speakerBeing a tech speaker
Being a tech speaker
 
Working with Data in Service Workers
Working with Data in Service WorkersWorking with Data in Service Workers
Working with Data in Service Workers
 
Demystifying Angular Animations
Demystifying Angular AnimationsDemystifying Angular Animations
Demystifying Angular Animations
 
Redux data flow with angular
Redux data flow with angularRedux data flow with angular
Redux data flow with angular
 
Redux data flow with angular
Redux data flow with angularRedux data flow with angular
Redux data flow with angular
 
Who's afraid of front end databases?
Who's afraid of front end databases?Who's afraid of front end databases?
Who's afraid of front end databases?
 
One language to rule them all type script
One language to rule them all type scriptOne language to rule them all type script
One language to rule them all type script
 
End to-end apps with type script
End to-end apps with type scriptEnd to-end apps with type script
End to-end apps with type script
 
Web component driven development
Web component driven developmentWeb component driven development
Web component driven development
 
Web components
Web componentsWeb components
Web components
 
Redux data flow with angular 2
Redux data flow with angular 2Redux data flow with angular 2
Redux data flow with angular 2
 
Biological Modeling, Powered by AngularJS
Biological Modeling, Powered by AngularJSBiological Modeling, Powered by AngularJS
Biological Modeling, Powered by AngularJS
 
Who's afraid of front end databases
Who's afraid of front end databasesWho's afraid of front end databases
Who's afraid of front end databases
 

Recently uploaded

AMER Introduction to ThousandEyes Webinar
AMER Introduction to ThousandEyes WebinarAMER Introduction to ThousandEyes Webinar
AMER Introduction to ThousandEyes WebinarThousandEyes
 
eXtended Reality(XR) Basic introductions
eXtended Reality(XR) Basic introductionseXtended Reality(XR) Basic introductions
eXtended Reality(XR) Basic introductionsElanthirayan Madhavan
 
MuleSoft Online Meetup Group - B2B Crash Course: PM Insider Lecture
MuleSoft Online Meetup Group - B2B Crash Course: PM Insider LectureMuleSoft Online Meetup Group - B2B Crash Course: PM Insider Lecture
MuleSoft Online Meetup Group - B2B Crash Course: PM Insider LectureManik S Magar
 
What’s New in CloudStack 4.19, Abhishek Kumar, Release Manager Apache CloudSt...
What’s New in CloudStack 4.19, Abhishek Kumar, Release Manager Apache CloudSt...What’s New in CloudStack 4.19, Abhishek Kumar, Release Manager Apache CloudSt...
What’s New in CloudStack 4.19, Abhishek Kumar, Release Manager Apache CloudSt...ShapeBlue
 
software-quality-assurance question paper 2023
software-quality-assurance question paper 2023software-quality-assurance question paper 2023
software-quality-assurance question paper 2023RohanMistry15
 
AI-Plugins-Planners-Persona-SemanticKernel.pptx
AI-Plugins-Planners-Persona-SemanticKernel.pptxAI-Plugins-Planners-Persona-SemanticKernel.pptx
AI-Plugins-Planners-Persona-SemanticKernel.pptxUdaiappa Ramachandran
 
Mastering Play Store App Listing and Optimization
Mastering Play Store App Listing and OptimizationMastering Play Store App Listing and Optimization
Mastering Play Store App Listing and OptimizationAppsthentic Technology
 
AGFM - Toyota Coaster 1HZ Install Guide.pdf
AGFM - Toyota Coaster 1HZ Install Guide.pdfAGFM - Toyota Coaster 1HZ Install Guide.pdf
AGFM - Toyota Coaster 1HZ Install Guide.pdfRodneyThomas28
 
Gemini AI Ft. Dr. Mithun Patil Sir GDSC Faculty
Gemini AI Ft. Dr. Mithun Patil Sir GDSC FacultyGemini AI Ft. Dr. Mithun Patil Sir GDSC Faculty
Gemini AI Ft. Dr. Mithun Patil Sir GDSC FacultySamarthRamakantSarva
 
Elevating Cloud Infrastructure with Object Storage, DRS, VM Scheduling, and D...
Elevating Cloud Infrastructure with Object Storage, DRS, VM Scheduling, and D...Elevating Cloud Infrastructure with Object Storage, DRS, VM Scheduling, and D...
Elevating Cloud Infrastructure with Object Storage, DRS, VM Scheduling, and D...ShapeBlue
 
Roundtable_-_API_Research__Testing_Tools.pdf
Roundtable_-_API_Research__Testing_Tools.pdfRoundtable_-_API_Research__Testing_Tools.pdf
Roundtable_-_API_Research__Testing_Tools.pdfMostafa Higazy
 
National Institute of Standards and Technology (NIST) Cybersecurity Framework...
National Institute of Standards and Technology (NIST) Cybersecurity Framework...National Institute of Standards and Technology (NIST) Cybersecurity Framework...
National Institute of Standards and Technology (NIST) Cybersecurity Framework...MichaelBenis1
 
Microsoft x 2toLead Webinar Session 1 - How Employee Communication and Connec...
Microsoft x 2toLead Webinar Session 1 - How Employee Communication and Connec...Microsoft x 2toLead Webinar Session 1 - How Employee Communication and Connec...
Microsoft x 2toLead Webinar Session 1 - How Employee Communication and Connec...2toLead Limited
 
VM Migration from VMware to CloudStack and KVM – Suresh Anaparti, ShapeBlue
VM Migration from VMware to CloudStack and KVM – Suresh Anaparti, ShapeBlueVM Migration from VMware to CloudStack and KVM – Suresh Anaparti, ShapeBlue
VM Migration from VMware to CloudStack and KVM – Suresh Anaparti, ShapeBlueShapeBlue
 
Q4 2023 Quarterly Investor Presentation - FINAL.pdf
Q4 2023 Quarterly Investor Presentation - FINAL.pdfQ4 2023 Quarterly Investor Presentation - FINAL.pdf
Q4 2023 Quarterly Investor Presentation - FINAL.pdfTejal81
 
Trending now: Book subjects on the move in the Canadian market - Tech Forum 2024
Trending now: Book subjects on the move in the Canadian market - Tech Forum 2024Trending now: Book subjects on the move in the Canadian market - Tech Forum 2024
Trending now: Book subjects on the move in the Canadian market - Tech Forum 2024BookNet Canada
 
Trading Software Development_ Trends to Watch in 2024.pdf
Trading Software Development_ Trends to Watch in 2024.pdfTrading Software Development_ Trends to Watch in 2024.pdf
Trading Software Development_ Trends to Watch in 2024.pdfLucas Lagone
 
Establishing data sharing standards to promote global industry development
Establishing data sharing standards to promote global industry developmentEstablishing data sharing standards to promote global industry development
Establishing data sharing standards to promote global industry developmentThorsten Huelsmann
 
Key projects in AI, ML and Generative AI
Key projects in AI, ML and Generative AIKey projects in AI, ML and Generative AI
Key projects in AI, ML and Generative AIVijayananda Mohire
 
Communities, networking and developer culture
Communities, networking and developer cultureCommunities, networking and developer culture
Communities, networking and developer cultureRavi Sanghani
 

Recently uploaded (20)

AMER Introduction to ThousandEyes Webinar
AMER Introduction to ThousandEyes WebinarAMER Introduction to ThousandEyes Webinar
AMER Introduction to ThousandEyes Webinar
 
eXtended Reality(XR) Basic introductions
eXtended Reality(XR) Basic introductionseXtended Reality(XR) Basic introductions
eXtended Reality(XR) Basic introductions
 
MuleSoft Online Meetup Group - B2B Crash Course: PM Insider Lecture
MuleSoft Online Meetup Group - B2B Crash Course: PM Insider LectureMuleSoft Online Meetup Group - B2B Crash Course: PM Insider Lecture
MuleSoft Online Meetup Group - B2B Crash Course: PM Insider Lecture
 
What’s New in CloudStack 4.19, Abhishek Kumar, Release Manager Apache CloudSt...
What’s New in CloudStack 4.19, Abhishek Kumar, Release Manager Apache CloudSt...What’s New in CloudStack 4.19, Abhishek Kumar, Release Manager Apache CloudSt...
What’s New in CloudStack 4.19, Abhishek Kumar, Release Manager Apache CloudSt...
 
software-quality-assurance question paper 2023
software-quality-assurance question paper 2023software-quality-assurance question paper 2023
software-quality-assurance question paper 2023
 
AI-Plugins-Planners-Persona-SemanticKernel.pptx
AI-Plugins-Planners-Persona-SemanticKernel.pptxAI-Plugins-Planners-Persona-SemanticKernel.pptx
AI-Plugins-Planners-Persona-SemanticKernel.pptx
 
Mastering Play Store App Listing and Optimization
Mastering Play Store App Listing and OptimizationMastering Play Store App Listing and Optimization
Mastering Play Store App Listing and Optimization
 
AGFM - Toyota Coaster 1HZ Install Guide.pdf
AGFM - Toyota Coaster 1HZ Install Guide.pdfAGFM - Toyota Coaster 1HZ Install Guide.pdf
AGFM - Toyota Coaster 1HZ Install Guide.pdf
 
Gemini AI Ft. Dr. Mithun Patil Sir GDSC Faculty
Gemini AI Ft. Dr. Mithun Patil Sir GDSC FacultyGemini AI Ft. Dr. Mithun Patil Sir GDSC Faculty
Gemini AI Ft. Dr. Mithun Patil Sir GDSC Faculty
 
Elevating Cloud Infrastructure with Object Storage, DRS, VM Scheduling, and D...
Elevating Cloud Infrastructure with Object Storage, DRS, VM Scheduling, and D...Elevating Cloud Infrastructure with Object Storage, DRS, VM Scheduling, and D...
Elevating Cloud Infrastructure with Object Storage, DRS, VM Scheduling, and D...
 
Roundtable_-_API_Research__Testing_Tools.pdf
Roundtable_-_API_Research__Testing_Tools.pdfRoundtable_-_API_Research__Testing_Tools.pdf
Roundtable_-_API_Research__Testing_Tools.pdf
 
National Institute of Standards and Technology (NIST) Cybersecurity Framework...
National Institute of Standards and Technology (NIST) Cybersecurity Framework...National Institute of Standards and Technology (NIST) Cybersecurity Framework...
National Institute of Standards and Technology (NIST) Cybersecurity Framework...
 
Microsoft x 2toLead Webinar Session 1 - How Employee Communication and Connec...
Microsoft x 2toLead Webinar Session 1 - How Employee Communication and Connec...Microsoft x 2toLead Webinar Session 1 - How Employee Communication and Connec...
Microsoft x 2toLead Webinar Session 1 - How Employee Communication and Connec...
 
VM Migration from VMware to CloudStack and KVM – Suresh Anaparti, ShapeBlue
VM Migration from VMware to CloudStack and KVM – Suresh Anaparti, ShapeBlueVM Migration from VMware to CloudStack and KVM – Suresh Anaparti, ShapeBlue
VM Migration from VMware to CloudStack and KVM – Suresh Anaparti, ShapeBlue
 
Q4 2023 Quarterly Investor Presentation - FINAL.pdf
Q4 2023 Quarterly Investor Presentation - FINAL.pdfQ4 2023 Quarterly Investor Presentation - FINAL.pdf
Q4 2023 Quarterly Investor Presentation - FINAL.pdf
 
Trending now: Book subjects on the move in the Canadian market - Tech Forum 2024
Trending now: Book subjects on the move in the Canadian market - Tech Forum 2024Trending now: Book subjects on the move in the Canadian market - Tech Forum 2024
Trending now: Book subjects on the move in the Canadian market - Tech Forum 2024
 
Trading Software Development_ Trends to Watch in 2024.pdf
Trading Software Development_ Trends to Watch in 2024.pdfTrading Software Development_ Trends to Watch in 2024.pdf
Trading Software Development_ Trends to Watch in 2024.pdf
 
Establishing data sharing standards to promote global industry development
Establishing data sharing standards to promote global industry developmentEstablishing data sharing standards to promote global industry development
Establishing data sharing standards to promote global industry development
 
Key projects in AI, ML and Generative AI
Key projects in AI, ML and Generative AIKey projects in AI, ML and Generative AI
Key projects in AI, ML and Generative AI
 
Communities, networking and developer culture
Communities, networking and developer cultureCommunities, networking and developer culture
Communities, networking and developer culture
 

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
  • 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
  • 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
  • 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
  • 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:
  • 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!
  • 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!
  • 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
  • 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
  • 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