CLIW 2014—2015 (4/12): Design Web. Proiectarea siturilor Web. Design Web responsiv
CLIW 2015-2016 (2/13) Arhitectura navigatorului Web
-
Upload
sabin-buraga -
Category
Software
-
view
230 -
download
0
Transcript of 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
www.purl.org/net/busaco
“To avoid criticismdo nothing, say nothing, be nothing.”
Elbert Hubbard
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
mediu de execuție
browser Web
funcționalități de bază(application logic)
interpretorJavaScript
acces la platformă
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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
www.purl.org/net/busaco
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/busaco
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/busaco
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/busaco
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/busaco
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
www.purl.org/net/busaco
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/busaco
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/busaco
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
www.purl.org/net/busaco
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
www.purl.org/net/busaco
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/busaco
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
www.purl.org/net/busaco
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
www.purl.org/net/busaco
Care este arhitectura generalăa unui navigator Web?
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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/busaco
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/busaco
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/busaco
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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/busaco
browser engine
„punte” între interfața cu utilizatorul și rendering engine
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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/busaco
rendering engine
realizează redarea conținutului solicitat
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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/busaco
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/busaco
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/busaco
rendering engine
include un interpretor (parser) HTML
conform tipului de document Web – DTD
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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/busaco
rendering engine
include un interpretor (parser) HTML
pot fi folosite diverse euristici (speculative parsing),
mai ales în cazul codului care nu e bine formatat
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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/busaco
rendering engine
cod sursă HTML – încărcat (a)sincron de pe rețea
arbore DOM
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
fazele importante ale procesării unui document HTMLîn vederea obținerii arborelui DOM
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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/busaco
rendering engine
în mod tradițional,modelul de procesare este sincron, single-threaded
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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/busaco
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/busaco
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/busaco
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/busaco
rendering engine
arbore DOM
arbore de redare (render tree)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
relația dintre arborele DOM șiarborele de redare a conținutului (render tree)
conform Hyungwook Lee, 2014
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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
www.purl.org/net/busaco
rendering engine
alături de arborele de redare, se va genera și:
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
www.purl.org/net/busaco
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/busaco
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/busaco
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
www.purl.org/net/busaco
<p>Dezvoltare <strong>Web</strong>
la nivel de <em>client</em></p>
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
www.purl.org/net/busaco
rendering engine
arbore de redare (render tree)
generare a aranjamentului vizual (layout)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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/busaco
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/busaco
rendering engine
calcularea aranjamentului (layout)
global layout (pentru întreg render tree) – recursivvs.
incremental
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
rendering engine
calcularea aranjamentului (layout)
global layout (pentru întreg render tree) – recursivvs.
incremental
sincron vs. asincron
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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…și multe altele
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Firefox: vizualizarea datelor privind layout-ul calculatdetalii la https://developer.mozilla.org/docs/Tools
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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/busaco
rendering engine
generare aranjament vizual (layout)
afișare layout
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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/busaco
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/busaco
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
www.purl.org/net/busaco
rendering engine
după afișarea propriu-zisă,
pot apărea schimbări de redare
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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
www.purl.org/net/busaco
fluxul de activități realizate de Geckodeveloper.mozilla.org/Gecko
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
organizarea codului Gecko – diagramă simplificată(Robert O’Callahan, 2013)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
fluxul de activități realizate de WebKitwww.webkit.org
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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/busaco
procesele din cadrul Chrome (Levi Weintraub, 2012)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
arhitectura multiproces
la Chromium
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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
www.purl.org/net/busaco
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/busaco
networking
responsabil cu transferurile de date de pe Internet
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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/busaco
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/busaco
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/busaco
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/busaco
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ă
www.slideshare.net/guypod/https-what-why-and-how-smashingconf-freiburg-sep-2015
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
extensiaHTTPS Everywhere
www.eff.org/https-everywhere
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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
www.purl.org/net/busaco
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
www.purl.org/net/busaco
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
www.purl.org/net/busaco
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/busaco
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/busaco
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/busaco
browsershots.org
www.browserstack.com
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
JavaScript interpreter
interpretează și execută programele JavaScript
la nivel de client
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
fazele principale ale procesării și rulării codului JavaScript(Hyungwook Lee, 2014)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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
www.purl.org/net/busaco
JavaScript interpreter (engine)
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
www.purl.org/net/busaco
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/busaco
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/busaco
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/busaco
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/busaco
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/busaco
data persistence
modul responsabil cu stocarea datelor
pe calculatorul client
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
data persistence
cookie-uri
cache
localStorage (HTML5)
SQLite database (HTML5)
…
detalii la alt curs
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
fluxul de activități realizate de browser-ul Web(Hyungwook Lee, 2014)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
(în loc de) pauză
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
Ce putem afirma despreparticularitățile navigatoarelor Web?
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
arhitectura inițială a navigatorului Firefox
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
arhitectura Internet Explorer tradițional (conform MSDN)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
arhitecturamulti-procesla versiunile
moderne de Internet
Explorer (Loosely-
Coupled IE)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
arhitectura conceptuală a browser-ului Chrome(Tom Hauser et al., 2009; Ilya Grigorik, 2013)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
structura internă a navigatorului Chromium (H. Lee, 2014)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
diagrama fluxului de date – cazul Chrome(Hauser et al., 2009)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
arhitectura browser-ului Lynx (Grosskurth & Godfrey, ‘06)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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/busaco
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
www.purl.org/net/busaco
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/busaco
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/busaco
Plug-in
actualmente, se descurajează utilizarea plug-in-urilor
alternative:
utilizarea bibliotecilor JavaScript
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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
www.purl.org/net/busaco
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/busaco
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/busaco
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
www.purl.org/net/busaco
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
www.purl.org/net/busaco
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/busaco
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/busaco
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/busaco
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/busaco
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/busaco
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
www.purl.org/net/busaco
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
www.purl.org/net/busaco
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/busaco
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/busaco
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
www.purl.org/net/busaco
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/busaco
teste și comparații: www.browserscope.org
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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
www.purl.org/net/busaco
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/busaco
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/busaco
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/busaco
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
www.purl.org/net/busaco
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
www.purl.org/net/busaco
tehnologii Web implementate de un browser actual: http://platform.html5.org/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busaco
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
www.purl.org/net/busaco
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
www.purl.org/net/busaco
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
www.purl.org/net/busaco
episodul viitor: elemente de design Web