97
Dr. Sabin Buragawww.purl.org/net/busaco inginerie software î n contextul JavaScript programare Web la nivel de client

Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Embed Size (px)

DESCRIPTION

Dezvoltarea aplicaţiilor Web la nivel de client — detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html

Citation preview

Page 1: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

inginerie software în contextul JavaScript

programare Web la nivel de client

Page 2: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

“There are two ways to write error-free programs; only the third one works.”

Alan J. Perlis

Page 3: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Ce instrumente software și biblioteci JavaScriptpot fi folosite în contextul programării Web

la nivel de client?

Page 4: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Editare de cod & dezvoltare de aplicații WebDepanare

TestareDocumentare a codului

CompresieOptimizare

instrumente

Page 5: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Pentru desktop: Aptana Studio, JS Development Tools (plug-in Eclipse),

Sublime Text, Visual Studio (Express Edition),…

Disponibile pe Web: Cloud9 IDE, Codepen, JS Bin, JS Fiddle etc.

unele oferă și partajarea codului-sursă cu alți dezvoltatori

instrumente: editare

Page 6: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Utilizarea consolei JSobiectul console oferit de browser

metode utile: log (), error(), warn(), info(),time(), timeEnd(), trace(), group(), groupEnd()

https://developer.mozilla.org/docs/DOM/console

instrumente: depanare

Page 7: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Firebug (Lite)http://getfirebug.com/

a se considera și instrumentele de depanareincluse în unele navigatoare Web

exemplu notabil: Chrome Developer Tools

instrumente: depanare

Page 8: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Verificarea corectitudinii codului JavaScript

constructia "use strict"; indică interpretoruluică se va utiliza varianta strictă a limbajului

disponibilă începând cu ECMAScript versiunea 5

instrumente: testare

Page 9: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Verificarea corectitudinii codului JavaScript

erorile de programare (e.g., crearea accidentalăa variabilelor globale, nume identice de proprietăți etc.)

vor conduce la emiterea de excepții

"use strict";

variabilaAiurea = "Ah! "; // emite ReferenceError

var obiect = { prop: 1, prop: 2 }; // eroare de sintaxă

instrumente: testare

Page 10: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Verificarea corectitudinii codului JavaScript

sunt interzise diverse facilități: numere exprimate în baza 8,

folosirea construcțiilor with, arguments.callee

etc.

instrumente: testare

Page 11: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Modul de procesare strict:

modifică semantica programelor

nu este impus de vreun browser Web

instrumente: testare

Page 12: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Verificare statică

instrumente de referință: JSLint – http://www.jslint.com/

JSHint – http://www.jshint.com/

instrumente: testare

Page 13: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

instrumente: testare

opțiuniJSHint

Page 14: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Suport pentru unit testing

exemplificări:Jasmine

JSTest.NETQUnit

Sinon.jsTyrtle

instrumente: testare

Page 15: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Testare cross-browser a aplicațiilor Web

instrumente disponibile gratuitAdobe BrowserLab, Browsera, BrowserShots,

Microsoft SuperPreview, Spoon Browser Sandbox,…

instrumente: testare

Page 16: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Testare cross-browser a aplicațiilor Web

aplicații comerciale – exemplificări:BrowserStack, Cloud Testing, CrossBrowserTesting

instrumente: testare

Page 17: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Standarde de redactare a codului JavaScript

exemple:Crock’s Code Conventions for JavaScript

Google JavaScript Style GuideIdiomatic.js

ghiduri specifice – e.g., jQuery Core Style Guide

instrumente: documentarea codului

Page 18: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Software pentru documentarea programelor

JSDoc ToolkitjGrouseDoc

YUIDoc

instrumente: documentarea codului

Page 19: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Instrumente privind compresia/minimizarea

Online Javascript Compression ToolYUI Compressor

Scriptalizer

detalii în articolul A. Powell, Understanding Compression and Minification (mai 2012):

www.aaron-powell.com/javascript/understanding-compression-and-minification

instrumente: compresie de cod

Page 20: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Transformarea codului JS într-unul optimizat

exemplu de referință:Closure Compiler

https://developers.google.com/closure/

instrumente: optimizare javascript

Page 21: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Managementul de pachete JavaScript pentrudezvoltarea de aplicații Web la nivel de client

căutare, instalare, compilare, verificare a dependențelor

exemplificări:Bower – http://bower.io/

Ender – http://ender.jit.su/

instrumente

Page 22: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Suport pentru fluxuri de activități (workflow-uri), eventual realizate automat

exemple: Grunt, Yeoman

Phantom.js, Selenium

instrumente

Page 23: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Facilitarea dezvoltării de aplicații Webla nivel de client similare celor desktop

exemplificări notabile:Cappuccino – http://cappuccino.org/

SproutCore – http://www.sproutcore.com/

în contextul jocurilor, a se experimenta Mandreel:http://www.mandreel.com/

instrumente

Page 24: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Suport pentru creșterea performanței

asm.js (Mozilla, 2012) subset JavaScript ce poate fi utilizat ca limbaj de nivelscăzut, eficient – în spiritul limbajului de asamblare

scop: dezvoltarea de aplicații (e.g., jocuri) sofisticate rulate în cadrul browser-ului Web

http://asmjs.org/

instrumente

Page 25: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Alte limbaje pentru dezvoltarea de aplicații Webla nivel de client:

CoffeeScript (Jeremy Ashkenas, 2009)http://coffeescript.org/

TypeScript (Microsoft, 2012)http://www.typescriptlang.org/

limbaje de programare care se compilează în JavaScript

instrumente

Page 26: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Portarea altor aplicații în JavaScript

Emscripten – compilator LLVM generând cod JS(e.g., programe C/C++, Lua, Python, Ruby etc.

ce se pot compila în JavaScript)

http://emscripten.org/

instrumente

Page 27: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Portarea altor aplicații în JavaScript

JSIL – compilator care transformă aplicațiile .NET în programe JavaScript rulând independent de browser

http://jsil.org/

instrumente

Page 28: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Limbaje aliniate altor paradigme

exemplu:programare funcțională – ClosureScript

https://github.com/clojure/clojurescript

instrumente

Page 29: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Graceful degradation & progressive enhancement

conceperea “stratificată” a aplicațiilor JavaScript

Page 30: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Graceful degradation & progressive enhancement

inițial: interacțiune minimală, fără JavaScript

adăugarea progresivă a facilităților, în funcție de context

Page 31: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Graceful degradation & progressive enhancement

înaintea folosirii oricărei tehnici dorite,de testat suportul oferit de navigator:

JavaScript, cookie-uri, clase/metode DOM, Ajax etc.

Page 32: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

N-am putea recurge labiblioteci JavaScript specifice?

Page 33: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Biblioteci generale privind prezentareaconținutului și manipularea arborelui DOM

Dojo: dojotoolkit.org

jQuery: jquery.com

Prototype: prototypejs.org

Rico: openrico.org

Script.aculo.us: script.aculo.us

YUI: developer.yahoo.net/yui/

Page 34: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Biblioteci pentru vizualizarea datelor

ChromaD3

DanceData

EnvisionProcessing.js

Raphaël

http://selection.datavisualization.ch/

Page 35: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Multe alte biblioteci JavaScript specializate

procesarea formularelor Webfacilitarea transferurilor asincrone de date

tehnici criptograficegrafice (plotting)

realizarea de efecte vizualegenerarea de conținut grafic 2D/3D

dezvoltare de jocuri (e.g., game engines)…

Page 36: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

colecții de (micro-)biblioteciJavaScript:

http://javascriptlibraries.com/developers.google.com/speed/libraries/

microjs.com

Page 37: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

jQuery

aspecte esențiale (o prezentare succintă)

Page 38: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

jQuery

scop principal:manipularea facilă a documentului HTML

pe baza selectorilor CSS – nivelul 3

Page 39: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

jQuery

oferă un API concis, dar extensibil, ușor de folosit

nu intră în conflict cu alte biblioteci JavaScript

disponibil open source

Page 40: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

jQuery

detalii tehnice + documentații:http://jquery.com/

http://learn.jquery.com/

http://jqfundamentals.com/

http://www.learningjquery.com/

Page 41: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

jQuery

filosofie inițială:focalizarea asupra interacțiunii dintre codul JavaScript

și constructiile (X)HTML

aproape fiecare operație urmează șablonul:“găsește ceva” + “execută ceva cu ceea ce-ai găsit”

Page 42: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

jQuery

accesul la nodurile documentului HTML se realizeazăvia funcția jQuery() – notație prescurtată: $()

Page 43: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

jQuery

accesul la nodurile documentului HTML se realizeazăvia funcția jQuery() – notație prescurtată: $()

// liniile de tabel de pe poziții pare vor fi redate

// via proprietățile de stil CSS din clasa ‘fundal-gri’

$("table tr:nth-child(even)").addClass("fundal-gri");

obiect jQuery selector CSSmetodă

(funcționalitate)

Page 44: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

jQuery

selectarea nodurilor dorite recurge la convențiileprivitoare la selectorii CSS – nivelul 2 și nivelul 3

http://docs.jquery.com/Selectors

Page 45: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

jQuery

selectarea nodurilor dorite recurge la convențiileprivitoare la selectorii CSS – nivelul 2 și nivelul 3

$(div.info) – toate elementele <div class="info">

$(div#adresa) – elementul <div id="adresa">

$(div h1) – în contextul: <div> care include <h1>

$(div#cap > p) – context: <div id="cap"> cu descend. <p>

Page 46: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

jQuery

selectori “magici”:

poziție – :first :last

antet – :header

vizibilitate – :hidden :visible

animație – :animated

formulare – :input :text :password :radio :submit

conținut – :contains (…)

Page 47: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

jQuery

unele rezultate ale $(…) pot întoarce colecții de noduri,prelucrate prin:

$('div.info').size ()

mărimea colecției obținute

Page 48: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

jQuery

unele rezultate ale $(…) pot întoarce colecții de noduri,prelucrate prin:

$('div.info').each (function (div) { … })

iterare via o funcție – aici: anonimă

Page 49: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

jQuery

unele rezultate ale $(…) pot întoarce colecții de noduri,prelucrate prin:

$('div.info').html ('<em>Winter Web Workshop</em> la FII')

inserare de construcții HTML

Page 50: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

jQuery

unele rezultate ale $(…) pot întoarce colecții de noduri,prelucrate prin:

$('img.foto').attr ('src', '/anonim.png')

alterarea unui atribut

Page 51: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

jQuery

unele rezultate ale $(…) pot întoarce colecții de noduri,prelucrate prin:

$('a.menu').addClass ('vizitat')

adăugarea unei clase CSS

Page 52: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

jQuery

unele rezultate ale $(…) pot întoarce colecții de noduri,prelucrate prin:

$('p:odd').css ('color', 'blue')

modificarea unor proprietăți CSS

poziție impară

Page 53: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

jQuery

o serie de metode întorc rezultateprivind primul nod selectat:

var latime = $('table').width (); // lățimea tabelului

var src = $('img#profil').attr ('src'); // URL-ul unei imagini

var ultimP = $('p:last').html (); // conținutul ultimului <p>

Page 54: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

jQuery

traversarea arborelui DOM al paginii Web:

next ()

prev ()

parent ()

Page 55: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

jQuery

asocierea de funcții de tratare a evenimentelor

// evenimentul click asupra unui element <a>

$('a').click ( function(ev) {

$(this).css({ backgroundColor: 'yellow' });

ev.preventDefault (); // previne comportamentul implicit

});

$('a:first').click ();

Page 56: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

jQuery

evenimentul de disponibilitate a DOM-uluipoate fi tratat via ready()

// atunci când documentul e pregătit de prelucrare…

$(document).ready( function() {

// … stabilim afișarea diferențiată a liniilor de tabel

$("table tr:nth-child(even)").addClass("fundal-gri");

});

Page 57: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

jQuery

„înlănțuirea” metodelor – chaining:

majoritatea metodelor întorc un alt obiect jQuery(uzual, reprezentând aceeași colecție)

metodele pot fi „înlănțuite”

$('div.info').hide().addClass('eliminat');

Page 58: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

jQuery

„înlănțuirea” metodelor – chaining:

atunci când o metodă întoarce o altă colecție, se poatefolosi end () pentru a avea acces la colecția precedentă

$('#intro').css ('color', 'gray').

find ('a').addClass ('important').end ().

find ('em').css ('color', 'red').end ()

Page 59: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

jQuery

suportul pentru transferuri asincrone – Ajax:

încărcare asincronă a unui document

$('div#stiri').load ('stiri.html');

Page 60: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

jQuery

suportul pentru transferuri asincrone – Ajax:

încărcare prin GET

$.get (url, parametri, funcție-callback);

Page 61: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

jQuery

suportul pentru transferuri asincrone – Ajax:

încărcare via POST

$.post (url, parametri, funcție-callback);

Page 62: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

jQuery

suportul pentru transferuri asincrone – Ajax:

preluare răspuns în format JSON

$.getJSON (url, parametri, funcție-callback);

Page 63: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

jQuery

suportul pentru transferuri asincrone – Ajax:

metoda cea mai generală (low level)

$.ajax (url, parametri);

o serie de parametri de interes: async, cache, complete, crossDomain, data, error, statusCode, success,…

Page 64: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

jQuery

suportul pentru transferuri asincrone – Ajax:

metoda cea mai generală (low level)

$.ajax (url, parametri);

detalii la http://api.jquery.com/jQuery.ajax/

Page 65: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

jQuery.ajax ({ // execută o cerere POST pentru invocarea serviciului Web

type: "POST",

contentType: "application/json; charset=utf-8",

url: "http://undeva.info/ServiciuWeb/Resursa",

data: "{…}", // datele de intrare trimise serviciului

dataType: "json", // așteptăm răspunsul în format JSON

success: function (data) { // funcție apelată la transfer cu succes

$('.rezultat').html (data); // preluăm datele, convertindu-le în HTML

}

});

Page 66: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

jQuery.ajax ({ // execută o cerere POST pentru invocarea serviciului Web

type: "POST",

contentType: "application/json; charset=utf-8",

url: "http://undeva.info/ServiciuWeb/Resursa",

data: "{…}", // datele de intrare trimise serviciului

dataType: "json", // așteptăm răspunsul în format JSON

success: function (data) { // funcție apelată la transfer cu succes

$('.rezultat').html (data); // preluăm datele, convertindu-le în HTML

}

});

astfel, pot fi implementate mash-up-uri la nivel de client

Page 67: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

jQuery

suportul pentru transferuri asincrone – Ajax:

evenimente Ajax

locale – tratate de obiectul Ajax instanțiat

beforeSend, success, error, complete

Page 68: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

jQuery

suportul pentru transferuri asincrone – Ajax:

evenimente Ajax

globale – transmise tuturor elementelor din DOM

ajaxStart, ajaxSend, ajaxSuccess, ajaxError, ajaxStop,…

amănunte la http://docs.jquery.com/Ajax_Events

Page 69: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Obținerea fotografiilor publice stocate pe situlFlickr pe baza serviciului Web oferit

studiu de caz

vezi exemplele din arhiva asociată acestei prezentări

Page 70: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Obținerea fotografiilor publice stocate pe situlFlickr pe baza serviciului Web oferit

utilizăm URL-ulhttp://api.flickr.com/services/feeds/photos_public.gne

pentru a obține informații despre imagini(formate disponibile: Atom, CSV, JSON, XML,…)

vezi http://www.flickr.com/services/feeds/docs/photos_public/

studiu de caz

Page 71: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

interactiune web: ajax – studiu de caz

Forma generală a răspunsului JSON transmis de Flickr:{

"title" : "Recent Uploads", "link" : "http://www.flickr.com/photos/", "modified" : "2013-12-06T13:33:07Z", "generator" : "http://www.flickr.com/", "items" : [ {

"title" : "...","link" : "http://www.flickr.com/photos/.../4204222/","media" : { "m": "https://farm.staticflickr.com/...jpg" },"date_taken": "2012-05-20T17:23:43-08:00","description": "...","published" : "2012-05-26T13:49:08Z","author" : "...","author_id" : "...","tags" : "iasi romania informatica FII ..."

} ]}

tip de data XML Schema

Page 72: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

// preluăm asincron imagini disponibile pe FlickrjQuery.getJSON

("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", { // datele de intrare transmise serviciului Web tags: "iasi, romania, informatica", format: "json"

}, // funcția anonimă ce va procesa datele JSON trimise asincron de Flickr function (data) { // iterăm fiecare informație obținută de la serviciul Web $.each (data.items, function (numar, foto) {

// creăm un element <img> având ca valoare a atributului "src" // adresa Web inclusă în datele JSON obținute; // acest <img> va fi adăugat la elementul cu id="imagini" din pagină$ ("<img/>").attr ("src", foto.media.m).attr ("title", foto.title)

.appendTo ("#imagini"); });

});

studiu de caz

Page 73: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

un posibil rezultat obținut (inclusiv trasarea pas-cu-pasa execuției codului JavaScript via extensia Firebug)

studiu de caz

Page 74: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

jQuery

efectuarea de animații simple:

$('h1').hide ('slow');

$('h1').slideDown ('fast');

$('h1').fadeOut (2000);

Page 75: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

jQuery

efectuarea de animații simple:acțiunile pot fi specificate și de programator

$("#reclama").animate ({

width: "+=100px",

opacity: 0.4,

fontSize: "3em",

borderWidth: "10px"

}, 1500);

Page 76: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

disponibilitatea unei suite largi de plug-in-urihttp://plugins.jquery.com/

Page 77: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

șabloane de proiectare pentru JavaScript

Page 78: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Șabloane de proiectare traditionale

creaționaleBuilder, Prototype, Singleton

structuraleAdapter, Bridge, Decorator, Façade, Flyweight, Proxy

comportamentaleCommand, Iterator, Mediator, Observer, State, Visitor

Page 79: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Șabloane de proiectare MV*

MVC (Model-View-Controller)MVP (Model-View-Presenter)

MVVM (Model View ViewModel)

A. Osmani, Digesting JavaScript MVC (iunie 2012)http://addyosmani.com/blog/digesting-javascript-mvc-pattern-abuse-or-evolution/

Page 80: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Șabloane de proiectare MV*

MVC (Model-View-Controller)MVP (Model-View-Presenter)

MVVM (Model View ViewModel)

utilizare pragmatică via biblioteci/framework-uriprecum Angular, Backbone, Ember, Spine, KnockoutJS

Page 81: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

arhitectura unei aplicații Web ce recurge la Backbone.js http://backbonejs.org/

A. Osmani, Developing Backbone.js Applications, O’Reilly, 2013:http://addyosmani.github.io/backbone-fundamentals/

Backbone.Events

Page 82: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Backbone.Router – “leagă” URL-uri la rute (cod)

var RouterStud = Backbone.Router.extend({

routes: {

"": "index", // pagina principală – http://sit.info

"students": "studenti", // e.g., http://sit.info/students

"students/:id": "student" // e.g., http://sit.info/students/:69

},

index: function() { /* afișează pagina de start */ },

studenti: function() { /* listează toți studenții */ },

student: function(id) { /* afișează informații despre un student */ }

});

după Jeff Carouth (2012)

Page 83: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Backbone.View – preia datele și generează codul HTML(eventual, recurgând la template-uri) pe baza DOM-ului;

suplimentar, reacționează la evenimente

var StudView = Backbone.View.extend ( {

tagName: "li", // conținutul generat va fi inclus în <li>

className: "stud", // numele clasei CSS utilizate

events: { 'click': 'clic' }, // evenimente ce vor fi tratate (aici: click)

render: function () { // generează conținutul

this.$el.html (this.nume ());

return this;

},

clic: function () { alert ('Ai dat click…'); },

nume: function () { // returnează numele studentului (via model)

return this.model.toString ();

}

}); după Jeff Carouth (2012)

Page 84: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Backbone.Model – conține informații sincronizateprivind datele existente la nivel de server (backend)

var Student = Backbone.Model.extend ( { // date despre un student

urlRoot: '/students',

toString: function() {

return this.get ('nume') + " " + this.get ('an') + " " + this.get ('nota');

}

});

var StudView = Backbone.View.extend ( { // legătura dintre model & view

initialize: function () {

// evenimentul de modificare a datelor conduce la re-afișarea lor

this.model.on ('change', this.render, this);

}

});după Jeff Carouth (2012)

Page 85: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Backbone.Collection – reprezintă o colecție de modele

var Studenti = Backbone.Collection.extend ({ url: '/students', model: Student } );

var StudentiView = Backbone.View.extend ( {initialize: function () {

this.collection = new Studenti ();this.collection.fetch ( { // preia date de la server via Ajaxsuccess: _.bind (function (raspuns, status, xhr) { this.render(); }, this)

});},render: function () {

this.collection.each (this.genereazaStudent, this);},genereazaStudent: function (model) {

var studView = new StudView ( { model: model });this.$el.append (studView.el);

}}); după Jeff Carouth (2012)

Page 86: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Backbone permite folosireaoricărui sistem JavaScript de templating

exemplificări:Dust.js – http://akdubya.github.io/dustjs/

Handlebars – http://handlebarsjs.com/

Mustache.js – http://github.com/janl/mustache.js

Page 87: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Șabloane de proiectare specifice

aspect de interes: modularizarea codului (loose coupling)

specificarea modulelor JS se realizeazăvia limbajul AMD (Asynchronous Module Definition)

Page 88: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Șabloane de proiectare specifice

aspect de interes: modularizarea codului (loose coupling)

specificarea modulelor JS se realizeazăvia limbajul AMD (Asynchronous Module Definition)

încărcare de cod folosind biblioteci specifice: curl.js, PINF, RequireJS,…

Page 89: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Șabloane de proiectare specifice

aspect de interes: modularizarea codului (loose coupling)

alternativ, se poate recurge la CommonJSun format de declarare a modulelor și pachetelor

reutilizabile la nivel de server

Page 90: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Șabloane de proiectare în contextul JavaScript

detalii și exemple – inclusiv pentru jQuery – în carteaA. Osmani, Learning JavaScript Design Patterns (2012)

http://addyosmani.com/resources/essentialjsdesignpatterns/book/

Page 91: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

JavaScript în contextul Web-ului mobil

framework-uri & biblioteci JavaScriptexemplu notabil: jQuery Mobile

instrumente independente de platformăApache Cordova (PhoneGap) – http://cordova.apache.org/

Titanium – http://www.appcelerator.com/titanium/

utilizând API-uri JavaScript oferite de platformăAmazon Fire OS, Microsoft Windows 8, Mozilla Firefox OS

Page 92: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Alte facilități și extinderi

definirea de macro-uri: Sweet.jssecuritate: ADsafe, FBJS, Gatekeeper etc.

execuție asincronă a codului: Streamline.js, StratifiedJS,… extensii: ContextJS, JavaScript++, JS2, Objective-J

limbaje inspirate de JS: Coco, Jack, Move, Zedscript etc.

multe altele la http://altjs.org/

Page 93: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Care este viitorul limbajului JavaScript?

Page 94: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

EcmaScript 6 (ES6)

specificație în stadiu de ciornă (Rev 21, noiembrie 2013)

wiki.ecmascript.org/doku.php?id=harmony:specification_drafts

https://people.mozilla.org/~jorendorff/es6-draft.html

o prezentare succintă: Angus Croll, ES6 Uncensored (noiembrie 2013)

https://speakerdeck.com/anguscroll/es6-uncensored

Page 95: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

EcmaScript 6 (ES6)

definirea de clase – perspectiva paradigmei obiectualeparametri cu valori implicite și parametri multipli

iteratori & generatorinoi tipuri de date (e.g., map, set, proxy)

modularizarea codului: module + importuri

…și altele

Page 96: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

suportul actual pentru ES6 oferit de navigatoarele Webhttp://kangax.github.io/es5-compat-table/es6/

vezi și proiectul Traceur – https://github.com/google/traceur-compiler

(JavaScript.next-to-JavaScript-of-today compiler)

Page 97: Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvoltării aplicaţiilor JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

episodul viitor: suita de tehnologii HTML5 (prima parte)