tehnologii webbusaco/teach/courses/web/presentations/... · ga /~ co / tehnologii web...
Post on 29-Jul-2018
231 Views
Preview:
TRANSCRIPT
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/Tehnologii Web
micro-servicii & interacțiune Web
↹suita de tehnologii Ajax
aplicații Web hibride (mash-ups)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
„Modul în care dăm face mai mult decât ceea ce dăm.”
Pierre Corneille
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
micro-servicii
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ă
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
smalleach running in its own process
lightweight communication mechanisms (usual, HTTP)built around business capabilities
independently deployableminimum of centralized management
may be written in different programming languagesmay use different data storage mechanisms
caracteristici ale micro-serviciilor conformJames Lewis & Martin Fowler, Microservices (2014)
martinfowler.com/articles/microservices.html
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
modularitate, descentralizare și evoluție permanentă
exemple de bună practică: microservices.io
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
Beneficii ale microserviciilor:
izolareautonomie
scalabilitate individualăreziliență
vitezăsuport pentru experimentare
feedback rapidflexibilitate
ușor de înlocuitecosistem
S. Tilkov, A Question of Size – Modularization & Microservices, Java Forum Nord 2017:
speakerdeck.com/stilkov/a-question-of-size-modularization-and-microservices
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
micro-servicii
Funcționale (functional services)
implementează funcționalităti specifice (business operations)
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
micro-servicii
Funcționale (functional services)
implementează funcționalităti specifice (business operations)
expuse consumatorului de servicii
independente (fără efecte colaterale – side effects)
nu sunt partajabile uzual
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
micro-servicii
Control – infrastructură (infrastructure services)
implementează activități non-funcționale: autentificare, autorizare, jurnalizare, monitorizare,…
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
micro-servicii
Control – infrastructură (infrastructure services)
implementează activități non-funcționale: autentificare, autorizare, jurnalizare, monitorizare,…
nu sunt expuse în exterior – private
pot fi partajate la nivel de aplicație ori servicii interne
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
brow-ser
controlproce-
sare
client „puternic”și/sau modern
micro-servicii în context serverless – aplicația depinde semnificativ de componente externe, disponibile în „nori”
BaaS
Mike Roberts (2016) – martinfowler.com/articles/serverless.html
func-ționa-litate1
☁
func-ționa-litate2
☁
☁
auten-tificare
☁
BaaS = (Mobile) Backend As A Service FaaS = Functions As A Service
☁
FaaS
căutare
procesarecomenzi
BaaS
comenzi
produse
acces la API
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
micro-servicii
Aspect de interes:
partajarea funcționalităților
share-as-much-as possible (SOA clasic)versus
share-as-little-as possible (micro-servicii)
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
micro-servicii
Aspect de interes:
comunicarea – uzual, asincronă – între (micro-)servicii
abordări:point-to-point
sau publish-subscribe
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
implementare
intern, (micro-)serviciile pot comunica recurgând la publish-subscribe
WebSub (recomandare W3C, 2018): www.w3.org/TR/websub/
simplificarea accesului clientului
via API
Jonas Bonér (2016)
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
micro-servicii
Uzual, arhitecturile ce recurg la micro-serviciinu includ componente middleware
și nu oferă suport pentru abstractizarea interacțiunii dintre producătorii și consumatorii de servicii
(contract decoupling)
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
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
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
micro-servicii: dezvoltare
Platforme: Cocaine, Deis, Fabric8, Hook.io, OpenWhisk,…
Framework-uri: Akka, Baratine, Finagle, Ice, Orbit, Vert.X etc.
SDK-uri multi-limbaj: Apex, CoAP, gRPC, Hprose
multe alte instrumente software enumerate lagithub.com/mfornos/awesome-microservices
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
Care e modalitatea de a transfera asincrondate între client(i) și server(e) Web?
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax
Asynchronous JavaScript And XML(Jeese James Garrett)
permite transferul asincron de date între un document HTML redat de client (browser)
și o aplicație rulând pe un server Web
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax
O suită de tehnologii deschise:
limbaje standardizate de structurare – e.g., HTML –și de prezentare a datelor: CSS
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax
O suită de tehnologii deschise:
redare + interacțiune la nivel de client (navigator) Webvia standardul DOM
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax
O suită de tehnologii deschise:
interschimb și manipulare de date reprezentate prin:diverse dialecte XML,
JSON,HTML,
alte formate
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax
O suită de tehnologii deschise:
transfer (a)sincron de date via HTTPfacilitat de obiectul XMLHttpRequest
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax
O suită de tehnologii deschise:
procesare folosind limbajul ECMAScript (JavaScript)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax
Componenta de bază: obiectul XMLHttpRequest
disponibil la nivelul navigatorului Web via JavaScript
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax
Componenta de bază: obiectul XMLHttpRequest
specificația inițială bazată pe implementarea MSIE
oferită în prezent de (aproape) orice browser
www.w3.org/TR/XMLHttpRequest1/
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax
Componenta de bază: obiectul XMLHttpRequest
specificația actuală (HTML5 Living Standard, mai 2018)
implementată de navigatoarele Web curente
xhr.spec.whatwg.org
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax
Componenta de bază: obiectul XMLHttpRequest
permite realizarea de cereri HTTP – e.g., GET, POST,… –dintr-un program rulând la nivel de client (browser)
spre o aplicație / un serviciu Web existent(ă) pe server,în mod asincron ori sincron
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax
Componenta de bază: obiectul XMLHttpRequest
datele vehiculate între programele client și serverpot avea orice format
uzual, modelate în JSON, XML (e.g., Atom, RSS, KML,…),HTML și/sau CSV
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax
Componenta de bază: obiectul XMLHttpRequest
paginile Web nu mai trebuie reîncărcate complet,conținutul lor – structurat via HTML –
fiind manipulat prin DOM în cadrul browser-ului,în conformitate cu datele recepționate de la server
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax
Metode importante oferite de XMLHttpRequest
open ( )
inițiază – deschide – o conexiune HTTP cu serverul,emițând o cerere: GET, POST,…
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax
Metode importante oferite de XMLHttpRequest
send ( )
transmite (asincron) date – e.g., JSON, XML etc. –,spre aplicația/serviciul ce rulează pe server
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax
Metode importante oferite de XMLHttpRequest
send ( )
transmite (asincron) date – e.g., JSON, XML etc. –,spre aplicația/serviciul ce rulează pe server
orice listener (asociat evenimentelor onload, ontimeout,onabort,…) trebuie stabilit înainte de a trimite date
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax
Metode importante oferite de XMLHttpRequest
abort ( )
abandonează transferul de date curent
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax
Metode importante oferite de XMLHttpRequest
setRequestHeader ( )
specifică anumite câmpuri de antet HTTP
exemple: Cookie, Keep-Alive, User-Agent,…
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax
Metode importante oferite de XMLHttpRequest
getResponseHeader ( )
furnizează valoarea unui anumit câmp prezentîn antetul mesajului de răspuns HTTP trimis de server
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax
Metode importante oferite de XMLHttpRequest
getAllResponseHeaders ( )
oferă toate câmpurile HTTP trimise de server,exceptând Set-Cookie
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax
Proprietăți de bază ale XMLHttpRequest
readyState
furnizează codul de stare a transferului:0 – UNSENT
1 – OPENED
2 – HEADERS_RECEIVED
3 – LOADING
4 – DONE
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax
Proprietăți de bază ale XMLHttpRequest
status
oferă codul de stare HTTP întors de serverul Web:200 (Ok)
404 (Not Found)500 (Internal Server Error)
…
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax
Proprietăți de bază ale XMLHttpRequest
statusText
conține mesajul corespunzător codului de stare HTTP
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax
Proprietăți de bază ale XMLHttpRequest
responseText
responseXML
stochează răspunsul (datele) obținut(e) de la server
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax
Proprietăți de bază ale XMLHttpRequest
onreadystatechange
specifică funcția ce va fi invocată la modificările de stareale transferului de date dintre server și client
handler de tratare a evenimentelor de transfer
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax
Excepții ce pot fi emise
AbortError
InvalidAccessError
InvalidStateError
NetworkError
SecurityError
TimeoutError
…
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
Noutăți:stabilirea unui timeout privind realizarea unei cereri
(la nivel de milisecunde)
o valoare nenulă cauzează realizarea unei preîncărcări (fetching) a resursei
de studiat și Fetch (HTML5 Living Standard, mai 2018)fetch.spec.whatwg.org
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
Noutăți:datele vehiculate pot fi de mai multe tipuri
(ArrayBuffer, Blob, Document, DOMString, FormData)
detalii la xhr.spec.whatwg.org/#interface-formdata
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
Noutăți:procesul de transmitere a datelor spre server (upload)
poate avea asociat un handler specific via proprietatea upload
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
Noutăți:progresul încărcării poate fi urmărit pe baza
funcționalităților specificate de interfața ProgressEvent
xhr.spec.whatwg.org/#interface-progressevent
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
Ce alte aspecte trebuie considerate
atunci când se recurge la Ajax?
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax – utilizări
Reîmprospătarea periodică a conținutului
e.g., știri recepționate în formate ca Atom sau RSS, mesaje în cadrul aplicațiilor sociale, notificări,…
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax – utilizări
Anticiparea download-urilor
pre-încărcarea datelor (e.g., imagini) ce vor fi solicitate
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax – utilizări
Auto-completarea datelor
auto-completionsugestii de căutare – exemplu: Google Suggest
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax – utilizări
Validarea în timp-real a datelor introduseîn formulare de către utilizator
exemplificare: verificarea existenței unui cont sau a unei localități
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax – utilizări
Creare de componente de interfață Web (widgets) sau de aplicații Web rulând pe platforme mobile
interacționează cu utilizatorulpe baza evenimentelor survenite
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax – aspecte
Evitarea încărcării întregului document Web
avantaj:se pot modifica doar fragmente de document
dezavantaj:bookmarking-ul poate fi compromis(nu există un URL unic desemnând
reprezentarea resursei curente)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax – aspecte
Oferirea de alternative la Ajax,atunci când suportul pentru acesta
nu este implementat/activat
graceful degradation
progressive enhancement
www.w3.org/wiki/Graceful_degradation_versus_progressive_enhancement
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax – aspecte
Minimizarea traficului dintre browser și server
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax – aspecte
Transferul de date poate fi monitorizat(+interceptat) via instrumente dedicate
la nivel de desktop: instrumentul WireShark
direct în navigatorul Web(eventual, ca extensii)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax – aspecte
Adoptarea Ajax pentru creșterea utilizabilității,nu doar de dragul tehnologiei
exemple negative:distragerea utilizatorului
abuz de resurse (supradimensionarea arborelui DOM)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax
Ajax oferă premisele invocării asincronede (micro-)servicii Web în stilul REST
folosind diverse reprezentări ale datelor transferate: POX (Plain Old XML)
JSON (JavaScript Object Notation)AHAH (Asynchronous HTML and HTTP)
text neformatat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax – programare
La nivel de clientbiblioteci + framework-uri JavaScript
Angular – angular.io
Dojo Toolkit – dojotoolkit.org
jQuery (plus jQuery UI) – jquery.com
MooTools – mootools.net
React – reactjs.org
altele la www.javascripting.com/dom/frameworks/
micro-biblioteci: microjs.com/#ajax
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax – programare
La nivel de serverbiblioteci, module, framework-uri – exemple:
Java – Apache Wicket, DWR, OpenXava, Vaadin etc..NET – AJAX Control Toolkit: devexpress.com/act
Node.js – nodejsmodules.org/tags/ajax
PHP – Cjax: github.com/ajaxboy/cjax
Perl – CGI::Ajax, Catalyst, Mason etc.Python – wiki.python.org/moin/WebFrameworks
…
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax – programare
API-uri specializate
exemplificări:Bing Maps V8 Web Control
msdn.microsoft.com/en-us/library/mt712542.aspx
HERE JavaScript APIsdeveloper.here.com/develop/javascript-api
Ajax în contextul extensiilor WordPresscodex.wordpress.org/AJAX_in_Plugins
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax – studiu de caz
Verificarea existenței unui nume de utilizatorîn vederea creării unui cont de autentificare
în cadrul unei aplicații Web
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/Client
ServerWeb
XMLHttpRequest
Server de aplicații
open ("GET")
open ("POST")
send (...)
DOM
fereastra navigatorului
verificarea asincronă a existenței unui cont pe server
date XML (pe server)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax – studiu de caz
Verificarea existenței unui nume de utilizatorîn vederea creării unui cont de autentificare
în cadrul unei aplicații Web
tratând prin DOM evenimentul onblur, putem detecta– interogând asincron aplicația Web de pe server –
faptul că numele de cont introdus de utilizatorîntr-un formular Web deja a fost folosit de altcineva
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: ajax – studiu de caz
Verificarea existenței unui nume de utilizatorîn vederea creării unui cont de autentificare
în cadrul unei aplicații Web
aplicația Web de pe server – adoptând stilul REST –va oferi un document XML modelând răspunsul la
interogarea „există deja un utilizator având un nume dat?”
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
<?php // program PHP, cu rol de serviciu Web, rulat la nivel de serverdefine ('DOCXML', './particip.xml'); // locația documentului XML// trimitem tipul conținutului; aici, XMLheader ('Content-type: text/xml');
// funcție care verifică dacă un nume de participant deja există// returnează 1 dacă numele există, 0 în caz contrarfunction checkIfNameExists ($aName) {// încărcăm datele despre participanți via SimpleXMLif (!($xml = simplexml_load_file (DOCXML))) { return 0; }// parcurgem toți participanții găsiți cu XPath...foreach ($xml->xpath('/participants/participant/name') as $name) {
// comparăm numele, ignorând minusculele de majusculeif (!strcasecmp($aName, $name)) { return 1; }
}return 0;
}?><response>
<result><?php echo checkIfNameExists ($_REQUEST['name']); ?></result></response>
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
<!-- Formularul Web preluând date de la utilizator --><form action="add.php" method="post">
<div><label for="name">Account name:</label><input type="text" name="name" id="name"
onblur="javascript:signalNameExists (this.value, '')" /><!-- mesaj inițial ascuns --><span class="hidden" id="errName">
Name already exists, choose another one...</span>
</div>
<div><label for="adr">Address:</label><input type="text" name="adr" id="adr" />
</div>
<input type="submit" value="Apply" /></form>
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
// programul JS executat în cadrul browser-uluivar request; // încapsulează cererea HTTP către serverul Web
function loadXML (url) { // încarcă un document XML desemnat de 'url'// verificăm existența obiectului XMLHttpRequestif (window.XMLHttpRequest) {
request = new XMLHttpRequest (); // există suport nativ} else
if (window.ActiveXObject) { // se poate folosi obiectul ActiveX din MSIErequest = new ActiveXObject ("Microsoft.XMLHTTP");
}if (request) { // există suport pentru Ajax
// stabilim funcția de tratare a stării transferului de daterequest.onreadystatechange = handleResponse; // preluăm documentul prin metoda GET request.open ("GET", url, true); request.send (null); // nu trimitem nimic serviciului Web
}}
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
// funcția de tratare a schimbării de stare a cereriifunction handleResponse () {
// verificăm dacă încărcarea s-a terminat cu succesif (request.readyState == 4) {
// am obținut codul de stare '200 Ok'?if (request.status == 200) {
// procesăm datele recepționate prin DOM// (preluăm elementul rădăcină al documentului XML)var response = request.responseXML.documentElement; var res = response.getElementsByTagName('result')[0].firstChild.data;
// apelăm o funcție ce va modifica arborele DOM al paginii Web// conform răspunsului transmis de serviciul invocat…
}// eventual, se pot trata și alte coduri HTTP (404, 500 etc.)
else { alert ("A problem occurred:\n" + request.statusText);
}}
veziexempluldin arhivă
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
utilizatorul introduce un nume de cont; via Ajax, i se va semnala cădeja există, conform răspunsului XML trimis de către serviciul Web
cerere HTTP via URL-ul http://web.info/verify.php?name=tux
răspuns XML de forma <response><result>1</result></response>
0 = nu există
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
studiu de caz: RandomAjax
preia asincrono secvență de numere aleatoare generate de random.org – trimisă ca
text obișnuitjsfiddle.net/busaco/2254kdqn/
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
const URL = 'https://www.random.org/sequences/?min=1&max=33&col=1&format=plain';const TIME = 2000;
var xhr = new XMLHttpRequest ();var numbers = document.getElementById ('numbers');// eveniment de tratare a expirării timpului de așteptarexhr.ontimeout = function () { numbers.textContent = 'Time-out... :('; };// eveniment de tratare a preluării datelor solicitate unui serviciuxhr.onload = function () {
if (xhr.readyState === 4) { // am primit dateleif (xhr.status === 200) { // răspuns Ok din partea serverului
// înlocuim spațiile albe cu virgulă și plasăm conținutul// în cadrul elementului HTML identificat prin 'numbers'numbers.textContent = xhr.responseText.trim ().replace (/\W+/g, ', ');
} else {numbers.textContent = 'An error occurred: ' + xhr.statusText;
}}
};
xhr.open ("GET", URL, true); // deschidem conexiuneaxhr.timeout = TIME; // stabilim timpul maxim de așteptare a răspunsuluixhr.send (null); // nu expediem date
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
studiu de caz: RandomAjax (Fetch)
soluție folosind Fetch API
pentru aceeași problemăjsfiddle.net/busaco/a2q9regd/
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
function status(response) { // recurgem la promises – github.com/wbinnssmith/awesome-promises –// pentru a realiza procesări în funcție de codul de stare HTTPif (response.status >= 200 && response.status < 300) {return Promise.resolve (response) // cererea poate fi rezolvată
} else {return Promise.reject (new Error (response.statusText)) // cererea a fost rejectată
}}
fetch (URL).then (status) // verificăm dacă datele au fost recepționate cu succes.then ((response) => response.text ()) // transformăm obiectul răspunsului în șir de caract..then (function (response) { // procesăm secvența de numere
// înlocuim spațiile albe cu virgulă și plasăm conținutul// în cadrul elementului HTML identificat prin 'numbers'var numbers = document.getElementById ('numbers');numbers.textContent = response.trim ().replace (/\W+/g, ', ');
}).catch (function (error) { // a survenit o eroare :(
numbers.textContent = 'An error occurred: ' + error;});
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
Scenariu – implementare JS modern (ES6):preluăm caractere de la client – introduse în <textarea> –
și le trimitem asincron prin POST unei aplicații Webrulând pe server care le expediază înapoi
mesaje vehiculate în format JSON{ "tasta": "caracter", "data": "secunde" }
tratăm evenimentul keypress pentru a capta tastele acționate de utilizator
studiu de caz: PostJSON
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
// codul programului ES6 interpretat de navigatorul Web// tratăm evenimentul de apăsare a unei tasteconst trateazaEveniment = ev => {
// mesajul propriu-zis trimis serverului prin POST // atunci când survine evenimentullet msg = `{ "tasta": "${String.fromCharCode (ev.charCode)}",
"data": "${Date.now()}" }`; // încapsulăm o cerere POSTlet request = new Request ('/ajax/post.php', {method: 'POST',body: JSON.stringify (msg), // convertim datele JSON în șir de caractereheaders: {} // n-avem câmpuri-antet
});
avansat
de consultat arhiva cu exemple
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
fetch (request) // promitem să executăm codul, transmițând cererea....then (response => { // verificăm dacă am primit date JSON de la server
var contentType = response.headers.get ('Content-Type');if (contentType && contentType.includes('application/json')) {
return response.json (); };throw new TypeError ('Datele primite nu-s JSON :('); })
.then (json => { // procesăm efectiv datele// creăm un nod text care indică tasta apăsatălet elem = document.createTextNode (json.tasta);document.getElementById ('tasteApasate').appendChild (elem);// raportăm datele primite și la consola browser-uluiconsole.log
(`Date JSON primite: tasta=${json.tasta}, data=${Date(json.data)}`); })
};// via DOM, tratăm evenimentul keypressdocument.addEventListener ('keypress', trateazaEveniment);
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
<?php// post.php -- program PHP care preia date JSON // transmise via POST de client și le trimite înapoi (echo)
function eJSONValid ($sir) { // verifică dacă datele JSON sunt corectejson_decode ($sir); return json_last_error () == JSON_ERROR_NONE;
}
// preluăm de la intrarea standard datele transmise de client (raw data)// (aici, cele dintr-o cerere POST)$date = trim (file_get_contents ("php://input"));
if (eJSONValid ($date)) { // trimitem datele JSON înapoi dacă sunt în regulăheader ("Content-type: application/json");echo json_decode ($date);
} else { die ('Date incorecte'); }?>
aplicația (serviciul) Web invocat(ă) pe server
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: comet
Comet
termen propus de Alex Russel
permite ca datele să fie „împinse” (push) de către serverspre aplicația client, utilizând conexiuni HTTP
persistente (long-lived) în vederea reducerii latenței
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: comet
Șablon de proiectare a aplicațiilor Webcare necesită realizarea de conexiuni persistente,
în stilul peer-to-peer
utilizat de aplicațiile Web intensiv interactive,eventual colaborative – e.g., Mibbit
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: comet
Complementar Ajax
long pollingHTTP server push
Reverse Ajax
de studiat M. Carbou, “Reverse Ajax, Part 1.Introduction to Comet”, IBM developerWorks, 2011
www.ibm.com/developerworks/web/library/wa-reverseajax1/
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
interacțiune web: comet
Soluții alternative, moderne: adoptarea diverselor tehnologii HTML5
server-sent eventsWebSocket
detalii la „Dezvoltarea aplicațiilor Web la nivel de client”(curs opțional, anul 3, semestrul I)
profs.info.uaic.ro/~busaco/teach/courses/cliw/
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
mash-ups
Ajax/Comet oferă suport pentru dezvoltarea de aplicații Web hibride –mash-ups
combinarea – la nivel de client și/sau server –a conținutului ce provine din surse (situri)
multiple, oferind o funcționalitate/experiență nouă
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
mash-ups
Exemplificare:
dorim să oferim o aplicație ce pune la dispozițieinformații din domeniul muzical
în funcție de activitățile fizice ale utilizatorului,pe baza unor servicii Web publice
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
mash-ups
www.last.fm/api/rest
wiki.fitbit.com/display/API/Fitbit+API
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
mash-ups
acces la serviciile RESTdespre formații + albume
via o cheie de autentificare
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
mash-ups
API-ul REST de la FitBit oferă date în formatele JSON și XML
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
mash-ups
+ FiLaaplicație Web hibridă
http://www.last.fm/api/rest
https://dev.fitbit.com/
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
mash-ups
Se bazează pe fluxuri de știri RSS/Atom, servicii Web, API-uri publice,…
„curentul” SaaS (Software As A Service)
implementare la nivelul: clientului (browser-ului) Web și/sau serverului Web
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
mash-ups
Caracteristici:combinarevizualizare
agregare
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
mash-ups
Combinare
utilizarea de surse de date multiplepoate avea caracter multidimensional
de exemplu, subiect de interes + locație geografică + moment de timp
Yahoo! Music Search + Google Maps + Eventful
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
mash-ups
un mash-up Web de studiere a efectelor detonării bombelor nucleare – nuclearsecrecy.com/nukemap/
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
mash-ups
Vizualizare
pot fi adoptate diverse tehnici de vizualizare(prezentare) a datelor:
chart-uri, cartografică, tag cloud-uri, tridimensională,…
detalii în cadrul materiei „Dezvoltarea aplicațiilor Web la nivel de client”
profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
metode diverse de vizualizare în timp-real a evoluției cursului monedelor virtuale – Coinorama
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
mash-ups
Agregare
gruparea datelor provenite din mai multe surse șianalizarea lor: statistici, clasificări, predicții,…
e.g., folosind machine/deep learning se pot relevaaspecte „ascunse” ale datelor procesate
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
clasificarea imaginilor expuse de utilizatori în funcție de vârstă, postură, stare de spirit și altele
Selfiexploratory – selfiecity.net/selfiexploratory/
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
mash-ups
Surse de date(data feeds)
Atom, RSS, geoRSS, micro-date HTML5, RDFa,…
Interfețe de programare(API-uri)
specifice serviciilor publiceși de procesare JSON/XML/RDF
Biblioteci/framework-uripentru dezvoltare
framework-uri Web genericesau oferite de organizații
Instrumente interactive(Web tools)
eventual, disponibile în cloud
Platforme(Platform As A Service)
Heroku, Google Cloud Platform, Nodejitsu, Windows Azure,…
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
mash-ups
Your Life on Earth (BBC)www.bbc.com/earth/story/20141016-your-life-on-earth
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
mash-ups
lista mash-up-urilor: www.programmableweb.com/mashups/directory
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
Poate fi abstractizat accesul la surse de date disponibile pe Web?
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
model de acces la date: graphql
Graph Query Language
“a query language for APIs and a runtime for fulfilling those queries with your existing data”
graphql.org
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
model de acces la date: graphql
Graph Query Language
declarativ
inspirat de JSON
strict (strong-typed)
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
model de acces la date: graphql
Graph Query Language
sunt permise interogări (queries) – operații de citire –și actualizări (mutations) – operații de alterare a datelor
se oferă suport pentru a anticipa ce date vor fi întoarse + structura acestora
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
model de acces la date: graphql
Graph Query Language
răspunsul oferit include doar datele ce au fost solicitateîmbunătățirea performanței la nivel de client
rezolvarea problemelor vizând over/under fetching(preluare a mai multor sau prea puține date)
philsturgeon.uk/api/2017/01/24/graphql-vs-rest-overview/
nordicapis.com/is-graphql-the-end-of-rest-style-apis/
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
model de acces la date: graphql
GraphQL ca alternativă la dezvoltarea de servicii via paradigma REST
GraphQL REST
entitate resursă resursă
format JSONorice Media Type (MIME)frecvent: JSON
protocolHTTP – uzual, adoptă convențiiproprii
independent de protocol(uzual, HTTP)
cine decide ce date vor fi întoarse
clientul serverul
puncte terminale (endpoints)
un singur punct terminal pentru a oferi date conexe, dacă au fost specificate relații între ele
puncte terminale multiple (independente)
tipuri de date strong (tipuri declarate explicit)weak (verificarea tipurilor de date nu e obligatorie)
relație client-server fat client—fat server thin client—fat server
documentare autodescriptiv (self-describing)necesită terțe soluții (e.g., OpenAPI Specification)
viziunelimbaj de interogare, specificație, colecție de instrumente
stil arhitectural
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
model de acces la date: graphql
Instrumente pentru dezvoltatori:
implementare de referință pentru server (Node.js)GraphQL.js – graphql.org/graphql-js/
biblioteci disponibile pentru C, Go, Java, .NET, PHP, Python, Ruby, Swift, Typescript,… – graphql.org/code/
resurse de interes: github.com/chentsulin/awesome-graphql
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
model de acces la date: graphql
Instrumente pentru dezvoltatori:
de experimentat și Apollo – www.apollographql.com
suport la nivel de client (e.g., React, Vue) + server
pentru aplicații bazate pe React, a se folosi Relay (Modern) – facebook.github.io/relay/
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
model de acces la date: graphql
interogare interactivă cu GraphQL a API-ului vizând „Războiul Stelelor” – graphql.org/swapi-graphql/
schemarezultateinterogare
variabilă(parametru)
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
model de acces la date: graphql
exemple de interogări via GraphQL ale unor API-uri publice (e.g., Giphy, Hacker News, Reddit): www.graphqlhub.com
în acest caz, Twitter
# primele 33 de mesaje # (+meta-date vizând utilizatorii care le-au expus){twitter {
search(q: "Web application development", count: 33, result_type: mixed) {user {screen_namenamefollowers_count
}textcreated_at
}}
}
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
model de acces la date: graphql
testarea interactivă a API-ul GitHubimplementat via GraphQL
developer.github.com/v4/
conceptul Repository
(depozit de cod-sursă)și proprietățile aferente
avansat
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/
model de acces la dateServicii Web
model de calcul
Ofertantde servicii de
telefonie mobilă
mash-up-uri la nivelde dispozitiv mobil
model de implementaremodel de interacțiune
model de acces la date – scenariu
adaptare după Tom Croucher
model de comunicare
model al fluxului
de date
⚙⚙
⚙⚙
GraphQL
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co/rezumat
micro-servicii + interacțiune Web
↹micro-servicii interacțiuni asincrone cu Ajax mash-up-uri Web acces la date cu GraphQL
top related