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

1. Tecniche di animazione
digitale 1

2. Tecniche di animazione
digitale 1
Michele Bertoli
Founder / Lead Software Engineer at Igloo
igloolab.com
michele.bertoli@accademiasantagiulia.it

3. Client-side 2
January 16, 2013

4. Agenda
Client-side web apps 5
Architecture 10
MVC 17
jQuery 26

5. Client-side web apps

6. Intrduction
Client-side refers to operations that are performed by the
client 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. Intrduction
A single-page application (SPA), also known as single-page
interface (SPI), is a web application or web site that fits on a
single web page with the goal of providing a more fluid user
experience 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. Events
Events are signals generated when specific actions occur.
JavaScript is aware of these signals, and scripts can be built to
react 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. Introduction
A pattern is a reusable solution that can be applied to
commonly occurring problems in software design.
18 Client-side 2 / MVC

19. Goals
● Maintainable
● Reusable
19 Client-side 2 / MVC

20. Introduction
Model–view–controller (MVC) is a software architecture that
separates the representation of information from the user's
interaction with it.
20 Client-side 2 / MVC

21. Architecture
21 Client-side 2 / MVC

22. Model
Model is where the application’s data objects are stored. The
model doesn’t know anything about views and controllers.
22 Client-side 2 / MVC

23. View
View is what's presented to the users and how users interact
with the app. The view is made with HTML, CSS, JavaScript and
templates.
23 Client-side 2 / MVC

24. Controller
The controller is the decision maker and the glue between the
model and view.
The controller updates the view when the model changes.
It also adds event listeners to the view and updates the model
when 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. Introduction
A fast, concise, library that simplifies how to traverse HTML
documents, 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