CLIW 2015-2016 (9/13) Ingineria dezvoltării aplicațiilor JavaScript

Dr.SabinBuragawww.purl.org/net/busaco
Dezvoltarea aplicațiilor Web
la nivel de client
{☸}inginerie software în contextul JavaScript

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

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

Editare de cod și dezvoltare de aplicații Web
Depanare
Testare
Documentare a codului
Compresie
Optimizare
instrumente

Editoare + medii integrate (IDE) pentru desktop:
Aptana Studio, JS Development Tools (plug-in Eclipse),
Sublime Text, Visual Studio, WebStorm
Disponibile pe Web – în cloud:
Cloud9 IDE, Codepen, Codio, JS Bin, JS Fiddle, Plunker,…
unele oferă și partajarea codului-sursă cu alți dezvoltatori
http://www.slideshare.net/busaco/cu-codul-n-nori
instrumente: editare

Utilizarea consolei JS
obiectul console oferit de browser
metode utile: log (), error(), warn(), info(),
time(), timeEnd(), trace(), group(), groupEnd()
instrumente: depanare

Firebug (Lite)
http://getfirebug.com/
a se considera și instrumentele de depanare
incluse în navigatoarele Web moderne
https://developer.mozilla.org/docs/Web/API/console
https://developers.google.com/web/tools/chrome-devtools/
https://dev.windows.com/en-us/microsoft-edge/platform/documentation/
instrumente: depanare

Verificarea corectitudinii codului JavaScript
construcția "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ă a codului
JSLint – http://www.jslint.com/
JSHint – http://www.jshint.com/
ESHint – http://eslint.org/

opțiuni
JSHint

Suport pentru unit testing
exemplificări:
Jasmine JSTest.NET QUnit Sinon.js Tyrtle
de studiat și Let’s Code: Test-Driven JavaScript
http://www.letscodejavascript.com/

Testare cross-browser a aplicațiilor Web
instrumente disponibile gratuit
Adobe BrowserLab, Browsera, BrowserShots,
Microsoft SuperPreview, Spoon Browser Sandbox,…
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

documentarea codului: JSDoc Toolkit – http://usejsdoc.org/
define ('my/shirt', function () {
/**
* A module representing a shirt.
* @exports my/shirt
* @version 1.0
*/
var shirt = {
/** A property of the module. */
color: "black",
/** @constructor */
Turtleneck: function(size) {
/** A property of the class. */
this.size = size;
}
};
return shirt;
});
marcaje (adnotări) speciale
în cadrul comentariilor:
@abstract
@access
@extends
@callback
@event
@emits
@function
@property
@module
@global
@author
@copyright
@summary
@since
@see
@todo

Instrumente privind compresia/minimizarea
Online Javascript Compression Tool
YUI Compressor
Scriptalizer
detalii în articolul A. Powell,
Understanding Compression and Minification (2012):
www.aaron-powell.com/javascript/understanding-compression-and-minification
instrumente: compresie de cod

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
un exemplu notoriu:
Bower – http://bower.io/
instrumente: pachete

Suport pentru fluxuri de activități (workflow-uri),
eventual realizate automat
exemple:
Grunt, Yeoman, Phantom.js, Selenium
instrumente: fluxuri de activități

Suport pentru creșterea performanței
asm.js (Mozilla – din 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://kripken.github.io/emscripten-site/
instrumente

JSIL – compilator care transformă aplicațiile .NET
în programe JavaScript rulând independent de browser
http://jsil.org/
instrumente

Scala.js – compilează programele Scala în cod JavaScript
http://www.scala-js.org/
https://lihaoyi.github.io/hands-on-scala-js/
instrumente

Facilitarea dezvoltării de aplicații Web
la nivel de client similare celor desktop
exemplificări:
Cappuccino – http://www.cappuccino-project.org/
SproutCore – http://www.sproutcore.com/
instrumente

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

N-am putea recurge la
biblioteci JavaScript specifice?

Biblioteci generale privind prezentarea
conținutului și manipularea arborelui DOM
Dojo: dojotoolkit.org
jQuery: jquery.com
Prototype: prototypejs.org
Rico: http://sourceforge.net/projects/openrico/
Script.aculo.us: script.aculo.us

Multe alte biblioteci JavaScript specializate
procesarea formularelor Web
facilitarea transferurilor asincrone de date
tehnici criptografice
realizarea de efecte vizuale
generarea de conținut grafic 2D/3D
vizualizarea datelor
dezvoltare de jocuri (e.g., game engines)
…

colecții de (micro-)biblioteci JS:
www.javascripting.com
jster.net
microjs.com

Obținerea fotografiilor publice stocate pe situl
Flickr pe baza serviciului Web oferit
cod-sursă disponibil la
http://jsfiddle.net/busaco/4d2tmc6b/
studiu de caz: jquery
vezi și exemplele
din arhiva asociată
acestei prezentări

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/

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" : "2015-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 ..."
} ]
}

// 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", tagmode: "all", 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");
});
});

un posibil rezultat – editarea & rularea codului via JSFiddle

Crearea unui joc simplu cu 2 zaruri
„arunci” zarurile și câștigi 10 tucși numai dacă
suma punctelor obținute este mai mare de 7
(uneori, pot apărea surprize…)
cod-sursă disponibil la
http://jsfiddle.net/busaco/r8L2kp30/

Managementul unui zar – „clasa” Zar
proprietate: valoareZar
metode: obtineZar () și aruncaZar ()
obține un număr preluat de la random.org
sau local cu Math.round (Math.random () * 5) + 1

Implementarea jocului – „clasa” Joc
proprietăți: scorCurent, zar1, zar2
metode: aruncaZaruri (), afiseazaScor (), genereazaSurprize ()
probabilitate 20% ca Tux să fure banii
probabilitate 15% ca Pingu să ofere 33 de tucși

this.afiseazaScor = function () { // afișează starea jocului (scor, zaruri)
if (this.scorCurent <= 10) { // 'incurajam' jucatorul sa mai joace...
$("#scor").html ("Ai obținut doar 10 tucși :(");
} else {
// modificăm modul de afișare dacă scorul e 'mare'
$("#scor").addClass (this.scorCurent < 60 ? "avansat" : "expert");
// afisarea propriu-zisa a scorului curent
$("#scor").html ("Ai câștigat până acum " + this.scorCurent + " de tucși");
}
// afișarea valorii fiecărui zar în parte
$("#zar1").show ().html (this.zar1.obtineZar ());
$("#zar2").show ().html (this.zar2.obtineZar ());
// la finalul unei runde, generăm surprize...
this.genereazaSurprize ();
};
} // instanțierea unui joc (scorul inițial e zero)
var joc = new Joc (0);

Nu putem recurge la diverse șabloane
de proiectare pentru JavaScript?

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

Șabloane de proiectare MV*
MVC (Model-View-Controller)
MVP (Model-View-Presenter)
MVVM (Model View ViewModel)
pentru detalii, de explorat
Addy Osmani, Learning JavaScript Design Patterns (2015)
http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/

Șabloane de proiectare MV*
utilizare pragmatică via biblioteci/framework-uri
Angular – https://angularjs.org/
Backbone – http://backbonejs.org/
Ember – http://emberjs.com/
Mithril – http://lhorie.github.io/mithril/

A. Osmani, Developing Backbone.js Applications, O’Reilly, 2013:
http://addyosmani.github.io/backbone-fundamentals/
flux de activități într-o aplicație MVC la nivel de client

arhitectura unei aplicații Web ce recurge la Backbone.js
Backbone.Events

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)

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 ()); // $el oferă acces la un obiect jQuery
return this;
},
clic: function () { alert ('Ai dat click…'); },
nume: function () { // returnează numele studentului (via model)
return this.model.toString ();
}
}); după Jeff Carouth (2012)

Backbone.Model – conține informații sincronizate
privind 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 și view
initialize: function () {
// evenimentul de modificare a datelor conduce la re-afișarea lor
this.model.on ('change', this.render, this);
}
…

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

Backbone permite folosirea oricărui sistem JavaScript
de templating – machete de vizualizare
exemplificări:
Dust.js – http://linkedin.github.io/dustjs/
EJS – http://www.embeddedjs.com/
Handlebars – http://handlebarsjs.com/
Mustache.js – http://github.com/janl/mustache.js
Nunjucks – http://mozilla.github.io/nunjucks/

Anumite biblioteci/framework-uri pot fi specializate,
vizând doar un anumit aspect al MVC/MVVM
de exemplu, pentru view:
Knockout – http://knockoutjs.com/
React – http://facebook.github.io/react/
Vue – http://vuejs.org/
a model-only library:
Breeze.js – http://www.getbreezenow.com/breezejs

Șabloane de proiectare specifice
aspect de interes:
modularizarea codului (loose coupling)
specificarea modulelor JS se poate realiza
via limbajul AMD (Asynchronous Module Definition)
https://github.com/amdjs/amdjs-api

aspect de interes:
specificarea modulelor JS se poate realiza
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
http://wiki.commonjs.org/wiki/CommonJS

aspect de interes:
o soluție de încărcare universală de module:
SystemJS – https://github.com/systemjs/systemjs

JavaScript în contextul Web-ului mobil
framework-uri și biblioteci JavaScript
exemple:
jQuery Mobile – http://jquerymobile.com/
Mobile Angular UI – http://mobileangularui.com/
tabris.js – https://tabrisjs.com/

instrumente independente de platformă
Apache Cordova (PhoneGap) – http://cordova.apache.org/
Ionic – http://ionicframework.com/
Kendo UI Core – https://github.com/telerik/kendo-ui-core
Sencha Touch – http://www.sencha.com/products/touch/
Titanium – http://www.appcelerator.com/titanium/

recurgerea la API-uri JavaScript oferite de platformă
Amazon Fire OS
Microsoft Windows 8/10
Mozilla Firefox OS

Alte facilități și extinderi
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.

instrumente
www.codefellows.org/blog/a-list-of-foundational-javascript-tools

episodul viitor:
suita de tehnologii HTML5 (prima parte)

CLIW 2015-2016 (9/13) Ingineria dezvoltării aplicațiilor JavaScript

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to CLIW 2015-2016 (9/13) Ingineria dezvoltării aplicațiilor JavaScript

Similar to CLIW 2015-2016 (9/13) Ingineria dezvoltării aplicațiilor JavaScript (20)

More from Sabin Buraga

More from Sabin Buraga (20)

CLIW 2015-2016 (9/13) Ingineria dezvoltării aplicațiilor JavaScript