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.
Who I am?
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
• Motivations vs Considerations
• Multiple page application vs SPA
• Multiple page application and SPA - Mix
• SPA Samples
• What I need to begin
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
Web app may be accessible on different platforms and devices
Web app needs to be responsive to different screen
Web app does not require many round trips between client
Better user experience
Separation of responsibilities between client and
The first time that the application loads is slow
Maintain Navigation, Deep linking and History
SEO (Search engine optimization) is complicated
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.
–Don’t forget the best practices!!
– Use a task runner – Gulp
• Learn MVVM pattern
• Functions as abstractions
• Functions to build modules
• Functions to avoid global variables