Full-Stack Web Development busaco ~ / profs.info.uaic.ro github.com/alrra/browser-logos arhitectura unui browser Web Dr. Sabin Sabin Buraga Dr. Dr. Sabin Corneliu Buraga – profs.info.uaic.ro/~busaco/ do nothing, say nothing, be nothing. be say nothing, nothing, do “ Elbert Hubbard To avoid criticism To avoid ” Dr. Sabin Buragaprofs.info.uaic.ro/~busaco mediu de execuție (sistem de operare, aplicație nativă,…) busaco ~ / browser Web funcționalități de bază profs.info.uaic.ro procesare conținut, redare,… interpretor acces la JavaScript platformă Dr. Sabin Sabin Buraga Dr. rețea, grafică, fonturi, widget-uri native,… busaco ~ / Un client (i.e. browser Web) se identifică via valoarea câmpului-antet User-Agent dintr-o cerere HTTP profs.info.uaic.ro Dr. Sabin Sabin Buraga Dr. www.useragentstring.com busaco ~ 1993 – primul browser Web: Mosaic – Mosaic/0.9 / 1994 – primul browser comercial: Netscape Navigator include primul interpretor JavaScript și oferă o interfață de programare (BOM – Browser Object Model) profs.info.uaic.ro Mozilla/Versiune [Limbă] (Platformă; Criptare) Mozilla/2.02 [fr] (WinNT; I) Mozilla/Versiune (Platformă; Criptare [; descriere OS]) Mozilla/3.0 (X11; I; AIX 2) Dr. Sabin Sabin Buraga Dr. Netscape Communicator 4 – Mozilla/4.04 [en] (WinNT; U) www.nczonline.net/blog/2010/01/12/history-of-the-user-agent-string/ busaco ~ / profs.info.uaic.ro Dr. Sabin Sabin Buraga Dr. 1994 – primul browser disponibil pe un dispozitiv miniaturizat (PDA – Apple Newton): PocketWeb www.teco.edu/pocketweb/ busaco ~ / 1996 – primul navigator produs de Microsoft: MSIE include dialectul JScript și propriul BOM oferă multe facilități, ulterior standardizate de W3C profs.info.uaic.ro 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) Dr. Sabin Sabin Buraga Dr. MSIE 11 – Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko busaco ~ / 1996 – primul navigator trialware: Opera 2 focalizat pe utilizabilitate (e.g., tab-uri) și accesibilitate (de exemplu, interacțiune prin gesturi) profs.info.uaic.ro permite selectarea modului de identificare a browser-ului Opera/Versiune (OS; Criptare) [Limbă] Opera/7.54 (Windows NT 5.1; U) [en] Dr. Sabin Sabin Buraga Dr. dev.opera.com busaco ~ / 1998 – apariția procesorului de redare (rendering engine) Gecko Mozilla/Versiune (Platformă; Criptare; OS/CPU; Limbă; profs.info.uaic.ro 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 Sabin Buraga Dr. www.nczonline.net/blog/2010/01/12/history-of-the-user-agent-string/ busaco ~ / 1997—1999 – navigator Web pentru telefoane mobile: HitchHiker (ulterior, Microsoft Mobile Explorer 2.0) profs.info.uaic.ro acces via WAP (Wireless Access Protocol) conținut structurat cu WML (Wireless Markup Language) procesare de date + interacțiune prin WMLScript Dr. Sabin Sabin Buraga Dr. 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) profs.info.uaic.ro 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 Sabin Buraga Dr. developer.mozilla.org/Mozilla/Firefox 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ă) profs.info.uaic.ro 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 Sabin Buraga Dr. developer.apple.com/safari/ busaco ~ / 2005 – Opera Mini oferă primele facilități de redare a datelor pe ecrane miniaturizate (small screen rendering) procesare realizată la nivel de server profs.info.uaic.ro via sisteme de stocare a datelor (data centers) Dr. Sabin Sabin Buraga Dr. 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 profs.info.uaic.ro 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 Sabin Buraga Dr. developer.chrome.com www.chromium.org 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 profs.info.uaic.ro (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/ Sabin Buraga Dr. busaco ~ / Care este arhitectura generală a unui navigator Web? profs.info.uaic.ro Dr. Sabin Sabin Buraga Dr. data user interface persistence busaco ~ browser engine / rendering engine profs.info.uaic.ro net JS data inter- par- display back-end work preter ser Dr. Sabin Sabin Buraga Dr. componentele de bază ale unui navigator Web generic conform (Grosskurth & Godfrey, 2006; Garsiel, 2011) proceselor majore efectuate efectuate majore proceselor privire de ansamblu asupra de ansamblu asupra privire de browser - ul Web getpocket.com/a/read/Dr. Sabin Buraga1735724031profs.info.uaic.ro/~busaco rendering engine busaco ~ / profs.info.uaic.ro Dr. Sabin Sabin Buraga Dr. procesele implicate în afișarea conținutului unei pagini Web (J. Brereton et al., 2011) busaco ~ / user interface profs.info.uaic.ro 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) Dr. Sabin Sabin Buraga Dr. acces la preferințe + alte componente – e.g., extensii … Dr. Sabin Buragaprofs.info.uaic.ro/~busaco busaco ~ / user interface profs.info.uaic.ro diverse proprietăți și preferințe specifice unui utilizator pot fi stocate în cadrul unui profil exemplu tipic: Firefox – http://mzl.la/1BAQULj Dr. Sabin Sabin Buraga Dr. busaco ~ / browser engine „punte” între interfața cu utilizatorul și rendering engine profs.info.uaic.ro Dr. Sabin Sabin Buraga Dr. busaco ~ / browser engine „punte” între interfața cu utilizatorul și rendering engine profs.info.uaic.ro nucleu (kernel) plug-ins extensions Dr. Sabin Sabin Buraga Dr. add-ons busaco ~ / rendering engine realizează redarea conținutului solicitat profs.info.uaic.ro Dr. Sabin Sabin Buraga Dr. busaco ~ / rendering engine realizează redarea conținutului solicitat profs.info.uaic.ro documente HTML ce includ resurse multimedia imagini raster (GIF, PNG, JPEG) Dr. Sabin Sabin Buraga Dr. grafică vectorială – SVG (Scalable Vector Graphics) reprezentări diverse: MathML, WebGL,… busaco ~ / rendering engine implică, uzual, procesarea arborelui DOM profs.info.uaic.ro asociat unei pagini Web cu aplicarea proprietăților CSS aferente în vederea redării într-o zonă de afișare Dr. Sabin Sabin Buraga Dr. busaco ~ / profs.info.uaic.ro Dr. Sabin Sabin Buraga Dr. o aplicație Web la nivel de client poate fi compusă din diverse componente, încărcate dinamicmanagementul arborilor DOM (Dimitri Glazkov, 2013) busaco ~ / rendering engine include un interpretor (parser) HTML profs.info.uaic.ro conform tipului de document Web – DTD Dr. Sabin Sabin Buraga Dr. busaco ~ / rendering engine include un interpretor (parser) HTML profs.info.uaic.ro conform tipului de document Web – DTD moduri diferite de interpretare standards mode – HTML5, CSS3, SVG,… Dr. Sabin Sabin Buraga Dr. quirks mode – www.quirksmode.org rendering engine busaco ~ include un interpretor (parser) HTML / pot fi folosite diverse euristici (speculative parsing), mai ales în cazul codului care nu e bine formatat profs.info.uaic.ro Dr. Sabin Sabin Buraga Dr. rendering engine busaco ~ include un interpretor (parser) HTML / pot fi folosite diverse euristici (speculative parsing), mai ales în cazul codului care nu e bine formatat profs.info.uaic.ro cazul Firefox developer.mozilla.org/en-US/docs/Mozilla/Gecko/HTML_parser_threading Dr. Sabin Sabin Buraga Dr. busaco ~ / proce- sare cod generare determi- HTML arbore afișare nare (rendering) de profs.info.uaic.ro layout arbore redare layout DOM Dr. Sabin Sabin Buraga Dr. busaco ~ / rendering engine cod sursă HTML – încărcat (a)sincron de pe rețea profs.info.uaic.ro arbore DOM (Document Object Model) de revăzut prelegerea privitoare la DOM profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html#week7 Sabin Buraga Dr. preluare date de pe rețea document.write() busaco ~ procesare (tokeniser) / construire arbore execuție script-uri JS profs.info.uaic.ro HTML Html Element HTML HTML Body Head Element Element HTML HTML Paragraph Title Sabin Buraga Dr. Element Element fazele importante ale procesării Text unui document HTML în vederea obținerii arborelui DOM HTML Html