Compiling and Optimizing Your Own Browser with WebKit

1. Monday, November 29, 2010

2. Monday, November 29, 2010

3. Compiling & Optimizing Your Own Browser with WebKit ARIYA HIDAYAT ENGINEERING DIRECTOR, SENCHA Monday, November 29, 2010

4. whoami Monday, November 29, 2010

5. Overview Monday, November 29, 2010

6. WebKit Everywhere Browser Devices Runtime Monday, November 29, 2010

7. History 80000 70000 60000 50000 Revisions 40000 30000 20000 10000 0 0 1 2 3 4 5 6 7 8 9 10 Years Monday, November 29, 2010

8. History ~2000 commits/month 80000 70000 60000 50000 Revisions 40000 30000 20000 10000 0 0 1 2 3 4 5 6 7 8 9 10 Years Monday, November 29, 2010

9. Extensive Tests tests ≈ 20,000 tests 904 MB the rest 229 MB Monday, November 29, 2010

10. Workﬂow 1 Every commit needs to be reviewed 2 Broken commit must be reverted Monday, November 29, 2010

11. Workﬂow quality control 1 Every commit needs to be reviewed 2 Broken commit must be reverted zero-regression policy Monday, November 29, 2010

12. Level of Involvement Contributor after 10-20 patches after 80 patches Committer ≈ 130 Reviewer checks in reviewed patches ≈ 80 accept or reject patches Monday, November 29, 2010

13. WebKit Reviewers Apple 39 Google 19 Misc 12 RIM Nokia 6 6 Monday, November 29, 2010

14. WebKit Reviewers Apple 39 Google 19 Misc 12 1 RIM Nokia 6 6 Monday, November 29, 2010

15. Components of WebKit DOM CSS WebCore SVG HTML rendering JavaScriptCore WebKit Library Monday, November 29, 2010

16. Web Browsers WebCore + JavaScriptCore Safari Eclair WebCore + V8 Chrome Froyo Monday, November 29, 2010

17. How Fresh? AIR 2.5 531.9 Chrome 7 534.7 Android 2.2 533.1 Safari 4 Safari 5 528.16 533.18 mid 2009 Spring 2010 Fall 2010 Monday, November 29, 2010

18. Platform Abstractions Network Unicode Clipboard Graphics Theme Events Thread Geolocation Timer Monday, November 29, 2010

19. WebCore Di erent “Ports” graphics GraphicsContext Mac Chromium Qt Gtk Skia Cairo CoreGraphics QPainter graphics stack Monday, November 29, 2010

20. Get + Compile Monday, November 29, 2010

21. Requirements •Subversion or Git •C++ compiler •Perl •Python •Various SDK Monday, November 29, 2010

22. Using Subversion svn checkout http://svn.webkit.org/repository/ webkit/trunk webkit cd webkit Monday, November 29, 2010

23. Using git git clone git://git.webkit.org/WebKit.git cd WebKit ≈ 1.2 GB .git Monday, November 29, 2010

24. Build WebKitTools/Scripts/build-webkit --qt for Qt, --gtk for Gtk+ --debug for “Debug” mode Monday, November 29, 2010

25. Launch WebKitTools/Scripts/run-launcher --qt for Qt, --gtk for Gtk+ --debug for “Debug” mode Monday, November 29, 2010

26. Render Tree paragraph <html><body><p>Hello SenchaCon!</p></body></html> layer at (0,0) size 800x600 RenderView at (0,0) size 800x600 layer at (0,0) size 800x600 RenderBlock {HTML} at (0,0) size 800x600 RenderBody {BODY} at (8,8) size 784x576 RenderBlock {P} at (0,0) size 784x18 RenderText {#text} at (0,1) size 117x16 text run at (0,1) width 117: "Hello SenchaCon!" Monday, November 29, 2010

27. Let’s Start the PARTY Monday, November 29, 2010

28. Let’s Start the PARTY Monday, November 29, 2010

29. Typical Scenario This is awesome! Monday, November 29, 2010

30. Typical Scenario This is awesome! n t to ru forge ests the t REGRESSION Monday, November 29, 2010

31. Typical Scenario This is awesome! n t to ru forge ests the t REGRESSION Monday, November 29, 2010

32. Using WebView QWebView webView; webView.show(); webView.setUrl(QUrl("http://www.sencha.com")); Monday, November 29, 2010

33. Capture to Image QWebPage page; QImage image(size, QImage::Format_ARGB32_Premultiplied); image.fill(Qt::transparent); QPainter p(&image); page.mainFrame()->render(&p); p.end(); image.save(fileName); Monday, November 29, 2010

34. Network Log 28: GET http://www.google.com/m/gp 292: Response 200 application/xhtml+xml; charset=UTF-8 0 bytes http://www.google.com/m/gp 311: GET data:image/gif;base64,R0lGODlhiA... 312: GET data:image/gif;base64,R0lGODlhJA... 312: GET data:image/gif;base64,R0lGODlhGA... 312: Response 0 image/gif 3611 bytes data:image/gif;base64,R0lGODlhiA... 312: Finish fail data:image/gif;base64,R0lGODlhiA... 312: Response 0 image/gif 284 bytes data:image/gif;base64,R0lGODlhJA... 312: Finish fail data:image/gif;base64,R0lGODlhJA... 312: Response 0 image/gif 178 bytes data:image/gif;base64,R0lGODlhGA... 312: Finish fail data:image/gif;base64,R0lGODlhGA... 317: Response 200 application/xhtml+xml; charset=UTF-8 0 bytes http://www.google.com/m/gp 324: Finish fail http://www.google.com/m/gp 328: GET http://www.google.com/m/gn/user?... 329: Finish success http://www.google.com/m/gn/user?... Monday, November 29, 2010

35. Test Runner specrunner SpecRunner.html 5 specs, 0 failures in 0.013s specrunner SpecRunner.html FAIL: 5 specs, 1 failure in 0.014s Monday, November 29, 2010

36. Recorder & Replayer Monday, November 29, 2010

37. Remote Console for http://github.com/senchalabs/android-tools Monday, November 29, 2010

38. Remote Console for http://github.com/senchalabs/android-tools Monday, November 29, 2010

39. THANK YOU! ariya @ sencha.com ariya.blogspot.com ariyahidayat Monday, November 29, 2010

40. THANK YOU! We’re hiring! ariya @ sencha.com ariya.blogspot.com ariyahidayat Monday, November 29, 2010

Compiling and Optimizing Your Own Browser with WebKit

Compiling and Optimizing Your Own Browser with WebKit

Recommended

More Related Content

Viewers also liked

Viewers also liked(14)

Similar to Compiling and Optimizing Your Own Browser with WebKit

Similar to Compiling and Optimizing Your Own Browser with WebKit(20)

More from Sencha

More from Sencha(20)

Recently uploaded

Recently uploaded(20)

Compiling and Optimizing Your Own Browser with WebKit