End of Native ?
Sencha Touch : HTML5 + CSS3 + JavaScript
            Web




                                Ext Japan, LL...
End of Native or rise of web app
End of Native Application
End of Native Application
•

• HTML5 Web
End of Native Application
•

• HTML5 Web

     Native App      Web App
My iPhone
My iPhone
My iPhone
Web Application
Web Application
•   Web           Web

•   HTML5

•
•   1990



•
•          Web
    •
•   1990



•
•          Web
    •
•   URL

•
•
•
•
•
•
•
•   Time to Market

•
•
•
•
•
•
•
HTML5
HTML5
•
•          API

•   CSS3
HTML5
•   http://www.apple.com/html5/                                  •   http://mrdoob.com/projects/chromeexperiments/ba...
•   8

•   HTML5   HTML5
HTML5 ~
HTML5 ~
•   IE9

•         IE6/7/8

•
HTML5 ~
HTML5 ~
•   JavaScript

•   HTML5? CSS3?   ?
HTML5 ~   /
HTML5 ~                              /

•   iOS   Android BlackBerry WebOS

•   Windows Phone
•
•
    API

•
About Sencha
Ext JS is now Sencha
Ext JS is now Sencha
•   2006

•   2007       Ext JS

•   2010   6      VC

•          Sencha       jQTouch Raphaël
Ext JS is now Sencha
•   2006

•   2007       Ext JS

•   2010   6      VC

•          Sencha           jQTouch Raphaël


...
Sencha
Ext JS
Ext GWT
Sencha Touch
Ext Core
Ext Designer
jQTouch
Raphael
Sencha
 Ext Designer


                               Ext Core
                  Ext JS
                               jQT...
Sencha
 Ext Designer


                               Ext Core
                  Ext JS
                               jQT...
Sencha
 Ext Designer


                               Ext Core
                  Ext JS
                               jQT...
Sencha
 Ext Designer   JavaScript

                               Ext Core
                  Ext JS
                      ...
Sencha
  Ext Designer


                                Ext Core
                   Ext JS
                               ...
JavaScript
JavaScript

•
•   Ext JS

•
•   HTML/CSS/JavaScript



•
DOM
DOM
•   DOM   Document Object Model

•     JavaScript     DOM



•                  DOM
Ext JS
Ext JS
•   HTML

•
•
•
About me
•   2008       Ext Japan @extjapan

•              Sencha

•   Ext JS / Sencha Touch

•   @naotori
Sencha Touch beta
Coming Soon: BlackBerry 6 & WebOS
Demo


                                                                             http://www.bitsoflove.be/
            ...
WebKit Rocks!
•   HTML5 + CSS3
•   Transforms, Transitions, and
    Animations
•   Canvas
•   SQLite
•   Cache Manifest
• ...
WebKit Rocks!
•   HTML5 + CSS3
•   Transforms, Transitions, and
    Animations
•   Canvas
•   SQLite
•   Cache Manifest
• ...
•   WebKit
•



•



•   Orientation
•



•



•



•



•          GUI
•



•



    Tap
    Double tap
    Tap and hold
    Swipe
    Pinch
    Drag & drop
•



•   WebKitCSSMatrix
•        GUI
GUI
•   Lists
    Nested

    Grouped

    Sortable

•   Carousel
•   Picker
•   Overlay
•   Toolbars & buttons
•   HTML5
...
<75k
minified & gzipped
FAQ
FAQ

•   Sencha Touch   Ext JS
FAQ

•   Sencha Touch   Ext JS

•   jQuery
FAQ

•   Sencha Touch      Ext JS

•   jQuery

•   AppStore/Android Market
HTML5?
HTML5?
•   HTML5   CSS3
HTML5?
•   HTML5   CSS3

•            HTML5
HTML5?
•   HTML5        CSS3

•                   HTML5

    •       input[type=search] video audio
HTML5?
•   HTML5               CSS3

•                          HTML5

    •              input[type=search] video audio
 ...
HTML5?
•   HTML5                  CSS3

•                             HTML5

    •                 input[type=search] vide...
HTML5?
•   HTML5                  CSS3

•                             HTML5

    •                 input[type=search] vide...
HTML5?
•   HTML5                  CSS3

•                             HTML5

    •                 input[type=search] vide...
HTML5?
•   HTML5                  CSS3

•                             HTML5

    •                 input[type=search] vide...
Sencha Touch

•   Version: 0.95β

•
•   Android

•   API

•
•           ¥9,900/

•
•   GPLv3
• HTML5
• HTML5
• JavaScript+HTML+CSS   iOS   Android
• HTML5
• JavaScript+HTML+CSS   iOS   Android



•   PhoneGap
• HTML5
• JavaScript+HTML+CSS   iOS   Android



•   PhoneGap

•
Objective-C




              Ext Japan, LLC (@extjapan)

                             (@naotori)
Objective-C




  JavaScript
               Ext Japan, LLC (@extjapan)

                              (@naotori)
End of native?
End of native?
End of native?
End of native?
End of native?
End of native?
End of native?
End of native?
End of native?
End of native?
End of native?
End of native?
Upcoming SlideShare
Loading in...5
×

End of native?

3,538

Published on

Sencha Touch : HTML5 + CSS3 + JavaScript
スマートフォン向けWebアプリフレームワーク

Published in: Technology
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total Views
3,538
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
55
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

End of native?

  1. 1. End of Native ? Sencha Touch : HTML5 + CSS3 + JavaScript Web Ext Japan, LLC (@extjapan) (@naotori)
  2. 2. End of Native or rise of web app
  3. 3. End of Native Application
  4. 4. End of Native Application • • HTML5 Web
  5. 5. End of Native Application • • HTML5 Web Native App Web App
  6. 6. My iPhone
  7. 7. My iPhone
  8. 8. My iPhone
  9. 9. Web Application
  10. 10. Web Application • Web Web • HTML5 •
  11. 11. • 1990 • • Web •
  12. 12. • 1990 • • Web •
  13. 13. • URL • • •
  14. 14. • • • •
  15. 15. • Time to Market • • •
  16. 16. • • • •
  17. 17. HTML5
  18. 18. HTML5 • • API • CSS3
  19. 19. HTML5 • http://www.apple.com/html5/ • http://mrdoob.com/projects/chromeexperiments/ball_pool/ • http://www.apple.com/html5/showcase/transitions/ • http://mrdoob.com/119/Zoom_blur_HTML5 • http://www.apple.com/html5/showcase/typography/ • http://mrdoob.com/97/Depth_of_Field_HTML5 • http://www.apple.com/html5/showcase/gallery/ • http://mrdoob.com/92/Google_Gravity_HTML5 • http://www.apple.com/html5/showcase/threesixty/ • http://onecm.com/projects/canopy/ • http://www.effectgames.com/demos/canvascycle/ • http://calinmocanu.webs.com/the_canvas/fish.htm • http://tech.kayac.com/data/html5_and_css3/demo/index.html# • http://www.andrew-hoyer.com/experiments/cloth/ • http://www.chromeexperiments.com/ • http://www.zynaps.com/jslab.xml?id=envmap • http://balldroppings.com/js/ • http://hakim.se/experiments/html5/trail/03/ Safari/Chrome
  20. 20. • 8 • HTML5 HTML5
  21. 21. HTML5 ~
  22. 22. HTML5 ~ • IE9 • IE6/7/8 •
  23. 23. HTML5 ~
  24. 24. HTML5 ~ • JavaScript • HTML5? CSS3? ?
  25. 25. HTML5 ~ /
  26. 26. HTML5 ~ / • iOS Android BlackBerry WebOS • Windows Phone
  27. 27. • • API •
  28. 28. About Sencha
  29. 29. Ext JS is now Sencha
  30. 30. Ext JS is now Sencha • 2006 • 2007 Ext JS • 2010 6 VC • Sencha jQTouch Raphaël
  31. 31. Ext JS is now Sencha • 2006 • 2007 Ext JS • 2010 6 VC • Sencha jQTouch Raphaël JavaScript
  32. 32. Sencha Ext JS Ext GWT Sencha Touch Ext Core Ext Designer jQTouch Raphael
  33. 33. Sencha Ext Designer Ext Core Ext JS jQTouch Sencha Touch Raphael Ext GWT
  34. 34. Sencha Ext Designer Ext Core Ext JS jQTouch Sencha Touch Raphael Ext GWT
  35. 35. Sencha Ext Designer Ext Core Ext JS jQTouch Sencha Touch Raphael Ext GWT
  36. 36. Sencha Ext Designer JavaScript Ext Core Ext JS jQTouch Sencha Touch Raphael Ext GWT
  37. 37. Sencha Ext Designer Ext Core Ext JS jQTouch Sencha Touch Raphael Java Ext GWT
  38. 38. JavaScript
  39. 39. JavaScript • • Ext JS •
  40. 40. • HTML/CSS/JavaScript •
  41. 41. DOM
  42. 42. DOM • DOM Document Object Model • JavaScript DOM • DOM
  43. 43. Ext JS
  44. 44. Ext JS • HTML • • •
  45. 45. About me
  46. 46. • 2008 Ext Japan @extjapan • Sencha • Ext JS / Sencha Touch • @naotori
  47. 47. Sencha Touch beta
  48. 48. Coming Soon: BlackBerry 6 & WebOS
  49. 49. Demo http://www.bitsoflove.be/ http://m.echo2010.com/ cactusfestival/web/ http://m.skicrystal.com/ http://nils-dehl.de/m/
  50. 50. WebKit Rocks! • HTML5 + CSS3 • Transforms, Transitions, and Animations • Canvas • SQLite • Cache Manifest • Geo-Location
  51. 51. WebKit Rocks! • HTML5 + CSS3 • Transforms, Transitions, and Animations • Canvas • SQLite • Cache Manifest • Geo-Location
  52. 52. • WebKit • • • Orientation • • • • • GUI
  53. 53. • • Tap Double tap Tap and hold Swipe Pinch Drag & drop
  54. 54. • • WebKitCSSMatrix • GUI
  55. 55. GUI • Lists Nested Grouped Sortable • Carousel • Picker • Overlay • Toolbars & buttons • HTML5 Audio Video GeoLocation
  56. 56. <75k minified & gzipped
  57. 57. FAQ
  58. 58. FAQ • Sencha Touch Ext JS
  59. 59. FAQ • Sencha Touch Ext JS • jQuery
  60. 60. FAQ • Sencha Touch Ext JS • jQuery • AppStore/Android Market
  61. 61. HTML5?
  62. 62. HTML5? • HTML5 CSS3
  63. 63. HTML5? • HTML5 CSS3 • HTML5
  64. 64. HTML5? • HTML5 CSS3 • HTML5 • input[type=search] video audio
  65. 65. HTML5? • HTML5 CSS3 • HTML5 • input[type=search] video audio • webstorage session/local
  66. 66. HTML5? • HTML5 CSS3 • HTML5 • input[type=search] video audio • webstorage session/local • geolocation
  67. 67. HTML5? • HTML5 CSS3 • HTML5 • input[type=search] video audio • webstorage session/local • geolocation • HTML5
  68. 68. HTML5? • HTML5 CSS3 • HTML5 • input[type=search] video audio • webstorage session/local • geolocation • HTML5 • WebSockets?
  69. 69. HTML5? • HTML5 CSS3 • HTML5 • input[type=search] video audio • webstorage session/local • geolocation • HTML5 • WebSockets? • SVG?
  70. 70. Sencha Touch • Version: 0.95β • • Android • API •
  71. 71. • ¥9,900/ • • GPLv3
  72. 72. • HTML5
  73. 73. • HTML5 • JavaScript+HTML+CSS iOS Android
  74. 74. • HTML5 • JavaScript+HTML+CSS iOS Android • PhoneGap
  75. 75. • HTML5 • JavaScript+HTML+CSS iOS Android • PhoneGap •
  76. 76. Objective-C Ext Japan, LLC (@extjapan) (@naotori)
  77. 77. Objective-C JavaScript Ext Japan, LLC (@extjapan) (@naotori)
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×