SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
Nesta sessão iremos entender o conceito de Single Page Application, analisar algumas das suas vantagens e desvantagens e em que contextos, na minha opinião, fará sentido usar uma solução como esta face a uma aplicação web de múltiplas páginas.
No final veremos uma pequena demo de uma Single Page Application em Angular versão 1.
Software Engineer at Farfetch | Event Organizer at Geek Girls Portugal | Participate on Netponto
Nesta sessão iremos entender o conceito de Single Page Application, analisar algumas das suas vantagens e desvantagens e em que contextos, na minha opinião, fará sentido usar uma solução como esta face a uma aplicação web de múltiplas páginas.
No final veremos uma pequena demo de uma Single Page Application em Angular versão 1.
2.
Who I am?
Mónica Rodrigues
Web development since 2010
HTML5, CSS3, AngularJs, Knockout, Asp.Net WebApi,
ASP.NET MVC, C#, SQL Server 2014
Member and Organizer
Degree in Computer Science Engineer at ISEL
3.
Contents
• Challenge
• Solution
• Motivations vs Considerations
• Multiple page application vs SPA
• Multiple page application and SPA - Mix
• Some Javascript Frameworks
• SPA Samples
• What I need to begin
• Recomendations
• Javascript Patterns
• Demo
• References
8.
Solution
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
9.
Motivations
Reach
Web app may be accessible on different platforms and devices
Responsive
Web app needs to be responsive to different screen
resolutions
Round trip
Web app does not require many round trips between client
and server
3R’s
10.
Motivations
Better user experience
Separation of responsibilities between client and
server
Offline Applications
11.
Considerations
The first time that the application loads is slow
Maintain Navigation, Deep linking and History
SEO (Search engine optimization) is complicated
17.
What I need to begin?
• 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!!
18.
Recomendations
• Best practices in Javascript
• Join and minify CSS files and Javascript
files
– Use a task runner – Gulp
• Learn MVVM pattern
App.js
App-users-controller.js
site.min.js
deploy
19.
JavaScript Patterns
• Functions as abstractions
• Functions to build modules
• Functions to avoid global variables
21.
Functions to build modules
Revealing module
pattern
22.
Functions to build modules
• What’s the matter with previous code?
– There are two global variables
• worker
• createWorker
These variables can be redefined in other files
23.
Functions to avoid global variables
Reduce to 1
global
variable
But, how
can I get 0
global
variables?