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

Tecniche di animazionedigitale 1

Michele BertoliFounder / Lead Software Engineer at Igloo

[email protected]

Tecniche di animazionedigitale 1

http://www.igloolab.com/

http://www.igloolab.com/

mailto:[email protected]

mailto:[email protected]

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


Samples

● Facebook● Twitter● Gmail


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


Cons

● SEO● Browser history


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.


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


Coffee Break

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


Introduction

Model–view–controller (MVC) is a software architecture that

separates the representation of information from the user's

interaction with it.


Architecture


Model

Model is where the application’s data objects are stored. The

model doesn’t know anything about views and controllers.


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.


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.


Frameworks


● 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

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

Technology