#7 - client-side web apps, mvc and jquery
DESCRIPTION
- Client-side web apps - Architecture - MVC - jQueryTRANSCRIPT
Tecniche di animazionedigitale 1
Michele BertoliFounder / Lead Software Engineer at Igloo
Tecniche di animazionedigitale 1
Client-side 2January 16, 2013
Agenda
Client-side web apps
Architecture
MVC
jQuery
5
10
17
26
Client-side web apps
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
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
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
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
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
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
Coffee Break
MVC
Introduction
A pattern is a reusable solution that can be applied to
commonly occurring problems in software design.
18 Client-side 2 / MVC
Goals
● Maintainable● Reusable
19 Client-side 2 / MVC
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
Architecture
21 Client-side 2 / MVC
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
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
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
Frameworks
25 Client-side 2 / MVC
● Backbone● Angular● Knockout
http://backbonejs.orghttp://angularjs.orghttp://knockoutjs.com
jQuery
Introduction
A fast, concise, library that simplifies how to traverse HTML
documents, handle events, perform animations, and add AJAX.
27 Client-side 2 / jQuery
http://jquery.com
Why jQuery?
document.getElementsByTagName("div")[0].innerHTML = "Hello";
28 Client-side 2 / jQuery
$("div").first().html("Hello");
JavaScript
jQuery
Thank you