Date post: | 14-Jul-2015 |
Category: |
Technology |
Upload: | sabin-buraga |
View: | 336 times |
Download: | 7 times |
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Dezvoltarea aplicațiilor Webla nivel de client
☸arhitectura unui navigator Web
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
“To avoid criticismdo nothing, say nothing, be nothing.”
Elbert Hubbard
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
www.purl.org/net/busa
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
www.purl.org/net/busa
co
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
www.purl.org/net/busa
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 (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
www.purl.org/net/busa
co
1994 – primul browser disponibil pe un dispozitivminiaturizat (PDA – Apple Newton): PocketWeb
http://www.teco.edu/pocketweb/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
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
www.purl.org/net/busa
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
www.purl.org/net/busa
co
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
www.purl.org/net/busa
co
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
www.purl.org/net/busa
co
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:27.0) Gecko/20100101 Firefox/27.0
https://developer.mozilla.org/Mozilla/Firefox
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
www.purl.org/net/busa
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
www.purl.org/net/busa
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
www.purl.org/net/busa
co
Care este arhitectura generalăa unui navigator Web?
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
www.purl.org/net/busa
co
procesele implicate în afișarea conținutului unei pagini Web(J. Brereton et al., 2011)
rendering engine
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
www.purl.org/net/busa
co
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
www.purl.org/net/busa
co
browser engine
„punte” între interfața cu utilizatorul și rendering engine
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
www.purl.org/net/busa
co
rendering engine
realizează redarea conținutului solicitat
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
www.purl.org/net/busa
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
www.purl.org/net/busa
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
www.purl.org/net/busa
co
rendering engine
include un interpretor (parser) HTML
conform tipului de document Web – DTD
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
www.purl.org/net/busa
co
proce-sare cod
HTML
arboreDOM
generarearbore
de redare
determi-nare
layout
afișare(rendering)
layout
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
rendering engine
cod sursă HTML
arbore DOM
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
fazele importante ale procesării unui document HTMLîn vederea obținerii arborelui DOM
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
fazele importante ale procesării unui document HTMLîn vederea obținerii arborelui DOM
a se revedea cursul „Limbaje formale și
tehnici de compilare”
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
www.purl.org/net/busa
co
rendering engine
în mod tradițional,modelul de procesare este sincron, single-threaded
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
rendering engine
în mod tradițional,modelul de procesare este sincron, single-threaded
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
www.purl.org/net/busa
co
rendering engine
în mod tradițional,modelul de procesare este sincron, single-threaded
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
www.purl.org/net/busa
co
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
www.purl.org/net/busa
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
www.purl.org/net/busa
co
rendering engine
arbore DOM
arbore de redare (render tree)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
relația dintre arborele DOM șiarborele de redare a conținutului (render tree)
conform David Baron, 2008
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
www.purl.org/net/busa
co
rendering engine
alături de arborele de redare, se va genera și:
style tree
include valorile calculate ale proprietăților de stil
asociat arborelui obiectelor de redare (render object tree)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
rendering engine
alături de arborele de redare, se va genera și:
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
www.purl.org/net/busa
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
www.purl.org/net/busa
co
rendering engine
arbore de redare (render tree)
generare a aranjamentului vizual (layout)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
rendering engine
calcularea aranjamentului (layout) e dependentăde zona de afișare – uzual, un tab al navigatorului
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
www.purl.org/net/busa
co
rendering engine
calcularea aranjamentului (layout)
global layout (pentru întreg render tree) vs. incremental
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
rendering engine
calcularea aranjamentului (layout)
global layout (pentru întreg render tree) vs. incremental
sincron vs. asincron
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
rendering engine
calcularea aranjamentului (layout)
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
www.purl.org/net/busa
co
Firefox: vizualizarea datelor privind layout-ul calculatdetalii la https://developer.mozilla.org/docs/Tools
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
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
www.purl.org/net/busa
co
rendering engine
generare aranjament vizual (layout)
afișare layout
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
redări diferite ale aceluiași document HTML(dependența de platformă și/sau de navigator)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
www.purl.org/net/busa
co
rendering engine
după afișarea propriu-zisă,
pot apărea schimbări de redare
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
www.purl.org/net/busa
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, Opera, Amazon Silk – din 2013)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
fluxul de activități realizate de Geckodeveloper.mozilla.org/Gecko
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
organizarea codului Gecko – diagramă simplificată(Robert O’Callahan, 2013)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
fluxul de activități realizate de WebKitwww.webkit.org
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
www.purl.org/net/busa
co
procesele din cadrul Chrome (Levi Weintraub, 2012)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
arhitectura multiproces
la Chromium
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
arhitectura multiproces la Gecko (Robert O’Callahan, 2013)http://people.mozilla.org/~roc/Samsung/MozillaArchitectures.pdf
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
www.purl.org/net/busa
co
networking
responsabil cu transferurile de date de pe Internet
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
networking
responsabil cu transferurile de date de pe Internet
API independent de platformă
+
implementări specifice fiecărui sistem de operare
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
networking
responsabil cu transferurile de date de pe Internet
API independent de platformă
+
implementări specifice fiecărui sistem de operare
exemplificare: Firefox utilizează modulul Necko
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
efectuarea unei cereri de rețea – cazul Chromiumdetalii la www.chromium.org/developers/design-documents/network-stack
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
networking
responsabil cu transferurile de date de pe Internet
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
www.purl.org/net/busa
co
networking
responsabil cu transferurile de date de pe Internet
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
www.purl.org/net/busa
coextensiaHTTPS Everywhere
www.eff.org/https-everywhere
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
www.purl.org/net/busa
co
networking
folosit pentru transferuri de date de pe Internet
protocolul SPDY – un experiment Google
detalii la http://www.chromium.org/spdy
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
networking
folosit pentru transferuri de date de pe Internet
protocolul HTTP/2.0 – în lucru la IETF
extinde ideile SPDY, focalizat asupra performanței
vezi prezentarea lui Mark Nottingham (2012)www.slideshare.net/mnot/what-http20-will-do-for-you
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
www.purl.org/net/busa
co
studiu de caz
Firefox: ajustarea parametrilor vizând conexiunile HTTP via schema URI about:config
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
www.purl.org/net/busa
co
browsershots.org
www.browserstack.com
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
JavaScript interpreter
interpretează și execută programele JavaScript
la nivel de client
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
www.purl.org/net/busa
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)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
JavaScript interpreter (engine)
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
www.purl.org/net/busa
co
XML parser
responsabil cu procesarea documentelor XML via DOM
implementarea minimală vizează DOM nivelul 2
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
www.purl.org/net/busa
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
www.purl.org/net/busa
co
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
www.purl.org/net/busa
co
data persistence
modul responsabil cu stocarea datelor
pe calculatorul client
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
data persistence
cookie-uri
cache
localStorage (HTML5)
SQLite database (HTML5)
…
detalii la alt curs
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Ce putem afirma despreparticularitățile navigatoarelor Web?
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
arhitectura inițială a navigatorului Firefox
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
arhitectura Internet Explorer (conform MSDN)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
arhitectura multi-proces la versiunile moderne de Internet Explorer (Loosely-Coupled IE)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
arhitectura conceptuală a browser-ului Chrome(Tom Hauser et al., 2009; Ilya Grigorik, 2013)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
diagrama fluxului de date – cazul Chrome(Hauser et al., 2009)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
arhitectura browser-ului Lynx (Grosskurth & Godfrey, ‘06)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Remarcă
un navigator Web modern prezintăo arhitectură modulară
realizată pe baza unui nucleu (browser kernel)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
www.purl.org/net/busa
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
www.purl.org/net/busa
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
www.purl.org/net/busa
co
Plug-in
poate rula în același proces cu navigatorul Web
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
www.purl.org/net/busa
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
www.purl.org/net/busa
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
www.purl.org/net/busa
co
Extensie
implementare via tehnologii Web (HTML, CSS, JavaScript)
în unele cazuri,
instalarea nu necesită restartarea browser-ului
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Extensie
resurse pentru dezvoltatori:
Chrome – http://developer.chrome.com/extensions/
Firefox – https://github.com/victorporof/Restartless-Template
MSIE – http://tinyurl.com/pnqepat
Opera – https://dev.opera.com/extensions/
Safari – https://developer.apple.com/programs/safari/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Extensie
eventual, pentru dezvoltare poate fi folosit un framework
exemple:
BabelExt
Crossrider
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
www.purl.org/net/busa
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
www.purl.org/net/busa
co
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
www.purl.org/net/busa
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.)
exemplificare tipică: addons.mozilla.org
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
www.purl.org/net/busa
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
www.purl.org/net/busa
co
Web component
cadrul general: Web Components
(în lucru la Consorțiul Web din 2013)
templates, decorators, custom elements,
shadow DOM, imports etc.
http://www.w3.org/wiki/WebComponents/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
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
www.purl.org/net/busa
co
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
www.purl.org/net/busa
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 Amazon Fire și alteledeveloper.amazon.com/appsandservices/solutions/platforms/webapps
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Aspecte de interes privind navigatorul Web:
toleranța la defectesecuritatea
managementul memorieiperformanța
interacțiunea cu utilizatorul
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
teste & comparații: www.browserscope.org
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
www.purl.org/net/busa
co
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
www.purl.org/net/busa
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
www.purl.org/net/busa
co
CloudBrowser (Brian McDaniel, 2012)http://cloudbrowser.cs.vt.edu/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
tehnologii Web implementate de browser: http://platform.html5.org/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Dacă un browser 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
www.purl.org/net/busa
co
Dacă un browser 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
www.purl.org/net/busa
co
alternative la HTML5 pentru interacțiuni Web mobile
http://html5please.com/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
www.purl.org/net/busa
co
episodul viitor: elemente de design Web