Building HTML5                   mobile apps                    with Sencha Touch10 min Talking                          @...
Steffen Hiller  Web Developer for Life      • ’98: Dreamweaver      • ’99: HTML, CSS, JS, PHP      • ’07: Ruby on Rails & ...
Quick audience poll• Who knows Sencha Touch?• Who knows Ext JS?• Who knows jQuery?• Who has built HTML5 mobile apps?
Sencha         jQuery                                                  vs.                                                ...
What’s Sencha Touch? A JavaScript UI Framework for MobileMVC                       Layout System               Class Syste...
When should I use   Sencha Touch?NO: Content-heavy & Static WebsitesYES: App-like look & feelYES: Data heavy business appl...
Native vs. HTML5• Fastbook:  http://fb.html5isready.com/• Firefox OS:  Native == HTML5
How to start?• http://docs.sencha.com/  (API, Examples, Guides,Videos)• http://www.sencha.com/forum/• * look into the fram...
Let’s build an app• “sencha generate app bcnjs ~/Sites/bcnjs”• Adding a list and detail sheet with carousel• Styling• Comp...
The Now and the            Future ...•   Current Stable Version: 2.1    •   Only support for WebKit-Browsers        iOS, A...
Thank you                                      @steffenhiller                           s.hiller@360releases.com          ...
Upcoming SlideShare
Loading in …5
×

Building HTML5 mobile apps with Sencha Touch

1,145 views

Published on

Slides from a talk I gave at Barcelona JS

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,145
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Building HTML5 mobile apps with Sencha Touch

  1. 1. Building HTML5 mobile apps with Sencha Touch10 min Talking @steffenhiller10 min Coding
  2. 2. Steffen Hiller Web Developer for Life • ’98: Dreamweaver • ’99: HTML, CSS, JS, PHP • ’07: Ruby on Rails & Ext JS • ’10: Sencha Touch
  3. 3. Quick audience poll• Who knows Sencha Touch?• Who knows Ext JS?• Who knows jQuery?• Who has built HTML5 mobile apps?
  4. 4. Sencha jQuery vs. Touch items: [ {<div data-role="page" id="page1"> xtype: toolbar, <div data-theme="a" data-role="header"> title: Header, <a data-role="button" href="#page1" class="ui-btn-right"> docked: top, Done items: [ </a> { <h3> xtype: spacer Header }, </h3> { </div> xtype: button, <div data-role="content"> text: Done </div> }</div> ] }, { html: Content } ]
  5. 5. What’s Sencha Touch? A JavaScript UI Framework for MobileMVC Layout System Class System Widgets Single Page App Routing Theming Build Tools
  6. 6. When should I use Sencha Touch?NO: Content-heavy & Static WebsitesYES: App-like look & feelYES: Data heavy business applications
  7. 7. Native vs. HTML5• Fastbook: http://fb.html5isready.com/• Firefox OS: Native == HTML5
  8. 8. How to start?• http://docs.sencha.com/ (API, Examples, Guides,Videos)• http://www.sencha.com/forum/• * look into the framework’s code *• Sencha Architect
  9. 9. Let’s build an app• “sencha generate app bcnjs ~/Sites/bcnjs”• Adding a list and detail sheet with carousel• Styling• Compiling
  10. 10. The Now and the Future ...• Current Stable Version: 2.1 • Only support for WebKit-Browsers iOS, Android, Blackberry• Latest Public Version: 2.2 Alpha • Support for Windows Mobile (IE10)• Future: • Maybe Firefox Mobile for Firefox OS?
  11. 11. Thank you @steffenhiller s.hiller@360releases.com http://www.360releases.comIcon: http://dribbble.com/shots/42720-Sencha

×