Build HTML5 App (Intel Elements 2011)

Ariya Hidayat
Ariya Hidayatpassionate technologist
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
1 of 62

Recommended

Analyzing the Performance of Mobile Web by
Analyzing the Performance of Mobile WebAnalyzing the Performance of Mobile Web
Analyzing the Performance of Mobile WebAriya Hidayat
3.5K views55 slides
Writing Tools using WebKit by
Writing Tools using WebKitWriting Tools using WebKit
Writing Tools using WebKitAriya Hidayat
2K views39 slides
Understanding Hardware Acceleration on Mobile Browsers by
Understanding Hardware Acceleration on Mobile BrowsersUnderstanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile BrowsersAriya Hidayat
7K views71 slides
Understanding Hardware Acceleration on Mobile Browsers by
Understanding Hardware Acceleration on Mobile BrowsersUnderstanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile BrowsersAriya Hidayat
17.1K views67 slides
WPE WebKit for Android by
WPE WebKit for AndroidWPE WebKit for Android
WPE WebKit for AndroidIgalia
68 views22 slides
Groovy & Grails for Spring/Java developers by
Groovy & Grails for Spring/Java developersGroovy & Grails for Spring/Java developers
Groovy & Grails for Spring/Java developersPeter Ledbrook
1.7K views87 slides

More Related Content

What's hot

Node.js on microsoft azure april 2014 by
Node.js on microsoft azure april 2014Node.js on microsoft azure april 2014
Node.js on microsoft azure april 2014Brian Benz
1.6K views50 slides
[convergese] Adaptive Images in Responsive Web Design by
[convergese] Adaptive Images in Responsive Web Design[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web DesignChristopher Schmitt
4.8K views90 slides
Going to Mars with Groovy Domain-Specific Languages by
Going to Mars with Groovy Domain-Specific LanguagesGoing to Mars with Groovy Domain-Specific Languages
Going to Mars with Groovy Domain-Specific LanguagesGuillaume Laforge
90.5K views162 slides
Academy PRO: HTML5 API graphics by
Academy PRO: HTML5 API graphicsAcademy PRO: HTML5 API graphics
Academy PRO: HTML5 API graphicsBinary Studio
147 views65 slides
HTML5 (and friends) - History, overview and current status - jsDay Verona 11.... by
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
1.6K views106 slides
A web perf dashboard up & running in 90 minutes presentation by
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
10.7K views43 slides

What's hot(20)

Node.js on microsoft azure april 2014 by Brian Benz
Node.js on microsoft azure april 2014Node.js on microsoft azure april 2014
Node.js on microsoft azure april 2014
Brian Benz1.6K views
[convergese] Adaptive Images in Responsive Web Design by Christopher Schmitt
[convergese] Adaptive Images in Responsive Web Design[convergese] Adaptive Images in Responsive Web Design
[convergese] Adaptive Images in Responsive Web Design
Christopher Schmitt4.8K views
Going to Mars with Groovy Domain-Specific Languages by Guillaume Laforge
Going to Mars with Groovy Domain-Specific LanguagesGoing to Mars with Groovy Domain-Specific Languages
Going to Mars with Groovy Domain-Specific Languages
Guillaume Laforge90.5K views
Academy PRO: HTML5 API graphics by Binary Studio
Academy PRO: HTML5 API graphicsAcademy PRO: HTML5 API graphics
Academy PRO: HTML5 API graphics
Binary Studio147 views
HTML5 (and friends) - History, overview and current status - jsDay Verona 11.... by Patrick Lauke
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 Lauke1.6K views
A web perf dashboard up & running in 90 minutes presentation by Justin Dorfman
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
Justin Dorfman10.7K views
Brave new world of HTML5 by Chris Mills
Brave new world of HTML5Brave new world of HTML5
Brave new world of HTML5
Chris Mills1.4K views
Deview 2013 mobile browser internals and trends_20131022 by NAVER D2
Deview 2013 mobile browser internals and trends_20131022Deview 2013 mobile browser internals and trends_20131022
Deview 2013 mobile browser internals and trends_20131022
NAVER D27.7K views
Webpack Encore - Asset Management for the rest of us by Stefan Adolf
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
Stefan Adolf1.4K views
Asynchronous Module Definition (AMD) by xMartin12
Asynchronous Module Definition (AMD)Asynchronous Module Definition (AMD)
Asynchronous Module Definition (AMD)
xMartin1215.5K views
Dynamic Languages Web Frameworks Indicthreads 2009 by Arun Gupta
Dynamic Languages Web Frameworks Indicthreads 2009Dynamic Languages Web Frameworks Indicthreads 2009
Dynamic Languages Web Frameworks Indicthreads 2009
Arun Gupta1.3K views
Building a JavaScript Library by jeresig
Building a JavaScript LibraryBuilding a JavaScript Library
Building a JavaScript Library
jeresig11.7K views
Forensic Tools for In-Depth Performance Investigations by Nicholas Jansma
Forensic Tools for In-Depth Performance InvestigationsForensic Tools for In-Depth Performance Investigations
Forensic Tools for In-Depth Performance Investigations
Nicholas Jansma4.1K views
Backend, app e internet das coisas com NodeJS no Google Cloud Platform by Alvaro Viebrantz
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
Alvaro Viebrantz959 views
Node.js 기반 정적 페이지 블로그 엔진, 하루프레스 by Rhio Kim
Node.js 기반 정적 페이지 블로그 엔진, 하루프레스Node.js 기반 정적 페이지 블로그 엔진, 하루프레스
Node.js 기반 정적 페이지 블로그 엔진, 하루프레스
Rhio Kim6.7K views
Hardware Acceleration in WebKit by Joone Hur
Hardware Acceleration in WebKitHardware Acceleration in WebKit
Hardware Acceleration in WebKit
Joone Hur11K views

Similar to Build HTML5 App (Intel Elements 2011)

Webgl 기술동향 2011.8 by
Webgl 기술동향 2011.8Webgl 기술동향 2011.8
Webgl 기술동향 2011.8Seung Joon Choi
1.5K views23 slides
Alejandro Villanueva - Google Inc. by
Alejandro Villanueva - Google Inc.Alejandro Villanueva - Google Inc.
Alejandro Villanueva - Google Inc.Alejandro Corpeño
2.4K views82 slides
Google - Charla para CTOs by
Google - Charla para CTOsGoogle - Charla para CTOs
Google - Charla para CTOsPalermo Valley
866 views86 slides
WebGL For Game Development Spring 2013 by
WebGL For Game Development Spring 2013WebGL For Game Development Spring 2013
WebGL For Game Development Spring 2013Tony Parisi
12.4K views28 slides
Zembly by
ZemblyZembly
ZemblyAlexis Moussine-Pouchkine
1.5K views10 slides
WebGL, HTML5 and How the Mobile Web Was Won by
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
2.5K views21 slides

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

WebGL For Game Development Spring 2013 by Tony Parisi
WebGL For Game Development Spring 2013WebGL For Game Development Spring 2013
WebGL For Game Development Spring 2013
Tony Parisi12.4K views
WebGL, HTML5 and How the Mobile Web Was Won by Tony Parisi
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
Tony Parisi2.5K views
App Engine Overview @ Google Hackathon SXSW 2010 by Chris Schalk
App Engine Overview @ Google Hackathon SXSW 2010App Engine Overview @ Google Hackathon SXSW 2010
App Engine Overview @ Google Hackathon SXSW 2010
Chris Schalk3.7K views
Html5 mobile develop tools by Ley Liu
Html5 mobile develop toolsHtml5 mobile develop tools
Html5 mobile develop tools
Ley Liu228 views
Mozilla In Malaysia by Gen Kanai
Mozilla In MalaysiaMozilla In Malaysia
Mozilla In Malaysia
Gen Kanai1.2K views
App Engine Overview Cloud Futures Publish by Chris Schalk
App Engine Overview Cloud Futures PublishApp Engine Overview Cloud Futures Publish
App Engine Overview Cloud Futures Publish
Chris Schalk733 views
Google html5 Tutorial by jobfan
Google html5 TutorialGoogle html5 Tutorial
Google html5 Tutorial
jobfan4.2K views
Html5 by uutttlan
Html5Html5
Html5
uutttlan675 views
HTML5 and the Open Web Platform by Beat Signer
HTML5 and the Open Web PlatformHTML5 and the Open Web Platform
HTML5 and the Open Web Platform
Beat Signer5K views
Drupalcamp New York 2009 by Tom Deryckere
Drupalcamp New York 2009Drupalcamp New York 2009
Drupalcamp New York 2009
Tom Deryckere1.1K views
Estado da Arte HTML5 by MCM-IPG
Estado da Arte HTML5Estado da Arte HTML5
Estado da Arte HTML5
MCM-IPG959 views

More from Ariya Hidayat

Understanding Webkit Rendering by
Understanding Webkit RenderingUnderstanding Webkit Rendering
Understanding Webkit RenderingAriya Hidayat
28.8K views82 slides
JavaScript Parser Infrastructure for Code Quality Analysis by
JavaScript Parser Infrastructure for Code Quality AnalysisJavaScript Parser Infrastructure for Code Quality Analysis
JavaScript Parser Infrastructure for Code Quality AnalysisAriya Hidayat
5.7K views53 slides
Hybrid Apps (Native + Web) via QtWebKit by
Hybrid Apps (Native + Web) via QtWebKitHybrid Apps (Native + Web) via QtWebKit
Hybrid Apps (Native + Web) via QtWebKitAriya Hidayat
2.6K views68 slides
Hybrid Apps (Native + Web) using WebKit by
Hybrid Apps (Native + Web) using WebKitHybrid Apps (Native + Web) using WebKit
Hybrid Apps (Native + Web) using WebKitAriya Hidayat
2K views68 slides
Hybrid Apps (Native + Web) using WebKit by
Hybrid Apps (Native + Web) using WebKitHybrid Apps (Native + Web) using WebKit
Hybrid Apps (Native + Web) using WebKitAriya Hidayat
2.4K views68 slides
Efficient Graphics with Qt by
Efficient Graphics with QtEfficient Graphics with Qt
Efficient Graphics with QtAriya Hidayat
8.9K views63 slides

More from Ariya Hidayat(7)

Understanding Webkit Rendering by Ariya Hidayat
Understanding Webkit RenderingUnderstanding Webkit Rendering
Understanding Webkit Rendering
Ariya Hidayat28.8K views
JavaScript Parser Infrastructure for Code Quality Analysis by Ariya Hidayat
JavaScript Parser Infrastructure for Code Quality AnalysisJavaScript Parser Infrastructure for Code Quality Analysis
JavaScript Parser Infrastructure for Code Quality Analysis
Ariya Hidayat5.7K views
Hybrid Apps (Native + Web) via QtWebKit by Ariya Hidayat
Hybrid Apps (Native + Web) via QtWebKitHybrid Apps (Native + Web) via QtWebKit
Hybrid Apps (Native + Web) via QtWebKit
Ariya Hidayat2.6K views
Hybrid Apps (Native + Web) using WebKit by Ariya Hidayat
Hybrid Apps (Native + Web) using WebKitHybrid Apps (Native + Web) using WebKit
Hybrid Apps (Native + Web) using WebKit
Ariya Hidayat2K views
Hybrid Apps (Native + Web) using WebKit by Ariya Hidayat
Hybrid Apps (Native + Web) using WebKitHybrid Apps (Native + Web) using WebKit
Hybrid Apps (Native + Web) using WebKit
Ariya Hidayat2.4K views
Efficient Graphics with Qt by Ariya Hidayat
Efficient Graphics with QtEfficient Graphics with Qt
Efficient Graphics with Qt
Ariya Hidayat8.9K views
Introduction to QtWebKit by Ariya Hidayat
Introduction to QtWebKitIntroduction to QtWebKit
Introduction to QtWebKit
Ariya Hidayat2.9K views

Recently uploaded

Future of AR - Facebook Presentation by
Future of AR - Facebook PresentationFuture of AR - Facebook Presentation
Future of AR - Facebook Presentationssuserb54b561
22 views27 slides
Microsoft Power Platform.pptx by
Microsoft Power Platform.pptxMicrosoft Power Platform.pptx
Microsoft Power Platform.pptxUni Systems S.M.S.A.
61 views38 slides
Five Things You SHOULD Know About Postman by
Five Things You SHOULD Know About PostmanFive Things You SHOULD Know About Postman
Five Things You SHOULD Know About PostmanPostman
38 views43 slides
Business Analyst Series 2023 - Week 3 Session 5 by
Business Analyst Series 2023 -  Week 3 Session 5Business Analyst Series 2023 -  Week 3 Session 5
Business Analyst Series 2023 - Week 3 Session 5DianaGray10
345 views20 slides
Zero to Automated in Under a Year by
Zero to Automated in Under a YearZero to Automated in Under a Year
Zero to Automated in Under a YearNetwork Automation Forum
22 views23 slides
Scaling Knowledge Graph Architectures with AI by
Scaling Knowledge Graph Architectures with AIScaling Knowledge Graph Architectures with AI
Scaling Knowledge Graph Architectures with AIEnterprise Knowledge
50 views15 slides

Recently uploaded(20)

Future of AR - Facebook Presentation by ssuserb54b561
Future of AR - Facebook PresentationFuture of AR - Facebook Presentation
Future of AR - Facebook Presentation
ssuserb54b56122 views
Five Things You SHOULD Know About Postman by Postman
Five Things You SHOULD Know About PostmanFive Things You SHOULD Know About Postman
Five Things You SHOULD Know About Postman
Postman38 views
Business Analyst Series 2023 - Week 3 Session 5 by DianaGray10
Business Analyst Series 2023 -  Week 3 Session 5Business Analyst Series 2023 -  Week 3 Session 5
Business Analyst Series 2023 - Week 3 Session 5
DianaGray10345 views
ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ... by Jasper Oosterveld
ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ...ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ...
ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ...
STPI OctaNE CoE Brochure.pdf by madhurjyapb
STPI OctaNE CoE Brochure.pdfSTPI OctaNE CoE Brochure.pdf
STPI OctaNE CoE Brochure.pdf
madhurjyapb14 views
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLive by Network Automation Forum
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLiveAutomating a World-Class Technology Conference; Behind the Scenes of CiscoLive
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLive

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