1. Cosa significa
sviluppare un browser
"proprietario"
Raffaele Intorcia

2. ● Browser "proprietario" (motivazioni, cenni)
● Basi di partenza per lo sviluppo
● Evoluzione di Webkit/Chromium
● Esempi di casi già realizzati
Oggi si parla di

3. Browser "proprietario"
(motivazioni, cenni)

4. ● capire perché serve un browser
proprietario
● identificare la terminologia: cosa vuol
dire "browser proprietario"
Perché realizzare un browser (1)

5. ● fornire uno strumento unico per l'accesso
ai servizi
● facilitare il test dei servizi web
● fornire funzionalità aggiuntive non
presenti nei normali browser
Perché realizzare un browser (2)

6. Basi di partenza per lo sviluppo

7. Lo sviluppo di un browser parte
dall'individuazione del motore di rendering
su cui costruire il client
● Trident (IE)
● Gecko (Firefox)
● Webkit (Safari, Chromium)
● Chromium
Quali sono le basi di partenza

8. ● Vantaggi
E' già installato su tutti i pc Windows
Buona aderenza agli standard nelle ultime versioni
● Svantaggi
Sui singoli pc si possono trovare versioni diverse
Poca "manutenzione"
No multiprocess nativo
Trident (IE)

9. ● Vantaggi
Opensource
Buona vitalità del progetto
Leggermente migliore sugli altri per l'impatto in memoria
Buona aderenza agli standard
● Svantaggi
Multiprocess limitato
Necessario fornire client + engine
Gecko (Firefox)

10. ● Vantaggi
Opensource
Buona vitalità del progetto
Buona aderenza agli standard
● Svantaggi
Assenza totale del multiprocess (disponibile solo con
Webkit2 che non è ancora maturo per la distribuzione)
Necessario fornire client + engine
Webkit (Safari, Chromium)

11. ● Vantaggi
Base WebKit (quindi eredita tutti i vantaggi)
Architettura multiprocess nativa
● Svantaggi
Più pesante in memoria
No API native da sfruttare
Necessario fornire client + engine
NB: il motore JS di "default" di WebKit è
JavascriptCore. Google lo ha sostituito con V8.
Chromium

12. Evoluzione di Webkit/Chromium

13. ● all'inizio c'erano KHTML e KJS nel 1998
● Webkit nasce come fork di KHTML e KJS
da parte di Apple nel 06/2001
I due fork prendono il nome di WebCore
e JavascriptCore
Un po' di storia su Webkit (1)

14. ● esce Safari nel 06/2003
● diventa open-source nel 06/2005
● rilascio di Chrome 1.0 (stabile) nel
12/2008
Un po' di storia su Webkit (2)

15. Fonte dati StatCounter da giugno 2008 a maggio 2013
Diffusione browser

16. I principali contributi arrivano da Google e
Apple
Chi contribuisce a Webkit

17. ● questioni tecniche
● questioni politiche
Perché Google passa a Blink

18. ● Smartphone e tablet
Android, IOS, Blackberry
● Playstation, Nintendo DS
● Apple TV, Google TV
● ...ovviamente pc
Microsoft, Linux, Mac
Uso di Webkit

19. ● supporto Javascript (ECMAScript 5.1, in
corso ES6)
● CSS1 (completo), CSS2.1 (quasi
completo), CSS3 (quasi completo)
● supporto per le tecnologie basate su XML
come SVG, XPATH, XSLT
Features principali Webkit (1)

20. ● supporto plugin (NPAPI e Webkit - solo
MacOSX)
● supporto HTML5
Features principali Webkit (2)

21. Nello stesso processo
convivono tutti i
componenti:
applicazione, Webkit,
WebCore e Js Engine
Architettura di Webkit

22. La nuova architettura
prevede la separazione
nativa dei componenti
di rendering da quelli
della UI in processi
indipendenti.
Architettura di Webkit2

23. Anche in questo caso c'è
una separazione di
processo che divide
l'applicazione dalla
parte di elaborazione
Architettura di Chromium

24. Esempi di casi già realizzati

25. ● Prima esperienza con Trident classico
● Seconda esperienza con Trident e
architettura multiprocess proprietaria
● Terza esperienza con Chromium
Esperienza personale

26. ● Form classica
● Webbrowser control (direttamente dalla
lista componenti)
● Fine
Prima esperienza

27. ● Un progetto per l'applicazione host (fa da
contenitore)
● Un progetto che contiene solo il browser
e la logica di controllo (un processo per
ogni sessione)
● Ogni window dello stesso processo
condivide la sessione
● Il freeze di una window blocca tutto il
processo browser (ma non l'host)
Seconda esperienza

28. ● Realizzazione di un wrapper
sull'architettura Chromium
● Esposizione delle API per il dialogo con il
motore interno e creazione di una classe
di delegati per la notifica degli eventi
del browser
Terza esperienza

29. Il funzionamento di Chromium si basa
pesantemente sullo scambio di messaggi
interno tra i vari componenti.
La realizzazione del wrapper si basa
sull'intercettazione dei messaggi che
servono a realizzare le funzionalità
richieste.
Realizzazione pratica (1)

30. Il wrapper si inserisce nel
livello WebContentsImpl e
Render[View|Widget]HostImpl per
intercettare i messaggi
Realizzazione pratica (2)

31. Codice per inizializzare il browser, creare
una window e navigare verso un indirizzo
Realizzazione pratica (3)
//Init del wrapper
Browser::init(homeDir, prefDir, downloadDir);
//Creazione del contesto e della window
Browser::Context *context = Context::create();
win = Browser::Window::create(context, hWnd);
//Creo la classe dei delegati per ricevere gli eventi della window
DelegateClass *dc = new DelegateClass();
win->setDelegate(dc);
//Imposto le dimensioni della finestra
win->resize(800, 600);
//Naviga verso la url indicata
win->navigateTo("http://www.google.it");

32. Alle window devono essere passati gli
eventi generati dall'utente
● Tastiera
Interazione (1)
win->keyEvent(
<pressed?true:false>,
<stato_CTRL_ALT_SHIFT>,
<virtual_key_code>,
<scancode>);
win->textEvent(
<sequenza_caratteri>,
<lunghezza_sequenza>);

33. ● Mouse
Interazione (2)
win->mouseButton(
<identificativo_pulsante>,
<pressed?true:false>,
<numero_di_click>);
win->mouseMoved(
<posizione_x>,
<posizione_y>);
win->mouseWheel(
<scroll_orizzontale>,
<scroll_verticale>);

34. ● Javascript
Interazione (3)
win->executeJavascript(
const wchar_t *js, size_t jsLen)
int id = win->executeJavascriptWithResultCallback(
const wchar_t *js, size_t jsLen)
void onJavascriptResult(Window *win, int id,
Script::Variant *args, size_t numArgs){}

35. ● Delegati per la navigazione
Definizione delegati
class DelegateClass : public Browser::WindowDelegate {
public:
void onTitleChanged(Window *win, const wchar_t *title){}
void onPaint(...){}
void onCursorUpdated(Window *win, const Cursor &newCursor){}
void onShowContextMenu(
Window *win, const ContextMenuEventArgs &args){}
...

36. ● Chromium è molto veloce nel ridisegno
L'aggiornamento della superficie grafica
viene effettuato solo per la parte che è
cambiata, non necessariamente per tutta la
finestra
Particolarità del repaint (1)

37. Particolarità del repaint (2)

38. Design del wrapper (1)
Librerie generate
dal progetto
Chromium
Browser.dll
unmanaged
in C++
Host_CPlusPlus.exe
unmanaged host
in C++

39. Design del wrapper (2)
Librerie generate
dal progetto
Chromium
Browser.dll
unmanaged
in C++
BrowserManaged.dll
managed
in C++/CLR
Host_CSharp.exe
managed host
in C#
Host_CPlusPlus.exe
unmanaged host
in C++

40. L'utilizzo massivo dei delegati in
un'applicazione managed può creare seri
problemi di prestazioni.
In questo caso, gli eventi non sono chiamati
con alta frequenza ad eccezione dell'evento
per il ridisegno della finestra.
Cambio della logica dell'evento onPaint
Prestazioni con i delegate (1)

41. L'obbiettivo è eliminare la gestione del
paint nell'host managed.
● l'evento onPaint è gestito nella dll
unmanaged (gestione di un raw buffer
interno)
● la dll "invalida" le aree da aggiornare
● l'host gestisce il WM_PAINT
Prestazioni con i delegate (2)

42. Host
Prestazioni con i delegate (3)
Browser.dll
unmanaged
in C++
Raw bitmap
buffer
HWND
InvalidateRect()
UpdateWindow()
BitBlt()
WM_PAINT

43. ● La realizzazione di un browser
proprietario ha un costo relativamente
basso, il knowhow c'è già
● I vantaggi che si possono ottenere sono
di gran lunga più elevati (per gli
utilizzatori e per gli sviluppatori)
...per concludere (1)

44. ● Il progetto del browser è già presente in
rete (con il nome di Berkelium) così
come il wrapper C++/CLR anche se molto
vecchi (v8-v11)
● Non ci sono differenze di allineamento di
versioni tra Chrome e Chromium
...per concludere (2)

45. Riferimenti
● http://www.webkit.org
● http://web.appstorm.net/general/opinion/the-
history-of-webkit/
● http://trac.webkit.org/wiki/WebKit2
● http://www.chromium.org
● http://www.berkelium.org
● https://code.google.com/p/berkelium-sharp/
Grazie per l'ascolto