Prelegere din cadrul materiei "Dezvoltarea aplicaţiilor Web cu JavaScript" (Full-Stack Web Development) predată de Dr. Sabin Buraga (oct.2019–feb.2020).
Resurse suplimentare la https://profs.info.uaic.ro/~busaco/teach/courses/staw/web-film.html
7. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
1996 – primul navigator produs de Microsoft: MSIE
include dialectul JScript și propriul BOM
oferă multe facilități, ulterior standardizate de W3C
Mozilla/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
8. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
1996 – primul navigator trialware: Opera 2
focalizat 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]
dev.opera.com
9. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
1998 – apariția procesorului de redare
(rendering engine) Gecko
Mozilla/Versiune (Platformă; Criptare; OS/CPU; Limbă;
VersiuneRevizie) Gecko/Versiune Produs/Versiune
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
www.nczonline.net/blog/2010/01/12/history-of-the-user-agent-string/
10. Dr.SabinBuragaprofs.info.uaic.ro/~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
11. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
fundația Mozilla – codul Netscape disponibil open source:
Phoenix (2002)Firebird (2003)Firefox (2004)
axat asupra respectării standardelor Web
interfață via XUL (Extensible User-interface Language)
extensibil via add-ons (extensii, teme vizuale etc.)
ciclu de dezvoltare de 4 săptămâni – inițial, 6:
Nightly, Aurora, Beta, Release
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:70.0)
Gecko/20100101 Firefox/70.0
developer.mozilla.org/Mozilla/Firefox
12. Dr.SabinBuragaprofs.info.uaic.ro/~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/Versiune
Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en)
AppleWebKit/124 (KHTML, like Gecko) Safari/125.1
Mozilla/5.0 (iPad; CPU OS 12_0_1 like Mac OS X) AppleWebKit/605.1.15
(KHTML, like Gecko) Version/12.0 Mobile/15E148 Safari/604.1
developer.apple.com/safari/
13. Dr.SabinBuragaprofs.info.uaic.ro/~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 sisteme de stocare a datelor (data centers)
14. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
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 5.0.2;…) AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/44.0.2403.117 Safari/537.36 GSA/5.2.33.19.arm
developer.chrome.com
www.chromium.org
15. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
2015 – Microsoft Edge folosind EdgeHTML
(bazat pe Trident de la vechiul IE; în tranziție spre Blink)
accent asupra suportului standardelor Web
rulează exclusiv pe sistemele Windows
(se oferă mașini virtuale pentru testare pe alte platforme)
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36
(KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 Edge/18.18362
developer.microsoft.com/microsoft-edge/
20. Dr.SabinBuragaprofs.info.uaic.ro/~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
…
32. Dr.SabinBuragaprofs.info.uaic.ro/~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
cazul Firefox
developer.mozilla.org/en-US/docs/Mozilla/Gecko/HTML_parser_threading
35. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
fazele importante ale procesării
unui document HTML
în vederea obținerii arborelui DOM
preluare date
de pe rețea
procesare (tokeniser)
construire arbore
HTML
Html
Element
HTML
Body
Element
HTML
Paragraph
Element
Text
HTML
Head
Element
HTML
Title
Element
execuție script-uri JS
document.write()
38. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
rendering engine
în mod tradițional,
modelul de procesare este sincron, single-threaded
programele JavaScript vor trebui executate imediat
ce procesorul întâlnește codul
(eventual, extern – încărcat de pe alt sit, dacă e posibil)
39. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
rendering engine
în mod tradițional,
modelul de procesare este sincron, single-threaded
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
44. Dr.SabinBuragaprofs.info.uaic.ro/~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.
46. Dr.SabinBuragaprofs.info.uaic.ro/~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)
72. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
procesul de redare include – Kosaka (2018):
firul de execuție principal (main thread)
fire de execuție specifice worker-ilor JS (worker thread)
firul de execuție al compunerii grafice (compositor thread)
firul de execuție al generării pixelilor de afișat (raster thread)
81. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
networking
responsabil cu transferurile de date de pe Internet
protocolul HTTP/2.0 – standardizat în 2015: RFC 7540
axat asupra performanței: mesaje binare, reutilizarea
conexiunii TCP, multiplexare, compresia anteturilor –
HPACK, trimiterea mesajelor spre client (server push)
http2.github.io
89. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
JavaScript interpreter (engine)
optimizări specifice – V8 (lansat pe 2 septembrie 2008):
oferă interpretarea + compilarea codului JS
Ignition – interpretor de nivel scăzut bazat pe regiștri
github.com/v8/v8/wiki/Ignition
TurboFan – compilator JIT oferind o paletă de optimizări
github.com/v8/v8/wiki/TurboFan
de consultat și v8.dev
94. Dr.SabinBuragaprofs.info.uaic.ro/~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.
114. Dr.SabinBuragaprofs.info.uaic.ro/~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)
implementare pe baza standardelor Web: HTML, CSS, JS
121. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Web app
o aplicație Web instalabilă
care folosește API-urile oferite de browser
aplicații Windows universale (PC, Xbox One, HoloLens)
dezvoltate în JavaScript
docs.microsoft.com/en-us/windows/uwp/
aplicații Web mobile pentru dispozitive Amazon Fire
developer.amazon.com/apps-and-games/
aplicații Web pentru platforma Tizen (mobile, wearable,
TV, IVI – In-Vehicle Infotainment): Web Device API
developer.tizen.org/development/api-references/web-application
122. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Aspecte de interes privind navigatorul Web:
toleranța la defecte
securitatea
managementul memoriei
performanța (e.g., viteza de procesare)
interacțiunea cu utilizatorul
conservarea resurselor (i.e. power consumption)
124. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Remarcă:
în cadrul unui browser Web
pot fi utilizate procesoare de redare multiple
exemplificări:
Avant Browser – bazat pe Gecko, Trident și Blink/WebKit
Lunascape – include Gecko, Trident și WebKit
Maxthon – recurge la WebKit și Trident
Tungsten – folosește Blink și Trident
125. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Navigatoare Web „speciale”
optimizate pentru dispozitive specifice (smart phone,
tabletă, smart TV,…) și platformele aferente
sau pentru anumite sarcini – i.e. dezvoltare Web
pot oferi anumite facilități – e.g., content & ad blockers,
sincronizare, interacțiuni naturale și/sau 3D, depanare,…
exemple: Brave, Firefox Focus, Firefox Developer Edition,
Firefox Reality, Opera Touch, Samsung Internet Browser,
UC Browser, Vewd Browser, Vivaldi, Waterfox
126. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Navigatoare Web hibride
unele procese care trebuie realizate de browser
pot fi executate la nivel de server – de pildă, în cloud
exemplu:
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
127. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
unele activități se pot fi realiza în cloud
(în cazul Amazon Silk, se utilizează EC2)
pentru diverse optimizări,
recurge la tehnici de învățare automată
docs.aws.amazon.com/silk/latest/developerguide/introduction.html
130. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Funcționalitățile browser-ului Web pot fi folosite
și în lipsa interacțiunii cu utilizatorul (sans UI)
headless browser
scopuri principale: automatizare + testare
exemple: Chromium Embedded Framework, Erik, Splash
github.com/dhamaniasad/HeadlessBrowsers
developer.mozilla.org/Firefox/Headless_mode
131. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Încapsularea browser-ului Web în aplicații mobile
Android: clasa WebView (Kotlin, Java)
developer.android.com/guide/webapps/webview
Apple (iOS, macOS, Mac Catalyst): clasa WKWebView
developer.apple.com/documentation/webkit/wkwebview
www.hackingwithswift.com/articles/112/the-ultimate-guide-to-wkwebview
132. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Device fingerprinting
valoarea câmpului-antet User-Agent + alte caracteristici
ale mediului de rulare a navigatorului Web
– e.g., rezoluția ecranului, platforma hardware/software,
date despre font-uri și limbi, cookie-uri,
suportul pentru grafică 3D,… –
pot conduce la identificarea utilizatorului/dispozitivului
133. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
P. Laperdrix, W. Rudametkin, B. Baudry, “Beauty and the Beast:
Diverting Modern Web Browsers to Build Unique Browser
Fingerprints”, IEEE Symposium on Security and Privacy, 2016
hal.inria.fr/hal-01285470/file/beauty-sp16.pdf
A. Vastel et al., “Privacy Implications of Browser Fingerprint
Inconsistencies”, USENIX Security Symposium, 2018
www.usenix.org/system/files/conference/usenixsecurity18/sec18-vastel.pdf
135. Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Device fingerprinting
instrumente de asigurare a intimității (privacy tools)
extensii pentru browser-ul Web
uBlock Origin, Ghostery,
HTTPS Everywhere, Privacy Badger etc.
de considerat și
DuckDuckGo – the search engine that doesn’t track you
Tor Project – platformă peer-to-peer, oferind Tor Browser
(bazat pe Gecko), Tails (The Amnesic Incognito Live System)
www.torproject.org