SlideShare a Scribd company logo
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Full-Stack Web Development
💡
aplicații Web: aspecte arhitecturale
Dr. Sabin Corneliu Buraga – profs.info.uaic.ro/~busaco/
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
„Fiecare vis începe cu un visător.”
Harriet Tubman
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
De ce dezvoltăm aplicații Web?
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Scop
crearea de produse digitale
(recurgând la tehnologii Web)
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Scop
crearea de produse digitale
(recurgând la tehnologii Web)
product as functionality
versus
product as information
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
adaptare după Crumlish & Malone, 2009
scopuri
psihologie
comportament
  💡  
interacțiune
controale
limbi naturale
funcționalități
tehnologii
algoritmi
indexare
structurare
meta-date
instrumente
metodologii
stimuli
utilizatori interfață software conținut creatori
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Goal
Building successful
digital products
actori principali:
designers
technologists
management
Alan Cooper et al.,
About Face (4th Edition), 2014
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Care sunt mijloacele de interacțiune
dintre utilizatori și o aplicație?
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
vezi și cursul Human-Computer Interaction de la master
profs.info.uaic.ro/~busaco/teach/courses/hci/
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Interacțiunea dintre utilizator(i) și software
se realizează via o interfață (user interface)
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Interacțiunea dintre utilizator(i) și software
se realizează via o interfață (user interface)
API (Application Programming Interface)
versus
UI (User Interface)
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Aplicații Web
colecție interconectată de pagini Web
cu conținut generat dinamic,
oferind o funcționalitate specifică
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Aplicații Web
prezintă o interfață cu utilizatorul exploatabilă
la nivel de client (i.e. navigator Web)
recurg la standarde/formate de date deschise
(HTTP, URL, HTML, CSS, JSON, SVG, XML, RDF,…)
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
client Web server Web
conținut
static
conținut
dinamic
conținut
static
conținut
dinamic
date
locale
JavaScript server de aplic., framework
HTTP
transfer
asincron
via o interfață Web, utilizatorul interacționează cu clientul
(front-end) și inițiază acțiuni – e.g., cereri HTTP (a)sincrone
– ce vor fi executate pe diverse componente implementate
la nivel de server (back-end), pentru a obține date
☁
date externe
(serviciu Web)
front-end back-end
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Aplicații Web
interfața Web
browser – interacțiune limitată via controale HTML
hipertext/hipermedia
RIA (Rich Internet Applications): în prezent, HTML5
interacțiune facilitată de transfer (a)sincron: Ajax et al.
audiență globală
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Așteptările utilizatorilor referitoare la interfața Web
(Peter Morville)
utilă – useful
utilizabilă – usable
apreciată – valuable
dezirabilă – desirable
disponibilă – findable
accesibilă – accessible
credibilă – credible
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Interfața – desktop, Web,… – cu utilizatorul
parte a aplicației – desktop, Web, miniaturală,… –
care permite utilizatorilor să-și exprime intențiile
de operare asupra software-ului și să interpreteze
rezultatele acțiunilor efectuate de mașină
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Interfaţa – desktop, Web,… – cu utilizatorul
percepută nu doar ca parte vizuală a software-ului
din punctul de vedere al utilizatorului,
reprezintă întregul sistem – aplicația per se
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Interfaţa – desktop, Web,… – cu utilizatorul
utilitate (utility)
oferirea facilităților dorite de utilizator
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Interfaţa – desktop, Web,… – cu utilizatorul
utilizabilitate (usability)
cât de ușor și de plăcut pot fi folosite facilitățile?
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Interfaţa – desktop, Web,… – cu utilizatorul
utilă (useful)
usability + utility
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
UX (User Experience)
modul de percepție a produsului/serviciului
de către persoanele care-l folosesc
și plăcerea/satisfacția înregistrată
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Context
garrettdimon.com/pages/improving_interface_design
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Care sunt arhitecturile software tipice
pe baza cărora sunt dezvoltate
aplicațiile Web de anvergură?
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Calitatea aplicațiilor Web este influențată
de arhitectura pe care se bazează
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
start with needs
do less
design with data
do the hard work to make it simple
iterate. then iterate again
build for inclusion
understand context
build digital services, not Websites
be consistent, not uniform
make things open; it makes things better
arhitecturi: principii
exemplu pentru gov.uk – Paul Downey & David Heath (2013)
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
evoluția manierei de
dezvoltare a produselor
digitale (software)
Alan Cooper et al., 2014
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Complexitatea aplicațiilor actuale este mai mare
decât a produselor tangibile (fizice)
“If your UI even vaguely resembles an airplane cockpit,
you’re doing it wrong.”
John Gruber
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Dezvoltarea unei arhitecturi software ia în calcul:
cerințe funcționale
impuse de clienți,
vizitatori,
concurență,
factori decizionali (management),
evoluție socială/tehnologică,
…
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Atragerea experților
– subject matter expert (SME) sau domain expert –
în domeniul problemei
ce trebuie soluționată de aplicația Web
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Dezvoltarea unei arhitecturi software ia în calcul:
factori calitativi
utilizabilitate
performanță
securitate
refolosire a datelor/codului
etc.
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Dezvoltarea unei arhitecturi software ia în calcul:
aspecte tehn(olog)ice
platforma hardware/software (sistem de operare)
infrastructura middleware
servicii disponibile – e.g., via API-uri publice
limbaj(e) de programare
sisteme tradiționale (legacy)
…
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Inițial:
oferirea funcționalităților esențiale – less is more
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Inițial:
oferirea funcționalităților esențiale – less is more
Versiuni ulterioare:
extinderea aplicației Web
– uzual, via o interfață de programare (API) publică,
încurajând dezvoltarea de soluții propuse de utilizatori
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Dezvoltarea unei arhitecturi software ia în calcul:
experiența
recurgerea la arhitecturi și platforme existente
șabloane de proiectare (design patterns)
soluții „la cheie”: biblioteci, framework-uri, instrumente,…
management de proiecte
etc.
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Metodologii moderne – exemple:
aim42 – practici și șabloane privind evoluția, mentenanța,
migrarea și îmbunătățirea sistemelor software
aim42.github.io
12 Factor App – vizând aplicațiile aliniate
paradigmei SaaS (Software As A Service)
12factor.net
12 Factor CLI Apps – aplicații în linia de comandă (J. Dickey, 2018)
medium.com/@jdxcode/12-factor-cli-apps-dd3c227a0e46
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
client(i)
mandatar (proxy)
zid de protecție (firewall)
intermediar(i) (middleware)
server(e) Web
server(e) de aplicații Web
cadre de lucru, biblioteci, alte componente
server(e) de stocare persistentă – e.g., baze de date
server(e) de conținut multimedia
server(e) de management al conținutului – e.g., CMS, wiki
aplicații/sisteme tradiționale (legacy)
„ingrediente” tipice
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
client(i)
mandatar (proxy)
zid de protecție (firewall)
intermediar(i) (middleware)
server(e) Web
server(e) de aplicații Web
cadre de lucru, biblioteci, alte componente
server(e) de stocare persistentă – e.g., baze de date
server(e) de conținut multimedia
server(e) de management al conținutului – e.g., CMS, wiki
aplicații/sisteme tradiționale (legacy)
eventual, recurgând la servicii în „nori” – cloud computing
partajarea la cerere a resurselor de calcul și a datelor cu alte
calculatoare/dispozitive pe baza tehnologiilor Internet (găzduire,
infrastructură scalabilă, procesare paralelă, monitorizare,…)
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Esențialmente, de considerat:
preluarea și dirijarea cererilor – dispatch
oferirea funcționalităților de bază – core services
asocierea dintre construcții/abstracțiuni software
(e.g., obiecte) și modele de date – mapping
managementul datelor – data
monitorizarea și evaluarea sistemului – metrics
adaptare după Matt Ranney, “What I Wish I Had Known
Before Scaling Uber to 1000 Services”, GOTO Chicago 2016
highscalability.com/blog/2016/10/12/lessons-learned-from-scaling-uber-to-2000-engineers-1000-ser.html
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
arhitecturi web
Stratificate (layered)
Conduse de evenimente (event-driven)
Extensibile (microkernel / plug-in)
Folosind microservicii (microservices)
„În nori” (space-based, cloud)
conform M. Richards, Software Architecture Patterns, O’Reilly, 2015
www.oreilly.com/programming/free/files/software-architecture-patterns.pdf
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
arhitecturi web
Stratificate (layered)
N-tier architecture – abordare de facto
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
aplicație Web = interfață + program + conținut (date)
trei strate (3-tier application)
Client Server de aplicații Stocare
(interface) (application) (persistence)
Internet
(Web)
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Blat / Baza de date
Jeleu / Funcționalitate
Cremă / Rol specific
Frișcă / Marcaje
Fructe / Prezentare
C. Henderson, Scalable Web Architectures, Web 2.0 Expo, 2007: iamcal.com/talks/
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
arhitecturi web
Stratificate (layered): principii
demarcarea responsabilităților (separation of concerns)
fiecare strat are un rol bine-stabilit, componentele
unui strat vizând funcționalitățile acestuia
modelul de structurare a datelor este separat de maniera
de procesare (controlul aplicației, business logic) și
de modul de prezentare a acestora (interfața Web)
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
arhitecturi web
Stratificate (layered): principii
izolare (layers of isolation)
modificările operate la un anumit strat nu au impact
sau nu afectează componentele din alt strat
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
arhitecturi web
Stratificate (layered): principii
architecture sinkhole anti-pattern
fluxul de cereri traversează fiecare strat, fără a se efectua
procesări semnificative în cadrul acestuia
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
arhitecturi web
Conduse de evenimente (event-driven)
uzual în contextul aplicațiilor distribuite asincrone
scalabilitate
topologii principale:
mediator
sau
broker
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
arhitecturi web
Conduse de evenimente (event-driven)
mediator
evenimente procesate
în mai mulți pași,
necesitând orchestrare
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
arhitecturi web
Conduse de evenimente (event-driven)
broker – fluxul de mesaje este distribuit componentelor
de procesare a evenimentelor
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
arhitecturi web
Extensibile (microkernel / plug-in)
sistem principal (core system)
+
module independente de tip extensie (plug-in)
o astfel de arhitectură poate fi inclusă/utilizată
ca parte a altei abordări arhitecturale
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
arhitecturi web
Folosind microservicii (microservices)
componente separate, distribuite
(separately deployed units)decuplare maximă
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
arhitecturi web
Folosind micro-servicii (microservices)
abordări:
bazate pe API-uri (API-based)
aplicație recurgând la REST (application REST-based)
mesagerie centralizată (centralized messaging)
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
arhitecturi web
Folosind microservicii (microservices)
API-based
aplicația Web expune servicii individuale, punctuale,
de sine-stătătoare (self-contained) via un API
fine-grained service
components
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
arhitecturi web
Folosind microservicii (microservices)
application REST-based
cererile sunt recepționate tradițional (nu prin API)
fiecare funcționalitate este accesată intern via REST
coarse-grained service
components
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
arhitecturi web
Folosind microservicii (microservices)
centralized messaging
accesare a componentelor interne via un broker „ușor”
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
arhitecturi web
„În nori” (space-based, cloud)
consideră și rezolvă problemele vizând scalabilitatea și
concurența unui volum impredictibil de mare de cereri
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
arhitecturi web
„În nori” (space-based, cloud)
consideră și rezolvă problemele vizând scalabilitatea și
concurența unui volum impredictibil de mare de cereri
tuple space
datele aplicației sunt păstrate în memorie și replicate
de toate unitățile de procesare active
fără stocare centralizatădistributed shared memory
wiki.c2.com/?TupleSpace
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
arhitecturi web
„În nori” (space-based, cloud)
middleware virtualizat
include componente controlând sincronizarea datelor,
procesarea cererilor,
accesul la platforma de execuție (deployment),…
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
arhitecturi web
„În nori” (space-based, cloud)
unitate de procesare
reprezentată de un (micro-)serviciu Web
sau o componentă software tradițională la nivel de backend
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
anumite funcționalități pot fi gestionate
„în propria ogradă” (on-premises)
sau de un furnizor de servicii disponibile „în nori”
conform (Eizadirad, 2017)
www.linkedin.com/pulse/iaas-paas-saas-explained-compared-arsalan-eizadirad
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
A. Barron, Pizza As A Service (2014)
www.linkedin.com/pulse/20140730172610-9679881-pizza-as-a-service
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
D. Ng, SaaS, PaaS and IaaS explained in one graphic (2017)
m.oursky.com/saas-paas-and-iaas-explained-in-one-graphic-d56c3e6f4606
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
P. Kerrison, Pizza As A Service 2.0 (2017)
www.paulkerrison.co.uk/random/pizza-as-a-service-2-0
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Prin ce mijloace poate fi implementată
o aplicație Web?
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Server de aplicații Web
scop:
eficientizarea proceselor de dezvoltare
a aplicațiilor Web de anvergură
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Server de aplicații Web
simplifică invocarea de programe (script-uri)
generarea de conținut dinamic pe partea de server
(re)vezi prezentarea despre inginerie Web:
profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html#week3
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Server de aplicații Web
poate fi integrat în unul/mai multe servere Web
de asemenea, poate oferi propriul server Web
sau mediu de execuție
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Server de aplicații Web
poate încuraja sau impune o viziune arhitecturală
privind dezvoltarea de aplicații Web
situație tipică:
MVC ori variații (Herberto Graca, 2017)
herbertograca.com/2017/08/17/mvc-and-its-variants/
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
brow-
ser
prezen-
tare
proce-
sare
abstrac-
tizare
date
pagini <Web/>
HTML, CSS,…
server „gras”
(fat)
client „prostuț”
(dumb)
arhitectura aplicațiilor Web:
abordarea MV* tradițională
www.leaseweblabs.com/2013/10/api-first-architecture-fat-vs-thin-server-debate/
frontend backend
frecvent, aplicație monolitică
(e.g., un WAR: 2.2 M linii de cod, 418 .jar-uri,
startare în 12 min. – conform plainoldobjects.com)
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Framework (cadru de lucru)
facilitează dezvoltarea de aplicații Web complexe,
simplificând unele operații uzuale
(e.g., acces la baze de date, caching, generare de
cod, management de sesiuni, control al accesului)
și/sau încurajând reutilizarea codului-sursă
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Framework-uri JavaScript
la nivel de server (back-end) – specifice Node.js
Express
Hapi
Koa
LoopBack
Meteor
Next.js
…
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Framework-uri JavaScript
la nivel de client (front-end) – rulând în browser
Angular
Aurelia
Backbone
Ember
MithrilJS
Vue.js
…
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Bibliotecă Web (library)
colecție de resurse computaționale reutilizabile
– i.e., structuri de date + cod –
oferind funcționalități (comportamente) specifice
implementate într-un limbaj de programare
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Bibliotecă Web (library)
colecție de resurse computaționale reutilizabile
– i.e., structuri de date + cod –
oferind funcționalități (comportamente) specifice
implementate într-un limbaj de programare
poate fi referită de alt cod-sursă (software):
server de aplicații, framework, bibliotecă,
serviciu, API ori componentă Web
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Biblioteci JS cu acces liber la codul-sursă
exemple:
CesiumJS
D3.js
Leaflet
Lodash
PDF.js
Raphaël
React
Sgvizler
TensorFlow.js
Three.js
…
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Serviciu Web
software – utilizat la distanță de alte aplicații/servicii –
oferind o funcționalitate specifică
SOA (Service Oriented Architecture)
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Serviciu Web
software – utilizat la distanță de alte aplicații/servicii –
oferind o funcționalitate specifică
SOA (Service Oriented Architecture)
implementarea sa nu trebuie cunoscută
de programatorul ce invocă serviciul
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Micro-serviciu
implementează o funcționalitate specifică,
oferită la nivel de unic proces
self-contained system
componentă la nivel de backend dezvoltată cu scopul
de a fi înlocuită, nu de a fi reutilizată
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
small
each running in its own process
lightweight communication mechanisms (usual, HTTP)
built around business capabilities
independently deployable
minimum of centralized management
may be written in different programming languages
may use different data storage mechanisms
caracteristici ale micro-serviciilor conform
James Lewis & Martin Fowler, Microservices (2014)
martinfowler.com/articles/microservices.html
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
micro-serviciu
modularitate, descentralizare și evoluție permanentă
exemple de bună practică: microservices.io
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Uzual, arhitecturile ce recurg la micro-servicii
nu includ componente middleware
și nu oferă suport pentru abstractizarea interacțiunii
dintre producătorii și consumatorii de servicii
(contract decoupling)
μSOA – Microservice Oriented Architecture
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
arhitectură bazată
pe servicii Web
arhitectură recurgând
la microservicii
Z. Dehghani, How to break a Monolith into Microservices (2018)
martinfowler.com/articles/break-monolith-into-microservices.html
cazuri concrete: Amazon, Groupon, Netflix,…
de studiat prezentările lui Stefan Tilkov: speakerdeck.com/stilkov
frontend
(FE)
ser-
vice
ser-
vice
ser-
vice
DB
client
ser-
vice
DB
FE FE FE
client
DB
ser-
vice
ser-
vice
DB
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
API (Application Programming Interface)
accesul la un (micro-)serviciu are loc uzual
pe baza unei interfețe de programare a aplicației – API
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
API (Application Programming Interface)
“any well-defined interface that defines
the service that one component, module, or application
provides to other software elements”
(de Souza et al., 2004)
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Componentă software concepută și invocată
via tehnologiile Web actuale
(URI, HTTP, formate de date: JSON, XML)
poate fi dezvoltată conform unui stil arhitectural
e.g., REST (REpresentational State Transfer)
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
De la aplicații la API-uri și servere de aplicații
Brian Mulloy, Web API Design, Apigee, 2016
docs-apis.apigee.io/files/Web-design-the-missing-link-ebook-2016-11.pdf
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
API public
(disponibil pe baza unei licențe de utilizare)
versus
API privat
(pentru uz intern)
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
browser
modern
prezen-
tare
proce-
sare
abstrac-
tizare
date
recurgere la API
JSON, XML, CSV,…
server „slab”
(thin)
client Web modern
(HTML5)
aplicație JavaScript
(eventual, via app store)
API: abordare client – JavaScript
browser Web pe calculatoare
convenționale, dispozitive
mobile și altele
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
browser
modern
prezen-
tare
proce-
sare
abstrac-
tizare
date
recurgere la API
JSON, XML, CSV,…
server „slab”
(thin)
client Web modern
(HTML5)
aplicație JavaScript
(eventual, via app store)
implementarea aplicației JavaScript poate recurge la
biblioteci, framework-uri, componente specifice
e.g., Angular, React, Vue
API: abordare client – JavaScript
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
sistem
de
operare
prezen-
tare
proce-
sare
abstrac-
tizare
date
recurgere la API
JSON, XML, CSV,…
server „slab”
(thin)
client nativ modern
(smart device)
aplicație nativă
C#, Java, Obj-C, Swift,…
(uzual, via app store)
API: aplicații native
desktop și/sau mobile,
smart TV, home appliance,
dispozitiv ambiental
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
sistem
de
operare
prezen-
tare
proce-
sare
abstrac-
tizare
date
recurgere la API
JSON, XML, CSV,…
server „slab”
(thin)
client nativ modern
(smart device)
aplicație nativă
C#, Java, Obj-C, Swift,…
(uzual, via app store)
implementarea aplicației native poate recurge la
biblioteci, framework-uri, componente specifice
e.g., Apache Cordova, Flutter, Ionic, React Native, NW.js
API: aplicații native
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
brow-
ser
prezen-
tare
proce-
sare
abstrac-
tizare
date
API
JSON
et al.
server „slab”
(thin)
client Web
„prostuț” (dumb)
server de
prezentare
pagini
HTML
www.leaseweblabs.com/2013/10/api-first-architecture-fat-vs-thin-server-debate/
API: abordare bazată pe intermediari
book reader
chioșc informativ
automobil
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
API: în contextul serverless
Aplicația depinde semnificativ de
componente externe, disponibile în „nori”
(micro-)servicii expuse via API

abordarea serverless
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Serverless
strat de abstractizare a accesului la resursele
unei platforme de tip cloud
Mike Roberts (2018)
martinfowler.com/articles/serverless.html
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
brow-
ser
control
proce-
sare
client
modern
BaaS
func-
ționa-
litate1
func-
ționa-
litate2
auten-
tificare
☁
BaaS = (Mobile) Backend As A Service FaaS = Functions As A Service
FaaS
căutare
procesare
comenzi
BaaS
comenzi
produse
acces
la API
☁
☁
☁
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
FaaS – Functions As A Service
funcții (cloud functions) implementând funcționalități
expuse consumatorului de servicii
as small as possible
uzual, implementări sub 100 de linii de cod
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
FaaS – Functions As A Service
executate – la nivel de server – independent și asincron,
fără a cauza efecte colaterale
declanșate de evenimente
utilizatorul nu e preocupat de managementul resurselor
și alte sarcini
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
BaaS – Backend As A Service
încapsulează servicii de infrastructură ce implementează
activități non-funcționale
(autentificare, autorizare, jurnalizare, monitorizare etc.)
private – nu sunt expuse în exterior
pot fi partajate de serviciile interne
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Serverless computing = FaaS + BaaS
a se consulta și articolul
Sabin Buraga, Aspecte arhitecturale
vizând dezvoltarea de aplicații serverless (2019)
itransfer.space/aspecte-arhitecturale-vizand-dezvoltarea-de-aplicatii-serverless/
resurse + soluții software:
github.com/anaibol/awesome-serverless
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Cum poate fi descrisă interfața unui API?
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Modalități de descriere abstractă:
OpenAPI Specification (ex-Swagger) – openapis.org
RAML (RESTful API Modeling Language) – raml.org
API Blueprint – apiblueprint.org
alte resurse de interes:
github.com/Kikobeats/awesome-api
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
OpenAPI Specification
soluție modernă de a declara – independent de platformă –
interfața publică a unui API REST
versiunea curentă: OpenAPI 3.0.2 (septembrie 2019)
formate folosite: JSON și/sau
YAML (Yet Another Markup Language)
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
OpenAPI Specification
bibliotecă JS de procesare:
Spectral (JavaScript, TypeScript)
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
OpenAPI Specification
creare de servicii (puncte terminale – end-points)
pe baza unui document OpenAPI:
Exegesis (Node.js)
Fusio (PHP, JavaScript)
Vert.x (Java, Kotlin, JS, Ruby, Scala,…)
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
OpenAPI Specification
generator de cod – exemplificare:
BaucisJS (Node.js)
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
API: descriere abstractă
{
"openapi": "3.0.0",
"paths": {
"/resource": {
"get": {
"operationId": "service",
"parameters": [ {
"name": "parameter",
"in": "query",
"schema": { "type" : "string" }
} ],
"responses": {
"200": {
"description": "Success",
"schema": {
"$ref":"#/definitions/Response"
}
}
}
}
}
„scheletul” unui document
OpenAPI specificând un API
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
editarea unei specificații de API
proiectul UReR (V. Vîrlan et al., 2017)
github.com/VirlanValentin/WADe_UReR
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
caz concret: Wowza Streaming Engine REST API
specificația OpenAPI editată cu {API Studio}: apistudio.io
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
SDK (Software Development Kit)
încapsulează funcționalitățile API-ului într-o bibliotecă
(implementată într-un anumit limbaj de programare,
pentru o platformă software/hardware specifică)
API façade pattern
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
SDK (Software Development Kit)
încapsulează funcționalitățile API-ului într-o bibliotecă
(implementată într-un anumit limbaj de programare,
pentru o platformă software/hardware specifică)
exemplu: Octokit (Go, Java, .NET, Node.js, Ruby,…)
oferit de Github – developer.github.com/v3/libraries/
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Mash-ups
combinarea – la nivel de client și/sau server –
a datelor ce provin din surse (situri) multiple,
oferindu-se o funcționalitate/experiență nouă
„curentul” SaaS (Software As A Service)
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Mash-ups
combinare – surse de date (eterogene) multiple
agregare – analizarea datelor
e.g., via machine/deep learning, deducții automate,…
vizualizare – redarea datelor agregate
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
mash-ups
Selfiexploratory – selfiecity.net/selfiexploratory/
Nukemap – nuclearsecrecy.com/nukemap/
Coinorama – github.com/coinorama/
PopURLS – popurls.com
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Web component
parte a unei interfețe Web cu utilizatorul
ce încapsulează o suită de funcții înrudite
e.g., calendar, cititor de fluxuri de știri,
buton de partajare a URL-ului în altă aplicație
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Web component
dezvoltare bazată pe o bibliotecă/framework JS
soluții – uzual, la nivel de client: Polymer, React, X-Tag,…
în lucru la Consorțiul Web (septembrie 2019)
github.com/w3c/webcomponents/
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Widget
aplicație – de sine-stătătoare sau
inclusă într-un container (e.g., un document HTML) –
ce oferă o funcționalitate specifică
rulează la nivel de client (platformă pusă la dispoziție
de sistemul de operare și/sau de navigatorul Web)
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
(Web) app
o aplicație (Web) instalabilă
care folosește API-urile oferite de o platformă:
browser, server de aplicații, sistem de operare,…
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
(Web) app
a distributed computer software application designed for
optimal use on specific screen sizes and
with particular interface technologies
Robert Shilston, 2013
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Web browser
SPA
Single
Page
App
platform
(OS + device)
native
app
HTTP
WebSockets
adaptare după Adrian Colyer (2012)
aplicații
Web
și
servicii
(API-uri)
app store
☁ ☁
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Add-on
denumire generică a aplicațiilor asociate unui browser
(extensii, teme vizuale, dicționare,
maniere de căutare pe Web, plug-in-uri etc.)
exemplificare: addons.mozilla.org
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
parametrii unui proiect web
obiectiv principal
durată
cost
abordare
tehnologii
procese
rezultat
resurse umane
profilul echipei
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
echipa proiectului Web
management
Web Project
Manager
funcționalitate
Software
Developer(s)*
Multimedia
Designer(s)
conținut (date)
Domain
Expert
Business
Expert
*frontend sau backend sau full-stack (frontend + backend)
www.slideshare.net/busaco/sabin-buraga-dezvoltator-web-2019/
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
rezumat
💡considerații privind arhitectura aplicațiilor Web
Dr.SabinBuragaprofs.info.uaic.ro/~busaco
episodul viitor: limbajul JavaScript
www.flickr.com/photos/nathansmith/4704268314/

More Related Content

PDF
STAW 07/12: Ingineria dezvoltării aplicaţiilor JavaScript
PDF
CLIW 2017-2018 (1/12) Interacţiune Web: de la concepte & utilizabilitate la d...
PDF
CLIW 2017-2018 (2/12) Arhitectura navigatorului Web
PDF
CLIW 2017-2018 (3/12) (Re)găsirea resurselor Web. De la motoare de căutare şi...
PDF
CLIW 2017-2018 (4/12) Vizualizarea datelor – o privire de ansamblu
PDF
Web 2020 03/12: Programare Web – Arhitectura aplicaţiilor Web. Inginerie Web
PDF
CLIW 2014—2015 (9/12): Ingineria dezvoltării aplicaţiilor JavaScript
PDF
Sabin Buraga: Dezvoltator Web?! (2019)
STAW 07/12: Ingineria dezvoltării aplicaţiilor JavaScript
CLIW 2017-2018 (1/12) Interacţiune Web: de la concepte & utilizabilitate la d...
CLIW 2017-2018 (2/12) Arhitectura navigatorului Web
CLIW 2017-2018 (3/12) (Re)găsirea resurselor Web. De la motoare de căutare şi...
CLIW 2017-2018 (4/12) Vizualizarea datelor – o privire de ansamblu
Web 2020 03/12: Programare Web – Arhitectura aplicaţiilor Web. Inginerie Web
CLIW 2014—2015 (9/12): Ingineria dezvoltării aplicaţiilor JavaScript
Sabin Buraga: Dezvoltator Web?! (2019)

What's hot (20)

PDF
Web 2020 04/12: Programare Web – Dezvoltarea aplicaţiilor Web în PHP
PDF
CLIW 2015-2016 (9/13) Ingineria dezvoltării aplicațiilor JavaScript
PDF
CLIW 2015-2016 (6/13) (Re)găsirea resurselor Web. De la motoare de căutare și...
PDF
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvo...
PDF
CLIW 2017-2018 (5/12) Limbajul de programare JavaScript. Aspecte esenţiale
PDF
CLIW 2015-2016 (2/13) Arhitectura navigatorului Web
PDF
CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz
PDF
Dezvoltarea aplicațiilor Web (3/12): Arhitectura aplicaţiilor Web orientate s...
PDF
WADe 2014—2015 (03/12): Arhitectura aplicaţiilor Web orientate spre servicii
PDF
Cu codul în "nori"
PDF
CLIW 2017-2018 (8/12) Ingineria dezvoltării aplicaţiilor JavaScript
PDF
CLIW 2017-2018 (9/12) Programare Web. Suita de tehnologii HTML5
PDF
CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web respo...
PDF
CLIW 2015-2016 (10/13) Programare Web. Suita de tehnologii HTML5
PDF
Web 2020 02/12: Programare Web – HTTP. Cookie-uri. Sesiuni Web
PDF
CLIW 2017-2018 (7/12) JavaScript în navigatorul Web. De la DOM la Ajax şi mas...
PDF
CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5
PDF
CLIW 2015-2016 (7/13) Limbajul de programare JavaScript
PDF
Web 2016 (03/13) Programare Web – Servere de aplicații. Arhitectura aplicații...
PDF
STAW 12/12: (Re)găsirea resurselor Web. De la motoare de căutare şi SEO la da...
Web 2020 04/12: Programare Web – Dezvoltarea aplicaţiilor Web în PHP
CLIW 2015-2016 (9/13) Ingineria dezvoltării aplicațiilor JavaScript
CLIW 2015-2016 (6/13) (Re)găsirea resurselor Web. De la motoare de căutare și...
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #10): Ingineria dezvo...
CLIW 2017-2018 (5/12) Limbajul de programare JavaScript. Aspecte esenţiale
CLIW 2015-2016 (2/13) Arhitectura navigatorului Web
CLIW 2015-2016 (1/13) Interacțiune Web: concepte, context, studii de caz
Dezvoltarea aplicațiilor Web (3/12): Arhitectura aplicaţiilor Web orientate s...
WADe 2014—2015 (03/12): Arhitectura aplicaţiilor Web orientate spre servicii
Cu codul în "nori"
CLIW 2017-2018 (8/12) Ingineria dezvoltării aplicaţiilor JavaScript
CLIW 2017-2018 (9/12) Programare Web. Suita de tehnologii HTML5
CLIW 2015-2016 (4/13) Design Web. Proiectarea siturilor Web. Design Web respo...
CLIW 2015-2016 (10/13) Programare Web. Suita de tehnologii HTML5
Web 2020 02/12: Programare Web – HTTP. Cookie-uri. Sesiuni Web
CLIW 2017-2018 (7/12) JavaScript în navigatorul Web. De la DOM la Ajax şi mas...
CLIW 2015-2016 (11/13) Programare Web. API-uri JavaScript în contextul HTML5
CLIW 2015-2016 (7/13) Limbajul de programare JavaScript
Web 2016 (03/13) Programare Web – Servere de aplicații. Arhitectura aplicații...
STAW 12/12: (Re)găsirea resurselor Web. De la motoare de căutare şi SEO la da...
Ad

Similar to STAW 01/12: Arhitectura aplicaţiilor Web (20)

PDF
WADe 2017-2018 (3/12) Web Application Development: Architectural Aspects
PDF
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #1): Interacţiune Web...
PDF
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Inte...
PDF
CLIW 2015-2016 (3/13) Design Web. Interacțiune, utilizabilitate, metodologii ...
PDF
CLIW 2014—2015 (3/12): Design Web. Interacţiune, utilizabilitate & metodologi...
PDF
Web 2016 (10/13) Servicii Web. De la arhitecturi orientate spre servicii (SOA...
PDF
CLIW 2014—2015 (1/12): Interacţiune Web: concepte, context, studii de caz
PDF
Web 2020 08/12: Servicii Web. De la arhitecturi orientate spre servicii la SO...
PDF
Web 2020 10/12: Servicii Web. Micro-servicii. Serverless. Specificarea API-ur...
PDF
WADe 2017-2018 (2/12) Service-based Web Application Development. REST
PDF
Dezvoltarea aplicatiilor orientate spre servicii Web. De la REST la mash-up-u...
PDF
WADe 2017-2018 (1/12) Web Application Development: Concepts & Vision
PDF
Dezvoltator Web?! – ...în 2016
PDF
WADe 2014—2015 (02/12): Dezvoltarea de servicii Web în stilul REST
PDF
Dezvoltarea aplicațiilor Web (2/12): Dezvoltarea de servicii Web în stilul REST
PDF
Dezvoltator Web?! (varianta 2015)
PDF
Design (Web) responsiv
PDF
Sabin Buraga – Dezvoltator Web (...în 2017)
PDF
Tehnici De Tip Mashup Pentru Interactiuni Web In Sisteme Informationale Geogr...
WADe 2017-2018 (3/12) Web Application Development: Architectural Aspects
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #1): Interacţiune Web...
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #3): Design Web. Inte...
CLIW 2015-2016 (3/13) Design Web. Interacțiune, utilizabilitate, metodologii ...
CLIW 2014—2015 (3/12): Design Web. Interacţiune, utilizabilitate & metodologi...
Web 2016 (10/13) Servicii Web. De la arhitecturi orientate spre servicii (SOA...
CLIW 2014—2015 (1/12): Interacţiune Web: concepte, context, studii de caz
Web 2020 08/12: Servicii Web. De la arhitecturi orientate spre servicii la SO...
Web 2020 10/12: Servicii Web. Micro-servicii. Serverless. Specificarea API-ur...
WADe 2017-2018 (2/12) Service-based Web Application Development. REST
Dezvoltarea aplicatiilor orientate spre servicii Web. De la REST la mash-up-u...
WADe 2017-2018 (1/12) Web Application Development: Concepts & Vision
Dezvoltator Web?! – ...în 2016
WADe 2014—2015 (02/12): Dezvoltarea de servicii Web în stilul REST
Dezvoltarea aplicațiilor Web (2/12): Dezvoltarea de servicii Web în stilul REST
Dezvoltator Web?! (varianta 2015)
Design (Web) responsiv
Sabin Buraga – Dezvoltator Web (...în 2017)
Tehnici De Tip Mashup Pentru Interactiuni Web In Sisteme Informationale Geogr...
Ad

More from Sabin Buraga (20)

PDF
Web 2020 01/12: World Wide Web – aspecte arhitecturale
PDF
Web 2020 05/12: Modelarea datelor. Familia XML. Extragerea datelor cu XPath. ...
PDF
Web 2020 06/12: Procesarea datelor XML & HTML. Document Object Model
PDF
Web 2020 07/12: Procesarea datelor XML & HTML – Simple API for XML. Procesări...
PDF
Web 2020 09/12: Servicii Web. Paradigma REST
PDF
Web 2020 11/12: Interacţiune Web asincronă. Aplicaţii Web de tip mash-up. JAM...
PDF
Web 2020 12/12: Securitatea aplicaţiilor Web. Aspecte esenţiale
PDF
STAW 02/12: Programare Web: Limbajul JavaScript. Aspecte esenţiale
PDF
STAW 03/12: Programare Web: Limbajul JavaScript. Aspecte moderne: ES6 et al.
PDF
STAW 04/12: Programare Web: Node.js
PDF
STAW 05/12: Arhitectura navigatorului Web
PDF
STAW 06/12: JavaScript în navigatorul Web. De la DOM la Ajax şi mash-up-uri
PDF
STAW 08/12: Programare Web. Suita de tehnologii HTML5
PDF
STAW 09/12: Programare Web. API-uri JavaScript în contextul HTML5 (I)
PDF
STAW 10/12: Programare Web. API-uri JavaScript în contextul HTML5 (II)
PDF
STAW 11/12: Performanţa aplicaţiilor Web la nivel de client
PDF
HCI 2018 (2/10) Human Factor. From interaction idioms to human capacities & c...
PDF
HCI 2018 (3/10) Design Models, Methodologies and Guidelines
PDF
HCI 2018 (4/10) Information Architecture. From Design Patterns to Visual Design
PDF
HCI 2018 (5/10) Information Architecture. From Design Patterns to Flow
Web 2020 01/12: World Wide Web – aspecte arhitecturale
Web 2020 05/12: Modelarea datelor. Familia XML. Extragerea datelor cu XPath. ...
Web 2020 06/12: Procesarea datelor XML & HTML. Document Object Model
Web 2020 07/12: Procesarea datelor XML & HTML – Simple API for XML. Procesări...
Web 2020 09/12: Servicii Web. Paradigma REST
Web 2020 11/12: Interacţiune Web asincronă. Aplicaţii Web de tip mash-up. JAM...
Web 2020 12/12: Securitatea aplicaţiilor Web. Aspecte esenţiale
STAW 02/12: Programare Web: Limbajul JavaScript. Aspecte esenţiale
STAW 03/12: Programare Web: Limbajul JavaScript. Aspecte moderne: ES6 et al.
STAW 04/12: Programare Web: Node.js
STAW 05/12: Arhitectura navigatorului Web
STAW 06/12: JavaScript în navigatorul Web. De la DOM la Ajax şi mash-up-uri
STAW 08/12: Programare Web. Suita de tehnologii HTML5
STAW 09/12: Programare Web. API-uri JavaScript în contextul HTML5 (I)
STAW 10/12: Programare Web. API-uri JavaScript în contextul HTML5 (II)
STAW 11/12: Performanţa aplicaţiilor Web la nivel de client
HCI 2018 (2/10) Human Factor. From interaction idioms to human capacities & c...
HCI 2018 (3/10) Design Models, Methodologies and Guidelines
HCI 2018 (4/10) Information Architecture. From Design Patterns to Visual Design
HCI 2018 (5/10) Information Architecture. From Design Patterns to Flow

STAW 01/12: Arhitectura aplicaţiilor Web