SlideShare a Scribd company logo
Monday, November 29, 2010
Monday, November 29, 2010
Compiling & Optimizing
                       Your Own Browser with
                              WebKit

                                   ARIYA HIDAYAT
                            ENGINEERING DIRECTOR, SENCHA


Monday, November 29, 2010
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




                40000
                30000
                20000
                10000
                   0
                        0   1   2   3   4     5     6   7   8   9   10
                                            Years

Monday, November 29, 2010
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
Extensive Tests


                             tests
   ≈ 20,000 tests           904 MB   the rest
                                     229 MB




Monday, November 29, 2010
Workflow

            1               Every commit needs to be reviewed



         2                  Broken commit must be reverted




Monday, November 29, 2010
Workflow
                                                quality control
            1               Every commit needs to be reviewed



         2                  Broken commit must be reverted

                                      zero-regression policy


Monday, November 29, 2010
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
WebKit Reviewers
                                   Apple
                                    39




                                                   Google
                                                     19
                            Misc
                             12

                                   RIM     Nokia
                                    6        6
Monday, November 29, 2010
WebKit Reviewers
                                   Apple
                                    39




                                                   Google
                                                     19
                            Misc
                             12

                 1                 RIM     Nokia
                                    6        6
Monday, November 29, 2010
Components of WebKit
                    DOM               CSS

                            WebCore             SVG

          HTML                   rendering

                                                      JavaScriptCore

                               WebKit Library

Monday, November 29, 2010
Web Browsers
                            WebCore + JavaScriptCore

                        Safari            Eclair



                                 WebCore + V8

                Chrome                       Froyo

Monday, November 29, 2010
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
Platform Abstractions

                            Network     Unicode      Clipboard

                            Graphics     Theme        Events

                            Thread     Geolocation    Timer




Monday, November 29, 2010
WebCore
       Di erent “Ports”                               graphics



  GraphicsContext               Mac   Chromium        Qt      Gtk


                                           Skia               Cairo
                            CoreGraphics
                                                   QPainter


                                             graphics stack

Monday, November 29, 2010
Get + Compile




Monday, November 29, 2010
Requirements

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


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




Monday, November 29, 2010
Using git

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



                            ≈ 1.2 GB .git




Monday, November 29, 2010
Build
      WebKitTools/Scripts/build-webkit




                    --qt for Qt, --gtk for Gtk+
                    --debug for “Debug” mode



Monday, November 29, 2010
Launch
      WebKitTools/Scripts/run-launcher




                    --qt for Qt, --gtk for Gtk+
                    --debug for “Debug” mode



Monday, November 29, 2010
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
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!




                               n
                       t to ru
                  forge ests
                     the t




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




                               n
                       t to ru
                  forge ests
                     the t




                                               REGRESSION
Monday, November 29, 2010
Using WebView

               QWebView webView;
               webView.show();
               webView.setUrl(QUrl("http://www.sencha.com"));




Monday, November 29, 2010
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
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
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
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


                            ariyahidayat

Monday, November 29, 2010
THANK YOU!           We’re hiring!

                            ariya @ sencha.com


                            ariya.blogspot.com


                            ariyahidayat

Monday, November 29, 2010

More Related Content

Viewers also liked

Android chromium web view
Android chromium web viewAndroid chromium web view
Android chromium web view
朋 王
 
How Browser Works?
How Browser Works?How Browser Works?
How Browser Works?
Vova Voyevidka
 
Chromium vs. Firefox
Chromium vs. FirefoxChromium vs. Firefox
Chromium vs. Firefox
Rashmika Nawaratne
 
Chrome & Webkit overview
Chrome & Webkit overviewChrome & Webkit overview
Chrome & Webkit overview
Bin Chen
 
Googleツールを使いこなして世界中の仲間と楽しく仕事を進めよう【初心者向け】
Googleツールを使いこなして世界中の仲間と楽しく仕事を進めよう【初心者向け】Googleツールを使いこなして世界中の仲間と楽しく仕事を進めよう【初心者向け】
Googleツールを使いこなして世界中の仲間と楽しく仕事を進めよう【初心者向け】
Shinsuke Yashima
 
How browser work
How browser workHow browser work
How browser work
Manish Trivedi
 
Fontconfigことはじめ
FontconfigことはじめFontconfigことはじめ
Fontconfigことはじめ
Takao Baba
 
WebKit and Blink: Bridging the Gap Between the Kernel and the HTML5 Revolution
WebKit and Blink: Bridging the Gap Between the Kernel and the HTML5 RevolutionWebKit and Blink: Bridging the Gap Between the Kernel and the HTML5 Revolution
WebKit and Blink: Bridging the Gap Between the Kernel and the HTML5 Revolution
juanjosanchezpenas
 
Web browser architecture
Web browser architectureWeb browser architecture
Web browser architecture
Nguyen Quang
 
Architecture of the Web browser
Architecture of the Web browserArchitecture of the Web browser
Architecture of the Web browser
Sabin Buraga
 
Android Chromium Rendering Pipeline
Android Chromium Rendering PipelineAndroid Chromium Rendering Pipeline
Android Chromium Rendering PipelineHyungwook Lee
 
Taller: Licencias de Software Libre
Taller: Licencias de Software LibreTaller: Licencias de Software Libre
Taller: Licencias de Software Libre
Igalia
 
The WebKit project
The WebKit projectThe WebKit project
The WebKit project
juanjosanchezpenas
 
Introduction to Web Architecture
Introduction to Web ArchitectureIntroduction to Web Architecture
Introduction to Web ArchitectureChamnap Chhorn
 

Viewers also liked (14)

Android chromium web view
Android chromium web viewAndroid chromium web view
Android chromium web view
 
How Browser Works?
How Browser Works?How Browser Works?
How Browser Works?
 
Chromium vs. Firefox
Chromium vs. FirefoxChromium vs. Firefox
Chromium vs. Firefox
 
Chrome & Webkit overview
Chrome & Webkit overviewChrome & Webkit overview
Chrome & Webkit overview
 
Googleツールを使いこなして世界中の仲間と楽しく仕事を進めよう【初心者向け】
Googleツールを使いこなして世界中の仲間と楽しく仕事を進めよう【初心者向け】Googleツールを使いこなして世界中の仲間と楽しく仕事を進めよう【初心者向け】
Googleツールを使いこなして世界中の仲間と楽しく仕事を進めよう【初心者向け】
 
How browser work
How browser workHow browser work
How browser work
 
Fontconfigことはじめ
FontconfigことはじめFontconfigことはじめ
Fontconfigことはじめ
 
WebKit and Blink: Bridging the Gap Between the Kernel and the HTML5 Revolution
WebKit and Blink: Bridging the Gap Between the Kernel and the HTML5 RevolutionWebKit and Blink: Bridging the Gap Between the Kernel and the HTML5 Revolution
WebKit and Blink: Bridging the Gap Between the Kernel and the HTML5 Revolution
 
Web browser architecture
Web browser architectureWeb browser architecture
Web browser architecture
 
Architecture of the Web browser
Architecture of the Web browserArchitecture of the Web browser
Architecture of the Web browser
 
Android Chromium Rendering Pipeline
Android Chromium Rendering PipelineAndroid Chromium Rendering Pipeline
Android Chromium Rendering Pipeline
 
Taller: Licencias de Software Libre
Taller: Licencias de Software LibreTaller: Licencias de Software Libre
Taller: Licencias de Software Libre
 
The WebKit project
The WebKit projectThe WebKit project
The WebKit project
 
Introduction to Web Architecture
Introduction to Web ArchitectureIntroduction to Web Architecture
Introduction to Web Architecture
 

Similar to Compiling and Optimizing Your Own Browser with WebKit

OpenDj Fossa2011
OpenDj Fossa2011OpenDj Fossa2011
OpenDj Fossa2011
Ludovic Poitou
 
Html5 Apps
Html5 AppsHtml5 Apps
Html5 Apps
Nikolai Onken
 
Presentation to wdim_students
Presentation to wdim_studentsPresentation to wdim_students
Presentation to wdim_studentsScott Motte
 
CSS3 now
CSS3 nowCSS3 now
CSS3 now
Johan Ronsse
 
GDD Brazil 2010 - What's new in Google App Engine and Google App Engine For B...
GDD Brazil 2010 - What's new in Google App Engine and Google App Engine For B...GDD Brazil 2010 - What's new in Google App Engine and Google App Engine For B...
GDD Brazil 2010 - What's new in Google App Engine and Google App Engine For B...
Patrick Chanezon
 
Cloudera Desktop
Cloudera DesktopCloudera Desktop
Cloudera Desktop
Hadoop User Group
 
Advanced Data Widgets and Server Integration
Advanced Data Widgets and Server IntegrationAdvanced Data Widgets and Server Integration
Advanced Data Widgets and Server Integration
Sencha
 
Rubinius - What Have You Done For Me Lately?
Rubinius - What Have You Done For Me Lately?Rubinius - What Have You Done For Me Lately?
Rubinius - What Have You Done For Me Lately?
evanphx
 
Google Developer DAy 2010 Japan: HTML5 についての最新情報 (マイク スミス)
Google Developer DAy 2010 Japan: HTML5 についての最新情報 (マイク スミス)Google Developer DAy 2010 Japan: HTML5 についての最新情報 (マイク スミス)
Google Developer DAy 2010 Japan: HTML5 についての最新情報 (マイク スミス)
Google Developer Relations Team
 
WebKitGtk+ Project
WebKitGtk+ ProjectWebKitGtk+ Project
WebKitGtk+ ProjectJoone Hur
 
Css3: What is the fuss about
Css3: What is the fuss aboutCss3: What is the fuss about
Css3: What is the fuss about
Davide Di Cillo
 
Scaling webappswithrabbitmq
Scaling webappswithrabbitmqScaling webappswithrabbitmq
Scaling webappswithrabbitmq
Alvaro Videla
 
Advanced Performance Tuning in Ext GWT
Advanced Performance Tuning in Ext GWTAdvanced Performance Tuning in Ext GWT
Advanced Performance Tuning in Ext GWT
Sencha
 
Architecting Windows Azure
Architecting Windows AzureArchitecting Windows Azure
Architecting Windows Azure
Sergejus Barinovas
 
Vagrant at LA Ruby
Vagrant at LA RubyVagrant at LA Ruby
Vagrant at LA Ruby
Mitchell Hashimoto
 
New publisher/developer environment
New publisher/developer environmentNew publisher/developer environment
New publisher/developer environmentLayar
 
Best Practices in Ext GWT
Best Practices in Ext GWTBest Practices in Ext GWT
Best Practices in Ext GWT
Sencha
 
Docker &amp; azure
Docker &amp; azureDocker &amp; azure
Docker &amp; azure
Alessandro Melchiori
 
Everything Rubinius
Everything RubiniusEverything Rubinius
Everything RubiniusEngine Yard
 

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

Life after sun solaris death - open dj - fossa2011
Life after sun solaris death - open dj - fossa2011Life after sun solaris death - open dj - fossa2011
Life after sun solaris death - open dj - fossa2011
 
OpenDj Fossa2011
OpenDj Fossa2011OpenDj Fossa2011
OpenDj Fossa2011
 
Html5 Apps
Html5 AppsHtml5 Apps
Html5 Apps
 
Presentation to wdim_students
Presentation to wdim_studentsPresentation to wdim_students
Presentation to wdim_students
 
CSS3 now
CSS3 nowCSS3 now
CSS3 now
 
GDD Brazil 2010 - What's new in Google App Engine and Google App Engine For B...
GDD Brazil 2010 - What's new in Google App Engine and Google App Engine For B...GDD Brazil 2010 - What's new in Google App Engine and Google App Engine For B...
GDD Brazil 2010 - What's new in Google App Engine and Google App Engine For B...
 
Cloudera Desktop
Cloudera DesktopCloudera Desktop
Cloudera Desktop
 
Advanced Data Widgets and Server Integration
Advanced Data Widgets and Server IntegrationAdvanced Data Widgets and Server Integration
Advanced Data Widgets and Server Integration
 
Rubinius - What Have You Done For Me Lately?
Rubinius - What Have You Done For Me Lately?Rubinius - What Have You Done For Me Lately?
Rubinius - What Have You Done For Me Lately?
 
Google Developer DAy 2010 Japan: HTML5 についての最新情報 (マイク スミス)
Google Developer DAy 2010 Japan: HTML5 についての最新情報 (マイク スミス)Google Developer DAy 2010 Japan: HTML5 についての最新情報 (マイク スミス)
Google Developer DAy 2010 Japan: HTML5 についての最新情報 (マイク スミス)
 
WebKitGtk+ Project
WebKitGtk+ ProjectWebKitGtk+ Project
WebKitGtk+ Project
 
Css3: What is the fuss about
Css3: What is the fuss aboutCss3: What is the fuss about
Css3: What is the fuss about
 
Scaling webappswithrabbitmq
Scaling webappswithrabbitmqScaling webappswithrabbitmq
Scaling webappswithrabbitmq
 
Advanced Performance Tuning in Ext GWT
Advanced Performance Tuning in Ext GWTAdvanced Performance Tuning in Ext GWT
Advanced Performance Tuning in Ext GWT
 
Architecting Windows Azure
Architecting Windows AzureArchitecting Windows Azure
Architecting Windows Azure
 
Vagrant at LA Ruby
Vagrant at LA RubyVagrant at LA Ruby
Vagrant at LA Ruby
 
New publisher/developer environment
New publisher/developer environmentNew publisher/developer environment
New publisher/developer environment
 
Best Practices in Ext GWT
Best Practices in Ext GWTBest Practices in Ext GWT
Best Practices in Ext GWT
 
Docker &amp; azure
Docker &amp; azureDocker &amp; azure
Docker &amp; azure
 
Everything Rubinius
Everything RubiniusEverything Rubinius
Everything Rubinius
 

More from Sencha

Breathe New Life into Your Existing JavaScript Applications with Web Components
Breathe New Life into Your Existing JavaScript Applications with Web ComponentsBreathe New Life into Your Existing JavaScript Applications with Web Components
Breathe New Life into Your Existing JavaScript Applications with Web Components
Sencha
 
Ext JS 6.6 Highlights
Ext JS 6.6 HighlightsExt JS 6.6 Highlights
Ext JS 6.6 Highlights
Sencha
 
Sencha Roadshow 2017: BufferedStore Internals featuring eyeworkers interactiv...
Sencha Roadshow 2017: BufferedStore Internals featuring eyeworkers interactiv...Sencha Roadshow 2017: BufferedStore Internals featuring eyeworkers interactiv...
Sencha Roadshow 2017: BufferedStore Internals featuring eyeworkers interactiv...
Sencha
 
Sencha Roadshow 2017: Build Progressive Web Apps with Ext JS and Cmd
Sencha Roadshow 2017: Build Progressive Web Apps with Ext JS and Cmd Sencha Roadshow 2017: Build Progressive Web Apps with Ext JS and Cmd
Sencha Roadshow 2017: Build Progressive Web Apps with Ext JS and Cmd
Sencha
 
Sencha Roadshow 2017: Best Practices for Implementing Continuous Web App Testing
Sencha Roadshow 2017: Best Practices for Implementing Continuous Web App TestingSencha Roadshow 2017: Best Practices for Implementing Continuous Web App Testing
Sencha Roadshow 2017: Best Practices for Implementing Continuous Web App Testing
Sencha
 
Sencha Roadshow 2017: What's New in Sencha Test
Sencha Roadshow 2017: What's New in Sencha TestSencha Roadshow 2017: What's New in Sencha Test
Sencha Roadshow 2017: What's New in Sencha Test
Sencha
 
Sencha Roadshow 2017: Sencha Upgrades - The Good. The Bad. The Ugly - Eva Luc...
Sencha Roadshow 2017: Sencha Upgrades - The Good. The Bad. The Ugly - Eva Luc...Sencha Roadshow 2017: Sencha Upgrades - The Good. The Bad. The Ugly - Eva Luc...
Sencha Roadshow 2017: Sencha Upgrades - The Good. The Bad. The Ugly - Eva Luc...
Sencha
 
Sencha Roadshow 2017: Modernizing the Ext JS Class System and Tooling
Sencha Roadshow 2017: Modernizing the Ext JS Class System and ToolingSencha Roadshow 2017: Modernizing the Ext JS Class System and Tooling
Sencha Roadshow 2017: Modernizing the Ext JS Class System and Tooling
Sencha
 
Sencha Roadshow 2017: Sencha Best Practices: Coworkee App
Sencha Roadshow 2017: Sencha Best Practices: Coworkee App Sencha Roadshow 2017: Sencha Best Practices: Coworkee App
Sencha Roadshow 2017: Sencha Best Practices: Coworkee App
Sencha
 
Sencha Roadshow 2017: Mobile First or Desktop First
Sencha Roadshow 2017: Mobile First or Desktop FirstSencha Roadshow 2017: Mobile First or Desktop First
Sencha Roadshow 2017: Mobile First or Desktop First
Sencha
 
Sencha Roadshow 2017: Innovations in Ext JS 6.5 and Beyond
Sencha Roadshow 2017: Innovations in Ext JS 6.5 and BeyondSencha Roadshow 2017: Innovations in Ext JS 6.5 and Beyond
Sencha Roadshow 2017: Innovations in Ext JS 6.5 and Beyond
Sencha
 
Leveraging React and GraphQL to Create a Performant, Scalable Data Grid
Leveraging React and GraphQL to Create a Performant, Scalable Data GridLeveraging React and GraphQL to Create a Performant, Scalable Data Grid
Leveraging React and GraphQL to Create a Performant, Scalable Data Grid
Sencha
 
Learn Key Insights from The State of Web Application Testing Research Report
Learn Key Insights from The State of Web Application Testing Research ReportLearn Key Insights from The State of Web Application Testing Research Report
Learn Key Insights from The State of Web Application Testing Research Report
Sencha
 
Introducing ExtReact: Adding Powerful Sencha Components to React Apps
Introducing ExtReact: Adding Powerful Sencha Components to React AppsIntroducing ExtReact: Adding Powerful Sencha Components to React Apps
Introducing ExtReact: Adding Powerful Sencha Components to React Apps
Sencha
 
SenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark Brocato
SenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark BrocatoSenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark Brocato
SenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark Brocato
Sencha
 
SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...
SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...
SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...
Sencha
 
SenchaCon 2016: LinkRest - Modern RESTful API Framework for Ext JS Apps - Rou...
SenchaCon 2016: LinkRest - Modern RESTful API Framework for Ext JS Apps - Rou...SenchaCon 2016: LinkRest - Modern RESTful API Framework for Ext JS Apps - Rou...
SenchaCon 2016: LinkRest - Modern RESTful API Framework for Ext JS Apps - Rou...
Sencha
 
SenchaCon 2016: Expect the Unexpected - Dealing with Errors in Web Apps
SenchaCon 2016: Expect the Unexpected - Dealing with Errors in Web AppsSenchaCon 2016: Expect the Unexpected - Dealing with Errors in Web Apps
SenchaCon 2016: Expect the Unexpected - Dealing with Errors in Web Apps
Sencha
 
Ext JS Architecture Best Practices - Mitchell Simeons
Ext JS Architecture Best Practices - Mitchell SimeonsExt JS Architecture Best Practices - Mitchell Simeons
Ext JS Architecture Best Practices - Mitchell Simeons
Sencha
 
SenchaCon 2016: Mobile First? Desktop First? Or Should you Think Universal Ap...
SenchaCon 2016: Mobile First? Desktop First? Or Should you Think Universal Ap...SenchaCon 2016: Mobile First? Desktop First? Or Should you Think Universal Ap...
SenchaCon 2016: Mobile First? Desktop First? Or Should you Think Universal Ap...
Sencha
 

More from Sencha (20)

Breathe New Life into Your Existing JavaScript Applications with Web Components
Breathe New Life into Your Existing JavaScript Applications with Web ComponentsBreathe New Life into Your Existing JavaScript Applications with Web Components
Breathe New Life into Your Existing JavaScript Applications with Web Components
 
Ext JS 6.6 Highlights
Ext JS 6.6 HighlightsExt JS 6.6 Highlights
Ext JS 6.6 Highlights
 
Sencha Roadshow 2017: BufferedStore Internals featuring eyeworkers interactiv...
Sencha Roadshow 2017: BufferedStore Internals featuring eyeworkers interactiv...Sencha Roadshow 2017: BufferedStore Internals featuring eyeworkers interactiv...
Sencha Roadshow 2017: BufferedStore Internals featuring eyeworkers interactiv...
 
Sencha Roadshow 2017: Build Progressive Web Apps with Ext JS and Cmd
Sencha Roadshow 2017: Build Progressive Web Apps with Ext JS and Cmd Sencha Roadshow 2017: Build Progressive Web Apps with Ext JS and Cmd
Sencha Roadshow 2017: Build Progressive Web Apps with Ext JS and Cmd
 
Sencha Roadshow 2017: Best Practices for Implementing Continuous Web App Testing
Sencha Roadshow 2017: Best Practices for Implementing Continuous Web App TestingSencha Roadshow 2017: Best Practices for Implementing Continuous Web App Testing
Sencha Roadshow 2017: Best Practices for Implementing Continuous Web App Testing
 
Sencha Roadshow 2017: What's New in Sencha Test
Sencha Roadshow 2017: What's New in Sencha TestSencha Roadshow 2017: What's New in Sencha Test
Sencha Roadshow 2017: What's New in Sencha Test
 
Sencha Roadshow 2017: Sencha Upgrades - The Good. The Bad. The Ugly - Eva Luc...
Sencha Roadshow 2017: Sencha Upgrades - The Good. The Bad. The Ugly - Eva Luc...Sencha Roadshow 2017: Sencha Upgrades - The Good. The Bad. The Ugly - Eva Luc...
Sencha Roadshow 2017: Sencha Upgrades - The Good. The Bad. The Ugly - Eva Luc...
 
Sencha Roadshow 2017: Modernizing the Ext JS Class System and Tooling
Sencha Roadshow 2017: Modernizing the Ext JS Class System and ToolingSencha Roadshow 2017: Modernizing the Ext JS Class System and Tooling
Sencha Roadshow 2017: Modernizing the Ext JS Class System and Tooling
 
Sencha Roadshow 2017: Sencha Best Practices: Coworkee App
Sencha Roadshow 2017: Sencha Best Practices: Coworkee App Sencha Roadshow 2017: Sencha Best Practices: Coworkee App
Sencha Roadshow 2017: Sencha Best Practices: Coworkee App
 
Sencha Roadshow 2017: Mobile First or Desktop First
Sencha Roadshow 2017: Mobile First or Desktop FirstSencha Roadshow 2017: Mobile First or Desktop First
Sencha Roadshow 2017: Mobile First or Desktop First
 
Sencha Roadshow 2017: Innovations in Ext JS 6.5 and Beyond
Sencha Roadshow 2017: Innovations in Ext JS 6.5 and BeyondSencha Roadshow 2017: Innovations in Ext JS 6.5 and Beyond
Sencha Roadshow 2017: Innovations in Ext JS 6.5 and Beyond
 
Leveraging React and GraphQL to Create a Performant, Scalable Data Grid
Leveraging React and GraphQL to Create a Performant, Scalable Data GridLeveraging React and GraphQL to Create a Performant, Scalable Data Grid
Leveraging React and GraphQL to Create a Performant, Scalable Data Grid
 
Learn Key Insights from The State of Web Application Testing Research Report
Learn Key Insights from The State of Web Application Testing Research ReportLearn Key Insights from The State of Web Application Testing Research Report
Learn Key Insights from The State of Web Application Testing Research Report
 
Introducing ExtReact: Adding Powerful Sencha Components to React Apps
Introducing ExtReact: Adding Powerful Sencha Components to React AppsIntroducing ExtReact: Adding Powerful Sencha Components to React Apps
Introducing ExtReact: Adding Powerful Sencha Components to React Apps
 
SenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark Brocato
SenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark BrocatoSenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark Brocato
SenchaCon 2016: Keynote Presentation - Art Landro, Gautam Agrawal, Mark Brocato
 
SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...
SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...
SenchaCon 2016: Add Magic to Your Ext JS Apps with D3 Visualizations - Vitaly...
 
SenchaCon 2016: LinkRest - Modern RESTful API Framework for Ext JS Apps - Rou...
SenchaCon 2016: LinkRest - Modern RESTful API Framework for Ext JS Apps - Rou...SenchaCon 2016: LinkRest - Modern RESTful API Framework for Ext JS Apps - Rou...
SenchaCon 2016: LinkRest - Modern RESTful API Framework for Ext JS Apps - Rou...
 
SenchaCon 2016: Expect the Unexpected - Dealing with Errors in Web Apps
SenchaCon 2016: Expect the Unexpected - Dealing with Errors in Web AppsSenchaCon 2016: Expect the Unexpected - Dealing with Errors in Web Apps
SenchaCon 2016: Expect the Unexpected - Dealing with Errors in Web Apps
 
Ext JS Architecture Best Practices - Mitchell Simeons
Ext JS Architecture Best Practices - Mitchell SimeonsExt JS Architecture Best Practices - Mitchell Simeons
Ext JS Architecture Best Practices - Mitchell Simeons
 
SenchaCon 2016: Mobile First? Desktop First? Or Should you Think Universal Ap...
SenchaCon 2016: Mobile First? Desktop First? Or Should you Think Universal Ap...SenchaCon 2016: Mobile First? Desktop First? Or Should you Think Universal Ap...
SenchaCon 2016: Mobile First? Desktop First? Or Should you Think Universal Ap...
 

Recently uploaded

FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdfFIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance
 
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
Product School
 
Assuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyesAssuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyes
ThousandEyes
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
Kari Kakkonen
 
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Thierry Lestable
 
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Tobias Schneck
 
The Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and SalesThe Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and Sales
Laura Byrne
 
Monitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR EventsMonitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR Events
Ana-Maria Mihalceanu
 
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
Product School
 
Essentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with ParametersEssentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with Parameters
Safe Software
 
GraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge GraphGraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge Graph
Guy Korland
 
JMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and GrafanaJMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and Grafana
RTTS
 
Knowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and backKnowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and back
Elena Simperl
 
Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...
Product School
 
Epistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI supportEpistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI support
Alan Dix
 
UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4
DianaGray10
 
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Albert Hoitingh
 
Generating a custom Ruby SDK for your web service or Rails API using Smithy
Generating a custom Ruby SDK for your web service or Rails API using SmithyGenerating a custom Ruby SDK for your web service or Rails API using Smithy
Generating a custom Ruby SDK for your web service or Rails API using Smithy
g2nightmarescribd
 
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
BookNet Canada
 
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMsTo Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
Paul Groth
 

Recently uploaded (20)

FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdfFIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
 
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
 
Assuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyesAssuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyes
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
 
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
 
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
 
The Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and SalesThe Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and Sales
 
Monitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR EventsMonitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR Events
 
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
 
Essentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with ParametersEssentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with Parameters
 
GraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge GraphGraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge Graph
 
JMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and GrafanaJMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and Grafana
 
Knowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and backKnowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and back
 
Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...
 
Epistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI supportEpistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI support
 
UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4
 
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
 
Generating a custom Ruby SDK for your web service or Rails API using Smithy
Generating a custom Ruby SDK for your web service or Rails API using SmithyGenerating a custom Ruby SDK for your web service or Rails API using Smithy
Generating a custom Ruby SDK for your web service or Rails API using Smithy
 
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
 
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMsTo Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
 

Compiling and Optimizing Your Own Browser with WebKit

  • 3. Compiling & Optimizing Your Own Browser with WebKit ARIYA HIDAYAT ENGINEERING DIRECTOR, SENCHA 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. Workflow 1 Every commit needs to be reviewed 2 Broken commit must be reverted Monday, November 29, 2010
  • 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. 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