WebKit & GNOME: I want to believe! (Spanish)

I delivered this talk in 2010, July the 23th, as part of the Guadec-es 2010 conference in A Coruña, Galicia (Spain). The talk draws a rough and high-level picture of the status of both the WebKit and the WebKitGTK+ projects in the context of the GNOME project: it’s past history, why it’s so important nowadays and why many people think that it’s very tied to the future of the GNOME platform, and many others as well.

Transcript

1. WebKit & GNOME I want to believe! Mario Sánchez Prada msanchez@igalia.com A Coruña, 23 de Julio de 2010
2. Me, myself and I Ingeniero en Informática por la UDC Miembro de la empresa Igalia Desarrollador de Software Libre (GNOME & Maemo) Actualmente trabajando en la mejora del soporte de accessibilidad (a11y) en WebKitGTK+ WebKit & GNOME: I want to believe! GUADEC ES 2010
3. GNOME Plataforma completa, libre, sencilla, usable y accesible. Basada en tecnologías libres: GLib, GTK+, cairo, soup, D-Bus, gstreamer, pango, ATK... Distintos “sabores”: escritorio, dispositivos embebidos Plataforma para usuarios y para desarrolladores (C, C++, Python, Perl, Java o incluso C# son lenguajes soportados). Community-driven (no controlada por ninguna compañía) Actualmente en proceso de renovación hacia GNOME 3.0 WebKit & GNOME: I want to believe! GUADEC ES 2010
4. GNOME GNOME 2.30 WebKit & GNOME: I want to believe! GUADEC ES 2010
5. GNOME GNOME 3.0 WebKit & GNOME: I want to believe! GUADEC ES 2010
6. WebKit Motor de renderizado web (HTML, Javascript, CSS). Iniciado por Apple como un fork de KHTML en 2001. Open-sourced en 2005. Actualmente varias compañías trabajan en WebKit: Google, Qt Software (Nokia), Igalia, Collabora... Ampliamente usado actualmente: Epiphany, Midori, Safari, Google Chrome, iPhone, Symbian... Cada vez más usado en otro tipo de aplicaciones: Yelp, Gwibber, Devhelp, Evolution, Empathy... Misma base común, diferentes ports concretos: GTK+, Qt, Mac, Chromium, Win, EFL... > 2.000.000 de líneas de código! (C++, principalmente) 198 committers, 77 de los cuales son reviewers WebKit & GNOME: I want to believe! GUADEC ES 2010
7. WebKit WebKit & GNOME: I want to believe! GUADEC ES 2010
8. WebKit WebKit & GNOME: I want to believe! GUADEC ES 2010
9. WebKit // ¿Qué es y para qué sirve? Motor de renderizado web (HTML, JavaScript, CSS) Open Source desde 2005 Objetivos centrados en el rendimiento, portabilidad, estabilidad, compatibilidad... y “hackabilidad” Riguroso con los estándares (ACID3) Principalmente, sirve para: “Pintar” contenido web dentro de aplicaciones (navegadores, visores de ayuda, lectores de RSS...) Mostrar contenido rico (lector de correo) Interfaces en HTML (gwibber) Mostrar contenido HTML5 (youtube) WebKit & GNOME: I want to believe! GUADEC ES 2010
10. WebKit // ¿Qué es y para qué sirve? Contenido web en un visor de ayuda: Devhelp WebKit & GNOME: I want to believe! GUADEC ES 2010
11. WebKit // ¿Qué es y para qué sirve? Contenido rico en un lector de correo: Evolution WebKit & GNOME: I want to believe! GUADEC ES 2010
12. WebKit // ¿Qué es y para qué sirve? Interfaces en HTML: gwibber WebKit & GNOME: I want to believe! GUADEC ES 2010
13. WebKit // ¿Qué es y para qué sirve? Contenido en HTML5: youtube (sobre Epiphany) WebKit & GNOME: I want to believe! GUADEC ES 2010
14. WebKit // Las otras alternativas Anteriormente en GNOME se solía usar: Gecko (Mozilla, Firefox): Epiphany Liferea Yelp Devhelp ... gtkhtml (unmaintained): Bibledit Evolution GNUCash. Modest (Maemo) WebKit & GNOME: I want to believe! GUADEC ES 2010
15. WebKit // Ventajas frente a gecko (Mozilla) Problemas de Gecko : API demasiado cambiante. Desarrollo dirigido por y para Firefox Actualmente no tan rápido como WebKit. Ventajas de WebKit : API bien definido y flexible a la vez (distintos entornos). Diseñado para ser “empotrable” en diferentes entornos, no dirigido por un sólo producto determinado. Desarrollo más abierto con participantes con diferentes intereses: más neutralidad e independencia. Permite reutilizar la plataforma subyacente. En GNOME: GTK+, soup, cairo, pango, gstreamer... WebKit & GNOME: I want to believe! GUADEC ES 2010
16. WebKit // ¿Pero... es realmente más rápido? http://gavinroy.com/how-does-safari-5s-javascript-performance-sta WebKit & GNOME: I want to believe! GUADEC ES 2010
17. WebKit // Política de rendimiento Performance is a top priority for WebKit. We adhere to a simple directive for all work we do on WebKit: The way to make a program faster is to never let it get slower. We have a zero-tolerance policy for performance regressions. If a patch lands that regresses performance according to our benchmarks, then the person responsible must either back the patch out of the tree or drop everything immediately and fix the regression. Common excuses people give when they regress performance are, “But the new way is cleaner!” or “The new way is more correct”. We don’t care. No performance regressions are allowed, regardless of the reason. There is no justification for regressing performance. None. “Performance on WebKit” WebKit & GNOME: I want to believe! GUADEC ES 2010
18. WebKit // Plataformas actualmente soportadas Actualmente WebKit está presente para varias plataformas: Plataformas basadas en GTK+ (GNOME) Plataformas basadas en Qt (KDE) MacOSX, iPod & iPhone OS’s, iOS Google Chromium & Android Enlightenment Foundation Libraries (EFL) Symbian devices (S60) Adobe Integrated Runtime (Adobe AIR) Win32 ... WebKit & GNOME: I want to believe! GUADEC ES 2010
19. WebKit // Navegadores basados en WebKit Arora BOLT browser Epiphany browser Google Chrome iCab (version >= 4) Iris Browser Konqueror (optional in version 4) Midori OWB OmniWeb Safari SRWare Iron Shiira Sputnik for MorphOS (based on S60 WebCore) Stainless TeaShark Uzbl Web Browser for S60 (Nokia) WebOS (Palm Pre mobile) WebPositive (Haiku) http://en.wikipedia.org/wiki/List_of_web_browsers WebKit & GNOME: I want to believe! GUADEC ES 2010
20. WebKit // Navegadores basados en WebKit Arora BOLT browser Epiphany browser Google Chrome iCab (version >= 4) Iris Browser Konqueror (optional in version 4) Midori OWB OmniWeb Safari SRWare Iron Shiira Sputnik for MorphOS (based on S60 WebCore) Stainless TeaShark Uzbl Web Browser for S60 (Nokia) WebOS (Palm Pre mobile) WebPositive (Haiku) http://en.wikipedia.org/wiki/List_of_web_browsers WebKit & GNOME: I want to believe! GUADEC ES 2010
21. WebKitGTK+ WebKit & GNOME: I want to believe! GUADEC ES 2010
22. WebKitGTK+ // ¿Qué es exactamente? ¿Qué es? Port del motor de renderizado web WebKit para GTK+ ¿Para que sirve? Permite utilizar WebKit en cualquier aplicación GTK+ ¿Cómo se usa? WebKitGTK+ proporciona un widget “empotrable” en cualquier contenedor de una aplicación GTK+: WebKitWebView ¿Es “simplemente” una capa encima de WebKit? No exactamente. WebKitGTK+ es “algo” más que eso: Una capa sobre WebKit para enlazar desde las aplicaciones Cambios de bajo nivel para completar la implementación de algoritmos con librerías específicas de cada plataforma. WebKit & GNOME: I want to believe! GUADEC ES 2010
23. WebKitGTK+ // Componentes principales Desde un punto de vista simplificado en WebKit tenemos: WebKit WebCore JavaScriptCore platform Application WebKit: capa fina para enlazar desde las aplicaciones. WebCore: rendering, layout, acceso a red, multimedia, soporte de accesibilidad... JavaScriptCore: motor JavaScript platform: hooks nativos de la plataforma para implementar operaciones genéricas. WebKit & GNOME: I want to believe! GUADEC ES 2010
24. WebKitGTK+ // Componentes principales En el caso concreto de WebKitGTK+ cambian algunas partes: WebKit/gtk WebCore JavaScriptCore soup, cairo, pango, atk... GTK+ Application WebKit/gtk: API GObject para enlazar desde aplicaciones GTK+. WebCore: rendering, layout, acceso a red, multimedia, soporte de accesibilidad... JavaScriptCore: motor JavaScript platform: hooks nativos de la plataforma para implementar operaciones genéricas. soup: Acceso a red cairo: Pintado pango: Fuentes atk: Accesibilidad WebKit & GNOME: I want to believe! GUADEC ES 2010
25. WebKitGTK+ // Un mininavegador hecho en python #!/usr/bin/env python # -*- coding: utf-8 -*- import gtk import webkit def entry_activated_cb(entry, embed): embed.open(entry.get_text()) # Widgets and signals window = gtk.Window() window.set_size_request(1024, 768) window.set_title("Mini browser") embed = webkit.WebView(); # <<<--- WebKit embed entry = gtk.Entry() entry.connect(’activate’, entry_activated_cb, embed) # Pack everything up and show vbox = gtk.VBox(False, 5) vbox.pack_start(entry, False, False) vbox.pack_start(embed) window.add(vbox) window.show_all() gtk.main() WebKit & GNOME: I want to believe! GUADEC ES 2010
26. WebKitGTK+ // Un mininavegador hecho en python WebKit & GNOME: I want to believe! GUADEC ES 2010
27. WebKitGTK+ // Empotrando widgets en el DOM Ejemplo Copyright c 2009 Christian Dywan <christian@twotoasts.de> (Created for GUADEC2009 WebKitGTK+ presentation) Copyright c 2009 Diego Escalante Urrelo <diegoe@gnome.org> (Modified for EncuentroLinux 2009) Copyright c 2009 Mario Sanchez Prada <msanchez@igalia.com> (Modified for GUADEC-ES 2010) This code is licensed under the terms of the expat license WebKit & GNOME: I want to believe! GUADEC ES 2010
28. WebKitGTK+ // Empotrando widgets en el DOM <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>GUADEC-ES 2010</title> <style type="text/css"> [...] </style> <script type="text/javascript"> woot = ’Esto es un alert() de Javascript\n(por si alguien lo dudaba)\n\nHola!’; </script> </head> <body> <div id="centeredContent"> <h1>GUADEC-ES 2010</h1> <div> <h2>Empotrando un widget GTK en contenido HTML</h2> <p> <br/> <object type="application/x-gtk-widget" style="width: 200px; height: 75px;"/> </p> </div> </div> </body> </html> WebKit & GNOME: I want to believe! GUADEC ES 2010
29. WebKitGTK+ // Empotrando widgets en el DOM #include <webkit/webkit.h> int main (int argc, gchar *argv[]) { GtkWidget* window = gtk_window_new (GTK_WINDOW_TOPLEVEL); gtk_window_set_default_size (GTK_WINDOW (window), 800, 600); gtk_widget_set_name (window, "GtkLauncher"); GtkWidget* scrolled_window = gtk_scrolled_window_new (NULL, NULL); gtk_scrolled_window_set_policy (GTK_SCROLLED_WINDOW (scrolled_window), GTK_POLICY_AUTOMATIC, GTK_POLICY_AUTOMATIC); gtk_container_add (GTK_CONTAINER (window), scrolled_window); WebKitWebView *web_view = WEBKIT_WEB_VIEW (webkit_web_view_new ()); gtk_container_add (GTK_CONTAINER (scrolled_window), GTK_WIDGET (web_view)); g_signal_connect (G_OBJECT (web_view), "create-plugin-widget", G_CALLBACK (web_view_create_plugin_widget_cb), NULL); webkit_web_view_load_uri(web_view, FILE_URI); gtk_widget_grab_focus (GTK_WIDGET (web_view)); gtk_widget_show_all (window); gtk_main (); return 0; } WebKit & GNOME: I want to believe! GUADEC ES 2010
30. WebKitGTK+ // Empotrando widgets en el DOM #include <webkit/webkit.h> static GtkWidget* web_view_create_plugin_widget_cb (GtkWidget* web_view, const gchar* mime_type, const gchar* uri, GHashTable* param, gpointer userdata) { if (g_str_equal (mime_type, "application/x-gtk-widget")) { GtkWidget *widget; widget = gtk_button_new_with_label ("Click me!"); g_signal_connect (widget, "clicked", G_CALLBACK (plugin_clicked_cb), web_view); gtk_widget_show (widget); return widget; } return NULL; } static void plugin_clicked_cb (GtkButton *button, WebKitWebView *web_view) { char *script; script = "document.body.style.backgroundColor = \"#000000\";"; webkit_web_view_execute_script (web_view, script); script = "document.body.style.color = \"#ffffff\";"; webkit_web_view_execute_script (web_view, script); webkit_web_view_execute_script (web_view, "alert(woot)"); } WebKit & GNOME: I want to believe! GUADEC ES 2010
31. WebKitGTK+ // DOM bindings (experimental) Ejemplo Copyright c 2010 Xan Lopez <xlopez@igalia.com> (Original example to showcase DOM bindings) Copyright c 2010 Mario Sanchez Prada <msanchez@igalia.com> (Modified for GUADEC-ES 2010) WebKit & GNOME: I want to believe! GUADEC ES 2010
32. WebKitGTK+ // DOM bindings (experimental) #include <webkit/webkit.h> int main(int argc, char** argv) { gtk_init(&argc, &argv); GtkWidget *window = gtk_window_new(GTK_WINDOW_TOPLEVEL); gtk_window_set_default_size(GTK_WINDOW(window), 640, 480); GtkWidget *box = gtk_vbox_new(FALSE, 5); gtk_container_add(GTK_CONTAINER(window), box); GtkWidget *scrolled = gtk_scrolled_window_new(NULL, NULL); GtkWidget *view = webkit_web_view_new(); gtk_container_add(GTK_CONTAINER(scrolled), view); gtk_box_pack_start(GTK_BOX(box), scrolled, TRUE, TRUE, 0); button = gtk_button_new_with_label("Dance links!"); g_signal_connect(button, "clicked", G_CALLBACK(phase_one), view); gtk_box_pack_start(GTK_BOX(box), button, FALSE, FALSE, 0); if (argc == 1) webkit_web_view_load_string(WEBKIT_WEB_VIEW(view), PAGE, NULL, NULL, NULL); else webkit_web_view_load_uri(WEBKIT_WEB_VIEW(view), argv[1]); gtk_widget_show_all(window); gtk_main(); return 0; } WebKit & GNOME: I want to believe! GUADEC ES 2010
33. WebKitGTK+ // DOM bindings (experimental) static void phase_one(GtkButton *button, WebKitWebView *view) { WebKitDOMDocument* document = webkit_web_view_get_dom_document(view); WebKitDOMHTMLCollection *collection = webkit_dom_document_get_links(document); gulong length = webkit_dom_html_collection_get_length(collection); guint i; for (i = 0; i < length; i++) { WebKitDOMNode *node = webkit_dom_html_collection_item(collection, i); WebKitDOMElement* element = (WebKitDOMElement*)node; WebKitDOMCSSStyleDeclaration *style = webkit_dom_element_get_style(element); // Modify style webkit_dom_css_style_declaration_set_property(style, "-webkit-transition-property", "top, color", "", NULL); webkit_dom_css_style_declaration_set_property(style, "-webkit-transition-duration", "1s, 1s", "", NULL); webkit_dom_css_style_declaration_set_property(style, "-webkit-transition-timing-function", "ease-in, ease-in", "", NULL); webkit_dom_css_style_declaration_set_property(style, "top", "300px", "", NULL); webkit_dom_css_style_declaration_set_property(style, "color", "red", "", NULL); webkit_dom_css_style_declaration_set_property(style, "position", "relative", "", NULL); // Go to the second phase g_timeout_add(1000, (GSourceFunc)phase_two, style); } } WebKit & GNOME: I want to believe! GUADEC ES 2010
34. WebKitGTK+ // DOM bindings (experimental) static gboolean phase_two(WebKitDOMCSSStyleDeclaration *style) { // Change style so links go to SW corner [...] // Go to the third phase g_timeout_add(3000, (GSourceFunc)phase_three, style); return FALSE; } static gboolean phase_three(WebKitDOMCSSStyleDeclaration *style) { // Change style so links go to SE corner [...] // Go to the fourth phase g_timeout_add(3000, (GSourceFunc)phase_four, style); return FALSE; } static gboolean phase_four(WebKitDOMCSSStyleDeclaration *style) { // Change style so links go back to NW corner [...] return FALSE; } WebKit & GNOME: I want to believe! GUADEC ES 2010
35. WebKitGTK+ // Algo de historia Julio 2007 Inicios de WebKitGTK+. Primer experimento con Epiphany 2.19.6 (experimental) WebKit & GNOME: I want to believe! GUADEC ES 2010
36. WebKitGTK+ // Algo de historia Abril 2008 Epiphany trunk WebKit-only WebKit & GNOME: I want to believe! GUADEC ES 2010
37. WebKitGTK+ // Algo de historia Marzo 2009 Publicado WebKitGTK+ 1.1.1, reemplazando libcurl por libsoup como backend HTTP Publicado WebKitGTK+ 1.1.2, con el Web Inspector Publicado WebKitGTK+ 1.1.4, soporte básico de HTML5 WebKit & GNOME: I want to believe! GUADEC ES 2010
38. WebKitGTK+ // Algo de historia Julio 2009 WebKitGTK+ como dependencia externa en GNOME. Se convierte en backend principal para Epiphany (Epiphany 2.26.3 “gecko end-of-life”) WebKit & GNOME: I want to believe! GUADEC ES 2010
39. WebKitGTK+ // Algo de historia Septiembre 2009 Publicado GNOME 2.28 Primera release de GNOME con Epiphany/WebKitGTK+ WebKit & GNOME: I want to believe! GUADEC ES 2010
40. WebKitGTK+ // Algo de historia Diciembre 2009 Se celebra el primer hackfest de WebKitGTK+ WebKit & GNOME: I want to believe! GUADEC ES 2010
41. WebKitGTK+ // Algo de historia Diciembre 2009 Se celebra el primer hackfest de WebKitGTK+ ... y seguro que no será el último :-) WebKit & GNOME: I want to believe! GUADEC ES 2010
42. WebKitGTK+ // Algo de historia Abril 2010 Primera versión DOM bindings WebKit & GNOME: I want to believe! GUADEC ES 2010
43. WebKitGTK+ // Algo de historia Julio 2007: Inicios de WebKitGTK+. Primer experimento con Epiphany 2.19.6 (experimental) Abril 2008: Epiphany trunk WebKit-only Marzo 2009: Publicado WebKitGTK+ 1.1.1 (reemplazando libcurl por libsoup como backend HTTP), WebKitGTK+ 1.1.2 (Web Inspector) y WebKitGTK+ 1.1.4 (soporte básico HTML5) Julio 2009: WebKitGTK+ como dependencia externa en GNOME. Se convierte en backend principal para Epiphany (Epiphany 2.26.3 “gecko end-of-life”) Septiembre 2009: Publicado GNOME 2.28 Primera release de GNOME con Epiphany/WebKitGTK+ Diciembre 2009: Primer WebKitGTK+ hackfest Abril 2010: Primera versión DOM bindings WebKit & GNOME: I want to believe! GUADEC ES 2010
44. WebKitGTK+ // Estado actual La situación actual habla por si sola: Actualmente, dependencia externa de GNOME Más y más aplicaciones migrando a WebKitGTK+: Epiphany, Evolution, liferea, devhelp, Yelp... Importancia actual (y futura) de las aplicaciones web: YouTube, GMail, Facebook, identi.ca, Twitter, Flickr... No controlado por ninguna empresa WebKitGTK+ es por fin una plataforma madura Ampliamente usado en aplicaciones estables Buildbots de WebKitGTK+ core builders desde Abril de 2010 (WebKit Contributors Meeting) Hoy por hoy, el único port distinto de Mac con buen (aunque mejorable) soporte de accesibilidad (a11y) WebKit & GNOME: I want to believe! GUADEC ES 2010
45. WebKitGTK+ // Estado actual NAVEGADORES DeforaOS Surfer Element Browser (Element Software) Epiphany (GNOME) Kazehakase Midori OLPC Sugar WebKit Browse activity Skipstone Uzbl Web (Poky Linux) Web Browser (OpenMoko) WebKit EAL (Maemo) LECTORES RSS Blam Evolution RSS Reader Plugin Feed Reader (OpenMoko) Liferea (GNOME) NewsKit ReSiStance (Maemo) Straw (GNOME) MULTIMEDIA Banshee (Amazon MP3 Store) Handbrake Miro MPX Rhythmbox (Ubuntu One Store) Shotwell MENSAJERÍA INSTANTÁNEA Empathy Galaxium Gwibber Pidgin E-MAIL Anjal Balsa Claws Mail Evolution (GNOME) tinymail UI library VISORES DE AYUDA Devhelp (GNOME) GIMP help viewer ilcontrast (Mono) Monodoc (Mono) Yelp (GNOME) OTROS Anjuta Bibledit Clutter, a rich OpenGL platform) Conduit (GNOME) Osmo Pino Pyjamas Desktop SeedKit (GNOME) WebKit & GNOME: I want to believe! GUADEC ES 2010
46. WebKitGTK+ // Perspectivas futuras Actualmente trabajando en mejoras concretas: Finalizar trabajo en DOM bindings (DEMO) Mejoras en el proceso de renderizado (pintado) Mejoras en la capa de red (soporte para cache en libsoup) Mejoras en el soporte multimedia en HTML5 (video) Mejora del soporte de a11y (para GNOME 3.0) Regresiones en epiphany (cambio Gecko-> WebKit) Integración de WebKit 2 WebKit & GNOME: I want to believe! GUADEC ES 2010
47. WebKitGTK+ // Conclusiones Grandes avances en WebKitGTK+ los últimos 2 años (Y todavía mucho más que está por venir) Importancia actual indiscutible de las tecnologías web Papel vital de WebKitGTK+ en el futuro de GNOME Integración desktop-web Aplicaciones “híbridas” GTK+/ HTML El futuro con HTML 5 WebKit & GNOME: I want to believe! GUADEC ES 2010
48. Donde ir a partir de aquí WebKit: http://www.webkit.org Planet WebKit: http://planet.webkit.org WebKitGTK+: http://www.webkitgtk.org WebKitGTK+ en live.gnome.org: http://trac.webkit.org/wiki/BuildingGtk Building WebKitGTK+: http://trac.webkit.org/wiki/BuildingGtk Bugzilla: https://bugs.webkit.org HTML 5 specification: http://dev.w3.org/html5/spec/Overview.html WebKit & GNOME: I want to believe! GUADEC ES 2010
49. ¿Preguntas? WebKit & GNOME: I want to believe! GUADEC ES 2010
50. ¡Gracias! WebKit & GNOME: I want to believe! GUADEC ES 2010