Embed Size (px)
Citation preview
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
inginerie software în contextul JavaScript
Dr. Sabin Corneliu Buraga – profs.info.uaic.ro/~busaco/
Full-Stack Web Development
pic
s.m
e.m
e/st
ory
-of-
ever
y-p
roje
ct-a
fter
-3-m
on
ths-
init
ial-
wo
rk-p
lan
-579
3091
7.p
ng
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~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
profs.in
fo.uaic.ro/~busa
co
Ce instrumente software și biblioteci JSpot fi folosite în contextul programării Web?
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Editare de cod și dezvoltare de aplicații WebDepanare
TestareDocumentare a codului
CompresieOptimizare
instrumente
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Editoare + medii integrate (IDE): Ace (Ajax.org Cloud9 Editor), Atom Editor, Brackets,
CodeLite, Komodo, JS Development Tools (Eclipse),Sublime Text, Visual Studio (Code), WebStorm etc.
a se considera și github.com/sorrycc/awesome-javascript#editors
instrumente: editare
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Disponibile pe Web – în cloud: Cloud9 IDE, Codepen, JS Bin, JS Fiddle, Plunker, REPL.it,…
unele oferă și partajarea codului-sursă cu alți dezvoltatori
instrumente: editare
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Utilizarea consolei JSobiectul console oferit de mediul de execuție
console.spec.whatwg.org (Living Standard, august 2019)
metode utile: log (), error (), warn (), info (), assert (),time (), timeEnd (), trace (), group (), groupEnd (),
table (), dir (), dirxml ()
instrumente: depanare
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Utilizarea consolei JSobiectul console oferit de mediul de execuție
la nivel de browser Webdeveloper.mozilla.org/Web/API/Console
în contextul Node.js: modulul preinstalat console
nodejs.org/api/console.html
instrumente: depanare
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
instrumente: depanare
de studiat și M. Burgess, Beyond console.log(), 2018medium.com/@mattburgess/beyond-console-log-2400fdf4a9d8
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Instrumentele de depanare
incluse în navigatoarele Web moderne:developers.google.com/web/tools/chrome-devtools/
developer.mozilla.org/docs/Tools
docs.microsoft.com/en-us/microsoft-edge/devtools-guide
docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium
developer.apple.com/safari/tools/
instrumente: depanare
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
instrumente: depanare
medium.com/datadriveninvestor/stopping-using-console-log-and-start-using-your-browsers-debugger-62bc893d93ff
inspecție de variabile(watch)
domeniu de vizibilitate
(scope)
puncte de oprire
(breakpoints)
stiva apelurilor(call stack)
puncte de oprire vizând transferuri asincrone, DOM,
evenimente,…
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Instrumentele de depanare
disponibile ca proxy
exemple:HTTP Toolkit – github.com/httptoolkit
mitmproxy – mitmproxy.org
Telerik Fiddler – www.telerik.com/fiddler
instrumente: depanare
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~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
developer.mozilla.org/Web/JavaScript/Reference/Strict_mode
instrumente: testare
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~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
instrumente: testare
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~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
profs.in
fo.uaic.ro/~busa
co
Modul de procesare strict:
modifică semantica programelor
este implicit folosit pentru modulele de cod ES6module code is always strict mode code
nu este impus de mediul de execuție
instrumente: testare
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Verificare statică a codului
JSHint – www.jshint.com
ESLint – eslint.org
JS Inspect (detects copy-pasted & structurally similar code)github.com/danielstjules/jsinspect
instrumente: testare
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
instrumente: testare
"use strict";
varAiurea = "Ah!";
const C = 33;
let obiect = {prop: ++C, prop: true}; // eroare de sintaxă
console.error (`{obiect}`);
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
instrumente: testarereguli ESHint
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Suport pentru testare, inclusiv unit testing
exemplificări:AVA, Cypress, dom-testing-library, Flow, Jasmine, Jest,Mocha, PhantomJS, Qunit, Sinon.js, Tape, TestCafe etc.
github.com/sorrycc/awesome-javascript#testing-frameworks
de studiat și Let’s Code: Test-Driven JavaScriptwww.letscodejavascript.com
instrumente: testare
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Testare cross-browser a aplicațiilor Web
exemple:Browsera – www.browsera.com
Browserling – www.browserling.com
Browser Sandbox – turbo.net/browsers
Browser Shots – browsershots.org
instrumente: testare
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Standarde de redactare a codului JavaScript
JavaScript Standard Stylestandardjs.com
Code Conventions for JavaScriptwww.crockford.com/code.html
Principles of Writing Consistent, Idiomatic JavaScript github.com/rwaldron/idiomatic.js
instrumente: documentarea codului
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Standarde de redactare a codului JavaScript
ghiduri specifice – câteva exemple:Airbnb JavaScript Style Guide
github.com/airbnb/javascript
Google JavaScript Style Guidegoogle.github.io/styleguide/jsguide.html
React Native Code Stylefacebook.github.io/react-native/docs/style.html
NPM’s Coding Styledocs.npmjs.com/misc/coding-style.html
instrumente: documentarea codului
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Standarde de redactare a codului JavaScript
instrumente utile (formatatoare a codului-sursă):JS Beautifier – jsbeautifier.org
Prettier – prettier.io
esformatter – github.com/millermedeiros/esformatter
instrumente: documentarea codului
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
documentarea codului: JSDoc Toolkit – usejsdoc.org
/*** Class representing a dot.* @extends Point*/class Dot extends Point {
/*** Create a dot.* @param {number} x - The x value.* @param {number} y - The y value.* @param {number} width - ...*/constructor(x, y, width) { // ...}
/*** Get the dot's width.* @return {number} The dot's width.*/getWidth() {
// ...}
}
marcaje (adnotări) speciale în cadrul comentariilor:
@abstract
@access
@alias
@async
@extends
@class
@interface
@callback
@event
@emits
@listens
@function
@property
@module
@requires
…
@author
@copyright
@license
@summary
@description
@version
@example
@since
@see
@todo
@deprecated
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Instrumente privind compresia/minimizarea
exemple:JSCompress – github.com/circlecell/jscompress.com
Minify – www.minifier.org
UglifyJS (Mihai Bazon, absolvent FII) – lisperator.net/uglifyjs/
instrumente: compresie de cod
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Transformarea codului JS într-unul optimizat
exemple:Closure Compiler (Google) – developers.google.com/closure
Prepack (Facebook) – prepack.io
instrumente: optimizare javascript
detalii într-un curs separat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Managementul de pachete JavaScript
căutare, instalare, compilare, verificare a dependențelor
exemple:Bower, jspm, npm, Yarn etc.
github.com/sorrycc/awesome-javascript#package-managers
instrumente: pachete
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Managementul de pachete JavaScript
crearea de conglomerate de cod/resurse (bundles)
exemplificări:browserify, Rollup (specific ES6), webpack
github.com/sorrycc/awesome-javascript#bundlers
instrumente: pachete
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Suport pentru fluxuri de activități (workflow-uri), eventual realizate automat
exemple: Brunch, Grunt, Yeoman, Phantom.js, Plop, Selenium
instrumente: fluxuri de activități
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Sisteme de management al machetelor de redare a conținutului (templating engines)
exemplificări: Dust.js, EJS, Handlebars, Mustache.js,…
github.com/sorrycc/awesome-javascript#templating-engines
instrumente: machete de redare
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Biblioteci pentru programarea funcțională
Lodash – lodash.com
Ramda – ramdajs.com
Underscore – underscorejs.org
resurse de interes la github.com/stoeffel/awesome-fp-js
instrumente: programare
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Biblioteci pentru programarea reactivă
vizează procesarea fluxurilor de date asincronepe baza paradigmei funcționale
adoptă șablonul de proiectare Observer
www.learnrxjs.io
instrumente: programare
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Biblioteci pentru programarea reactivă
exemple:RxJS – github.com/ReactiveX/rxjs
Cycle – cycle.js.org
MobX – mobx.js.org
Most.js – github.com/cujojs/most
instrumente: programare
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Suport pentru creșterea performanței
asm.js (Mozilla, 2012—2014) subset JavaScript ce poate fi utilizat ca limbaj de nivelscăzut, eficient – în spiritul limbajului de asamblare
rulează nativ în Chrome, Edge și Firefox
asmjs.org
instrumente
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Suport pentru creșterea performanței
WebAssembly – wasm (în lucru, 29 octombrie 2019) limbaj de programare proiectat pentru execuție eficientă
la nivel de (browser) Web
safe, portable, low-level code format
webassembly.org developer.mozilla.org/WebAssembly
instrumente
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Suport pentru creșterea performanței
WebAssembly – wasm
include un set restrâns de tipuri de date și operații
permite optimizări la momentul compilării
axat pe realizarea de calcule numerice complexe
uzual, programele wasm sunt organizate în module
instrumente
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
instrumentestudii de caz reale:
P. Jha, S. Padmanabhan, WebAssembly at eBay: A Real-World Use Case (2019)
tech.ebayinc.com/engineering/webassembly-at-ebay-a-real-world-use-case/
R. Aboukhalilich, How We Used WebAssemblyTo Speed Up Our Web App By 20X (2019)
www.smashingmagazine.com/2019/04/webassembly-speed-web-app/
G. Cuvillier, D3WASM: A Port of Doom 3 Engine toWebAssembly and WebGL (2019)
www.continuation-labs.com/projects/d3wasm/
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
C/C++ alte limbaje
cod binar
compilator JIT (Just-In-Time) / AOT (Ahead-Of-Time)
JS/ES
alte limbaje
wasmasm.js
platformă de execuție (run-time)navigator Web, server Web, soluție cloud
emscripten
binaryen
aplicație scrisă în limbajul de programare preferatmodul wasmpublicare pe Web a modulului wasmîncărcare asincronă a modulului wasminstanțierea
modulului wasmapelarea funcțiilor furnizate
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
instrument online:WebAssembly Playground – ast.run
instrumente
detalii în specificația oficialăwebassembly.github.io/spec/core/
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Utilizarea unui modul wasm via API-ul JS disponibil
obiecte: WebAssembly Global Module Instance Memory Table
metodă de instanțiere: instantiateStreaming()
tratarea erorilor: CompileError LinkError RuntimeError
developer.mozilla.org/WebAssembly#API_reference
instrumente
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
De regulă, un modul wasm nu are acces direct la DOM, dar codul poate fi partajat de alte programe JS
neinteractive – „lucrători” (Web workers) –și instanțiat de multiple ori
de evitat transferuri frecvente de date JS↔wasm
instrumente
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
modulele wasm pot fi executate la nivel de server, inclusiv „în nori” – Serverless WebAssembly
www.smashingmagazine.com/2019/08/beyond-browser-serverless-webassembly/
instrumente
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Serverless WebAssembly – exemplificări:
funcții serverless Node.js încărcând module wasmexploatate pe IBM Cloud Functions ce recurge la
platforma deschisă Apache OpenWhisk(James Thomas, august 2019)
jamesthom.as/blog/2019/08/06/serverless-and-webassembly-modules/
funcții serverless WebAssembly generate cu Rust și executate pe platforma Cloudflare Workers
developers.cloudflare.com/workers/templates/boilerplates/rustwasm/
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Rularea neautorizată de cod wasm poate conduce la probleme de securitate:
buffer overflow cauzând XSS (Cross-Site Scripting),execuție pe server (Server-Side Remote Code Execution),includere de malware (e.g., cryptocurrency mining) etc.
www.virusbulletin.com/virusbulletin/2018/10/dark-side-webassembly
instrumente
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Incidente reale vizând WebAssembly:
“over50 %of all sites using WebAssembly apply it for malicious deeds, such as mining and obfuscation”
M. Musch et al., “New Kid on the Web: A Study on the Prevalence of WebAssembly in the Wild”, DIMVA 2019
www.tu-braunschweig.de/Medien-DB/ias/pubs/2019-dimva.pdf
R. Neumann & A. Toro, In-browser mining: Coinhive and WebAssembly (aprilie 2018)
www.forcepoint.com/blog/x-labs/browser-mining-coinhive-and-webassembly
WebKit: Info leak in WebAssembly Compilation (martie 2018)bugs.chromium.org/p/project-zero/issues/detail?id=1545
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
instrumente
resurse de interes:www.webassemblyman.com
hacks.mozilla.org/category/webassembly/
github.com/mbasso/awesome-wasm
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Alte limbaje – compilate în JS:
CoffeeScript (Jeremy Ashkenas, 2009)coffeescript.org
dialecte CoffeeScript:CoffeeScriptRedux – github.com/michaelficarra/CoffeeScriptRedux
LiveScript – livescript.net
instrumente
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Alte limbaje – compilate în JS:
TypeScript (Microsoft, din 2012)www.typescriptlang.org
instrumente + resurse: github.com/dzharii/awesome-typescript
instrumente
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Alte limbaje – compilate în JS:
TypeScript
a se considera și inițiativa AssemblyScript(TypeScriptWebAssembly via compilatorul Binaryen):
docs.assemblyscript.org
blog.logrocket.com/the-introductory-guide-to-assemblyscript/
instrumente
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Portarea altor aplicații în JavaScript
Emscripten – compilator LLVM generând cod JS/wasm(e.g., programe C sau C++ care se compilează
în WebAssembly, plus cod OpenGL în WebGL)
kripken.github.io/emscripten-site/
instrumente
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Portarea altor aplicații în JavaScript
JSIL – compilator care transformă codul CIL (Common Intermediate Language) al aplicațiilor .NET
în programe JavaScript rulând în browser
jsil.org
instrumente
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Portarea altor aplicații în JavaScript
ClosureScript – ClosureJS: github.com/clojure/clojurescript
PyPy.js – Pythonasm.js: pypyjs.org
Scala.js – compilează programele Scala în cod JSwww.scala-js.org www.lihaoyi.com/hands-on-scala-js/
PureScript – www.purescript.org
instrumente
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
N-am putea recurge labiblioteci/framework-uri JS specifice?
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
colecții de (micro-)biblioteci JS: www.javascripting.com
jster.netmicrojs.com
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
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
profs.in
fo.uaic.ro/~busa
co
Biblioteci/framework-uri populareconform 2018.stateofjs.com
front-end: React, Vue.js, Angular, Preact, Ember, Polymeraltele: Svelte, Aurelia, Hyperapp, Backbone, Mithril,…
data layer: Redux, GraphQL, Apollo, MobX, Relay (Modern)altele: VueX, ember-data, NgRx, RxJS etc.
testing: Jest, Mocha, Jasmine, Enzyme, Karma, Storybookaltele: Cypress, QUnit, Tape, Chai, TestCafe, Protractor,…
mobile & desktop: Electron, React Native, Cordova, Ionicaltele: Flutter, Weex, Quasar, Expo etc.
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Biblioteci/framework-uri specializate – exemple:
prelucrare/generare de date în diverse formate: Js Barcode, jsPDF, JS Xlsx, MathJax, Numeric, Papa Parse, pdfmake, Psd.js, Qrcodejs, SheetJS, STDlib, Superstruct
baze de date: Alasql, Juggling DB, Knex, Local Forage, Loki JS, PouchDB, Typeorm, Watermelon Db,…
internaționalizare: Globalize, i18next, Lingui, Polyglot
suport pentru OAuth: hello.js, JSO, Salte Auth
proiectarea interfeței cu utilizatorul: Anypixel, Ant Design,Ace, Deck.js, Materialized, Reveal,
Styled Components, Semantic UI, Slate etc.
dezvoltare de jocuri: Cannon, Easystar, LiquidFun, Melon, P2.js, Phaser, Pixi.js, Whitestorm,…
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Biblioteci/framework-uri specializate – exemple:
rețea: Axios, Faye, Request, PeerJS, SockJS, Superagent,…
arhivare: JSZip, LZ String, ZIP.js
prelucrare audio: Howler, Midi.js, SoundManager2, Tone.js
manipulare de imagini: Anypixel, Bonsai, Caman,Cytoscape, Dagre, Drawingboard, Fabric.js,
MetricsGraphics.js, Nude.js, Paper.js, Plotfly, Processing.js
învățare automată: Clmtrackr, Ml5, TensorFlow.js, TFjs,…
rețele neuronale: Brain.js, Convnet.js, Keras.js, Synaptic
hardware (e.g., roboți, IoT, imprimante 3D): Cylon, IoTjs, Johnny-five, Maker.js, Ruff.io etc.
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Nu putem adopta diverse șabloane de proiectare pentru JavaScript?
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~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
profs.in
fo.uaic.ro/~busa
co
Ș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 (2017)
www.addyosmani.com/resources/essentialjsdesignpatterns/book/
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
flux de activități într-o aplicație MV*
la nivel de client(A. Osmani, 2013)
Router
View DOM
Collectionof Models
Data Source(e.g., DB, API,…)
HTTP Request
DOMupdates
syncs
modelupdates
modelevents
DOMevents
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Șabloane de proiectare MV*
exemplificări de implementări JS:
Dusan Gledovic, Basic JS MVC Implementation (2015)gist.github.com/gschema/4157554
Camilo Reyes, The MVC Design Pattern in Vanilla JavaScript (2017)
www.sitepoint.com/mvc-design-pattern-javascript/
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Șabloane de proiectare MV*
utilizare pragmatică via biblioteci/framework-uri:
Angular – angular.io
Aurelia – aurelia.io
Backbone – backbonejs.org
Backbone Marionette – marionettejs.com
Ember.js – emberjs.com
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Anumite biblioteci/framework-uri pot fi specializate,tratând doar un anumit aspect al MVC/MVVM
privind dirijarea: router – github.com/kevindurb/router
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Anumite biblioteci/framework-uri pot fi specializate,tratând doar un anumit aspect al MVC/MVVM
pentru View – exemple: Knockout – knockoutjs.com
Preact – preactjs.com
React – reactjs.org
Vue – vuejs.org
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Anumite biblioteci/framework-uri pot fi specializate,tratând doar un anumit aspect al MVC/MVVM
vizând partea de Model – exemplificări:BreezeJS – www.getbreezenow.com/breezejs
Immutable – immutable-js.github.io/immutable-js/
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Șabloane de proiectare specifice
aspect de interes: modularizarea codului
în cazul JS clasic, specificarea modulelor se poate realizavia limbajul AMD (Asynchronous Module Definition)
github.com/amdjs/amdjs-api
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Șabloane de proiectare specifice
aspect de interes: modularizarea codului
în cazul JS clasic, specificarea modulelor 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
profs.in
fo.uaic.ro/~busa
co
Șabloane de proiectare specifice
aspect de interes: modularizarea codului
alternativ, se poate recurge la CommonJSun format de declarare a modulelor și pachetelor
reutilizabile la nivel de server
wiki.commonjs.org/wiki/CommonJS
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
abordare fără module (monolitică)
abordare modulară (pachete + module ES/wasm)
fiecare fragment de cod este implicit global
pachetele expun interfețe publiceușor de înțeles
numele (clase, funcții, constante,…) sunt globale
numele sunt locale pachetului ce le definește
acces direct laimplementarea efectivă
detaliile de implementare sunt ascunse
dependența de ordinea încărcării fișierelor
ordinea încărcării fișierelor nu are importanță
dependențele de cod sunt implicite
dependențele de cod sunt declarate explicit
relații nespecificate între fișiere & module
fiecare fișier expune un modul unic
dependențele depind de contextul rulării
se permite rularea din linia de comandă (headless browser)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Șabloane de proiectare specifice
aspect de interes: modularizarea codului
pentru alte resurse de interes, a se consultaNicolás Bevacqua, Module Design, 2018
ponyfoo.com/articles/module-design
Serg Hospodarets, Native JavaScript modules, 2018 slides.com/malyw/native-js-modules
ES6 modules for Web usage:github.com/webmodules
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
(în loc de) pauză
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Șabloane de proiectare specifice
aspect de interes: SPA (Single Page Applications)
rescrierea dinamică a conținutului paginii Web – pe baza transferului asincron al datelor –
în urma interacțiunii cu utilizatorul
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
structura de bază a unei SPAde studiat Mikito Takada, Single Page Apps in Depth (2017)
singlepageappbook.com
ⵄ DOM
▣ view
▦model
⧆ template
🛢 storage
☄ events
changes
observes
renders
queries &writes to
emits
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
write-only DOMnu sunt preluate date din DOM
managementul stării se face independent de DOM
ⵄ DOM
▣ view
▦model
⧆ template
🛢 storage
☄ events
changes
observes
renders
queries &writes to
emits
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
models are the single source of truthmodelele reprezintă toate datele/stările aplicației Web și
sunt păstrate în memorie
ⵄ DOM
▣ view
▦model
⧆ template
🛢 storage
☄ events
changes
observes
renders
queries &writes to
emits
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
views observe model changesview-urile reflectă conținutul modelelor și
primesc notificări de actualizare din partea modelelor
ⵄ DOM
▣ view
▦model
⧆ template
🛢 storage
☄ events
changes
observes
renders
queries &writes to
emits
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
decoupled modules that expose small external surfacesarhitectura aplicației este compusă din
sub-sisteme (module) independente, specializatepachete expunând o interfață simplă publică
ⵄ DOM
▣ view
▦model
⧆ template
🛢 storage
☄ events
changes
observes
renders
queries &writes to
emits
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
minimizing DOM dependent-codeminimizarea și izolarea codului JS
vizând manipularea arborelui DOM
ⵄ DOM
▣ view
▦model
⧆ template
🛢 storage
☄ events
changes
observes
renders
queries &writes to
emits
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
la nivel de front-end, fiecare componentă interactivă (e.g., buton, player, câmp de editare) poate să se afle într-o anumită stare (isPressed, isPlaying, isTyping,…)
acestă stare nu este neapărat dependentă de back-end
model components
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
SPA (Single Page Applications)
problemă: redarea/împrospătarea eficientă a conținutului
(toate componentele interactive să fie sincronizate)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
SPA (Single Page Applications)
problemă: redarea/împrospătarea eficientă a conținutului
(toate componentele interactive să fie sincronizate)
operațiile de alterare (mutation) a DOM-ului sunt costisitoare pentru aplicații Web complexe
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
SPA (Single Page Applications)
necesitate:managementul stării globale a aplicației (application state)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
SPA (Single Page Applications)
managementul stării aplicației la momentul rulării
URL↔stare
starea curentă a view-ului e dependentă de URL uzual, de #fragment-identifier
tools.ietf.org/html/rfc3986#section-3.5
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Managementul stării: abordare arhitecturalăFlux (Facebook) – facebook.github.io/flux/
datele sunt procesate via fluxuri unidirecționale
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Managementul stării: biblioteci/framework-uri JS
MobX – simple, scalable state managementmobx.js.org
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Managementul stării: biblioteci/framework-uri JS
Redux – managementul centralizat al stării aplicației(a predictable state container)
redux.js.org
a se experimenta și Redux Toolkit și React Redux
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Managementul stării: biblioteci/framework-uri JS
Vuex – managementul stării în aplicații create cu Vue.js(a state management pattern + library for Vue.js)
vuex.vuejs.org
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
SPA (Single Page Applications)
definirea unor componente ce ulterior pot fi inițializate
suport pentru reutilizare
aceste componente pot fi încărcate asincron(eventual, la cerere) via module
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
componente majore ale unei SPA (Patrick Ackerman, 2017)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
SPA (Single Page Applications)
uzual, se bazează pe paradigma de programare (funcțională) reactivă
(FRP – functional reactive programming)
aspecte formale în C. Elliot & P. Hudak, Functional Reactive Animation, ICFP 1997
conal.net/papers/icfp97/
github.com/conal/talk-2015-essence-and-origins-of-frp
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
SPA (Single Page Applications)
programare (funcțională) reactivă
paradigmă declarativă vizând fluxuri de date prelucrate asincron
(event stream, observable)
a stream a sequence of ongoing events ordered in timegist.github.com/staltz/868e7e9bc2a7b8c1f754
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
orice modificare a valorii unei structuri de date ce poate fi observată (Observable) determină propagarea
unui eveniment ce poate fi tratat asincron (via Promise) de entitățile ce depind de această structură
www.sitepoint.com/graphql-react-native-getting-started/
synchronous asynchronousm
ult
iple
sin
gle
Generator Observable
PromiseFunction
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
SPA (Single Page Applications)
programare (funcțională) reactivă
studii de caz concrete + resurse:www.infoq.com/reactive-programming/
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Șabloane de proiectare specifice
aspect de interes: comunicare prin paradigma publish/subscribe
WebSub (W3C Recommendation, 2018): www.w3.org/TR/websub/
biblioteci:AmplifyJS – amplifyjs.com
PubSubJS – github.com/mroderick/PubSubJS
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Asigurarea interacțiunii cu utilizatorul (eventual, multi-platformă)
AngularAurelia
Ember.jsMeteor.js
MithrilReact
Turbine
de explorat și One Page Love – onepagelove.com
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
JavaScript pe platforme multiple
instrumente multi-platformă pentru creareade aplicații hibride (Web + native)
Apache Cordova (ex-PhoneGap) – cordova.apache.org
Electron – electronjs.org
Flutter – flutter.dev
Ionic React – ionicframework.com
NativeScript – www.nativescript.org
React Native – facebook.github.io/react-native/
Tabris.js – tabrisjs.com
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
JavaScript pe platforme multiple
framework-uri și biblioteci JavaScript specializate
e.g., interacțiune prin gesturi:Hammer.js – hammerjs.github.io
iScroll – github.com/cubiq/iscroll
Slideout.js – slideout.js.org
altele la www.javascripting.com/mobile-and-touch/
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
JavaScript pe platforme multiple
recurgerea la API-uri JavaScript oferite de platformă
Amazon Firedeveloper.amazon.com/apps-and-games/services-and-apis
Microsoft Windows Universal Applicationsdocs.microsoft.com/en-us/windows/uwp/
Tizendeveloper.tizen.org/category/tags/javascript
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
coExtinderi
JS++ (garantează tipul variabilelor – type guarantees)www.onux.com/jspp/
Objective-J (modelat după Objective-C, integrat în framework-ul Cappuccino)
www.cappuccino.dev
PLV8 (extensie JavaScript pentru PostgreSQL)plv8.github.io
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
instrumente
www.codefellows.org/blog/a-list-of-foundational-javascript-tools
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
episodul viitor: suita de tehnologii HTML5
