Download - Relax, it's spa time
![Page 1: Relax, it's spa time](https://reader035.vdocument.in/reader035/viewer/2022062502/58a7c86f1a28ab6b5a8b5cef/html5/thumbnails/1.jpg)
Relax, it's SPA timeMónica Rodrigues
http://netponto.org60ª Reunião Presencial - 19/03/2016
![Page 2: Relax, it's spa time](https://reader035.vdocument.in/reader035/viewer/2022062502/58a7c86f1a28ab6b5a8b5cef/html5/thumbnails/2.jpg)
Who I am?Mónica Rodrigues
Web development since 2010HTML5, CSS3, AngularJs, Knockout, Asp.Net WebApi, ASP.NET MVC, C#, SQL Server 2014
Member and Organizer
Degree in Computer Science Engineer at ISEL
![Page 3: Relax, it's spa time](https://reader035.vdocument.in/reader035/viewer/2022062502/58a7c86f1a28ab6b5a8b5cef/html5/thumbnails/3.jpg)
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
![Page 6: Relax, it's spa time](https://reader035.vdocument.in/reader035/viewer/2022062502/58a7c86f1a28ab6b5a8b5cef/html5/thumbnails/6.jpg)
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.
![Page 8: Relax, it's spa time](https://reader035.vdocument.in/reader035/viewer/2022062502/58a7c86f1a28ab6b5a8b5cef/html5/thumbnails/8.jpg)
SolutionUse 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
![Page 9: Relax, it's spa time](https://reader035.vdocument.in/reader035/viewer/2022062502/58a7c86f1a28ab6b5a8b5cef/html5/thumbnails/9.jpg)
Motivations
ReachWeb app may be accessible on different platforms and devices
ResponsiveWeb app needs to be responsive to different screen resolutions
Round tripWeb app does not require many round trips between client and server
3R’s
![Page 10: Relax, it's spa time](https://reader035.vdocument.in/reader035/viewer/2022062502/58a7c86f1a28ab6b5a8b5cef/html5/thumbnails/10.jpg)
Motivations
Better user experience
Separation of responsibilities between client and server
Offline Applications
![Page 11: Relax, it's spa time](https://reader035.vdocument.in/reader035/viewer/2022062502/58a7c86f1a28ab6b5a8b5cef/html5/thumbnails/11.jpg)
Considerations
The first time that the application loads is slow
Maintain Navigation, Deep linking and History
SEO (Search engine optimization) is complicated
![Page 13: Relax, it's spa time](https://reader035.vdocument.in/reader035/viewer/2022062502/58a7c86f1a28ab6b5a8b5cef/html5/thumbnails/13.jpg)
Single Page Application
Requests data
Returns data
DOM processing and manipulation
![Page 14: Relax, it's spa time](https://reader035.vdocument.in/reader035/viewer/2022062502/58a7c86f1a28ab6b5a8b5cef/html5/thumbnails/14.jpg)
SPA and Multiple Page Application (Mix)
Products Page
Mini SPA
Categories Page
MiniSPA
Request data
Request data
Returns data
Returns data
![Page 17: Relax, it's spa time](https://reader035.vdocument.in/reader035/viewer/2022062502/58a7c86f1a28ab6b5a8b5cef/html5/thumbnails/17.jpg)
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!!
![Page 18: Relax, it's spa time](https://reader035.vdocument.in/reader035/viewer/2022062502/58a7c86f1a28ab6b5a8b5cef/html5/thumbnails/18.jpg)
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.jsdeploy
![Page 19: Relax, it's spa time](https://reader035.vdocument.in/reader035/viewer/2022062502/58a7c86f1a28ab6b5a8b5cef/html5/thumbnails/19.jpg)
JavaScript Patterns
• Functions as abstractions• Functions to build modules• Functions to avoid global variables
![Page 22: Relax, it's spa time](https://reader035.vdocument.in/reader035/viewer/2022062502/58a7c86f1a28ab6b5a8b5cef/html5/thumbnails/22.jpg)
Functions to build modules
• What’s the matter with previous code?– There are two global variables•worker• createWorkerThese variables can be redefined in other files
![Page 23: Relax, it's spa time](https://reader035.vdocument.in/reader035/viewer/2022062502/58a7c86f1a28ab6b5a8b5cef/html5/thumbnails/23.jpg)
Functions to avoid global variablesReduce to 1 global variable
But, how can I get 0 global variables?
![Page 27: Relax, it's spa time](https://reader035.vdocument.in/reader035/viewer/2022062502/58a7c86f1a28ab6b5a8b5cef/html5/thumbnails/27.jpg)
ReferencesAngular 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/
![Page 28: Relax, it's spa time](https://reader035.vdocument.in/reader035/viewer/2022062502/58a7c86f1a28ab6b5a8b5cef/html5/thumbnails/28.jpg)
Patrocinadores “GOLD”
Twitter: @PTMicrosoft http://www.microsoft.com/portugal
![Page 31: Relax, it's spa time](https://reader035.vdocument.in/reader035/viewer/2022062502/58a7c86f1a28ab6b5a8b5cef/html5/thumbnails/31.jpg)
http://bit.ly/netponto-aval-60
* Para quem não puder preencher durante a reunião, iremos enviar um email com o link à tarde
![Page 32: Relax, it's spa time](https://reader035.vdocument.in/reader035/viewer/2022062502/58a7c86f1a28ab6b5a8b5cef/html5/thumbnails/32.jpg)
Próximas reuniões presenciais19/03/2016 – Lisboa02/04/2016 – Porto16/04/2016 – Lisboa19/05/2016 – 21/05/2016 – TugaIT (Lisboa)Reserva estes dias na agenda! :)
![Page 33: Relax, it's spa time](https://reader035.vdocument.in/reader035/viewer/2022062502/58a7c86f1a28ab6b5a8b5cef/html5/thumbnails/33.jpg)
Thank you!Mónica RodriguesEmail: [email protected] Website: http://fullhand.pt/
@Monica85Rodrig https://pt.linkedin.com/in/monicascrodrigues https://github.com/monica85rodrigues
https://github.com/monica85rodrigues/presentation-netponto-spa