View
148
Download
1
Category
Preview:
Citation preview
Single Page ApplicationsMónica Rodrigues
26/05/2017
Who am I?
26/05/2017Single Page Applications Mónica Rodrigues
Mónica Rodrigues
Degree in Computer Science Engineer at ISEL
Software Engineer since 2010
Keywords: Web Applications, ASP.NET MVC, ASP.NET Web Api, REST, Javascript,
Angular, Best practices, Design patterns, Clean Code, SQL Server
Contents
26/05/2017Single Page Applications Mónica Rodrigues
What is SPA?
Motivations / Considerations
Multiple Page Applications vs Single Page Applications
Frameworks Javascript / SPA Samples
What I need to begin?
Best practices / Recommendations
First page – Long time ago
26/05/2017Single Page Applications Mónica Rodrigues
Today
26/05/2017Single Page Applications Mónica Rodrigues
Challenge
26/05/2017Single Page Applications Mónica Rodrigues
Users want a central place to view or take
actions on most or all content so they don’t
have to waste time navigating between pages.
Solution
26/05/2017Single Page Applications Mónica Rodrigues
Go to a SPA
Solution
26/05/2017Single Page Applications Mónica Rodrigues
Use modern web development techniques to build a single-page app that doesn’t need to reload itself as
the user browses through it.
SPASingle Page Application
Motivations
26/05/2017Single Page Applications Mónica Rodrigues
ReachWeb app may be accessible on different platforms and devices
Round tripWeb app not require many round trips between client and server
Better user experience
Separation of responsibilities between client and server
Considerations
26/05/2017Single Page Applications Mónica Rodrigues
The first time that the application loads is slow
Maintain Navigation, Deep linking and History
SEO (Search engine optimization) is complicated
Multiple page application
26/05/2017Single Page Applications Mónica Rodrigues
Page access
Returns
rendered page
Page
rendering
Single page application
26/05/2017Single Page Applications Mónica Rodrigues
Requests data
Returns data
DOM processing
and
manipulation
SPA and Multiple Page Application (Mix)
26/05/2017Single Page Applications Mónica Rodrigues
Products Page
Mini SPA
Categories Page
Mini SPA
Request Data
Request Data
Response Data
Response Data
Some Javascript Frameworks and Libraries
26/05/2017Single Page Applications Mónica Rodrigues
SPA Samples
26/05/2017Single Page Applications Mónica Rodrigues
What I need to begin?
26/05/2017Single Page Applications Mónica Rodrigues
Choose a framework or library
Depends, what do you want to do?
Choose a IDE and structure your folders
Think about your application, namely HTML structure and CSS
Lets start with Javascript
Don’t forget the best practices !!!!
Recomendations
26/05/2017Single Page Applications Mónica Rodrigues
Best practices in Javascript
Join and minify CSS files and Javascript files
Use a task runner like Gulp
Learn MVVM pattern
App.js
App-users-controller.js
site.min.js
Javascript Patterns
26/05/2017Single Page Applications Mónica Rodrigues
Functions as abstractions
Functions to build modules
Functions to avoid global variables
Functions as abstractions
26/05/2017Single Page Applications Mónica Rodrigues
Functions to build modules
26/05/2017Single Page Applications Mónica Rodrigues
Revealing module
pattern
Functions to build modules
26/05/2017Single Page Applications Mónica Rodrigues
What’s the matter with previous code?
There are two global variables
worker
createWorker
There variables can be redefined in other files
Functions to avoid global variables
26/05/2017Single Page Applications Mónica Rodrigues
Reduce to 1 global
variable
But, how can I get 0global variables?
Functions to avoid global variables
26/05/2017Single Page Applications Mónica Rodrigues
Thank You!
26/05/2017Single Page Applications Mónica Rodrigues
Mónica Rodrigues
Email: monica85rodrigues@gmail.com
Blog: http://mrodiguesblog.azurewebsites.net/
@Monica85Rodrig
https://pt.linkedin.com/in/monicascrodrigues
https://github.com/monica85rodrigues
Recommended