Relax, it's spa time
Download as PPTX, PDF5 likes4,094 views
The document presents a discussion by Mónica Rodrigues on the benefits and challenges of single-page applications (SPAs) compared to multiple-page applications. It covers motivations for using SPAs, such as improved user experience and reduced server round trips, and offers guidance on choosing frameworks, best practices, and JavaScript patterns for SPA development. Additionally, it includes recommendations for resources and further reading related to SPA technologies.
Relax, it's spa time
- 1. Relax, it's SPA time Mónica Rodrigues http://netponto.org60ª Reunião Presencial - 19/03/2016
- 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
- 4. First page – Long time ago
- 5. Today
- 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. Solution Go to a SPA
- 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
- 12. Multiple Page Application Page access Returns rendered page Page rendering
- 13. Single Page Application Requests data Returns data DOM processing and manipulation
- 14. SPA and Multiple Page Application (Mix) Products Page Mini SPA Categories Page Mini SPA Request data Request data Returns data Returns data
- 15. Some Javascript Frameworks and Libraries
- 16. SPA Samples
- 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?
- 24. Functions to avoid global variables
- 26. Questions?
- 27. References Angular Js – https://angularjs.org/ Knockout – http://knockoutjs.com/ Aurelia – http://aurelia.io/ React – https://facebook.github.io/react/ Backbone – http://backbonejs.org/ Ember – http://emberjs.com/ John Papa – http://www.johnpapa.net/
- 28. Patrocinadores “GOLD” Twitter: @PTMicrosoft http://www.microsoft.com/portugal
- 31. http://bit.ly/netponto-aval-60 * Para quem não puder preencher durante a reunião, iremos enviar um email com o link à tarde
- 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. Thank you! Mónica Rodrigues Email: monica85rodrigues@gmail.com Personal Website: http://fullhand.pt/ @Monica85Rodrig https://pt.linkedin.com/in/monicascrodrigues https://github.com/monica85rodrigues https://github.com/monica85rodrigues/presentation- netponto-spa