Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Monday, November 29, 2010
Monday, November 29, 2010
Compiling & Optimizing
                       Your Own Browser with
                              WebKit

                ...
whoami




Monday, November 29, 2010
Overview




Monday, November 29, 2010
WebKit Everywhere

        Browser



         Devices



       Runtime

Monday, November 29, 2010
History
                80000
                70000
                60000
                50000
    Revisions




        ...
History                                   ~2000 commits/month
                80000
                70000
                ...
Extensive Tests


                             tests
   ≈ 20,000 tests           904 MB   the rest
                       ...
Workflow

            1               Every commit needs to be reviewed



         2                  Broken commit must b...
Workflow
                                                quality control
            1               Every commit needs to ...
Level of Involvement
                    Contributor
                                   after 10-20 patches




          ...
WebKit Reviewers
                                   Apple
                                    39




                     ...
WebKit Reviewers
                                   Apple
                                    39




                     ...
Components of WebKit
                    DOM               CSS

                            WebCore             SVG

     ...
Web Browsers
                            WebCore + JavaScriptCore

                        Safari            Eclair



   ...
How Fresh?

                                AIR 2.5
                                     531.9
                           ...
Platform Abstractions

                            Network     Unicode      Clipboard

                            Graphic...
WebCore
       Di erent “Ports”                               graphics



  GraphicsContext               Mac   Chromium  ...
Get + Compile




Monday, November 29, 2010
Requirements

     •Subversion or Git
     •C++ compiler
     •Perl
     •Python
     •Various SDK


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




Monday...
Using git

           git clone git://git.webkit.org/WebKit.git
           cd WebKit



                            ≈ 1.2 ...
Build
      WebKitTools/Scripts/build-webkit




                    --qt for Qt, --gtk for Gtk+
                    --deb...
Launch
      WebKitTools/Scripts/run-launcher




                    --qt for Qt, --gtk for Gtk+
                    --de...
Render Tree
                            paragraph

     <html><body><p>Hello SenchaCon!</p></body></html>


     layer at ...
Let’s Start the PARTY




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




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




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




            ...
Typical Scenario
                                     This is
                                   awesome!




            ...
Using WebView

               QWebView webView;
               webView.show();
               webView.setUrl(QUrl("http://...
Capture to Image

     QWebPage page;
     QImage image(size, QImage::Format_ARGB32_Premultiplied);
     image.fill(Qt::tr...
Network Log
        28: GET http://www.google.com/m/gp
        292: Response 200 application/xhtml+xml; charset=UTF-8 0 by...
Test Runner

      specrunner SpecRunner.html
      5 specs, 0 failures in 0.013s

      specrunner SpecRunner.html
      ...
Recorder & Replayer




Monday, November 29, 2010
Remote Console for




                            http://github.com/senchalabs/android-tools

Monday, November 29, 2010
Remote Console for




                            http://github.com/senchalabs/android-tools

Monday, November 29, 2010
THANK YOU!

                            ariya @ sencha.com


                            ariya.blogspot.com


            ...
THANK YOU!           We’re hiring!

                            ariya @ sencha.com


                            ariya.blo...
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
A Browser for the Automotive: Introduction to WebKit for Wayland (Automotive Linux Summit 2016)
Next
Upcoming SlideShare
A Browser for the Automotive: Introduction to WebKit for Wayland (Automotive Linux Summit 2016)
Next
Download to read offline and view in fullscreen.

Share

Compiling and Optimizing Your Own Browser with WebKit

Download to read offline

Webkit is the layout engine behind Safari, Chrome and almost every mobile browser. But did you ever wonder how to build WebKit yourself? In this session, you'll learn the simple steps, along with never-seen-before techniques, on how to experiment with WebKit on your own. You'll learn how to find the root of various performance problems, automate a wide array of regression tests, and see how WebKit works to produce the render tree, resolve complex styling, execute scripts, and more.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Compiling and Optimizing Your Own Browser with WebKit

  1. 1. Monday, November 29, 2010
  2. 2. Monday, November 29, 2010
  3. 3. Compiling & Optimizing Your Own Browser with WebKit ARIYA HIDAYAT ENGINEERING DIRECTOR, SENCHA Monday, November 29, 2010
  4. 4. whoami Monday, November 29, 2010
  5. 5. Overview Monday, November 29, 2010
  6. 6. WebKit Everywhere Browser Devices Runtime Monday, November 29, 2010
  7. 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. 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. 9. Extensive Tests tests ≈ 20,000 tests 904 MB the rest 229 MB Monday, November 29, 2010
  10. 10. Workflow 1 Every commit needs to be reviewed 2 Broken commit must be reverted Monday, November 29, 2010
  11. 11. Workflow quality control 1 Every commit needs to be reviewed 2 Broken commit must be reverted zero-regression policy Monday, November 29, 2010
  12. 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. 13. WebKit Reviewers Apple 39 Google 19 Misc 12 RIM Nokia 6 6 Monday, November 29, 2010
  14. 14. WebKit Reviewers Apple 39 Google 19 Misc 12 1 RIM Nokia 6 6 Monday, November 29, 2010
  15. 15. Components of WebKit DOM CSS WebCore SVG HTML rendering JavaScriptCore WebKit Library Monday, November 29, 2010
  16. 16. Web Browsers WebCore + JavaScriptCore Safari Eclair WebCore + V8 Chrome Froyo Monday, November 29, 2010
  17. 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. 18. Platform Abstractions Network Unicode Clipboard Graphics Theme Events Thread Geolocation Timer Monday, November 29, 2010
  19. 19. WebCore Di erent “Ports” graphics GraphicsContext Mac Chromium Qt Gtk Skia Cairo CoreGraphics QPainter graphics stack Monday, November 29, 2010
  20. 20. Get + Compile Monday, November 29, 2010
  21. 21. Requirements •Subversion or Git •C++ compiler •Perl •Python •Various SDK Monday, November 29, 2010
  22. 22. Using Subversion svn checkout http://svn.webkit.org/repository/ webkit/trunk webkit cd webkit Monday, November 29, 2010
  23. 23. Using git git clone git://git.webkit.org/WebKit.git cd WebKit ≈ 1.2 GB .git Monday, November 29, 2010
  24. 24. Build WebKitTools/Scripts/build-webkit --qt for Qt, --gtk for Gtk+ --debug for “Debug” mode Monday, November 29, 2010
  25. 25. Launch WebKitTools/Scripts/run-launcher --qt for Qt, --gtk for Gtk+ --debug for “Debug” mode Monday, November 29, 2010
  26. 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. 27. Let’s Start the PARTY Monday, November 29, 2010
  28. 28. Let’s Start the PARTY Monday, November 29, 2010
  29. 29. Typical Scenario This is awesome! Monday, November 29, 2010
  30. 30. Typical Scenario This is awesome! n t to ru forge ests the t REGRESSION Monday, November 29, 2010
  31. 31. Typical Scenario This is awesome! n t to ru forge ests the t REGRESSION Monday, November 29, 2010
  32. 32. Using WebView QWebView webView; webView.show(); webView.setUrl(QUrl("http://www.sencha.com")); Monday, November 29, 2010
  33. 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. 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. 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. 36. Recorder & Replayer Monday, November 29, 2010
  37. 37. Remote Console for http://github.com/senchalabs/android-tools Monday, November 29, 2010
  38. 38. Remote Console for http://github.com/senchalabs/android-tools Monday, November 29, 2010
  39. 39. THANK YOU! ariya @ sencha.com ariya.blogspot.com ariyahidayat Monday, November 29, 2010
  40. 40. THANK YOU! We’re hiring! ariya @ sencha.com ariya.blogspot.com ariyahidayat Monday, November 29, 2010
  • QiLuo4

    Nov. 4, 2014
  • weideng1485

    Apr. 16, 2014
  • dhondi

    Jun. 11, 2013
  • intoinside

    Apr. 18, 2013
  • divyang4481

    Apr. 4, 2013
  • jiaoogle

    Sep. 3, 2012
  • eniton

    Oct. 7, 2011
  • dilipken

    Sep. 15, 2011

Webkit is the layout engine behind Safari, Chrome and almost every mobile browser. But did you ever wonder how to build WebKit yourself? In this session, you'll learn the simple steps, along with never-seen-before techniques, on how to experiment with WebKit on your own. You'll learn how to find the root of various performance problems, automate a wide array of regression tests, and see how WebKit works to produce the render tree, resolve complex styling, execute scripts, and more.

Views

Total views

7,605

On Slideshare

0

From embeds

0

Number of embeds

31

Actions

Downloads

138

Shares

0

Comments

0

Likes

8

×