#7 - client-side web apps, mvc and jquery

Tecniche di animazionedigitale 1

Michele BertoliFounder / Lead Software Engineer at Igloo

igloolab.commichele.bertoli@accademiasantagiulia.it

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