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

Dr. Sabin Buragawww.purl.org/net/busaco

arhitectura unui navigator Web

Elbert Hubbard


“To avoid criticism
do nothing, say nothing, be nothing.”

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

interpretor
JavaScript

acces la
platformă


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

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

interpretor
JavaScript

acces la
platformă

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


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


Un client (i.e. browser Web) se identifică via valoarea
câmpului-antet User-Agent dintr-o cerere HTTP

1994 – primul browser comercial: Netscape Navigator
include 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/


1993 – primul browser Web: Mosaic – Mosaic/0.9


1994 – primul browser disponibil pe un dispozitiv
miniaturizat (PDA – Apple Newton): PocketWeb
http://www.teco.edu/pocketweb/

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


1996 – primul navigator produs de Microsoft: MSIE
include dialectul JScript și propriul BOM
multe facilități, ulterior standardizate de W3C
Mozilla/2.0 (compatible; MSIE Versiune; Sistem de operare)


1996 – primul navigator trialware: Opera 2
focalizat 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/

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


1998 – apariția procesorului de redare Gecko
Mozilla/Versiune (Platformă; Criptare; OS/CPU; Limbă;
VersiuneAnterioară) Gecko/Versiune Produs/Versiune


1997—1999 – navigator Web pentru telefoane mobile:
HitchHiker (ulterior, Microsoft Mobile Explorer 2.0)
WAP – protocol, WML – limbaj de marcare, WMLScript


fundația Mozilla – versiunea open source a Netscape:
Phoenix (2002)Firebird (2003)Firefox (2004)
focalizare asupra respectării standardelor Web
interfață 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, Release

Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:27.0) Gecko/20100101 Firefox/27.0

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


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

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


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


2008 – Google Chrome folosind WebKit; din 2013: Blink
bazat pe proiectul open source Chromium
focalizare asupra performanței la nivel de client Web
interfață minimalistă + manager de tab-uri
include instrumente avansate pentru dezvoltatori

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


Care este arhitectura generală
a unui navigator Web?

rendering engine
net
work

JS

interpreter

XML
parser

display back-end

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


browser engine

data persistence

user interface


rendering engine

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

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
…


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


user interface

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


browser engine

“punte” între interfața cu utilizatorul și rendering engine
nucleu (kernel)
plug-ins
extensions
add-ons


browser engine

realizează redarea conținutului solicitat


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,…


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


rendering engine


o aplicație Web la nivel de client poate fi compusă din diverse
componente, încărcate dinamicmanagementul arborilor DOM
(Dimitri Glazkov, 2013)

include un interpretor (parser) HTML
conform tipului de document Web – DTD


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


rendering engine

generare
arbore
de
redare

determinare
layout

afișare


procesare cod
HTML

arbore
DOM

(rendering)

layout

cod sursă HTML

arbore DOM


rendering engine


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


a se revedea cursul
“Limbaje formale &
tehnici de compilare”

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

HTML
Body
Element

HTML
Head
Element

HTML
Paragraph
Element

Text

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

HTML
Title
Element


<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p>Salut, lume!</p>
</body>
</html>

HTML
Html
Element

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


rendering engine


programele JavaScript vor trebui executate imediat
ce procesorul întâlnește codul
(eventual, extern – încărcat de pe alt sit, dacă e posibil)


rendering engine


programele JavaScript vor trebui executate imediat
ce procesorul întâlnește codul
implicit, procesul de rendering e oprit
până ce codul JavaScript este executat complet


rendering engine

pentru HTML5, script-urile JavaScript
pot fi executate asincron (într-un thread separat)


rendering engine

deoarece – în mod normal – stilurile CSS
nu modifică arborele DOM, procesarea poate avea loc
independent de încărcarea fișierelor CSS


rendering engine

arbore DOM

arbore de redare (render tree)


rendering engine

conform David Baron, 2008


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

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.


rendering engine



rendering engine

style tree
include valorile calculate ale proprietăților de stil
asociat arborelui obiectelor de redare (render object tree)

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)


rendering engine

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


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

arbore de redare (render tree)

generare a aranjamentului vizual (layout)


rendering engine

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


rendering engine

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

se pot lua în considerație coordonatele ferestrei
navigatorului + proprietățile mediului de redare:
rezoluție, orientare (portrait vs. landscape),
suport pentru 3D etc.


rendering engine

calcularea aranjamentului (layout)

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


rendering engine


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


rendering engine



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
…


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


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)

generare aranjament vizual (layout)

afișare layout


rendering engine


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

afișarea propriu-zisă (painting)
poate fi realizată la nivel de software
sau pe baza procesorului grafic (accelerată hardware)


rendering engine

după afișarea propriu-zisă,
pot apărea schimbări de redare


rendering engine

după afișarea propriu-zisă,
pot apărea schimbări de redare
la nivel local/global
re-layout și/sau re-paint


rendering engine


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)


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


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


fluxul de activități realizate de WebKit
www.webkit.org

anumite browser-e pot rula mai multe instanțe
ale procesorului responsabil cu redarea conținutului

exemplu tipic: Google Chrome


rendering engine


procesele din cadrul Chrome (Levi Weintraub, 2012)


arhitectura
multiproces
la
Chromium


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

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),…


rendering engine

responsabil cu transferurile de date de pe Internet


networking


API independent de platformă
+
implementări specifice fiecărui sistem de operare


networking


API independent de platformă
+
implementări specifice fiecărui sistem de operare
exemplificare: Firefox utilizează modulul Necko


networking


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


protocolul HTTP
standardizat de RFC 2616
www.w3.org/Protocols/


networking


HTTPS – asigură comunicații “sigure” HTTP
via TLS (Transport Layer Security):
autentificare pe baza certificatelor digitale
+ criptare bidirecțională
RFC 2818 – https://tools.ietf.org/html/rfc2818


networking


extensia
HTTPS Everywhere

www.eff.org/https-everywhere

folosit pentru transferuri de date de pe Internet

protocolul SPDY – un experiment Google


networking

număr nelimitat de cereri concurente folosind aceeași
conexiune (eventual, via un sistem de priorități)
compresarea anteturilor mesajelor
fluxuri de date în regim push (notificări primite de client)


protocolul SPDY – un experiment Google
detalii la http://www.chromium.org/spdy


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


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 optimizare
a încărcării resurselor
detalii într-un
curs viitor


networking


studiu de caz

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

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,…)


display (UI) backend

browsershots.org
www.browserstack.com

interpretează și execută programele JavaScript
la nivel de client


JavaScript interpreter

Carakan (Opera)
Chakra (Microsoft)
Nashorn (Oracle)
Nitro (SquirrelFish), JavaScriptCore (Apple)
SpiderMonkey, IonMonkey, Rhino (Mozilla)
Tamarin (Adobe)
V8 (Google, Opera, Node.js)


JavaScript interpreter (engine)

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

exemplificări:
Benchmark.js, Internet Explorer Test Drive (Microsoft),
Kraken (Mozilla), Octane (Google), SunSpider (Apple)
diverse statistici la http://arewefastyet.com/


JavaScript interpreter (engine)

responsabil cu procesarea documentelor XML via DOM
implementarea minimală vizează DOM nivelul 2


XML parser

în unele cazuri, procesarea documentelor XML
poate implica validarea datelor via DTD,
dar nu folosind scheme XML


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.


XML parser

unele navigatoare ofera facilități pentru alte limbaje XML
e.g., MathML sau SVG (Scalable Vector Graphics)


XML parser

modul responsabil cu stocarea datelor
pe calculatorul client


data persistence

cookie-uri
cache
localStorage (HTML5)
SQLite database (HTML5)
…
detalii la alt curs


data persistence


Ce putem afirma despre
particularitățile navigatoarelor Web?


arhitectura inițială a navigatorului Firefox


arhitectura Internet Explorer (conform MSDN)


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


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


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


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

un navigator Web modern prezintă
o arhitectură modulară
realizată pe baza unui nucleu (browser kernel)


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


Remarcă

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


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


Plug-in

poate rula în același proces cu navigatorul Web


Plug-in

e.g., pentru Firefox se folosește IPDL – IPC (Inter-process
communication) Protocol Definition Language)


plug-in
poate rula într-un proces separat (out of process plug-in),
modul de apelare fiind definit via un limbaj specific

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/


Plug-in

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)


Extensie


Extensie

implementare via tehnologii Web (HTML, CSS, JavaScript)

în unele cazuri,
instalarea nu necesită restartarea browser-ului

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/


Extensie

eventual, pentru dezvoltare poate fi folosit un framework
exemple:
BabelExt
Crossrider


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/


Extensie

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)


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/


Widget

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


Add-on

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


Web component

dezvoltare bazată pe o bibliotecă/framework JavaScript
soluții “tradiționale”:
Dojo Toolkit, jQuery UI, YUI,…


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/


Web component

implementări:
Polymer (Google) – www.polymer-project.org
X-Tag (Mozilla) – www.x-tags.org


Web component

o aplicație Web instalabilă
care folosește API-urile oferite de browser
exemplu tipic: Chrome Apps
https://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


Web app

alte exemple notabile:
aplicații Windows 8 dezvoltate în JavaScript
http://msdn.microsoft.com/en-us/library/windows/apps/br211369.aspx

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


Web app

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

toleranța la defecte
securitatea
managementul memoriei
performanța
interacțiunea cu utilizatorul


Aspecte de interes privind navigatorul Web:


teste & comparații: www.browserscope.org

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


Navigatoare Web hibride


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

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


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


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


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

polyfills

uzual, implementate via JavaScript


Dacă un browser Web nu are (încă) suport pentru
o anumită tehnologie, putem adopta soluții alternative

polyfills

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


Dacă un browser Web nu are (încă) suport pentru
o anumită tehnologie, putem adopta soluții alternative


alternative la HTML5 pentru
interacțiuni Web mobile
http://html5please.com/

Există mai multe
interpretoare (parsers)
în cadrul unui
browser Web? De ce?
Care sunt mai ușor
de implementat:
extensiile sau
plug-in-urile?


întrebări (pentru acasă)

episodul viitor: elemente de design Web

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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

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

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

Mehr von Sabin Buraga

Mehr von Sabin Buraga (17)

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