Dezvoltarea aplicaţiilor Web la nivel de client (cursul #2): Arhitectura navigatorului Web

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

co

arhitectura unui navigator Web

Dr.

Sab

in B

ura

ga


co

“To avoid criticismdo nothing, say nothing, be nothing.”

Elbert Hubbard

Dr.

Sab

in B

ura

ga


co

platformă (e.g., sistem de operare)

browser Web

funcționalități de bază(application logic)

interpretorJavaScript

acces la platformă

Dr.

Sab

in B

ura

ga


co

platformă (e.g., sistem de operare)

browser Web

funcționalități de bază(application logic)

interpretorJavaScript

acces la platformă

rețea, grafică, fonturi, widget-uri native,…

Dr.

Sab

in B

ura

ga


co

Un client (i.e. browser Web) se identifică via valoarea

câmpului-antet User-Agent dintr-o cerere HTTP

Dr.

Sab

in B

ura

ga


co

1993 – primul browser Web: Mosaic – Mosaic/0.9

1994 – primul browser comercial: Netscape Navigatorinclude primul interpretor JavaScript și oferă o interfață

de programare (BOM – Browser Object Model)Mozilla/Versiune [Limbă] (Platformă; Criptare)

Mozilla/2.02 [fr] (WinNT; I)

Mozilla/Versiune (Platformă; Criptare [; descriere OS])Mozilla/3.0 (Win95; U)

Netscape Communicator 4 – Mozilla/4.0 (Win98; I)

http://www.nczonline.net/blog/2010/01/12/history-of-the-user-agent-string/

Dr.

Sab

in B

ura

ga


co

1994 – primul browser disponibil pe un dispozitivminiaturizat (PDA – Apple Newton): PocketWeb

http://www.teco.edu/pocketweb/

Dr.

Sab

in B

ura

ga


co

1996 – primul navigator produs de Microsoft: MSIEinclude dialectul JScript și propriul BOM

multe facilități, ulterior standardizate de W3CMozilla/2.0 (compatible; MSIE Versiune; Sistem de operare)

Mozilla/2.0 (compatible; MSIE 3.02; Windows 95)

MSIE 4—7 – Mozilla/4.0 (compatible; MSIE 4.5; Mac_PowerPC)

MSIE 8 – Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0)

MSIE 11 – Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko

www.modern.ie

Dr.

Sab

in B

ura

ga


co

1996 – primul navigator trialware: Opera 2focalizat pe utilizabilitate (e.g., tab-uri)

& accesibilitate (de exemplu, interacțiune prin gesturi)permite selectarea modului de identificare a browser-ului

Opera/Versiune (OS; Criptare) [Limbă]Opera/7.54 (Windows NT 5.1; U) [en]

http://dev.opera.com/

Dr.

Sab

in B

ura

ga


co

1998 – apariția procesorului de redare GeckoMozilla/Versiune (Platformă; Criptare; OS/CPU; Limbă;

VersiuneAnterioară) Gecko/Versiune Produs/VersiuneMozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1b2)

Gecko/20060823 SeaMonkey/1.1a

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.11)

Gecko/20071127 Firefox/2.0.0.11

http://www.nczonline.net/blog/2010/01/12/history-of-the-user-agent-string/

Dr.

Sab

in B

ura

ga


co

1997—1999 – navigator Web pentru telefoane mobile: HitchHiker (ulterior, Microsoft Mobile Explorer 2.0)

WAP – protocol, WML – limbaj de marcare, WMLScript

Dr.

Sab

in B

ura

ga


co

fundația Mozilla – versiunea open source a Netscape:Phoenix (2002)Firebird (2003)Firefox (2004)

focalizare asupra respectării standardelor Webinterfață via XUL (Extensible User-interface Language)

extensibil via add-ons (extensii, teme vizuale etc.)ciclu de dezvoltare de 6 săptămâni:

Nightly, Aurora, Beta, ReleaseMozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:27.0) Gecko/20100101 Firefox/27.0

https://developer.mozilla.org/Mozilla/Firefox

Dr.

Sab

in B

ura

ga


co

2003 – Apple Safari cu WebKit bazat pe KHTML (KDE)accent pus pe inovare (<canvas>, CSS,…) & performanță

Mozilla/5.0 (Platformă; Criptare; OS/CPU; Limbă)

AppleWebKit/Versiune (KHTML, like Gecko) Safari/VersiuneMozilla/5.0 (Macintosh; U; PPC Mac OS X; en)

AppleWebKit/124 (KHTML, like Gecko) Safari/125.1

Mozilla/5.0 (iPhone; CPU iPhone OS 7_0 like Mac OS X) AppleWebKit/537.51.1

(KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53

https://developer.apple.com/devcenter/safari/

Dr.

Sab

in B

ura

ga


co

2005 – Opera Mini oferă primele facilități de redare a datelor pe ecrane miniaturizate (small screen rendering)

procesare realizată la nivel de server via data centers

Dr.

Sab

in B

ura

ga


co

2008 – Google Chrome folosind WebKit; din 2013: Blinkbazat pe proiectul open source Chromium

focalizare asupra performanței la nivel de client Webinterfață minimalistă + manager de tab-uri

include instrumente avansate pentru dezvoltatoriMozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13

(KHTML, like Gecko) Chrome/0.2.149.29 Safari/525.13

Mozilla/5.0 (Linux; Android 4.1.2; GT-I9300 Build/JZO54K) AppleWebKit/537.36

(KHTML, like Gecko) Chrome/30.0.1599.82 Mobile Safari/537.36

https://developers.google.com/chrome/

www.chromium.org

Dr.

Sab

in B

ura

ga


co

Care este arhitectura generalăa unui navigator Web?

Dr.

Sab

in B

ura

ga


co

user interface

browser engine

rendering engine

network

JSinter-preter

XMLpar-ser

display back-end

da

ta p

ersiste

nce

componentele de bază ale unui navigator Web genericconform (Grosskurth & Godfrey, 2006; Garsiel, 2011)

Dr.

Sab

in B

ura

ga


co

procesele implicate în afișarea conținutului unei pagini Web(J. Brereton et al., 2011)

rendering engine

Dr.

Sab

in B

ura

ga


co

user interface

bara de introducere a URI-urilor (address bar)

căutare pe Web

instrumente facilitând navigarea (back/forward button)

meniu de salvare a adreselor Web favorite (bookmarks)

acces la preferințe & alte componente – e.g., extensii

…

Dr.

Sab

in B

ura

ga


co

Dr.

Sab

in B

ura

ga


co

user interface

diverse proprietăți & setări ale browser-ului specifice

unui utilizator pot fi stocate în cadrul unui profil

exemplu tipic: Firefox – http://mzl.la/NYhKHH

https://developer.mozilla.org/Profile_Manager

Dr.

Sab

in B

ura

ga


co

browser engine

“punte” între interfața cu utilizatorul și rendering engine

Dr.

Sab

in B

ura

ga


co

browser engine

“punte” între interfața cu utilizatorul și rendering engine

nucleu (kernel)

plug-ins

extensions

add-ons

Dr.

Sab

in B

ura

ga


co

rendering engine

realizează redarea conținutului solicitat

Dr.

Sab

in B

ura

ga


co

rendering engine

realizează redarea conținutului solicitat

documente HTML ce includ resurse multimedia

imagini raster (GIF, PNG, JPEG)

grafică vectorială SVG (Scalable Vector Graphics)

reprezentări diverse: MathML, WebGL,…

Dr.

Sab

in B

ura

ga


co

rendering engine

implică, uzual, procesarea arborelui DOM

asociat unei pagini Web

cu aplicarea proprietăților CSS aferente

în vederea redării într-o zonă de afișare

Dr.

Sab

in B

ura

ga


co

o aplicație Web la nivel de client poate fi compusă din diverse componente, încărcate dinamicmanagementul arborilor DOM

(Dimitri Glazkov, 2013)

Dr.

Sab

in B

ura

ga


co

rendering engine

include un interpretor (parser) HTML

conform tipului de document Web – DTD

Dr.

Sab

in B

ura

ga


co

rendering engine

include un interpretor (parser) HTML

conform tipului de document Web – DTD

moduri diferite de interpretare

standards mode – HTML5, CSS3, SVG,…

quirks mode – www.quirksmode.org

Dr.

Sab

in B

ura

ga


co

proce-sare cod HTML

arboreDOM

generarearbore

de redare

determi-nare

layout

afișare(rendering)

layout

Dr.

Sab

in B

ura

ga


co

rendering engine

cod sursă HTML

arbore DOM

Dr.

Sab

in B

ura

ga


co

fazele importante ale procesării unui document HTMLîn vederea obținerii arborelui DOM

Dr.

Sab

in B

ura

ga


co

fazele importante ale procesării unui document HTMLîn vederea obținerii arborelui DOM

a se revedea cursul “Limbaje formale &

tehnici de compilare”

Dr.

Sab

in B

ura

ga


co

HTMLHtml

Element

HTMLBody

Element

HTMLParagraph

Element

Text

HTMLHead

Element

HTMLTitle

Element

<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body>

<p>Salut, lume!</p>

</body>

</html>

www.w3.org/DOM/http://dom.spec.whatwg.org/

Dr.

Sab

in B

ura

ga


co

rendering engine

în mod tradițional,modelul de procesare este sincron, single-threaded

Dr.

Sab

in B

ura

ga


co

rendering engine


programele JavaScript vor trebui executate imediatce procesorul întâlnește codul

(eventual, extern – încărcat de pe alt sit, dacă e posibil)

Dr.

Sab

in B

ura

ga


co

rendering engine


programele JavaScript vor trebui executate imediatce procesorul întâlnește codul

implicit, procesul de rendering e opritpână ce codul JavaScript este executat complet

Dr.

Sab

in B

ura

ga


co

rendering engine

pentru HTML5, script-urile JavaScript

pot fi executate asincron (într-un thread separat)

Dr.

Sab

in B

ura

ga


co

rendering engine

deoarece – în mod normal – stilurile CSS

nu modifică arborele DOM, procesarea poate avea loc

independent de încărcarea fișierelor CSS

Dr.

Sab

in B

ura

ga


co

rendering engine

arbore DOM

arbore de redare (render tree)

Dr.

Sab

in B

ura

ga


co

relația dintre arborele DOM șiarborele de redare a conținutului (render tree)

conform David Baron, 2008

Dr.

Sab

in B

ura

ga


co

rendering engine

alături de arborele de redare, se va genera și:

render object tree

responsabil cu aranjamentul (layout) & afișarea (paint)

specific conținutului efectiv redat

compus din obiecte de redare:

RenderBlock, RenderText, RenderInline etc.

Dr.

Sab

in B

ura

ga


co

rendering engine


style tree

include valorile calculate ale proprietăților de stil

asociat arborelui obiectelor de redare (render object tree)

Dr.

Sab

in B

ura

ga


co

rendering engine


render layer tree

folosit pentru elementele ce includ conținuturi externe

(<video>, WebGL via <canvas>) ori manipulate prin CSS

(transformări, scalări, decupări,…)

stabilește coordonatele în spațiu și ordinea (z-index)

Dr.

Sab

in B

ura

ga


co

relațiile între obiecte de redare (render objects) și stratele asociate (render layers)

L. Weintraub, “How WebKit Renders the Web”, Fluent Conference, 2012

Dr.

Sab

in B

ura

ga


co

rendering engine

arbore de redare (render tree)

generare a aranjamentului vizual (layout)

Dr.

Sab

in B

ura

ga


co

rendering engine

calcularea aranjamentului (layout) e dependentăde zona de afișare – uzual, un tab al navigatorului

Dr.

Sab

in B

ura

ga


co

rendering engine

calcularea aranjamentului (layout) e dependentăde zona de afișare – uzual, un tab al navigatorului

se pot lua în considerație coordonatele ferestreinavigatorului + proprietățile mediului de redare:

rezoluție, orientare (portrait vs. landscape), suport pentru 3D etc.

Dr.

Sab

in B

ura

ga


co

rendering engine

calcularea aranjamentului (layout)

global layout (pentru întreg render tree) vs. incremental

Dr.

Sab

in B

ura

ga


co

rendering engine


global layout (pentru întreg render tree) vs. incremental

sincron vs. asincron

Dr.

Sab

in B

ura

ga


co

rendering engine


calculul lățimii fiecărui bloc de conținut (width calculation)decizii privind line breaking

plasarea blocurilor flotante – e.g., cele având float: right

determinarea lățimii fiecărei coloane de tabel…

Dr.

Sab

in B

ura

ga


co

folosirea extensiei Firebug pentru vizualizarea datelorprivind layout-ul calculat de navigatorul Web

Dr.

Sab

in B

ura

ga


co

Firefox: vizualizarea 3D a arborelui DOM via arborele de redare(pe baza proiectului Tilt realizat de absolventul FII

Victor Porof – Google Summer of Code 2011)

Dr.

Sab

in B

ura

ga


co

rendering engine

generare aranjament vizual (layout)

afișare layout

Dr.

Sab

in B

ura

ga


co

redări diferite ale aceluiași document HTML(dependența de platformă și/sau de navigator)

Dr.

Sab

in B

ura

ga


co

rendering engine

afișarea propriu-zisă (painting)

poate fi realizată la nivel de software

sau pe baza procesorului grafic (accelerată hardware)

Dr.

Sab

in B

ura

ga


co

rendering engine

după afișarea propriu-zisă,

pot apărea schimbări de redare

Dr.

Sab

in B

ura

ga


co

rendering engine

după afișarea propriu-zisă,

pot apărea schimbări de redare

la nivel local/global

re-layout și/sau re-paint

Dr.

Sab

in B

ura

ga


co

rendering engine

exemplificări notabile:

Gecko (Firefox, SeaMonkey, Thunderbird)

Presto (Opera, Opera Mobile, Opera Mini, Nintendo)

Trident (Microsoft: IE, IE Mobile, Skype)

WebKit (Apple Safari, Google Chrome, Adobe AIR +

majoritatea platformelor mobile: Android, Blackberry, iOS)

Blink (Google Chrome – din 2013)

Dr.

Sab

in B

ura

ga


co

fluxul de activități realizate de Geckodeveloper.mozilla.org/Gecko

Dr.

Sab

in B

ura

ga


co

organizarea codului Gecko – diagramă simplificată(Robert O’Callahan, 2013)

Dr.

Sab

in B

ura

ga


co

fluxul de activități realizate de WebKitwww.webkit.org

Dr.

Sab

in B

ura

ga


co

rendering engine

anumite browser-e pot rula mai multe instanțe

ale procesorului responsabil cu redarea conținutului

exemplu tipic: Google Chrome

Dr.

Sab

in B

ura

ga


co

procesele din cadrul Chrome (Levi Weintraub, 2012)

Dr.

Sab

in B

ura

ga


co

arhitectura multiproces

la Chromium

Dr.

Sab

in B

ura

ga


co

arhitectura multiproces la Gecko (Robert O’Callahan, 2013)http://people.mozilla.org/~roc/Samsung/MozillaArchitectures.pdf

Dr.

Sab

in B

ura

ga


co

rendering engine

procesul de rendering poate fi optimizat(speculative parsing)

strategii diverse:încărcare paralelă a resurselor, multi-procesare,

încărcarea directă a arborelui de redare(pre-procesat la nivel de server),…

Dr.

Sab

in B

ura

ga


co

networking

responsabil cu transferurile de date de pe Internet

Dr.

Sab

in B

ura

ga


co

networking


API independent de platformă

+

implementări specifice fiecărui sistem de operare

Dr.

Sab

in B

ura

ga


co

networking


API independent de platformă

+

implementări specifice fiecărui sistem de operare

exemplificare: Firefox utilizează modulul Necko

Dr.

Sab

in B

ura

ga


co

efectuarea unei cereri de rețea – cazul Chromiumdetalii la www.chromium.org/developers/design-documents/network-stack

Dr.

Sab

in B

ura

ga


co

networking


protocolul HTTP

standardizat de RFC 2616

www.w3.org/Protocols/

Dr.

Sab

in B

ura

ga


co

networking


HTTPS – asigură comunicații “sigure” HTTPvia TLS (Transport Layer Security):

autentificare pe baza certificatelor digitale+ criptare bidirecțională

RFC 2818 – https://tools.ietf.org/html/rfc2818

Dr.

Sab

in B

ura

ga


co

extensiaHTTPS Everywherewww.eff.org/https-everywhere

Dr.

Sab

in B

ura

ga


co

networking

folosit pentru transferuri de date de pe Internet

protocolul SPDY – un experiment Google

număr nelimitat de cereri concurente folosind aceeașiconexiune (eventual, via un sistem de priorități)

compresarea anteturilor mesajelorfluxuri de date în regim push (notificări primite de client)

Dr.

Sab

in B

ura

ga


co

networking


protocolul SPDY – un experiment Google

detalii la http://www.chromium.org/spdy

Dr.

Sab

in B

ura

ga


co

networking


protocolul HTTP/2.0 – în lucru la IETF

extinde ideile SPDY, focalizat asupra performanței

vezi prezentarea lui Mark Nottingham (octombrie 2012)www.slideshare.net/mnot/what-http20-will-do-for-you

Dr.

Sab

in B

ura

ga


co

networking

observații:numărul conexiunilor HTTP paralele realizate

cu un server sau proxy este limitat (uzual: 2—6)

unele navigatoare pot aplica tehnici de optimizarea încărcării resurselor

detalii într-un curs viitor

Dr.

Sab

in B

ura

ga


co

studiu de caz

Firefox: ajustarea parametrilor vizând conexiunile HTTP via schema URI about:config

Dr.

Sab

in B

ura

ga


co

display (UI) backend

responsabil cu afișarea componentelor de interfață

ferestre, bare de defilare a conținutului (scroll bars),

tipuri de câmpurilor formularelor Web:

(butoane de tip radio, textarea, liste de selecție,…)

Dr.

Sab

in B

ura

ga


co

browsershots.orgwww.browserstack.com

Dr.

Sab

in B

ura

ga


co

JavaScript interpreter

interpretează și execută programele JavaScript

la nivel de client

Dr.

Sab

in B

ura

ga


co

JavaScript interpreter (engine)

Carakan (Opera)

Chakra (Microsoft)

Nashorn (Oracle)

Nitro (SquirrelFish), JavaScriptCore (Apple)

SpiderMonkey, IonMonkey, Rhino (Mozilla)

Tamarin (Adobe)

V8 (Google, Opera, Node.js)

Dr.

Sab

in B

ura

ga


co

JavaScript interpreter (engine)

diferențele de performanță pot fi măsuratevia teste specifice (benchmarking)

exemplificări: Benchmark.js, Internet Explorer Test Drive (Microsoft), Kraken (Mozilla), Octane (Google), SunSpider (Apple)

diverse statistici la http://arewefastyet.com/

Dr.

Sab

in B

ura

ga


co

XML parser

responsabil cu procesarea documentelor XML via DOM

implementarea minimală vizează DOM nivelul 2

Dr.

Sab

in B

ura

ga


co

XML parser

în unele cazuri, procesarea documentelor XML

poate implica validarea datelor via DTD,

dar nu folosind scheme XML

Dr.

Sab

in B

ura

ga


co

XML parser

uzual, se poate oferi suport pentru:

spații de nume XML

XPath 1.0 – în mod normal, XPath 2.0 nu-i acceptat

XSLT 1.0 – actualmente nu există suport pentru XSLT 2.0

transferuri asincrone de date via XMLHttpRequest

etc.

Dr.

Sab

in B

ura

ga


co

XML parser

unele navigatoare ofera facilități pentru alte limbaje XML

e.g., MathML sau SVG (Scalable Vector Graphics)

Dr.

Sab

in B

ura

ga


co

data persistence

modul responsabil cu stocarea datelor

pe calculatorul client

Dr.

Sab

in B

ura

ga


co

data persistence

cookie-uri

cache

localStorage (HTML5)

SQLite database (HTML5)

…

detalii la alt curs

Dr.

Sab

in B

ura

ga


co

Ce putem afirma despreparticularitățile navigatoarelor Web?

Dr.

Sab

in B

ura

ga


co

arhitectura inițială a navigatorului Firefox

Dr.

Sab

in B

ura

ga


co

arhitectura Internet Explorer (conform MSDN)

Dr.

Sab

in B

ura

ga


co

arhitectura multi-proces la versiunile moderne de Internet Explorer (Loosely-Coupled IE)

Dr.

Sab

in B

ura

ga


co

arhitectura conceptuală a browser-ului Chrome(Tom Hauser et al., 2009; Ilya Grigorik, 2013)

Dr.

Sab

in B

ura

ga


co

diagrama fluxului de date – cazul Chrome(Hauser et al., 2009)

Dr.

Sab

in B

ura

ga


co

arhitectura browser-ului Lynx (Grosskurth & Godfrey, ‘06)

Dr.

Sab

in B

ura

ga


co

Remarcă

un navigator Web modern prezintăo arhitectură modulară

realizată pe baza unui nucleu (browser kernel)

Dr.

Sab

in B

ura

ga


co

Remarcă

un navigator Web modern prezintăo arhitectură modulară

realizată pe baza unui nucleu (browser kernel)

de asemenea, permite includerea de plug-in-uri și extensii

Dr.

Sab

in B

ura

ga


co

Plug-in

program extern responsabil cu procesarea & redarea

unor date ce nu pot fi prelucrate nativ

de către navigatorul Web

formatul de date este specificat via tipuri MIME

video/quicktime

application/x-shockwave-flash

Dr.

Sab

in B

ura

ga


co

Plug-in

se bazează pe API-ul oferit de browser

NPAPI (Mozilla), ActiveX (Microsoft), PPAPI (Google)https://developer.mozilla.org/Gecko_Plugin_API_Reference

https://developers.google.com/native-client/

uzual, se folosește un SDK disponibil pe platforma-țintă

(recurgându-se la limbajele C ori C++)

Dr.

Sab

in B

ura

ga


co

Plug-in

poate rula în același proces cu navigatorul Web

Dr.

Sab

in B

ura

ga


co

plug-in

poate rula într-un proces separat (out of process plug-in),

modul de apelare fiind definit via un limbaj specific

e.g., pentru Firefox se folosește IPDL – IPC (Inter-process

communication) Protocol Definition Language)

Dr.

Sab

in B

ura

ga


co

Plug-in

alternative: utilizarea bibliotecilor JavaScript

pdf.js – redarea documentelor PDF

https://github.com/mozilla/pdf.js

Shumway – emularea mașinii virtuale Flash

http://mozilla.github.io/shumway/

Dr.

Sab

in B

ura

ga


co

Extensie

extinde funcționalitățile navigatorului

poate afecta browser-ul în ansamblu

are acces, de obicei, la arborele DOM

(sau arborele de redare a conținutului)

Dr.

Sab

in B

ura

ga


co

Extensie

implementare via tehnologii Web (HTML, CSS, JavaScript)

în unele cazuri,

instalarea nu necesită restartarea browser-ului

Dr.

Sab

in B

ura

ga


co

Extensie

resurse pentru dezvoltatori:

Chrome – http://developer.chrome.com/extensions/

Firefox – https://github.com/victorporof/Restartless-Template

MSIE – http://tinyurl.com/pnqepat

Safari – https://developer.apple.com/programs/safari/

Dr.

Sab

in B

ura

ga


co

Extensie

eventual, pentru dezvoltare poate fi folosit un framework

exemple:

BabelExt

Crossrider

Dr.

Sab

in B

ura

ga


co

Extensie

se poate distribui via un sit specific

(e.g., Chrome Web Store)

conform unui format standardizat

Packaged Web Apps (recomandare W3C, 2012)

http://www.w3.org/TR/widgets/

Dr.

Sab

in B

ura

ga


co

Widget

aplicație – de sine-stătătoare sau inclusă într-o pagină –

ce oferă o funcționalitate specifică

rulează la nivel de client (platformă oferită de

sistemul de operare și/sau navigator Web)

Dr.

Sab

in B

ura

ga


co

Widget

implementare pe baza standardelor Web: HTML, CSS, JS

eventual, se poate recurge la un API

W3C Proposed Recommendation (2012)

www.w3.org/TR/widgets-apis/

Dr.

Sab

in B

ura

ga


co

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.)

addons.mozilla.org

Dr.

Sab

in B

ura

ga


co

Web component

parte a unei aplicații Web

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.

Sab

in B

ura

ga


co

Web component

dezvoltare bazată pe o bibliotecă/framework JavaScript

soluții “tradiționale”:

Dojo Toolkit, jQuery UI, YUI,…

Dr.

Sab

in B

ura

ga


co

Web component

cadrul general: Web Components

(W3C working draft, iunie 2013)

templates, decorators, custom elements,

shadow DOM, imports etc.

www.w3.org/TR/components-intro/

Dr.

Sab

in B

ura

ga


co

Web component

implementări:

Polymer (Google) – www.polymer-project.org

X-Tag (Mozilla) – www.x-tags.org

Dr.

Sab

in B

ura

ga


co

Web app

o aplicație Web instalabilă

care folosește API-urile oferite de browser

exemplu tipic: Chrome Appshttps://developers.google.com/chrome/web-store/docs/index

concept asemănător: pinned site (Internet Explorer)http://msdn.microsoft.com/library/ie/gg491731%28v=vs.85%29.aspx

Dr.

Sab

in B

ura

ga


co

Web app

alte exemple notabile:

aplicații Windows 8 dezvoltate în JavaScripthttp://msdn.microsoft.com/en-us/library/windows/apps/br211369.aspx

aplicații mobile pentru Firefox OShttp://profs.info.uaic.ro/~busaco/teach/labs/firefoxos/

aplicații Web mobile pentru Kindle Fire și alte dispozitivehttps://developer.amazon.com/sdk/webapps.html

Dr.

Sab

in B

ura

ga


co

Aspecte de interes privind navigatorul Web:

toleranța la defectesecuritatea

managementul memorieiperformanța

interacțiunea cu utilizatorul

Dr.

Sab

in B

ura

ga


co

teste & comparații: www.browserscope.org

Dr.

Sab

in B

ura

ga


co

Navigatoare Web hibride

unele procese care trebuie realizate de browserpot fi executate la nivel de server – de pildă, în cloud

Dr.

Sab

in B

ura

ga


co

Amazon Silk (bazat pe WebKit și pe interpretorul V8)dacă procesul de rendering nu poate fi efectuat la distanță,

se realizează o procesare la nivel local – pe dispozitivul Kindle

Dr.

Sab

in B

ura

ga


co

unele activități se pot fi realiza în cloud(în cazul Amazon Silk, se recurge la EC2)

Jon Jenkins, “Amazon Silk”, O’Reilly Velocity EU, 2011pentru detalii, a se vizita http://amazonsilk.wordpress.com/

Dr.

Sab

in B

ura

ga


co

CloudBrowser (Brian McDaniel, 2012)http://cloudbrowser.cs.vt.edu/

Dr.

Sab

in B

ura

ga


co

tehnologii Web la nivel de browser: http://platform.html5.org/

Dr.

Sab

in B

ura

ga


co

Dacă un browser Web nu are (încă) suport pentru

o anumită tehnologie, putem adopta soluții alternative

polyfills

uzual, implementate via JavaScript

Dr.

Sab

in B

ura

ga


co

Dacă un browser Web nu are (încă) suport pentru

o anumită tehnologie, putem adopta soluții alternative

polyfills

exemplificare: HTML5 Cross Browser Polyfillsgithub.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

Dr.

Sab

in B

ura

ga


co

alternative la HTML5 pentru interacțiuni Web mobile

http://html5please.com/

Dr.

Sab

in B

ura

ga


coExistă mai multeinterpretoare (parsers)

în cadrul unuibrowser Web? De ce?

Care sunt mai ușor de implementat:

extensiile sauplug-in-urile?

întrebări (pentru acasă)

Dr.

Sab

in B

ura

ga


co

episodul viitor: elemente de design Web

Dezvoltarea aplicaţiilor Web la nivel de client (cursul #2): Arhitectura navigatorului Web

Technology

Transcript of Dezvoltarea aplicaţiilor Web la nivel de client (cursul #2): Arhitectura navigatorului Web