#7 - Client-side web apps, MVC and jQuery

1,192 views

Published on

- Client-side web apps
- Architecture
- MVC
- jQuery

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,192
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

#7 - Client-side web apps, MVC and jQuery

  1. 1. Tecniche di animazionedigitale 1
  2. 2. Tecniche di animazionedigitale 1Michele BertoliFounder / Lead Software Engineer at Iglooigloolab.commichele.bertoli@accademiasantagiulia.it
  3. 3. Client-side 2 January 16, 2013
  4. 4. AgendaClient-side web apps 5Architecture 10MVC 17jQuery 26
  5. 5. Client-side web apps
  6. 6. IntrductionClient-side refers to operations that are performed by theclient in a client–server relationship in a computer network. 6 Client-side 2 / Client-side web app
  7. 7. Intrduction 7 Client-side 2 / Client-side web apps
  8. 8. Goals● Less time● Less bandwidth● Lesser security risk 8 Client-side 2 / Client-side web apps
  9. 9. Samples● Facebook● Twitter● Gmail 9 Client-side 2 / Client-side web apps
  10. 10. Architecture
  11. 11. IntrductionA single-page application (SPA), also known as single-pageinterface (SPI), is a web application or web site that fits on asingle web page with the goal of providing a more fluid userexperience akin to a desktop application. 11 Client-side 2 / Architecture
  12. 12. Pros● Single page load● New code/data on demand● No reloads 12 Client-side 2 / Architecture
  13. 13. Cons● SEO● Browser history 13 Client-side 2 / Architecture
  14. 14. EventsEvents are signals generated when specific actions occur.JavaScript is aware of these signals, and scripts can be built toreact to these events. 14 Client-side 2 / Architecture
  15. 15. Samples● blur occurs when input focus is removed from a form element (when the user clicks outside a field) or focus is removed from a window● click occurs when the user clicks on a link or form element● change occurs when the value of a form field is changed by the user● focus occurs when input focus is given to a form element or a window 15 Client-side 2 / Architecture
  16. 16. Coffee Break
  17. 17. MVC
  18. 18. IntroductionA pattern is a reusable solution that can be applied tocommonly occurring problems in software design. 18 Client-side 2 / MVC
  19. 19. Goals● Maintainable● Reusable 19 Client-side 2 / MVC
  20. 20. IntroductionModel–view–controller (MVC) is a software architecture thatseparates the representation of information from the usersinteraction with it. 20 Client-side 2 / MVC
  21. 21. Architecture 21 Client-side 2 / MVC
  22. 22. ModelModel is where the application’s data objects are stored. Themodel doesn’t know anything about views and controllers. 22 Client-side 2 / MVC
  23. 23. ViewView is whats presented to the users and how users interactwith the app. The view is made with HTML, CSS, JavaScript andtemplates. 23 Client-side 2 / MVC
  24. 24. ControllerThe controller is the decision maker and the glue between themodel and view.The controller updates the view when the model changes.It also adds event listeners to the view and updates the modelwhen the user manipulates the view. 24 Client-side 2 / MVC
  25. 25. Frameworks● Backbone http://backbonejs.org● Angular http://angularjs.org● Knockout http://knockoutjs.com 25 Client-side 2 / MVC
  26. 26. jQuery
  27. 27. IntroductionA fast, concise, library that simplifies how to traverse HTMLdocuments, handle events, perform animations, and add AJAX. http://jquery.com 27 Client-side 2 / jQuery
  28. 28. Why jQuery?JavaScript document.getElementsByTagName("div")[0].innerHTML = "Hello";jQuery $("div").first().html("Hello"); 28 Client-side 2 / jQuery
  29. 29. Thank you

×