Your SlideShare is downloading. ×
#7 - Client-side web apps, MVC and jQuery
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

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

731
views

Published on

- Client-side web apps …

- 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
731
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Tecniche di animazionedigitale 1
  • 2. Tecniche di animazionedigitale 1Michele BertoliFounder / Lead Software Engineer at Iglooigloolab.commichele.bertoli@accademiasantagiulia.it
  • 3. Client-side 2 January 16, 2013
  • 4. AgendaClient-side web apps 5Architecture 10MVC 17jQuery 26
  • 5. Client-side web apps
  • 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. Intrduction 7 Client-side 2 / Client-side web apps
  • 8. Goals● Less time● Less bandwidth● Lesser security risk 8 Client-side 2 / Client-side web apps
  • 9. Samples● Facebook● Twitter● Gmail 9 Client-side 2 / Client-side web apps
  • 10. Architecture
  • 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. Pros● Single page load● New code/data on demand● No reloads 12 Client-side 2 / Architecture
  • 13. Cons● SEO● Browser history 13 Client-side 2 / Architecture
  • 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. 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. Coffee Break
  • 17. MVC
  • 18. IntroductionA pattern is a reusable solution that can be applied tocommonly occurring problems in software design. 18 Client-side 2 / MVC
  • 19. Goals● Maintainable● Reusable 19 Client-side 2 / MVC
  • 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. Architecture 21 Client-side 2 / MVC
  • 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. 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. 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. Frameworks● Backbone http://backbonejs.org● Angular http://angularjs.org● Knockout http://knockoutjs.com 25 Client-side 2 / MVC
  • 26. jQuery
  • 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. Why jQuery?JavaScript document.getElementsByTagName("div")[0].innerHTML = "Hello";jQuery $("div").first().html("Hello"); 28 Client-side 2 / jQuery
  • 29. Thank you