Introduction to Web Kit Girish Ramakrishnan History 1999

Introduction to Web. Kit Girish Ramakrishnan

History 1999 2001 -3 2005

What is Web. Kit is a rendering engine for web content HTML Java. Script Web. Kit Rendering of a web page CSS Web. Kit is not a browser, a science project, or the solution to every problem Image stolen from Adam Barth’s Presentation

Web. Kit ports Web. Kit is designed to be highly portable

Components Web. Kit and Web. Kit 2 (Embedding API) Bindings (Java. Script API, Objective-C API) Web. Core (HTML, CSS, DOM, etc) Platform (Network, Storage, Graphics) Java. Script. Core (Java. Script Virtual Machine) WTF (Data structures, Threading primitives) Image stolen from Adam Barth’s Presentation

WTF!? • The STL of Web. Kit project o Data structures o String • • URL parser Compiled as static lib Minimal porting required (ifdef’s) Source/WTF

Java. Script. Core (AKA SFX and Nitro) • • • Primarily developed by Apple Byte Level Interpreter (Llint) Optional DFG JIT Non-trivial to use a stand alone Compiled as static lib Source/Java. Script. Core

Web. Core • HTML, CSS, XML, SVG ….

Web. Core Network Loader • Asks Web. Kit layer to load resource • Resource loading and frame loading are totally separate Image stolen from Adam Barth’s Presentation

Web. Core Network Loader HTML Parser • Fires off pre-load requests on the fly • XSS Auditor

Web. Core Network Loader HTML Parser CSS DOM Script • Parser generates DOM tree

Web. Core Network Loader HTML Parser CSS DOM Script Render Tree • Create Render. Objects using “Attachment”

Web. Core Network Loader HTML Parser CSS DOM Render Tree Script Render. Styles • CSS Style Computation Image stolen from Adam Barth’s Presentation

Web. Core Network Loader HTML Parser CSS DOM Render Tree Script Render. Styles • CSS Style Computation Image stolen from Adam Barth’s Presentation

Web. Core Network Loader HTML Parser CSS DOM Render Tree Layout (Render. Layer, Line. Boxes) Script Render. Styles

Web. Core graphics • Accelerated Compositing Image stolen from Ariya Hidayat’s blogpost

Web. Core Graphics • Tiled rendering Image stolen from Ariya Hidayat’s blogpost

Web. Core Directory structure is insightful • • • • bindings (and idl files) bridge css Dom editing history html icu Inspector loader Platforms (graphics, network) plugins rendering storage svg xml

Web. Core Porting • Platforms/ implements port abstraction o Networking & Graphics o Time, Dn. D, Themes, Clipboard, UA • Many features like plugins require port specific enhancements o Sprinkle ifdefs as necessary o Add dir/<port>/<file><port>. cpp o E. g history/qt/History. Item. Qt. cpp

Web. Core Porting (2) • Client interfaces o Abstract interfaces implemented by the port o Used in place of ifdef’s when it’s useful for many ports class Geolocation. Client { virtual bool request. Access() = 0; } void Page: : set. Client(Geolocation. Client *c) { client = c; } bool Page: : request. Location. Access() { return client->request. Access(); } // Qt class Geolocation. Client. Qt : public Geolocation. Client { … } … page->set. Client(new Geolocation. Client. Qt);

Web. Core • Modules (battery, gelocation, indexeddb. . ) • Layout tests • Unit tests

Web. Kit • Platform specific code o APIs o Web. Core. Support

Web. Kit 2 • New async API that uses split process model • Developed by Apple

Web. Kit 2 Image taken from Web. Kit Wiki

Web. Kit 2 vs Chrome Image taken from Web. Kit Wiki

Trying out Web. Kit • Web. Kit has no releases • Each port is compiled differently git. webkit. org

Thank you • Questions?