SlideShare a Scribd company logo
1 of 62
Download to read offline
Building HTML5 Apps
Ariya Hidayat, Sencha
08/29/11
2
Building HTML5 App



   Ariya Hidayat
Engineering Director


                           08/29/11
                       3
whoami




             08/29/11
         4
1
Pure web apps (run in the browser)


Hybrid solution (delivered as native apps)


                           2

                                  08/29/11
                             5
Pure Web Apps




                    08/29/11
                6
Common Myths

                       Slow          Does not use GPU acceleration

 Only works offline
                       Manual layout of apps
                                               No GUI designer
     Only JavaScript
                               Tedious to code

          Can’t do fluid animation       Not crossplatform




                                                                 08/29/11
                                                        7
“Too many phones will kill you...”




                                         08/29/11
                                     8
Supported Platforms



Desktop



 Mobile




                          08/29/11
                      9
Adoption




                08/29/11
           10
Amazon Kindle Cloud Reader




                                  08/29/11
                             11
Financial Times




                       08/29/11
                  12
JavaScript: Ubiquitous Programming Environment




                                          08/29/11
                                     13
Need for Speed

                               SunSpider 0.9.1


Internet Explorer 8                                    7.43 seconds
 Google Chrome 13     0.44 seconds
          Firefox 6   0.41 seconds




                                                      08/29/11
                                                 14
Libraries and Frameworks




                                08/29/11
                           15
Offline Support

                  Application Cache
                    Local Storage




                            08/29/11
                     16
Application Cache
                                    CACHE MANIFEST
                                    # version 42

                                    CACHE:
                                    style.css
                                    logic.js
                                    images/logo.png
<html manifest=”foobar.appcache”>
...
</html>                             NETWORK:
                                    http://api.example.com
                                    login/

                                    FALLBACK:
                                    *.html offline.html




                                                               08/29/11
                                                          17
Application Cache


                      offline        online


 CACHE              use cache       update

 NETWORK             can’t use     use remote


 FALLBACK           use fallback   use remote




                                                08/29/11
                                        18
Local Storage                          ~ 5 MB


        localStorage.setItem(‘foo’, ‘bar’);

        localStorage.getItem(‘foo’);

        localStorage.removeItem(‘foo’);

        localStorage.clear();




                                                     08/29/11
                                                19
CSS3 Animation




    http://mozillademos.org/demos/planetarium/demo.html


                                                     08/29/11
                                               20
Canvas for Visualization




     JavaScript InfoVis Toolkit   http://thejit.org/



                                                       08/29/11
                                             21
Canvas for Games




       http://ariya.blogspot.com/2010/09/inv
                                             ade-destroy.html




                                                                     08/29/11
                                                                22
Pixel Manipulations




            http://ariya.github.com/canvas/crossfading/



                                                               08/29/11
                                                          23
Vector Graphics




             http://raphaeljs.com/polar-clock.html




                                                          08/29/11
                                                     24
WebGL for 3-D




http://webglsamples.googlecode.com/hg/aquarium/aquarium.html


                                                      08/29/11
                                                25
WebGL for Visualization




          http://senchalabs.github.com/philogl/


                                                       08/29/11
                                                  26
Which is for what?

                               CSS3   Canvas   SVG      WebGL
    Animation of UI elements    ✔
        2-D visualization               ✔      ✔
      Imperative drawing                ✔
       2-D scene-graph                         ✔         ✔
        3-D scene graph                                  ✔
           2-D game                     ✔      ✔         ✔
           3-D game                                      ✔



                                                          08/29/11
                                                   27
Hybrid Native + Web




                       08/29/11
                  28
Going Hybrid?

       Platform Integration
                               Security




      Advanced Technologies   App Store/ Marketplace




                                                       08/29/11
                                                29
Real-world Hybrid Apps




          Ext Designer   Sencha Animator




                                                08/29/11
                                           30
WebKit Everywhere

   Browser



   Devices




   Runtime




                         08/29/11
                    31
~2000 commits/month
    History
            100000


            80000


            60000
Revisions




            40000


            20000


                0
                     0   1   2   3   4     5     6   7   8        9      10
                                         Years

                                                                      08/29/11
                                                             32
Components of WebKit

          DOM               CSS


                WebCore              SVG


   HTML
                      rendering

                                           JavaScriptCore



                    WebKit Library




                                                            08/29/11
                                                  33
Platform Abstraction


       Network          Unicode      Clipboard


       Graphics          Theme        Events


        Thread         Geolocation    Timer




                                                 08/29/11
                                           34
WebCore
Different “Ports”                                     graphics



GraphicsContext         Mac        Chromium       Qt         Gtk


                                     Skia                       Cairo
                    CoreGraphics
                                               QPainter


                                        graphics stack



                                                          08/29/11
                                                 35
QWeb* classes

                QWebView (widget)


                QWebPage (object)

                     QWebFrame (object)


                 At least one, i.e. the main frame of the page




                                                      08/29/11
                                             36
Using QWebView



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




                                                        08/29/11
                                                   37
Contents via String



        QWebView webView;
        webView.show();
        webView.setContent("<body>Hello, MeeGo!</body>");




                                                             08/29/11
                                                        38
Contents via Resource
                             <RCC>
                                 <qresource prefix="/">
                                     <file>content.html</file>
                                 </qresource>
                             </RCC>


       QWebView webView;
       webView.show();
       webView.setUrl(QUrl("qrc:/content.html"));




                                                                 08/29/11
                                                           39
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);




     http://labs.qt.nokia.com/2009/01/15/capturing-web-pages/




                                                                       08/29/11
                                                                  40
SVG Rasterizer




   http://labs.qt.nokia.com/2008/08/06/webkit-based-svg-rasterizer/



                                                                08/29/11
                                                         41
Search + Preview




  http://labs.qt.nokia.com/2008/11/04/search-with-thumbnail-preview/



                                                                08/29/11
                                                         42
Exposing to the Web World


    QWebFrame::addToJavaScriptWindowObject(QString, QObject*)



                                Public functions
                                Object properties
                                  Child objects




                                                            08/29/11
                                                     43
Exposing to the Web World

page()->mainFrame()->addToJavaScriptWindowObject("Dialog", new Dialog);



                  class Dialog: public QObject
                  {
                      Q_OBJECT

                  public:
                      Dialog(QObject *parent = 0);

                  public slots:
                      void showMessage(const QString& msg);
                  };




                                                                   08/29/11
                                                              44
Exposing to the Web World

    <input type="button" value="Try this"
    onClick="Dialog.showMessage('You clicked me!')">




        instance of
       Dialog object         public slot




                                                       08/29/11
                                                45
Signal and Slot

                  signal


       foobar.modified.connect(refresh);

        QObject instance       JavaScript function


      foobar.modified.connect(obj, refresh);
                                 any object




                                                          08/29/11
                                                     46
Triggering Action from Native

class Stopwatch: public QObject   Stopwatch::Stopwatch(QObject *parent)
{                                     : QObject(parent)
    Q_OBJECT                          , m_index(0)
                                  {
public:                               QTimer *timer = new QTimer(this);
    Stopwatch(QObject *parent =       timer->setInterval(1000);
0);                                   connect(timer, SIGNAL(timeout()), SLOT(update()));
                                      timer->start();
signals:                          }
    void tick(int t);
                                  void Stopwatch::update()
private slots:                    {
    void update();                    emit tick(m_index++);
                                  }
private:
    int m_index;
};




                                                                          08/29/11
                                                                  47
Triggering Action from Native

       instance of
     Stopwatch object
                              signal



        <script>
        Stopwatch.tick.connect(function(t) {
            document.getElementById('tick').innerText = t;
        });
        </script>




                                                             08/29/11
                                                     48
Coming Back to Native


     QVariant QWebFrame::evaluateJavaScript(QString)


         mostly key-value pair
        (like JavaScript objects)




                                                            08/29/11
                                                       49
Platform Integration

                      Menu and Menu Bar

                                                     Dialogs


                              Application
      System Access




                                      Notifications




                                                               08/29/11
                                                        50
Debugging




settings()->setAttribute(QWebSettings::DeveloperExtrasEnabled, true);




                                                               08/29/11
                                                         51
Consume Web 2.0




   http://labs.qt.nokia.com/2009/03/08/creating-a-google-chat-client-in-15-minutes/




                                                                                 08/29/11
                                                                        52
http://bit.ly/x2-codemirror
Code Editor




                                08/29/11
                       53
http://bit.ly/x2-foldervis
Folder Visualization




                                        08/29/11
                              54
GPU Acceleration




                        08/29/11
                   55
Game vs Web




                   08/29/11
              56
Primitive Drawing




                         08/29/11
                    57
Backing Store




  when you pinch...




                           08/29/11
                      58
Layer Compositing




                         08/29/11
                    59
Logical 3-D   smooth animation FTW!




                                           08/29/11
                                      60
Conclusions


              Web technologies are moving really fast
       Various frameworks and libraries boost the productivity
                Hybrid approach helps the migration
                       Tools need to catch-up




                                                                  08/29/11
                                                             61
THANK YOU!


             ariya.hidayat@gmail.com


             ariya.ofilabs.com


             @ariyahidayat




                                            08/29/11
                                       62

More Related Content

What's hot

Node.js on microsoft azure april 2014
Node.js on microsoft azure april 2014Node.js on microsoft azure april 2014
Node.js on microsoft azure april 2014Brian Benz
 
[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web DesignChristopher Schmitt
 
Going to Mars with Groovy Domain-Specific Languages
Going to Mars with Groovy Domain-Specific LanguagesGoing to Mars with Groovy Domain-Specific Languages
Going to Mars with Groovy Domain-Specific LanguagesGuillaume Laforge
 
Academy PRO: HTML5 API graphics
Academy PRO: HTML5 API graphicsAcademy PRO: HTML5 API graphics
Academy PRO: HTML5 API graphicsBinary Studio
 
HTML5 (and friends) - History, overview and current status - jsDay Verona 11....
HTML5 (and friends) - History, overview and current status - jsDay Verona 11....HTML5 (and friends) - History, overview and current status - jsDay Verona 11....
HTML5 (and friends) - History, overview and current status - jsDay Verona 11....Patrick Lauke
 
A web perf dashboard up & running in 90 minutes presentation
A web perf dashboard up & running in 90 minutes presentationA web perf dashboard up & running in 90 minutes presentation
A web perf dashboard up & running in 90 minutes presentationJustin Dorfman
 
Brave new world of HTML5
Brave new world of HTML5Brave new world of HTML5
Brave new world of HTML5Chris Mills
 
Deview 2013 mobile browser internals and trends_20131022
Deview 2013 mobile browser internals and trends_20131022Deview 2013 mobile browser internals and trends_20131022
Deview 2013 mobile browser internals and trends_20131022NAVER D2
 
Webpack Encore - Asset Management for the rest of us
Webpack Encore - Asset Management for the rest of usWebpack Encore - Asset Management for the rest of us
Webpack Encore - Asset Management for the rest of usStefan Adolf
 
Asynchronous Module Definition (AMD)
Asynchronous Module Definition (AMD)Asynchronous Module Definition (AMD)
Asynchronous Module Definition (AMD)xMartin12
 
Dynamic Languages Web Frameworks Indicthreads 2009
Dynamic Languages Web Frameworks Indicthreads 2009Dynamic Languages Web Frameworks Indicthreads 2009
Dynamic Languages Web Frameworks Indicthreads 2009Arun Gupta
 
Building a JavaScript Library
Building a JavaScript LibraryBuilding a JavaScript Library
Building a JavaScript Libraryjeresig
 
Forensic Tools for In-Depth Performance Investigations
Forensic Tools for In-Depth Performance InvestigationsForensic Tools for In-Depth Performance Investigations
Forensic Tools for In-Depth Performance InvestigationsNicholas Jansma
 
Backend, app e internet das coisas com NodeJS no Google Cloud Platform
Backend, app e internet das coisas com NodeJS no Google Cloud PlatformBackend, app e internet das coisas com NodeJS no Google Cloud Platform
Backend, app e internet das coisas com NodeJS no Google Cloud PlatformAlvaro Viebrantz
 
Node.js 기반 정적 페이지 블로그 엔진, 하루프레스
Node.js 기반 정적 페이지 블로그 엔진, 하루프레스Node.js 기반 정적 페이지 블로그 엔진, 하루프레스
Node.js 기반 정적 페이지 블로그 엔진, 하루프레스Rhio Kim
 
Hardware Acceleration in WebKit
Hardware Acceleration in WebKitHardware Acceleration in WebKit
Hardware Acceleration in WebKitJoone Hur
 

What's hot (20)

Node.js on microsoft azure april 2014
Node.js on microsoft azure april 2014Node.js on microsoft azure april 2014
Node.js on microsoft azure april 2014
 
[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design
 
Going to Mars with Groovy Domain-Specific Languages
Going to Mars with Groovy Domain-Specific LanguagesGoing to Mars with Groovy Domain-Specific Languages
Going to Mars with Groovy Domain-Specific Languages
 
Academy PRO: HTML5 API graphics
Academy PRO: HTML5 API graphicsAcademy PRO: HTML5 API graphics
Academy PRO: HTML5 API graphics
 
HTML5 (and friends) - History, overview and current status - jsDay Verona 11....
HTML5 (and friends) - History, overview and current status - jsDay Verona 11....HTML5 (and friends) - History, overview and current status - jsDay Verona 11....
HTML5 (and friends) - History, overview and current status - jsDay Verona 11....
 
A web perf dashboard up & running in 90 minutes presentation
A web perf dashboard up & running in 90 minutes presentationA web perf dashboard up & running in 90 minutes presentation
A web perf dashboard up & running in 90 minutes presentation
 
Brave new world of HTML5
Brave new world of HTML5Brave new world of HTML5
Brave new world of HTML5
 
Deview 2013 mobile browser internals and trends_20131022
Deview 2013 mobile browser internals and trends_20131022Deview 2013 mobile browser internals and trends_20131022
Deview 2013 mobile browser internals and trends_20131022
 
Mlocjs buzdin
Mlocjs buzdinMlocjs buzdin
Mlocjs buzdin
 
Webpack Encore - Asset Management for the rest of us
Webpack Encore - Asset Management for the rest of usWebpack Encore - Asset Management for the rest of us
Webpack Encore - Asset Management for the rest of us
 
Asynchronous Module Definition (AMD)
Asynchronous Module Definition (AMD)Asynchronous Module Definition (AMD)
Asynchronous Module Definition (AMD)
 
Dynamic Languages Web Frameworks Indicthreads 2009
Dynamic Languages Web Frameworks Indicthreads 2009Dynamic Languages Web Frameworks Indicthreads 2009
Dynamic Languages Web Frameworks Indicthreads 2009
 
Building a JavaScript Library
Building a JavaScript LibraryBuilding a JavaScript Library
Building a JavaScript Library
 
Intro To Grails
Intro To GrailsIntro To Grails
Intro To Grails
 
Forensic Tools for In-Depth Performance Investigations
Forensic Tools for In-Depth Performance InvestigationsForensic Tools for In-Depth Performance Investigations
Forensic Tools for In-Depth Performance Investigations
 
GWT Extreme!
GWT Extreme!GWT Extreme!
GWT Extreme!
 
Backend, app e internet das coisas com NodeJS no Google Cloud Platform
Backend, app e internet das coisas com NodeJS no Google Cloud PlatformBackend, app e internet das coisas com NodeJS no Google Cloud Platform
Backend, app e internet das coisas com NodeJS no Google Cloud Platform
 
Node.js 기반 정적 페이지 블로그 엔진, 하루프레스
Node.js 기반 정적 페이지 블로그 엔진, 하루프레스Node.js 기반 정적 페이지 블로그 엔진, 하루프레스
Node.js 기반 정적 페이지 블로그 엔진, 하루프레스
 
CRUD with Polymer 2.0
CRUD with Polymer 2.0CRUD with Polymer 2.0
CRUD with Polymer 2.0
 
Hardware Acceleration in WebKit
Hardware Acceleration in WebKitHardware Acceleration in WebKit
Hardware Acceleration in WebKit
 

Similar to Build HTML5 App (Intel Elements 2011)

Webgl 기술동향 2011.8
Webgl 기술동향 2011.8Webgl 기술동향 2011.8
Webgl 기술동향 2011.8Seung Joon Choi
 
Alejandro Villanueva - Google Inc.
Alejandro Villanueva - Google Inc.Alejandro Villanueva - Google Inc.
Alejandro Villanueva - Google Inc.Alejandro Corpeño
 
Google - Charla para CTOs
Google - Charla para CTOsGoogle - Charla para CTOs
Google - Charla para CTOsPalermo Valley
 
WebGL For Game Development Spring 2013
WebGL For Game Development Spring 2013WebGL For Game Development Spring 2013
WebGL For Game Development Spring 2013Tony Parisi
 
WebGL, HTML5 and How the Mobile Web Was Won
WebGL, HTML5 and How the Mobile Web Was WonWebGL, HTML5 and How the Mobile Web Was Won
WebGL, HTML5 and How the Mobile Web Was WonTony Parisi
 
Device系APIの全体図
Device系APIの全体図Device系APIの全体図
Device系APIの全体図Kensaku Komatsu
 
App Engine Overview @ Google Hackathon SXSW 2010
App Engine Overview @ Google Hackathon SXSW 2010App Engine Overview @ Google Hackathon SXSW 2010
App Engine Overview @ Google Hackathon SXSW 2010Chris Schalk
 
Html5 mobile develop tools
Html5 mobile develop toolsHtml5 mobile develop tools
Html5 mobile develop toolsLey Liu
 
Mozilla In Malaysia
Mozilla In MalaysiaMozilla In Malaysia
Mozilla In MalaysiaGen Kanai
 
Michael(tm) Smith WND09 Presentation
Michael(tm) Smith WND09 PresentationMichael(tm) Smith WND09 Presentation
Michael(tm) Smith WND09 PresentationMichael(tm) Smith
 
App Engine Overview Cloud Futures Publish
App Engine Overview Cloud Futures PublishApp Engine Overview Cloud Futures Publish
App Engine Overview Cloud Futures PublishChris Schalk
 
Google html5 Tutorial
Google html5 TutorialGoogle html5 Tutorial
Google html5 Tutorialjobfan
 
Widget Workshop Advanced Development
Widget Workshop Advanced DevelopmentWidget Workshop Advanced Development
Widget Workshop Advanced DevelopmentDominik Helleberg
 
HTML5 and the Open Web Platform
HTML5 and the Open Web PlatformHTML5 and the Open Web Platform
HTML5 and the Open Web PlatformBeat Signer
 
Drupalcamp New York 2009
Drupalcamp New York 2009Drupalcamp New York 2009
Drupalcamp New York 2009Tom Deryckere
 
Estado da Arte HTML5
Estado da Arte HTML5Estado da Arte HTML5
Estado da Arte HTML5MCM-IPG
 

Similar to Build HTML5 App (Intel Elements 2011) (20)

Webgl 기술동향 2011.8
Webgl 기술동향 2011.8Webgl 기술동향 2011.8
Webgl 기술동향 2011.8
 
Alejandro Villanueva - Google Inc.
Alejandro Villanueva - Google Inc.Alejandro Villanueva - Google Inc.
Alejandro Villanueva - Google Inc.
 
Google - Charla para CTOs
Google - Charla para CTOsGoogle - Charla para CTOs
Google - Charla para CTOs
 
WebGL For Game Development Spring 2013
WebGL For Game Development Spring 2013WebGL For Game Development Spring 2013
WebGL For Game Development Spring 2013
 
Zembly
ZemblyZembly
Zembly
 
WebGL, HTML5 and How the Mobile Web Was Won
WebGL, HTML5 and How the Mobile Web Was WonWebGL, HTML5 and How the Mobile Web Was Won
WebGL, HTML5 and How the Mobile Web Was Won
 
Device系APIの全体図
Device系APIの全体図Device系APIの全体図
Device系APIの全体図
 
App Engine Overview @ Google Hackathon SXSW 2010
App Engine Overview @ Google Hackathon SXSW 2010App Engine Overview @ Google Hackathon SXSW 2010
App Engine Overview @ Google Hackathon SXSW 2010
 
Hybrid mobile apps
Hybrid mobile appsHybrid mobile apps
Hybrid mobile apps
 
Html5 mobile develop tools
Html5 mobile develop toolsHtml5 mobile develop tools
Html5 mobile develop tools
 
Mozilla In Malaysia
Mozilla In MalaysiaMozilla In Malaysia
Mozilla In Malaysia
 
Michael(tm) Smith WND09 Presentation
Michael(tm) Smith WND09 PresentationMichael(tm) Smith WND09 Presentation
Michael(tm) Smith WND09 Presentation
 
App Engine Overview Cloud Futures Publish
App Engine Overview Cloud Futures PublishApp Engine Overview Cloud Futures Publish
App Engine Overview Cloud Futures Publish
 
Google html5 Tutorial
Google html5 TutorialGoogle html5 Tutorial
Google html5 Tutorial
 
Html5
Html5Html5
Html5
 
Widget Workshop Advanced Development
Widget Workshop Advanced DevelopmentWidget Workshop Advanced Development
Widget Workshop Advanced Development
 
HTML5 and the Open Web Platform
HTML5 and the Open Web PlatformHTML5 and the Open Web Platform
HTML5 and the Open Web Platform
 
Drupalcamp New York 2009
Drupalcamp New York 2009Drupalcamp New York 2009
Drupalcamp New York 2009
 
Estado da Arte HTML5
Estado da Arte HTML5Estado da Arte HTML5
Estado da Arte HTML5
 
JavaME UI - JMDF 2007
JavaME UI - JMDF 2007JavaME UI - JMDF 2007
JavaME UI - JMDF 2007
 

More from Ariya Hidayat

Understanding Webkit Rendering
Understanding Webkit RenderingUnderstanding Webkit Rendering
Understanding Webkit RenderingAriya Hidayat
 
JavaScript Parser Infrastructure for Code Quality Analysis
JavaScript Parser Infrastructure for Code Quality AnalysisJavaScript Parser Infrastructure for Code Quality Analysis
JavaScript Parser Infrastructure for Code Quality AnalysisAriya Hidayat
 
Hybrid Apps (Native + Web) via QtWebKit
Hybrid Apps (Native + Web) via QtWebKitHybrid Apps (Native + Web) via QtWebKit
Hybrid Apps (Native + Web) via QtWebKitAriya Hidayat
 
Hybrid Apps (Native + Web) using WebKit
Hybrid Apps (Native + Web) using WebKitHybrid Apps (Native + Web) using WebKit
Hybrid Apps (Native + Web) using WebKitAriya Hidayat
 
Hybrid Apps (Native + Web) using WebKit
Hybrid Apps (Native + Web) using WebKitHybrid Apps (Native + Web) using WebKit
Hybrid Apps (Native + Web) using WebKitAriya Hidayat
 
Efficient Graphics with Qt
Efficient Graphics with QtEfficient Graphics with Qt
Efficient Graphics with QtAriya Hidayat
 
Introduction to QtWebKit
Introduction to QtWebKitIntroduction to QtWebKit
Introduction to QtWebKitAriya Hidayat
 

More from Ariya Hidayat (7)

Understanding Webkit Rendering
Understanding Webkit RenderingUnderstanding Webkit Rendering
Understanding Webkit Rendering
 
JavaScript Parser Infrastructure for Code Quality Analysis
JavaScript Parser Infrastructure for Code Quality AnalysisJavaScript Parser Infrastructure for Code Quality Analysis
JavaScript Parser Infrastructure for Code Quality Analysis
 
Hybrid Apps (Native + Web) via QtWebKit
Hybrid Apps (Native + Web) via QtWebKitHybrid Apps (Native + Web) via QtWebKit
Hybrid Apps (Native + Web) via QtWebKit
 
Hybrid Apps (Native + Web) using WebKit
Hybrid Apps (Native + Web) using WebKitHybrid Apps (Native + Web) using WebKit
Hybrid Apps (Native + Web) using WebKit
 
Hybrid Apps (Native + Web) using WebKit
Hybrid Apps (Native + Web) using WebKitHybrid Apps (Native + Web) using WebKit
Hybrid Apps (Native + Web) using WebKit
 
Efficient Graphics with Qt
Efficient Graphics with QtEfficient Graphics with Qt
Efficient Graphics with Qt
 
Introduction to QtWebKit
Introduction to QtWebKitIntroduction to QtWebKit
Introduction to QtWebKit
 

Recently uploaded

Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)wesley chun
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Igalia
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessPixlogix Infotech
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonetsnaman860154
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024The Digital Insurer
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEarley Information Science
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsEnterprise Knowledge
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking MenDelhi Call girls
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘RTylerCroy
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slidespraypatel2
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?Igalia
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsMaria Levchenko
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking MenDelhi Call girls
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...Neo4j
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)Gabriella Davis
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking MenDelhi Call girls
 

Recently uploaded (20)

Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slides
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 

Build HTML5 App (Intel Elements 2011)

  • 1. Building HTML5 Apps Ariya Hidayat, Sencha
  • 3. Building HTML5 App Ariya Hidayat Engineering Director 08/29/11 3
  • 4. whoami 08/29/11 4
  • 5. 1 Pure web apps (run in the browser) Hybrid solution (delivered as native apps) 2 08/29/11 5
  • 6. Pure Web Apps 08/29/11 6
  • 7. Common Myths Slow Does not use GPU acceleration Only works offline Manual layout of apps No GUI designer Only JavaScript Tedious to code Can’t do fluid animation Not crossplatform 08/29/11 7
  • 8. “Too many phones will kill you...” 08/29/11 8
  • 10. Adoption 08/29/11 10
  • 11. Amazon Kindle Cloud Reader 08/29/11 11
  • 12. Financial Times 08/29/11 12
  • 13. JavaScript: Ubiquitous Programming Environment 08/29/11 13
  • 14. Need for Speed SunSpider 0.9.1 Internet Explorer 8 7.43 seconds Google Chrome 13 0.44 seconds Firefox 6 0.41 seconds 08/29/11 14
  • 16. Offline Support Application Cache Local Storage 08/29/11 16
  • 17. Application Cache CACHE MANIFEST # version 42 CACHE: style.css logic.js images/logo.png <html manifest=”foobar.appcache”> ... </html> NETWORK: http://api.example.com login/ FALLBACK: *.html offline.html 08/29/11 17
  • 18. Application Cache offline online CACHE use cache update NETWORK can’t use use remote FALLBACK use fallback use remote 08/29/11 18
  • 19. Local Storage ~ 5 MB localStorage.setItem(‘foo’, ‘bar’); localStorage.getItem(‘foo’); localStorage.removeItem(‘foo’); localStorage.clear(); 08/29/11 19
  • 20. CSS3 Animation http://mozillademos.org/demos/planetarium/demo.html 08/29/11 20
  • 21. Canvas for Visualization JavaScript InfoVis Toolkit http://thejit.org/ 08/29/11 21
  • 22. Canvas for Games http://ariya.blogspot.com/2010/09/inv ade-destroy.html 08/29/11 22
  • 23. Pixel Manipulations http://ariya.github.com/canvas/crossfading/ 08/29/11 23
  • 24. Vector Graphics http://raphaeljs.com/polar-clock.html 08/29/11 24
  • 26. WebGL for Visualization http://senchalabs.github.com/philogl/ 08/29/11 26
  • 27. Which is for what? CSS3 Canvas SVG WebGL Animation of UI elements ✔ 2-D visualization ✔ ✔ Imperative drawing ✔ 2-D scene-graph ✔ ✔ 3-D scene graph ✔ 2-D game ✔ ✔ ✔ 3-D game ✔ 08/29/11 27
  • 28. Hybrid Native + Web 08/29/11 28
  • 29. Going Hybrid? Platform Integration Security Advanced Technologies App Store/ Marketplace 08/29/11 29
  • 30. Real-world Hybrid Apps Ext Designer Sencha Animator 08/29/11 30
  • 31. WebKit Everywhere Browser Devices Runtime 08/29/11 31
  • 32. ~2000 commits/month History 100000 80000 60000 Revisions 40000 20000 0 0 1 2 3 4 5 6 7 8 9 10 Years 08/29/11 32
  • 33. Components of WebKit DOM CSS WebCore SVG HTML rendering JavaScriptCore WebKit Library 08/29/11 33
  • 34. Platform Abstraction Network Unicode Clipboard Graphics Theme Events Thread Geolocation Timer 08/29/11 34
  • 35. WebCore Different “Ports” graphics GraphicsContext Mac Chromium Qt Gtk Skia Cairo CoreGraphics QPainter graphics stack 08/29/11 35
  • 36. QWeb* classes QWebView (widget) QWebPage (object) QWebFrame (object) At least one, i.e. the main frame of the page 08/29/11 36
  • 37. Using QWebView QWebView webView; webView.show(); webView.setUrl(QUrl("http://meego.com")); 08/29/11 37
  • 38. Contents via String QWebView webView; webView.show(); webView.setContent("<body>Hello, MeeGo!</body>"); 08/29/11 38
  • 39. Contents via Resource <RCC> <qresource prefix="/"> <file>content.html</file> </qresource> </RCC> QWebView webView; webView.show(); webView.setUrl(QUrl("qrc:/content.html")); 08/29/11 39
  • 40. 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); http://labs.qt.nokia.com/2009/01/15/capturing-web-pages/ 08/29/11 40
  • 41. SVG Rasterizer http://labs.qt.nokia.com/2008/08/06/webkit-based-svg-rasterizer/ 08/29/11 41
  • 42. Search + Preview http://labs.qt.nokia.com/2008/11/04/search-with-thumbnail-preview/ 08/29/11 42
  • 43. Exposing to the Web World QWebFrame::addToJavaScriptWindowObject(QString, QObject*) Public functions Object properties Child objects 08/29/11 43
  • 44. Exposing to the Web World page()->mainFrame()->addToJavaScriptWindowObject("Dialog", new Dialog); class Dialog: public QObject { Q_OBJECT public: Dialog(QObject *parent = 0); public slots: void showMessage(const QString& msg); }; 08/29/11 44
  • 45. Exposing to the Web World <input type="button" value="Try this" onClick="Dialog.showMessage('You clicked me!')"> instance of Dialog object public slot 08/29/11 45
  • 46. Signal and Slot signal foobar.modified.connect(refresh); QObject instance JavaScript function foobar.modified.connect(obj, refresh); any object 08/29/11 46
  • 47. Triggering Action from Native class Stopwatch: public QObject Stopwatch::Stopwatch(QObject *parent) { : QObject(parent) Q_OBJECT , m_index(0) { public: QTimer *timer = new QTimer(this); Stopwatch(QObject *parent = timer->setInterval(1000); 0); connect(timer, SIGNAL(timeout()), SLOT(update())); timer->start(); signals: } void tick(int t); void Stopwatch::update() private slots: { void update(); emit tick(m_index++); } private: int m_index; }; 08/29/11 47
  • 48. Triggering Action from Native instance of Stopwatch object signal <script> Stopwatch.tick.connect(function(t) { document.getElementById('tick').innerText = t; }); </script> 08/29/11 48
  • 49. Coming Back to Native QVariant QWebFrame::evaluateJavaScript(QString) mostly key-value pair (like JavaScript objects) 08/29/11 49
  • 50. Platform Integration Menu and Menu Bar Dialogs Application System Access Notifications 08/29/11 50
  • 52. Consume Web 2.0 http://labs.qt.nokia.com/2009/03/08/creating-a-google-chat-client-in-15-minutes/ 08/29/11 52
  • 55. GPU Acceleration 08/29/11 55
  • 56. Game vs Web 08/29/11 56
  • 57. Primitive Drawing 08/29/11 57
  • 58. Backing Store when you pinch... 08/29/11 58
  • 59. Layer Compositing 08/29/11 59
  • 60. Logical 3-D smooth animation FTW! 08/29/11 60
  • 61. Conclusions Web technologies are moving really fast Various frameworks and libraries boost the productivity Hybrid approach helps the migration Tools need to catch-up 08/29/11 61
  • 62. THANK YOU! ariya.hidayat@gmail.com ariya.ofilabs.com @ariyahidayat 08/29/11 62