Tecniche di animazionedigitale 1
Tecniche di animazionedigitale 1Michele BertoliFounder / Lead Software Engineer at Iglooigloolab.commichele.bertoli@accade...
Client-side 2   January 16, 2013
AgendaClient-side web apps   5Architecture           10MVC                    17jQuery                 26
Client-side web apps
IntrductionClient-side refers to operations that are performed by theclient in a client–server relationship in a computer ...
Intrduction              7   Client-side 2 / Client-side web apps
Goals● Less time● Less bandwidth● Lesser security risk                         8   Client-side 2 / Client-side web apps
Samples● Facebook● Twitter● Gmail             9   Client-side 2 / Client-side web apps
Architecture
IntrductionA single-page application (SPA), also known as single-pageinterface (SPI), is a web application or web site tha...
Pros● Single page load● New code/data on demand● No reloads                      12    Client-side 2 / Architecture
Cons● SEO● Browser history                    13   Client-side 2 / Architecture
EventsEvents are signals generated when specific actions occur.JavaScript is aware of these signals, and scripts can be bu...
Samples● blur occurs when input focus is removed from a form  element (when the user clicks outside a field) or focus is  ...
Coffee Break
MVC
IntroductionA pattern is a reusable solution that can be applied tocommonly occurring problems in software design.        ...
Goals● Maintainable● Reusable                 19   Client-side 2 / MVC
IntroductionModel–view–controller (MVC) is a software architecture thatseparates the representation of information from th...
Architecture               21   Client-side 2 / MVC
ModelModel is where the application’s data objects are stored. Themodel doesn’t know anything about views and controllers....
ViewView is whats presented to the users and how users interactwith the app. The view is made with HTML, CSS, JavaScript a...
ControllerThe controller is the decision maker and the glue between themodel and view.The controller updates the view when...
Frameworks● Backbone   http://backbonejs.org● Angular    http://angularjs.org● Knockout   http://knockoutjs.com           ...
jQuery
IntroductionA fast, concise, library that simplifies how to traverse HTMLdocuments, handle events, perform animations, and...
Why jQuery?JavaScript   document.getElementsByTagName("div")[0].innerHTML = "Hello";jQuery   $("div").first().html("Hello"...
Thank you
Upcoming SlideShare
Loading in...5
×

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

820

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
820
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×