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?
- Slides: 27