KEMBAR78
Build HTML5 App (Intel Elements 2011) | PDF
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

Build HTML5 App (Intel Elements 2011)

  • 1.
  • 2.
  • 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 phoneswill kill you...” 08/29/11 8
  • 9.
  • 10.
    Adoption 08/29/11 10
  • 11.
    Amazon Kindle CloudReader 08/29/11 11
  • 12.
    Financial Times 08/29/11 12
  • 13.
    JavaScript: Ubiquitous ProgrammingEnvironment 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
  • 15.
  • 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
  • 25.
  • 26.
    WebGL for Visualization http://senchalabs.github.com/philogl/ 08/29/11 26
  • 27.
    Which is forwhat? 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 theWeb World QWebFrame::addToJavaScriptWindowObject(QString, QObject*) Public functions Object properties Child objects 08/29/11 43
  • 44.
    Exposing to theWeb 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 theWeb 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 fromNative 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 fromNative instance of Stopwatch object signal <script> Stopwatch.tick.connect(function(t) { document.getElementById('tick').innerText = t; }); </script> 08/29/11 48
  • 49.
    Coming Back toNative 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
  • 51.
  • 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
  • 53.
  • 54.
  • 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