Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Relax, it's spa time

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.

  • Login to see the comments

Relax, it's spa time

  1. 1. Relax, it's SPA time Mónica Rodrigues http://netponto.org60ª Reunião Presencial - 19/03/2016
  2. 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. 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
  4. 4. First page – Long time ago
  5. 5. Today
  6. 6. Challenge 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.
  7. 7. Solution Go to a SPA
  8. 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. 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. 10. Motivations Better user experience Separation of responsibilities between client and server Offline Applications
  11. 11. Considerations The first time that the application loads is slow Maintain Navigation, Deep linking and History SEO (Search engine optimization) is complicated
  12. 12. Multiple Page Application Page access Returns rendered page Page rendering
  13. 13. Single Page Application Requests data Returns data DOM processing and manipulation
  14. 14. SPA and Multiple Page Application (Mix) Products Page Mini SPA Categories Page Mini SPA Request data Request data Returns data Returns data
  15. 15. Some Javascript Frameworks and Libraries
  16. 16. SPA Samples
  17. 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. 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. 19. JavaScript Patterns • Functions as abstractions • Functions to build modules • Functions to avoid global variables
  20. 20. Functions as abstractions
  21. 21. Functions to build modules Revealing module pattern
  22. 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. 23. Functions to avoid global variables Reduce to 1 global variable But, how can I get 0 global variables?
  24. 24. Functions to avoid global variables
  25. 25. NetPonto Attendance Manager SPA
  26. 26. Questions?
  27. 27. References Angular Js – Knockout – Aurelia – React – Backbone – Ember – John Papa –
  28. 28. Patrocinadores “GOLD” Twitter: @PTMicrosoft
  29. 29. Patrocinadores “Silver”
  30. 30. Patrocinadores “Bronze”
  31. 31. * Para quem não puder preencher durante a reunião, iremos enviar um email com o link à tarde
  32. 32. Próximas reuniões presenciais 19/03/2016 – Lisboa 02/04/2016 – Porto 16/04/2016 – Lisboa 19/05/2016 – 21/05/2016 – TugaIT (Lisboa) Reserva estes dias na agenda! :)
  33. 33. Thank you! Mónica Rodrigues Email: Personal Website: @Monica85Rodrig netponto-spa