Intro to SPAs
Intro to SPAs
The What & Why of SPAs
Pros & Cons
Libraries & Frameworks
Agenda
Intro to SPAs
Describe what a SPA is and why we use them
Describe at least two pros and cons of SPAs
List at least four frontend frameworks
Objectives
what & why
the what and why of spas
Traditional Page Lifecycle
Client
Server
1
2
3
1. Client makes a GET request
2. Server responds with HTML
3. Browser refreshes
the what and why of spas
Single Page Web Application Lifecycle
Client
Server
1
2
3
1. Client makes a GET request
2. Server responds with JSON
3. View changes
No Refresh
the what and why of spas
Single Page Web Applications:
Allow the user to avoid unnecessarily refreshing
Provide an experience more like a desktop or mobile application
Use frameworks (JavaScript) to change the view
Generally allow for a faster interaction
Share some of the workload with the client
the what and why of spas
Q: Couldn't we already do this with jQuery?
Yes! But it would require a lot of code.
Q: What does the server do then?
It acts solely as an API -- no views (or, minimal views) required.
Q: Is refreshing that big of a deal?
Depends! For a static web page you may barely notice any difference. However, on mobile devices the experience could vary greatly and/or for more intensive websites.
pros & cons
pros & cons
Pros
Cons
Lightning Fast User Experience
Share work with client
Can work offline
Potentially large libraries
Relies on client to be updated
Managing state on the frontend
In general, frontend frameworks are taking over the web!
However, as with every technology, it's not a panacea to all your web woes.
libraries & frameworks
libraries & frameworks
Backbone.js
Knockout.js
Ember
React
AngularJS & Angular
Vue.js
Some of the most popular include:
...and there are more
libraries & frameworks
libraries & frameworks
Components
Backers
Community
How do you decide which to learn?
Due to this, the two biggest right now are
Angular & React
Intro to SPAs
Describe what a SPA is and why we use them
Describe at least two pros and cons of SPAs
List at least four frontend frameworks