SlideShare a Scribd company logo

Iseltech17 - Single Page Applications

•Download as PPTX, PDF•
•
Monica Rodrigues
Monica Rodrigues

This document discusses single page applications (SPAs). It begins with an introduction to SPAs and their motivations, such as improved user experience through reduced page reloads. It then compares SPAs to traditional multipage applications. Popular JavaScript frameworks for building SPAs are listed. The document concludes with recommendations for getting started with SPAs, such as choosing a framework and practicing best coding practices.

Related slideshows

node.js in action
node.js in actionnode.js in action
node.js in action
 
Building WordPress sites with AngularJS and the RESTful plugin JSON API
Building WordPress sites with AngularJS and the RESTful plugin JSON APIBuilding WordPress sites with AngularJS and the RESTful plugin JSON API
Building WordPress sites with AngularJS and the RESTful plugin JSON API
 
Single page application and Framework
Single page application and FrameworkSingle page application and Framework
Single page application and Framework
 
1 of 24
Single Page Applications Mónica Rodrigues 26/05/2017
Who am I? 26/05/2017Single Page Applications Mónica Rodrigues Mónica Rodrigues Degree in Computer Science Engineer at ISEL Software Engineer since 2010 Keywords: Web Applications, ASP.NET MVC, ASP.NET Web Api, REST, Javascript, Angular, Best practices, Design patterns, Clean Code, SQL Server
Contents 26/05/2017Single Page Applications Mónica Rodrigues  What is SPA?  Motivations / Considerations  Multiple Page Applications vs Single Page Applications  Frameworks Javascript / SPA Samples  What I need to begin?  Best practices / Recommendations
First page – Long time ago 26/05/2017Single Page Applications Mónica Rodrigues
Today 26/05/2017Single Page Applications Mónica Rodrigues
Challenge 26/05/2017Single Page Applications Mónica Rodrigues 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.
Solution 26/05/2017Single Page Applications Mónica Rodrigues Go to a SPA
Solution 26/05/2017Single Page Applications Mónica Rodrigues 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
Motivations 26/05/2017Single Page Applications Mónica Rodrigues Reach Web app may be accessible on different platforms and devices Round trip Web app not require many round trips between client and server Better user experience Separation of responsibilities between client and server
Considerations 26/05/2017Single Page Applications Mónica Rodrigues  The first time that the application loads is slow  Maintain Navigation, Deep linking and History  SEO (Search engine optimization) is complicated
Multiple page application 26/05/2017Single Page Applications Mónica Rodrigues Page access Returns rendered page Page rendering
Single page application 26/05/2017Single Page Applications Mónica Rodrigues Requests data Returns data DOM processing and manipulation
SPA and Multiple Page Application (Mix) 26/05/2017Single Page Applications Mónica Rodrigues Products Page Mini SPA Categories Page Mini SPA Request Data Request Data Response Data Response Data
Some Javascript Frameworks and Libraries 26/05/2017Single Page Applications Mónica Rodrigues
SPA Samples 26/05/2017Single Page Applications Mónica Rodrigues
What I need to begin? 26/05/2017Single Page Applications Mónica Rodrigues  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 !!!!
Recomendations 26/05/2017Single Page Applications Mónica Rodrigues  Best practices in Javascript  Join and minify CSS files and Javascript files  Use a task runner like Gulp  Learn MVVM pattern App.js App-users-controller.js site.min.js
Javascript Patterns 26/05/2017Single Page Applications Mónica Rodrigues  Functions as abstractions  Functions to build modules  Functions to avoid global variables
Functions as abstractions 26/05/2017Single Page Applications Mónica Rodrigues
Functions to build modules 26/05/2017Single Page Applications Mónica Rodrigues Revealing module pattern
Functions to build modules 26/05/2017Single Page Applications Mónica Rodrigues  What’s the matter with previous code?  There are two global variables  worker  createWorker  There variables can be redefined in other files
Functions to avoid global variables 26/05/2017Single Page Applications Mónica Rodrigues Reduce to 1 global variable But, how can I get 0 global variables?
Functions to avoid global variables 26/05/2017Single Page Applications Mónica Rodrigues
Thank You! 26/05/2017Single Page Applications Mónica Rodrigues Mónica Rodrigues Email: monica85rodrigues@gmail.com Blog: http://mrodiguesblog.azurewebsites.net/ @Monica85Rodrig https://pt.linkedin.com/in/monicascrodrigues https://github.com/monica85rodrigues

More Related Content

Iseltech17 - Single Page Applications

  • 1. Single Page Applications Mónica Rodrigues 26/05/2017
  • 2. Who am I? 26/05/2017Single Page Applications Mónica Rodrigues Mónica Rodrigues Degree in Computer Science Engineer at ISEL Software Engineer since 2010 Keywords: Web Applications, ASP.NET MVC, ASP.NET Web Api, REST, Javascript, Angular, Best practices, Design patterns, Clean Code, SQL Server
  • 3. Contents 26/05/2017Single Page Applications Mónica Rodrigues  What is SPA?  Motivations / Considerations  Multiple Page Applications vs Single Page Applications  Frameworks Javascript / SPA Samples  What I need to begin?  Best practices / Recommendations
  • 4. First page – Long time ago 26/05/2017Single Page Applications Mónica Rodrigues
  • 6. Challenge 26/05/2017Single Page Applications Mónica Rodrigues 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 26/05/2017Single Page Applications Mónica Rodrigues Go to a SPA
  • 8. Solution 26/05/2017Single Page Applications Mónica Rodrigues 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 26/05/2017Single Page Applications Mónica Rodrigues Reach Web app may be accessible on different platforms and devices Round trip Web app not require many round trips between client and server Better user experience Separation of responsibilities between client and server
  • 10. Considerations 26/05/2017Single Page Applications Mónica Rodrigues  The first time that the application loads is slow  Maintain Navigation, Deep linking and History  SEO (Search engine optimization) is complicated
  • 11. Multiple page application 26/05/2017Single Page Applications Mónica Rodrigues Page access Returns rendered page Page rendering
  • 12. Single page application 26/05/2017Single Page Applications Mónica Rodrigues Requests data Returns data DOM processing and manipulation
  • 13. SPA and Multiple Page Application (Mix) 26/05/2017Single Page Applications Mónica Rodrigues Products Page Mini SPA Categories Page Mini SPA Request Data Request Data Response Data Response Data
  • 14. Some Javascript Frameworks and Libraries 26/05/2017Single Page Applications Mónica Rodrigues
  • 15. SPA Samples 26/05/2017Single Page Applications Mónica Rodrigues
  • 16. What I need to begin? 26/05/2017Single Page Applications Mónica Rodrigues  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 !!!!
  • 17. Recomendations 26/05/2017Single Page Applications Mónica Rodrigues  Best practices in Javascript  Join and minify CSS files and Javascript files  Use a task runner like Gulp  Learn MVVM pattern App.js App-users-controller.js site.min.js
  • 18. Javascript Patterns 26/05/2017Single Page Applications Mónica Rodrigues  Functions as abstractions  Functions to build modules  Functions to avoid global variables
  • 19. Functions as abstractions 26/05/2017Single Page Applications Mónica Rodrigues
  • 20. Functions to build modules 26/05/2017Single Page Applications Mónica Rodrigues Revealing module pattern
  • 21. Functions to build modules 26/05/2017Single Page Applications Mónica Rodrigues  What’s the matter with previous code?  There are two global variables  worker  createWorker  There variables can be redefined in other files
  • 22. Functions to avoid global variables 26/05/2017Single Page Applications Mónica Rodrigues Reduce to 1 global variable But, how can I get 0 global variables?
  • 23. Functions to avoid global variables 26/05/2017Single Page Applications Mónica Rodrigues
  • 24. Thank You! 26/05/2017Single Page Applications Mónica Rodrigues Mónica Rodrigues Email: monica85rodrigues@gmail.com Blog: http://mrodiguesblog.azurewebsites.net/ @Monica85Rodrig https://pt.linkedin.com/in/monicascrodrigues https://github.com/monica85rodrigues