CLIW 2015-2016 (2/13) Arhitectura navigatorului Web

Dr.

Sab

in B

ura

ga

www.purl.org/net/busaco

Dezvoltarea aplicațiilor Webla nivel de client

☸arhitectura unui navigator Web

Dr.

Sab

in B

ura

ga


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

Elbert Hubbard

Dr.

Sab

in B

ura

ga


mediu de execuție

browser Web

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

interpretorJavaScript

acces la platformă

Dr.

Sab

in B

ura

ga


mediu de execuție(sistem de operare, aplicație nativă,…)

browser Web

funcționalități de bazăprocesare conținut, redare,…

interpretorJavaScript

acces la platformă

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

Dr.

Sab

in B

ura

ga


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

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

www.useragentstring.com

Dr.

Sab

in B

ura

ga


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 (X11; I; AIX 2)

Netscape Communicator 4 – Mozilla/4.04 [en] (WinNT; U)

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

Dr.

Sab

in B

ura

ga


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

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

Dr.

Sab

in B

ura

ga


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

oferă 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


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

și 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


1998 – apariția procesorului de redare (rendering engine) Gecko

Mozilla/Versiune (Platformă; Criptare; OS/CPU; Limbă;

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


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

acces via WAP (Wireless Access Protocol)conținut structurat cu WML (Wireless Markup Language)

procesare de date + interacțiune prin WMLScript

Dr.

Sab

in B

ura

ga


fundația Mozilla – codul Netscape disponibil open source: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:41.0) Gecko/20100101 Firefox/41.0

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

Dr.

Sab

in B

ura

ga


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 (iPad; CPU OS 8_4_1 like Mac OS X) AppleWebKit/600.1.4

(KHTML, like Gecko) Version/8.0 Mobile/12H321 Safari/600.1.4

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

Dr.

Sab

in B

ura

ga


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


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 5.0.2;…) AppleWebKit/537.36 (KHTML, like Gecko)

Chrome/44.0.2403.117 Safari/537.36 GSA/5.2.33.19.arm

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

www.chromium.org

Dr.

Sab

in B

ura

ga


2015 – Microsoft Edge folosind EdgeHTML(bazat pe Trident de la vechiul IE)

accent asupra suportului standardelor Web și interoperabilității

rulează exclusiv pe sistemele WindowsMozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36

(KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Edge/12.10240

https://dev.modern.ie/platform/status/

Dr.

Sab

in B

ura

ga


Care este arhitectura generalăa unui navigator Web?

Dr.

Sab

in B

ura

ga


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


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

rendering engine

Dr.

Sab

in B

ura

ga


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


Dr.

Sab

in B

ura

ga


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


browser engine

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

Dr.

Sab

in B

ura

ga


browser engine

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

nucleu (kernel)

plug-ins

extensions

add-ons

Dr.

Sab

in B

ura

ga


rendering engine

realizează redarea conținutului solicitat

Dr.

Sab

in B

ura

ga


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


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


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


rendering engine

include un interpretor (parser) HTML

conform tipului de document Web – DTD

Dr.

Sab

in B

ura

ga


rendering engine


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


rendering engine


pot fi folosite diverse euristici (speculative parsing),

mai ales în cazul codului care nu e bine formatat

Dr.

Sab

in B

ura

ga


proce-sare cod

HTML

arboreDOM

generarearbore

de redare

determi-nare

layout

afișare(rendering)

layout

Dr.

Sab

in B

ura

ga


rendering engine

cod sursă HTML – încărcat (a)sincron de pe rețea

arbore DOM

Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga


HTMLHtml

Element

HTMLBody

Element

HTMLParagraph

Element

Text

HTMLHead

Element

HTMLTitle

Element

<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body>

Salut, lume!

</body>

</html>

www.w3.org/DOM/

http://dom.spec.whatwg.org/

Dr.

Sab

in B

ura

ga


rendering engine

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

Dr.

Sab

in B

ura

ga


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


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


rendering engine

pentru HTML5, script-urile JavaScript

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

eventual după ce documentul a fost procesat

https://developer.mozilla.org/docs/Web/HTML/Element/script

Dr.

Sab

in B

ura

ga


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


rendering engine

arbore DOM

arbore de redare (render tree)

Dr.

Sab

in B

ura

ga


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

conform Hyungwook Lee, 2014

Dr.

Sab

in B

ura

ga


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 (RenderObjects):

RenderBlock, RenderText, RenderInline etc.

Dr.

Sab

in B

ura

ga


rendering engine


style tree

compus din RenderStyles

include valorile calculate ale proprietăților de stil

asociat arborelui obiectelor de redare (render object tree)

Dr.

Sab

in B

ura

ga


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


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


rendering engine

în arborele de redare nu vor fi incluse

elementele non-vizuale (e.g., <head>, <script>, <title>)

sau nodurile ascunse via proprietatea CSS display: none

Dr.

Sab

in B

ura

ga


Dezvoltare Web

la nivel de client

RenderBlock (p)

RenderText ('Dezvoltare')

RenderInline (strong)

RenderText ('Web')

RenderText ('la nivel de')

RenderInline (em)

RenderText ('client')

RenderBlock (p)

RootLineBox (line 1)

InlineBox (text)

InlineBox (strong)

RootLineBox (line 2)

InlineBox (text)

InlineBox (em)

InlineBox (text)

„cutii” de redare a liniilor de conținut, conform stilurilor de afișare specificate de CSS

adaptare după Ryan Seddon (2015)https://speakerdeck.com/ryanseddon/how-the-browser-actually-renders-a-website

Dr.

Sab

in B

ura

ga


rendering engine

arbore de redare (render tree)

generare a aranjamentului vizual (layout)

Dr.

Sab

in B

ura

ga


rendering engine

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

Dr.

Sab

in B

ura

ga


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


rendering engine

calcularea aranjamentului (layout)

global layout (pentru întreg render tree) – recursivvs.

incremental

Dr.

Sab

in B

ura

ga


rendering engine


global layout (pentru întreg render tree) – recursivvs.

incremental

sincron vs. asincron

Dr.

Sab

in B

ura

ga


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…și multe altele

Dr.

Sab

in B

ura

ga


Firefox: vizualizarea datelor privind layout-ul calculatdetalii la https://developer.mozilla.org/docs/Tools

Dr.

Sab

in B

ura

ga


Firefox: vizualizarea 3D a arborelui DOM via arborele de redare(proiectul Tilt realizat de absolventul FII Victor Porof – GSoC 2011)

Dr.

Sab

in B

ura

ga


rendering engine

generare aranjament vizual (layout)

afișare layout

Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga


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


redarea conținutului grafic prin compunerea stratelorfolosind o tehnologie precum OpenGL

(Hyungwook Lee, 2014)http://www.slideshare.net/HyungwookLee/mobilebrowserinternal-20140122

Dr.

Sab

in B

ura

ga


rendering engine

după afișarea propriu-zisă,

pot apărea schimbări de redare

Dr.

Sab

in B

ura

ga


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

www.purl.org/net/busacorendering engine

exemplificări notabile:

EdgeHTML (Microsoft: Edge)

Gecko (Firefox, SeaMonkey, Thunderbird)

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

Trident (Microsoft: IE, IE Mobile, Skype)

WebKit (Apple Safari, Chromium/Chrome, Adobe AIR +

multe platforme mobile: Android, Blackberry, iOS)

Blink (Google Chrome, Opera, Amazon Silk – din 2013)

Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga


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


procesele din cadrul Chrome (Levi Weintraub, 2012)

Dr.

Sab

in B

ura

ga


arhitectura multiproces

la Chromium

Dr.

Sab

in B

ura

ga


arhitectura multi-proces la Gecko (R. O’Callahan, 2013)http://people.mozilla.org/~roc/Samsung/MozillaArchitectures.pdf

vezi proiectul Electrolysis – wiki.mozilla.org/Electrolysis

Dr.

Sab

in B

ura

ga


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


networking

responsabil cu transferurile de date de pe Internet

Dr.

Sab

in B

ura

ga


networking


API independent de platformă

+

implementări specifice fiecărui sistem de operare

Dr.

Sab

in B

ura

ga


networking


API independent de platformă

+

implementări specifice fiecărui sistem de operare

exemplificare: Firefox utilizează modulul Necko

Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga


networking


protocolul HTTP

standardizat în 1999: RFC 2616din iunie 2014, e definit de RFC 7230—7235

www.w3.org/Protocols/

Dr.

Sab

in B

ura

ga


networking


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

autentificare pe baza certificatelor digitale+ criptare bidirecțională

www.slideshare.net/guypod/https-what-why-and-how-smashingconf-freiburg-sep-2015

Dr.

Sab

in B

ura

ga


extensiaHTTPS Everywhere

www.eff.org/https-everywhere

Dr.

Sab

in B

ura

ga


networking

folosit pentru transferuri de date de pe Internet

protocolul SPDY – un experiment Google (retras în 2016)

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


networking

folosit pentru transferuri de date de pe Internet

protocolul HTTP/2.0 – standardizat în 2015: RFC 7540

extinde ideile SPDY, focalizat asupra performanței

http://royal.pingdom.com/2015/06/11/http2-new-protocol/

http://http2.github.io/

Dr.

Sab

in B

ura

ga


a se studia și capitolul despre HTTP/2 din Ilya Grigorik, High Performance Browser Networking (O’Reilly, 2014)

hpbn.co/http2

Dr.

Sab

in B

ura

ga


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


studiu de caz

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

Dr.

Sab

in B

ura

ga


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


browsershots.org

www.browserstack.com

Dr.

Sab

in B

ura

ga


JavaScript interpreter

interpretează și execută programele JavaScript

la nivel de client

Dr.

Sab

in B

ura

ga


fazele principale ale procesării și rulării codului JavaScript(Hyungwook Lee, 2014)

Dr.

Sab

in B

ura

ga


JavaScript interpreter (engine)

Carakan (Opera)

Chakra (Microsoft)

Nashorn (Oracle)

Nitro (SquirrelFish), JavaScriptCore (Apple)

SpiderMonkey, IonMonkey, Rhino (Mozilla)

Tamarin (Adobe)

V8 (Google, Opera, Node.js)Chrome include optimizări specifice precum TurboFan (2015)

Dr.

Sab

in B

ura

ga



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

exemplificări: Benchmark.js, Kraken (Mozilla),

Octane (Google), SunSpider (Apple)combinarea mai multor teste de performanță: JetStream

Dr.

Sab

in B

ura

ga



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

diverse statistici la http://arewefastyet.com/

un studiu: JavaScript Parse and Execution Time (2014)http://timkadlec.com/2014/09/js-parse-and-execution-time/

Dr.

Sab

in B

ura

ga


XML parser

responsabil cu procesarea documentelor XML via DOM

implementarea minimală vizează DOM nivelul 2

Dr.

Sab

in B

ura

ga


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


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


XML parser

unele navigatoare ofera facilități pentru alte limbaje XML

fluxuri de știri Atom și RSS (Really Simple Syndication)

MathML

SVG (Scalable Vector Graphics)

etc.

Dr.

Sab

in B

ura

ga


data persistence

modul responsabil cu stocarea datelor

pe calculatorul client

Dr.

Sab

in B

ura

ga


data persistence

cookie-uri

cache

localStorage (HTML5)

SQLite database (HTML5)

…

detalii la alt curs

Dr.

Sab

in B

ura

ga


fluxul de activități realizate de browser-ul Web(Hyungwook Lee, 2014)

Dr.

Sab

in B

ura

ga


(în loc de) pauză

Dr.

Sab

in B

ura

ga


Ce putem afirma despreparticularitățile navigatoarelor Web?

Dr.

Sab

in B

ura

ga


arhitectura inițială a navigatorului Firefox

Dr.

Sab

in B

ura

ga


arhitectura Internet Explorer tradițional (conform MSDN)

Dr.

Sab

in B

ura

ga


arhitecturamulti-procesla versiunile

moderne de Internet

Explorer (Loosely-

Coupled IE)

Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga


structura internă a navigatorului Chromium (H. Lee, 2014)

Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga


Remarcă

un navigator Web modern prezintăo arhitectură modulară

realizată pe baza unui nucleu (browser kernel)

Dr.

Sab

in B

ura

ga


Remarcă

un navigator Web modern prezintăo arhitectură modulară

realizată pe baza unui nucleu (browser kernel)

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

Dr.

Sab

in B

ura

ga


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


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


Plug-in

actualmente, se descurajează utilizarea plug-in-urilor

alternative:

utilizarea bibliotecilor JavaScript

Dr.

Sab

in B

ura

ga


Plug-in

alternative:

utilizarea bibliotecilor JavaScript

exemplificări notabile:

pdf.js – redarea documentelor PDFhttps://github.com/mozilla/pdf.js

Shumway – emularea mașinii virtuale Flash (redare SWF)http://mozilla.github.io/shumway/

JwPlayer, Kaltura, Video.js – redare de conținut videohttps://archive.fosdem.org/2015/schedule/event/open_video_players/

Dr.

Sab

in B

ura

ga


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


Extensie

implementare via tehnologii Web (HTML, CSS, JavaScript)

în unele cazuri,

instalarea nu necesită restartarea browser-ului

Dr.

Sab

in B

ura

ga


Extensie

resurse pentru dezvoltatori:

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

Firefox – https://wiki.mozilla.org/WebExtensions

MSIE – http://tinyurl.com/pnqepat

Opera – https://dev.opera.com/extensions/

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

Dr.

Sab

in B

ura

ga


Extensie

eventual, pentru dezvoltare poate fi folosit un framework

exemple:

BabelExt – https://github.com/honestbleeps/BabelExt

Crossrider – http://crossrider.com/developers

Dr.

Sab

in B

ura

ga


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


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


Widget

implementare pe baza standardelor Web: HTML, CSS, JS

eventual, se poate recurge la un API

recomandare W3C din octombrie 2013

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

Dr.

Sab

in B

ura

ga


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 tipică: addons.mozilla.org

Dr.

Sab

in B

ura

ga


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


Web component

dezvoltare bazată pe o bibliotecă/framework JavaScript

soluții „tradiționale”: Dojo Toolkit, jQuery UI,…

una dintre alternativele moderne: React

Dr.

Sab

in B

ura

ga


Web component

cadrul general: Web Components

(în lucru la Consorțiul Web din 2013)

templates, decorators, custom elements,

shadow DOM, imports etc.

Dr.

Sab

in B

ura

ga


Web component

implementări actuale:

Polymer – www.polymer-project.org

X-Tag – http://x-tags.org/

detalii + exemple practice:

http://webcomponents.org/

http://customelements.io/

Dr.

Sab

in B

ura

ga


Web app

o aplicație Web instalabilă

care folosește API-urile oferite de browser

exemplu tipic: Chrome Appshttps://developers.google.com/google-apps/

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


Web app

alte exemplificări:

aplicații Windows universale dezvoltate în JavaScripthttps://dev.windows.com/en-us/develop/winjs

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

aplicații Web mobile pentru Amazon Fire și alteledeveloper.amazon.com/appsandservices/solutions/platforms/webapps

aplicații pentru Ubuntu folosind HTML5https://developer.ubuntu.com/en/apps/html-5/

Dr.

Sab

in B

ura

ga


Aspecte de interes privind navigatorul Web:

toleranța la defectesecuritatea

managementul memorieiperformanța

interacțiunea cu utilizatorul

Dr.

Sab

in B

ura

ga


teste și comparații: www.browserscope.org

Dr.

Sab

in B

ura

ga


Remarcă:în cadrul unui browser Web

pot fi utilizate procesoare de redare multiple

exemplificări:Avant Browser – bazat pe Gecko, Trident și WebKit

Lunascape – include Gecko, Trident și WebKitMaxthon – recurge la WebKit/Blink și Trident

Tungsten – folosește Blink și Trident

Dr.

Sab

in B

ura

ga


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


Amazon Silk (bazat pe Chromium)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


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


Navigatoare Web experimentale

Servo (Mozilla Research, Samsung et al., din 2014)

un nucleu de browser Web (engine) paralel prototip scris în Rust pentru arhitecturi pe 64 de biți:

OS X, Linux, Android, Firefox OS

https://github.com/servo/servo

https://archive.fosdem.org/2015/schedule/event/servo_and_you/

Dr.

Sab

in B

ura

ga


Navigatoare Web experimentale

Zoomm (Qualcomm Research, 2013)navigator paralel pentru dispozitive mobile multi-nucleu

http://www.tinmith.net/papers/cascaval-ppopp-2013.pdf

Dr.

Sab

in B

ura

ga


tehnologii Web implementate de un browser actual: http://platform.html5.org/

Dr.

Sab

in B

ura

ga


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

o anumită tehnologie, se pot adopta soluții alternative

polyfills

uzual, implementate via JavaScript

Dr.

Sab

in B

ura

ga


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

o anumită tehnologie, se pot adopta soluții alternative

polyfills

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

Dr.

Sab

in B

ura

ga


alternative la diverse facilități HTML5http://html5please.com/

Dr.

Sab

in B

ura

ga

www.purl.org/net/busacoExistă mai multe

interpretoare (parsers) în cadrul unui

browser Web? De ce?

Care sunt mai ușor de implementat:

extensiile sauplug-in-urile?

întrebări (pentru acasă)

Dr.

Sab

in B

ura

ga


episodul viitor: elemente de design Web

CLIW 2015-2016 (2/13) Arhitectura navigatorului Web

Software

Transcript of CLIW 2015-2016 (2/13) Arhitectura navigatorului Web