CLIW 2015-2016 (9/13) Ingineria dezvoltării aplicațiilor JavaScript
-
Upload
sabin-buraga -
Category
Software
-
view
384 -
download
2
Transcript of CLIW 2015-2016 (9/13) Ingineria dezvoltării aplicațiilor JavaScript
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Dezvoltarea aplicațiilor Webla nivel de client
{☸}inginerie software în contextul JavaScript
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
“There are two ways to write error-free programs; only the third one works.”
Alan J. Perlis
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Ce instrumente software și biblioteci JavaScriptpot fi folosite în contextul programării Web
la nivel de client?
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Editare de cod și dezvoltare de aplicații WebDepanare
TestareDocumentare a codului
CompresieOptimizare
instrumente
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Utilizarea consolei JSobiectul console oferit de browser
metode utile: log (), error(), warn(), info(),time(), timeEnd(), trace(), group(), groupEnd()
instrumente: depanare
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Firebug (Lite)http://getfirebug.com/
a se considera și instrumentele de depanareincluse î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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Verificarea corectitudinii codului JavaScript
construcția "use strict"; indică interpretoruluică se va utiliza varianta strictă a limbajului
disponibilă începând cu ECMAScript versiunea 5
instrumente: testare
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Verificarea corectitudinii codului JavaScript
sunt interzise diverse facilități: numere exprimate în baza 8,
folosirea construcțiilor with, arguments.callee
etc.
instrumente: testare
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Modul de procesare strict:
modifică semantica programelor
nu este impus de vreun browser Web
instrumente: testare
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Verificare statică a codului
JSLint – http://www.jslint.com/
JSHint – http://www.jshint.com/
ESHint – http://eslint.org/
instrumente: testare
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
instrumente: testare
opțiuniJSHint
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Suport pentru unit testing
exemplificări:Jasmine JSTest.NET QUnit Sinon.js Tyrtle
de studiat și Let’s Code: Test-Driven JavaScripthttp://www.letscodejavascript.com/
instrumente: testare
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Testare cross-browser a aplicațiilor Web
instrumente disponibile gratuitAdobe BrowserLab, Browsera, BrowserShots,
Microsoft SuperPreview, Spoon Browser Sandbox,…
aplicații comerciale – exemplificări:BrowserStack, Cloud Testing, CrossBrowserTesting
instrumente: testare
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Instrumente privind compresia/minimizarea
Online Javascript Compression ToolYUI 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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Transformarea codului JS într-unul optimizat
exemplu de referință:Closure Compiler
https://developers.google.com/closure/
instrumente: optimizare javascript
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Managementul de pachete JavaScript pentrudezvoltarea 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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Suport pentru fluxuri de activități (workflow-uri), eventual realizate automat
exemple: Grunt, Yeoman, Phantom.js, Selenium
instrumente: fluxuri de activități
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Suport pentru creșterea performanței
asm.js (Mozilla – din 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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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://kripken.github.io/emscripten-site/
instrumente
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Portarea altor aplicații în JavaScript
Scala.js – compilează programele Scala în cod JavaScript
http://www.scala-js.org/
https://lihaoyi.github.io/hands-on-scala-js/
instrumente
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Facilitarea dezvoltării de aplicații Webla nivel de client similare celor desktop
exemplificări:Cappuccino – http://www.cappuccino-project.org/
SproutCore – http://www.sproutcore.com/
instrumente
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Limbaje aliniate altor paradigme
exemplu:programare funcțională – ClosureScript
https://github.com/clojure/clojurescript
instrumente
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
N-am putea recurge labiblioteci JavaScript specifice?
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Biblioteci generale privind prezentareaconț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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Multe alte biblioteci JavaScript specializate
procesarea formularelor Webfacilitarea transferurilor asincrone de date
tehnici criptograficerealizarea de efecte vizuale
generarea de conținut grafic 2D/3Dvizualizarea datelor
dezvoltare de jocuri (e.g., game engines)…
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
colecții de (micro-)biblioteci JS: www.javascripting.com
jster.netmicrojs.com
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Obținerea fotografiilor publice stocate pe situlFlickr 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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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: jquery
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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" : "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 ..."
} ]}
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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", 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"); });
});
studiu de caz: jquery
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
studiu de caz: jquery
un posibil rezultat – editarea & rularea codului via JSFiddle
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
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/
studiu de caz: jquery
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Managementul unui zar – „clasa” Zar
proprietate: valoareZar
metode: obtineZar () și aruncaZar ()
studiu de caz: jquery
obține un număr preluat de la random.org
sau local cu Math.round (Math.random () * 5) + 1
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
studiu de caz: jqueryfunction Zar (valoareZar) { // 'clasa' privitoare la managementul unui zar
this.valoareZar = valoareZar; // valoarea curentă a zarului
this.obtineZar = function () { // furnizează valoarea curentă a zarului
return this.valoareZar; };
this.aruncaZar = function () { // simulează acțiunea de 'aruncare' a zarului
var rezultat;
$.ajax ({ 'url': 'http://www.random.org/integers/?num=1&min=1&max=6
&base=10&col=1&format=plain&rnd=new',
'async': false, // transfer sincron (de ce?)
'success': function (date) { rezultat = date; }
}).fail (function () {
console.log ('Cererea nu a putut fi satisfăcută de random.org');
// calculăm valoarea zarului în mod clasic
rezultat = Math.round (Math.random () * 5) + 1;
});
return this.valoareZar = parseInt (rezultat, 10);
};
}
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Implementarea jocului – „clasa” Joc
proprietăți: scorCurent, zar1, zar2
metode: aruncaZaruri (), afiseazaScor (), genereazaSurprize ()
studiu de caz: jquery
probabilitate 20% ca Tux să fure baniiprobabilitate 15% ca Pingu să ofere 33 de tucși
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
studiu de caz: jqueryfunction Joc (scorInitial) { // clasa referitoare la implementarea jocului
this.scorCurent = scorInitial; // scorul curent
this.zar1 = new Zar (0); // instanțele celor 2 zaruri
this.zar2 = new Zar (0);
this.aruncaZaruri = function () { // acțiunea de 'aruncat' zarurile
if (this.zar1.aruncaZar () + this.zar2.aruncaZar () > 7) {
this.scorCurent += 10; // incrementarea scorului dacă survine norocul
}
this.afiseazaScor (); // după aruncare, afișăm scorul
};
// generează diverse surprize (ne)plăcute
this.genereazaSurprize = function () {
// vezi codul-sursă disponibil online…
};
// afișează/ascunde regulile jocului
this.redaReguli = function (stare) {
// vezi codul-sursă disponibil online…
};
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
studiu de caz: jquerythis.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);
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Nu putem recurge la diverse șabloane de proiectare pentru JavaScript?
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Șabloane de proiectare tradiționale
creaționaleBuilder, Prototype, Singleton
structuraleAdapter, Bridge, Decorator, Façade, Flyweight, Proxy
comportamentaleCommand, Iterator, Mediator, Observer, State, Visitor
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Șabloane de proiectare MV*
MVC (Model-View-Controller)MVP (Model-View-Presenter)
MVVM (Model View ViewModel)
pentru detalii, de exploratAddy Osmani, Learning JavaScript Design Patterns (2015)http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Șabloane de proiectare MV*
utilizare pragmatică via biblioteci/framework-uriAngular – https://angularjs.org/
Backbone – http://backbonejs.org/
Ember – http://emberjs.com/
Mithril – http://lhorie.github.io/mithril/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
arhitectura unei aplicații Web ce recurge la Backbone.js
Backbone.Events
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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 ()); // $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)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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 și 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)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
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/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Șabloane de proiectare specifice
aspect de interes: modularizarea codului (loose coupling)
specificarea modulelor JS se poate realizavia limbajul AMD (Asynchronous Module Definition)
https://github.com/amdjs/amdjs-api
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Șabloane de proiectare specifice
aspect de interes: modularizarea codului (loose coupling)
specificarea modulelor JS se poate realizavia limbajul AMD (Asynchronous Module Definition)
încărcare de cod folosind biblioteci specifice: curl.js, PINF, RequireJS,…
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
http://wiki.commonjs.org/wiki/CommonJS
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Șabloane de proiectare specifice
aspect de interes: modularizarea codului (loose coupling)
o soluție de încărcare universală de module:SystemJS – https://github.com/systemjs/systemjs
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
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/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
JavaScript în contextul Web-ului mobil
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/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
JavaScript în contextul Web-ului mobil
recurgerea la API-uri JavaScript oferite de platformăAmazon Fire OS
Microsoft Windows 8/10Mozilla Firefox OS
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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.
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
instrumente
www.codefellows.org/blog/a-list-of-foundational-javascript-tools
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
episodul viitor: suita de tehnologii HTML5 (prima parte)