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

Dr. Sabin Buragawww.purl.org/net/busaco

programare Web la nivel de client

inginerie software în contextul JavaScript

Alan J. Perlis


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


Ce instrumente software și biblioteci JavaScript
pot fi folosite în contextul programării Web
la nivel de client?

Editare de cod & dezvoltare de aplicații Web
Depanare
Testare
Documentare a codului
Compresie
Optimizare


instrumente

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.


instrumente: editare

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

Utilizarea consolei JS
obiectul console oferit de browser
metode utile: log (), error(), warn(), info(),
time(), timeEnd(), trace(), group(), groupEnd()
https://developer.mozilla.org/docs/DOM/console


instrumente: depanare

Firebug (Lite)
http://getfirebug.com/
a se considera și instrumentele de depanare
incluse în unele navigatoare Web
exemplu notabil: Chrome Developer Tools


instrumente: depanare

Verificarea corectitudinii codului JavaScript
constructia "use strict"; indică interpretorului
că se va utiliza varianta strictă a limbajului

disponibilă începând cu ECMAScript versiunea 5


instrumente: testare

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ă



sunt interzise diverse facilități:
numere exprimate în baza 8,
folosirea construcțiilor with, arguments.callee
etc.



Modul de procesare strict:
modifică semantica programelor
nu este impus de vreun browser Web



Verificare statică
instrumente de referință:
JSLint – http://www.jslint.com/
JSHint – http://www.jshint.com/




opțiuni
JSHint

Suport pentru unit testing
exemplificări:
Jasmine
JSTest.NET
QUnit
Sinon.js
Tyrtle



Testare cross-browser a aplicațiilor Web
instrumente disponibile gratuit
Adobe BrowserLab, Browsera, BrowserShots,
Microsoft SuperPreview, Spoon Browser Sandbox,…



Testare cross-browser a aplicațiilor Web
aplicații comerciale – exemplificări:
BrowserStack, Cloud Testing, CrossBrowserTesting



Standarde de redactare a codului JavaScript
exemple:
Crock’s Code Conventions for JavaScript
Google JavaScript Style Guide
Idiomatic.js
ghiduri specifice – e.g., jQuery Core Style Guide


instrumente: documentarea codului

Software pentru documentarea programelor
JSDoc Toolkit
jGrouseDoc
YUIDoc


instrumente: documentarea codului

Instrumente privind compresia/minimizarea
Online Javascript Compression Tool
YUI Compressor
Scriptalizer
detalii în articolul A. Powell,
Understanding Compression and Minification (mai 2012):


instrumente: compresie de cod

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

Transformarea codului JS într-unul optimizat
exemplu de referință:
Closure Compiler
https://developers.google.com/closure/


instrumente: optimizare javascript

Managementul de pachete JavaScript pentru
dezvoltarea 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

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

exemple:
Grunt, Yeoman
Phantom.js, Selenium


instrumente

Facilitarea dezvoltării de aplicații Web
la 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

Suport pentru creșterea performanței
asm.js (Mozilla, 2012)
subset JavaScript ce poate fi utilizat ca limbaj de nivel
scă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

Alte limbaje pentru dezvoltarea de aplicații Web
la 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

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

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

Limbaje aliniate altor paradigme
exemplu:
programare funcțională – ClosureScript
https://github.com/clojure/clojurescript


instrumente

conceperea “stratificată” a aplicațiilor JavaScript


Graceful degradation & progressive enhancement

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

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



înaintea folosirii oricărei tehnici dorite,
de testat suportul oferit de navigator:
JavaScript, cookie-uri, clase/metode DOM, Ajax etc.




N-am putea recurge la
biblioteci JavaScript specifice?

Dojo: dojotoolkit.org
jQuery: jquery.com
Prototype: prototypejs.org
Rico: openrico.org
Script.aculo.us: script.aculo.us
YUI: developer.yahoo.net/yui/


Biblioteci generale privind prezentarea
conținutului și manipularea arborelui DOM

Chroma
D3
Dance
Data
Envision
Processing.js
Raphaël
http://selection.datavisualization.ch/


Biblioteci pentru vizualizarea datelor

procesarea formularelor Web
facilitarea transferurilor asincrone de date
tehnici criptografice
grafice (plotting)
realizarea de efecte vizuale
generarea de conținut grafic 2D/3D
dezvoltare de jocuri (e.g., game engines)
…


Multe alte biblioteci JavaScript specializate


colecții de (micro-)biblioteci
JavaScript:
http://javascriptlibraries.com/
developers.google.com/speed/libraries/
microjs.com


jQuery

aspecte esențiale (o prezentare succintă)

scop principal:
manipularea facilă a documentului HTML
pe baza selectorilor CSS – nivelul 3


jQuery

oferă un API concis, dar extensibil, ușor de folosit
nu intră în conflict cu alte biblioteci JavaScript
disponibil open source


jQuery

detalii tehnice + documentații:
http://jquery.com/
http://learn.jquery.com/
http://jqfundamentals.com/
http://www.learningjquery.com/


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”


jQuery

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


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 CSS

metodă
(funcționalitate)


jQuery

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

http://docs.jquery.com/Selectors


jQuery

selectarea nodurilor dorite recurge la convențiile
privitoare 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>


jQuery

selectori “magici”:
poziție – :first :last
antet – :header
vizibilitate – :hidden :visible
animație – :animated
formulare – :input :text :password :radio :submit
conținut – :contains (…)


jQuery

unele rezultate ale $(…) pot întoarce colecții de noduri,
prelucrate prin:
$('div.info').size ()
mărimea colecției obținute


jQuery

prelucrate prin:
$('div.info').each (function (div) { … })
iterare via o funcție – aici: anonimă


jQuery

prelucrate prin:
$('div.info').html ('<em>Winter Web Workshop</em> la FII')
inserare de construcții HTML


jQuery

prelucrate prin:
$('img.foto').attr ('src', '/anonim.png')
alterarea unui atribut


jQuery

prelucrate prin:
$('a.menu').addClass ('vizitat')
adăugarea unei clase CSS


jQuery

prelucrate prin:
poziție impară

$('p:odd').css ('color', 'blue')
modificarea unor proprietăți CSS


jQuery

o serie de metode întorc rezultate
privind 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>


jQuery

traversarea arborelui DOM al paginii Web:
next ()
prev ()
parent ()


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 ();


jQuery

evenimentul de disponibilitate a DOM-ului
poate 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");
});


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');


jQuery

„înlănțuirea” metodelor – chaining:
atunci când o metodă întoarce o altă colecție, se poate
folosi end () pentru a avea acces la colecția precedentă
$('#intro').css ('color', 'gray').
find ('a').addClass ('important').end ().
find ('em').css ('color', 'red').end ()


jQuery

suportul pentru transferuri asincrone – Ajax:
încărcare asincronă a unui document
$('div#stiri').load ('stiri.html');


jQuery

încărcare prin GET
$.get (url, parametri, funcție-callback);


jQuery

încărcare via POST
$.post (url, parametri, funcție-callback);


jQuery

preluare răspuns în format JSON
$.getJSON (url, parametri, funcție-callback);


jQuery

metoda cea mai generală (low level)
$.ajax (url, parametri);
o serie de parametri de interes: async, cache, complete,
crossDomain, data, error, statusCode, success,…


jQuery

metoda cea mai generală (low level)
$.ajax (url, parametri);
detalii la http://api.jquery.com/jQuery.ajax/


jQuery


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


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
}
});

evenimente Ajax
locale – tratate de obiectul Ajax instanțiat
beforeSend, success, error, complete


jQuery

evenimente Ajax
globale – transmise tuturor elementelor din DOM
ajaxStart, ajaxSend, ajaxSuccess, ajaxError, ajaxStop,…

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


jQuery

Obținerea fotografiilor publice stocate pe situl
Flickr pe baza serviciului Web oferit

vezi exemplele
din arhiva asociată
acestei prezentări


studiu de caz

Obținerea fotografiilor publice stocate pe situl
Flickr pe baza serviciului Web oferit
utilizăm URL-ul
http://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

interactiune web: ajax – studiu de caz
"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": "...",
tip de data
XML Schema
"published" : "2012-05-26T13:49:08Z",
"author"
: "...",
"author_id" : "...",
"tags"
: "iasi romania informatica FII ..."
}]


{

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

}

studiu de caz

// preluăm asincron imagini disponibile pe Flickr
jQuery.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

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

efectuarea de animații simple:
$('h1').hide ('slow');
$('h1').slideDown ('fast');
$('h1').fadeOut (2000);


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);


jQuery


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


șabloane de proiectare pentru JavaScript

creaționale
Builder, Prototype, Singleton
structurale
Adapter, Bridge, Decorator, Façade, Flyweight, Proxy
comportamentale
Command, Iterator, Mediator, Observer, State, Visitor


Șabloane de proiectare traditionale

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


Șabloane de proiectare MV*

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

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

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


Șabloane de proiectare MV*

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

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 */ }
});


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

după Jeff Carouth (2012)


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 ();
}
});

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 Ajax
success: _.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);
}
});

exemplificări:
Dust.js – http://akdubya.github.io/dustjs/
Handlebars – http://handlebarsjs.com/
Mustache.js – http://github.com/janl/mustache.js


Backbone permite folosirea
oricărui sistem JavaScript de templating

aspect de interes:
modularizarea codului (loose coupling)
specificarea modulelor JS se realizează
via limbajul AMD (Asynchronous Module Definition)


Șabloane de proiectare specifice

aspect de interes:
specificarea modulelor JS se realizează
via limbajul AMD (Asynchronous Module Definition)
încărcare de cod folosind biblioteci specifice:
curl.js, PINF, RequireJS,…



aspect de interes:
alternativ, se poate recurge la CommonJS
un format de declarare a modulelor și pachetelor
reutilizabile la nivel de server



detalii și exemple – inclusiv pentru jQuery – în cartea
A. Osmani, Learning JavaScript Design Patterns (2012)
http://addyosmani.com/resources/essentialjsdesignpatterns/book/


Șabloane de proiectare în contextul JavaScript

framework-uri & biblioteci JavaScript
exemplu notabil: jQuery Mobile
instrumente independente de platformă
Apache Cordova (PhoneGap) – http://cordova.apache.org/
Titanium – http://www.appcelerator.com/titanium/


JavaScript în contextul Web-ului mobil

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

definirea de macro-uri: Sweet.js
securitate: 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/


Alte facilități și extinderi


Care este viitorul limbajului JavaScript?

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


EcmaScript 6 (ES6)

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

definirea de clase – perspectiva paradigmei obiectuale
parametri cu valori implicite și parametri multipli
iteratori & generatori
noi tipuri de date (e.g., map, set, proxy)
modularizarea codului: module + importuri
…și altele


EcmaScript 6 (ES6)

vezi și proiectul Traceur – https://github.com/google/traceur-compiler
(JavaScript.next-to-JavaScript-of-today compiler)


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


episodul viitor:
suita de tehnologii HTML5 (prima parte)

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

More Related Content

What's hot

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

More from Sabin Buraga

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