SlideShare a Scribd company logo

End of native?

Download as KEY, PDF
Yuki Naotori, profile picture
Yuki Naotori

This document discusses the rise of web applications and HTML5. Native mobile apps are increasingly being replaced by web apps that are built using HTML5, CSS3 and JavaScript and can run across devices without native wrappers. Sencha Touch is introduced as a framework for developing such cross-platform mobile web apps using these web technologies. It allows developers to create apps with native-like GUIs for touch devices without needing native SDKs.

Technology
1 of 89
Downloaded 57 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
End of native?
End of Native ? Sencha Touch : HTML5 + CSS3 + JavaScript Web Ext Japan, LLC (@extjapan) (@naotori)
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 •
End of native?
• 1990 • • Web •
• 1990 • • Web •
End of native?
• URL • • •
End of native?
• • • •
End of native?
• Time to Market • • •
End of native?
• • • •
HTML5
HTML5 • • API • CSS3
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
• 8 • HTML5 HTML5
HTML5 ~
HTML5 ~ • IE9 • IE6/7/8 •
HTML5 ~
HTML5 ~ • JavaScript • HTML5? CSS3? ?
HTML5 ~ /
HTML5 ~ / • iOS Android BlackBerry WebOS • Windows Phone
End of native?
• • API •
About Sencha
End of native?
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 JavaScript
Sencha Ext JS Ext GWT Sencha Touch Ext Core Ext Designer jQTouch Raphael
Sencha Ext Designer Ext Core Ext JS jQTouch Sencha Touch Raphael Ext GWT
Sencha Ext Designer Ext Core Ext JS jQTouch Sencha Touch Raphael Ext GWT
Sencha Ext Designer Ext Core Ext JS jQTouch Sencha Touch Raphael Ext GWT
Sencha Ext Designer JavaScript Ext Core Ext JS jQTouch Sencha Touch Raphael Ext GWT
Sencha Ext Designer Ext Core Ext JS jQTouch Sencha Touch Raphael Java Ext GWT
JavaScript
JavaScript • • Ext JS •
End of native?
• HTML/CSS/JavaScript •
DOM
DOM • DOM Document Object Model • JavaScript DOM • DOM
Ext JS
Ext JS • HTML • • •
About me
End of native?
• 2008 Ext Japan @extjapan • Sencha • Ext JS / Sencha Touch • @naotori
Sencha Touch beta
Coming Soon: BlackBerry 6 & WebOS
Demo http://www.bitsoflove.be/ http://m.echo2010.com/ cactusfestival/web/ http://m.skicrystal.com/ http://nils-dehl.de/m/
WebKit Rocks! • HTML5 + CSS3 • Transforms, Transitions, and Animations • Canvas • SQLite • Cache Manifest • Geo-Location
WebKit Rocks! • HTML5 + CSS3 • Transforms, Transitions, and Animations • Canvas • SQLite • Cache Manifest • Geo-Location
• 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 Audio Video GeoLocation
<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 • webstorage session/local
HTML5? • HTML5 CSS3 • HTML5 • input[type=search] video audio • webstorage session/local • geolocation
HTML5? • HTML5 CSS3 • HTML5 • input[type=search] video audio • webstorage session/local • geolocation • HTML5
HTML5? • HTML5 CSS3 • HTML5 • input[type=search] video audio • webstorage session/local • geolocation • HTML5 • WebSockets?
HTML5? • HTML5 CSS3 • HTML5 • input[type=search] video audio • webstorage session/local • geolocation • HTML5 • WebSockets? • SVG?
Sencha Touch • Version: 0.95β • • Android • API •
• ¥9,900/ • • GPLv3
End of native?
End of native?
• 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)

More Related Content

KEY
100915 HTML5とか勉強会発表資料
Yuki Naotori
 
PDF
Hardware hacking on the pi; what's js got to do with it
Alexander Roche
 
PDF
prdc10-Bdd-real-world
Amir Barylko
 
PDF
mvcconf-bdd-quality-driven
Amir Barylko
 
PDF
Auf Augenhöhe mit Android Studio und Gradle
inovex GmbH
 
PDF
Android Studio und gradle
Dominik Helleberg
 
KEY
Apache Rave (Incubating) at SURFnet
Jasha Joachimsthal
 
PDF
HTML5ビデオ導入編
Yuki Naotori
 
100915 HTML5とか勉強会発表資料
Yuki Naotori
 
Hardware hacking on the pi; what's js got to do with it
Alexander Roche
 
prdc10-Bdd-real-world
Amir Barylko
 
mvcconf-bdd-quality-driven
Amir Barylko
 
Auf Augenhöhe mit Android Studio und Gradle
inovex GmbH
 
Android Studio und gradle
Dominik Helleberg
 
Apache Rave (Incubating) at SURFnet
Jasha Joachimsthal
 
HTML5ビデオ導入編
Yuki Naotori
 

Similar to End of native? (20)

KEY
HTML5 History & Features
Dave Ross
 
KEY
Mobile html5
ElanaBoehm
 
PPT
Filling the HTML5 Gaps with Polyfills and Shims
reybango
 
KEY
WHAT IS HTML5? (at CSS Nite Osaka)
Shumpei Shiraishi
 
PDF
Welcome! RGBA
Even Wu
 
PPTX
HTML5 - Let’s make the WEB more powerful
Naga Harish M
 
KEY
Looking into HTML5 + CSS3
Christopher Schmitt
 
PDF
InfoTalk#17 1st
Wakasa Masao
 
PDF
html5和移动web应用
麦哥UE
 
PDF
HTML5のご紹介
yoshikawa_t
 
PPTX
A Holistic Approach to HTML5 Game Design & Development
Karl Bunyan
 
PPTX
FocusOnLearning Conference 2016 Austin, TX
Kirsten Rourke
 
KEY
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
davyjones
 
KEY
WHAT IS HTML5?(20100510)
Shumpei Shiraishi
 
KEY
[2010]我有一个梦想
Twinsen Liang
 
PPTX
HTML5 Trends + Cascade Server CMS by Uzo Okafor
hannonhill
 
PDF
Mobile App Development
Chris Morrell
 
KEY
Building Pistachio with Sencha Touch 2 (introductory)
Luis Merino
 
ZIP
Html5 public
doodlemoonch
 
KEY
HTML5 and the Mobile Web
MrJ1971
 
HTML5 History & Features
Dave Ross
 
Mobile html5
ElanaBoehm
 
Filling the HTML5 Gaps with Polyfills and Shims
reybango
 
WHAT IS HTML5? (at CSS Nite Osaka)
Shumpei Shiraishi
 
Welcome! RGBA
Even Wu
 
HTML5 - Let’s make the WEB more powerful
Naga Harish M
 
Looking into HTML5 + CSS3
Christopher Schmitt
 
InfoTalk#17 1st
Wakasa Masao
 
html5和移动web应用
麦哥UE
 
HTML5のご紹介
yoshikawa_t
 
A Holistic Approach to HTML5 Game Design & Development
Karl Bunyan
 
FocusOnLearning Conference 2016 Austin, TX
Kirsten Rourke
 
HTML5 is the Future of Mobile, PhoneGap Takes You There Today
davyjones
 
WHAT IS HTML5?(20100510)
Shumpei Shiraishi
 
[2010]我有一个梦想
Twinsen Liang
 
HTML5 Trends + Cascade Server CMS by Uzo Okafor
hannonhill
 
Mobile App Development
Chris Morrell
 
Building Pistachio with Sencha Touch 2 (introductory)
Luis Merino
 
Html5 public
doodlemoonch
 
HTML5 and the Mobile Web
MrJ1971
 
Ad

More from Yuki Naotori (20)

KEY
120611 html5とか勉強会 st2
Yuki Naotori
 
PDF
101125 sencha con2010報告
Yuki Naotori
 
PDF
SpreadOfficeとSencha Touch
Yuki Naotori
 
PDF
Sencha touchのはじめかた
Yuki Naotori
 
KEY
Sencha touch とyubizo engineで作るネイティブアプリ
Yuki Naotori
 
KEY
Ext JS→Sencha
Yuki Naotori
 
KEY
Ext Designerについて
Yuki Naotori
 
PPTX
Ext Direct 入門 II
Yuki Naotori
 
PDF
Ext JS & HTML5
Yuki Naotori
 
PDF
Ext.util.Observableについて
Yuki Naotori
 
PPTX
Ext.Directについて
Yuki Naotori
 
PPT
Ext Jsで柔軟に開発仕事をこなす
Yuki Naotori
 
PPT
ExtJS 事例　　2ちゃんビューアー「Cromartie49」
Yuki Naotori
 
PDF
090422 第10回勉強会（公開用）
Yuki Naotori
 
PDF
Ext.ux.google
Yuki Naotori
 
PDF
Prototyping tool "Degino"
Yuki Naotori
 
PDF
第9回勉強会 開発の基本
Yuki Naotori
 
PDF
第9回勉強会（Ext3.0について）
Yuki Naotori
 
PPT
第８回Ext勉強会プレゼン - 石丸
Yuki Naotori
 
PDF
第8回 Ext JS / Ext GWT 勉強会 - 小堤氏資料
Yuki Naotori
 
120611 html5とか勉強会 st2
Yuki Naotori
 
101125 sencha con2010報告
Yuki Naotori
 
SpreadOfficeとSencha Touch
Yuki Naotori
 
Sencha touchのはじめかた
Yuki Naotori
 
Sencha touch とyubizo engineで作るネイティブアプリ
Yuki Naotori
 
Ext JS→Sencha
Yuki Naotori
 
Ext Designerについて
Yuki Naotori
 
Ext Direct 入門 II
Yuki Naotori
 
Ext JS & HTML5
Yuki Naotori
 
Ext.util.Observableについて
Yuki Naotori
 
Ext.Directについて
Yuki Naotori
 
Ext Jsで柔軟に開発仕事をこなす
Yuki Naotori
 
ExtJS 事例　　2ちゃんビューアー「Cromartie49」
Yuki Naotori
 
090422 第10回勉強会（公開用）
Yuki Naotori
 
Ext.ux.google
Yuki Naotori
 
Prototyping tool "Degino"
Yuki Naotori
 
第9回勉強会 開発の基本
Yuki Naotori
 
第9回勉強会（Ext3.0について）
Yuki Naotori
 
第８回Ext勉強会プレゼン - 石丸
Yuki Naotori
 
第8回 Ext JS / Ext GWT 勉強会 - 小堤氏資料
Yuki Naotori
 
Ad

Recently uploaded (20)

PPTX
Effective Security Operations Center (SOC) A Modern, Strategic, and Threat-In...
ReZa AdineH
 
PDF
Empathic Computing: Creating Shared Understanding
Mark Billinghurst
 
PDF
cuic standard and advanced reporting.pdf
SimoneTitaniumTomase
 
PPTX
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
ReZa AdineH
 
PDF
Modernizing your data center with Dell and AMD
Principled Technologies
 
PDF
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
SOFTTECHHUB
 
PDF
Machine learning based COVID-19 study performance prediction
IAESIJAI
 
PDF
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
Safe Software
 
PDF
How UI/UX Design Impacts User Retention in Mobile Apps.pdf
SynapseIndia
 
PDF
The Rise and Fall of 3GPP – Time for a Sabbatical?
3G4G
 
PPTX
PA Analog/Digital System: The Backbone of Modern Surveillance and Communication
AVTRON Technologies LLC
 
PPTX
A Presentation on Artificial Intelligence
memembruh336
 
PPTX
Digital-Transformation-Roadmap-for-Companies.pptx
David Malick Dieng
 
PPT
Teaching material agriculture food technology
LiaRayya
 
PDF
Agricultural_Statistics_at_a_Glance_2022_0.pdf
SandeepSingh286037
 
PDF
Advanced methodologies resolving dimensionality complications for autism neur...
IAESIJAI
 
PPTX
20250228 LYD VKU AI Blended-Learning.pptx
DatVoNgoc
 
PPTX
MYSQL Presentation for SQL database connectivity
Swati270511
 
PDF
Encapsulation_ Review paper, used for researhc scholars
gurumoop
 
PPTX
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
blackmambaettijean
 
Effective Security Operations Center (SOC) A Modern, Strategic, and Threat-In...
ReZa AdineH
 
Empathic Computing: Creating Shared Understanding
Mark Billinghurst
 
cuic standard and advanced reporting.pdf
SimoneTitaniumTomase
 
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
ReZa AdineH
 
Modernizing your data center with Dell and AMD
Principled Technologies
 
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
SOFTTECHHUB
 
Machine learning based COVID-19 study performance prediction
IAESIJAI
 
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
Safe Software
 
How UI/UX Design Impacts User Retention in Mobile Apps.pdf
SynapseIndia
 
The Rise and Fall of 3GPP – Time for a Sabbatical?
3G4G
 
PA Analog/Digital System: The Backbone of Modern Surveillance and Communication
AVTRON Technologies LLC
 
A Presentation on Artificial Intelligence
memembruh336
 
Digital-Transformation-Roadmap-for-Companies.pptx
David Malick Dieng
 
Teaching material agriculture food technology
LiaRayya
 
Agricultural_Statistics_at_a_Glance_2022_0.pdf
SandeepSingh286037
 
Advanced methodologies resolving dimensionality complications for autism neur...
IAESIJAI
 
20250228 LYD VKU AI Blended-Learning.pptx
DatVoNgoc
 
MYSQL Presentation for SQL database connectivity
Swati270511
 
Encapsulation_ Review paper, used for researhc scholars
gurumoop
 
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
blackmambaettijean
 

End of native?

  • 2. End of Native ? Sencha Touch : HTML5 + CSS3 + JavaScript Web Ext Japan, LLC (@extjapan) (@naotori)
  • 3. End of Native or rise of web app
  • 4. End of Native Application
  • 5. End of Native Application • • HTML5 Web
  • 6. End of Native Application • • HTML5 Web Native App Web App
  • 11. Web Application • Web Web • HTML5 •
  • 13. • 1990 • • Web •
  • 14. • 1990 • • Web •
  • 16. • URL • • •
  • 20. • Time to Market • • •
  • 23. HTML5
  • 24. HTML5 • • API • CSS3
  • 25. 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
  • 26. • 8 • HTML5 HTML5
  • 28. HTML5 ~ • IE9 • IE6/7/8 •
  • 30. HTML5 ~ • JavaScript • HTML5? CSS3? ?
  • 31. HTML5 ~ /
  • 32. HTML5 ~ / • iOS Android BlackBerry WebOS • Windows Phone
  • 34. • • API •
  • 37. Ext JS is now Sencha
  • 38. Ext JS is now Sencha • 2006 • 2007 Ext JS • 2010 6 VC • Sencha jQTouch Raphaël
  • 39. Ext JS is now Sencha • 2006 • 2007 Ext JS • 2010 6 VC • Sencha jQTouch Raphaël JavaScript
  • 40. Sencha Ext JS Ext GWT Sencha Touch Ext Core Ext Designer jQTouch Raphael
  • 41. Sencha Ext Designer Ext Core Ext JS jQTouch Sencha Touch Raphael Ext GWT
  • 42. Sencha Ext Designer Ext Core Ext JS jQTouch Sencha Touch Raphael Ext GWT
  • 43. Sencha Ext Designer Ext Core Ext JS jQTouch Sencha Touch Raphael Ext GWT
  • 44. Sencha Ext Designer JavaScript Ext Core Ext JS jQTouch Sencha Touch Raphael Ext GWT
  • 45. Sencha Ext Designer Ext Core Ext JS jQTouch Sencha Touch Raphael Java Ext GWT
  • 47. JavaScript • • Ext JS •
  • 49. • HTML/CSS/JavaScript •
  • 50. DOM
  • 51. DOM • DOM Document Object Model • JavaScript DOM • DOM
  • 53. Ext JS • HTML • • •
  • 56. • 2008 Ext Japan @extjapan • Sencha • Ext JS / Sencha Touch • @naotori
  • 59. Demo http://www.bitsoflove.be/ http://m.echo2010.com/ cactusfestival/web/ http://m.skicrystal.com/ http://nils-dehl.de/m/
  • 60. WebKit Rocks! • HTML5 + CSS3 • Transforms, Transitions, and Animations • Canvas • SQLite • Cache Manifest • Geo-Location
  • 61. WebKit Rocks! • HTML5 + CSS3 • Transforms, Transitions, and Animations • Canvas • SQLite • Cache Manifest • Geo-Location
  • 62. • WebKit • • • Orientation • • • • • GUI
  • 63. • • Tap Double tap Tap and hold Swipe Pinch Drag & drop
  • 64. • • WebKitCSSMatrix • GUI
  • 65. GUI • Lists Nested Grouped Sortable • Carousel • Picker • Overlay • Toolbars & buttons • HTML5 Audio Video GeoLocation
  • 67. FAQ
  • 68. FAQ • Sencha Touch Ext JS
  • 69. FAQ • Sencha Touch Ext JS • jQuery
  • 70. FAQ • Sencha Touch Ext JS • jQuery • AppStore/Android Market
  • 72. HTML5? • HTML5 CSS3
  • 73. HTML5? • HTML5 CSS3 • HTML5
  • 74. HTML5? • HTML5 CSS3 • HTML5 • input[type=search] video audio
  • 75. HTML5? • HTML5 CSS3 • HTML5 • input[type=search] video audio • webstorage session/local
  • 76. HTML5? • HTML5 CSS3 • HTML5 • input[type=search] video audio • webstorage session/local • geolocation
  • 77. HTML5? • HTML5 CSS3 • HTML5 • input[type=search] video audio • webstorage session/local • geolocation • HTML5
  • 78. HTML5? • HTML5 CSS3 • HTML5 • input[type=search] video audio • webstorage session/local • geolocation • HTML5 • WebSockets?
  • 79. HTML5? • HTML5 CSS3 • HTML5 • input[type=search] video audio • webstorage session/local • geolocation • HTML5 • WebSockets? • SVG?
  • 80. Sencha Touch • Version: 0.95β • • Android • API •
  • 81. • ¥9,900/ • • GPLv3
  • 86. • HTML5 • JavaScript+HTML+CSS iOS Android • PhoneGap
  • 87. • HTML5 • JavaScript+HTML+CSS iOS Android • PhoneGap •
  • 88. Objective-C Ext Japan, LLC (@extjapan) (@naotori)
  • 89. Objective-C JavaScript Ext Japan, LLC (@extjapan) (@naotori)