Tehnologii Webbusaco/teach/courses/web/presentations/... · ga /~ co / Tehnologii Web...

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/

Există alternative la servicii Web?

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/


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/



redare + interacțiune la nivel de client (navigator) Webvia standardul DOM

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/



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/



transfer (a)sincron de date via HTTPfacilitat de obiectul XMLHttpRequest

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/



procesare folosind limbajul ECMAScript (JavaScript)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/


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/



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/



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/



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/



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/



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/


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/



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/



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/



abort ( )

abandonează transferul de date curent

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/



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/



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/



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/


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/



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/



statusText

conține mesajul corespunzător codului de stare HTTP

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/



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/



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/


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/


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/


Auto-completarea datelor

auto-completionsugestii de căutare – exemplu: Google Suggest

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/


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/


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/


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/


Minimizarea traficului dintre browser și server

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/


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/


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/


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/

Care e suportul vizând implementarea?

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/


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/


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/

(în loc de) pauză

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/




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/




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/

<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, '')" /><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/

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/


Ș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/


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/


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/



declarativ

inspirat de JSON

strict (strong-typed)

avansat

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/



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/



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/


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/


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/


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/


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/


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/


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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co/

„ultimul” episod: securitatea aplicațiilor Web

Date post:	29-Jul-2018
Category:	Documents
Upload:	phamtu
View:	230 times
Download:	4 times

Tehnologii Webbusaco/teach/courses/web/presentations/... · ga /~ co / Tehnologii Web...

Documents