0
Mobile Web Apps in a Nutshell
Who Am I?          Frame          useframe.comNicolae RusanCo-founder,Design/JS Engineer
What Is Mobile Web?   What Is Mobile Web?Optimized Sites up to Full Blown Appsin the Browser
What Is Mobile Web?   What Is Mobile Web?Design for a variety of screen sizes anddevices
What Is Mobile Web?Taking advantage of device capabilities
What Is Mobile Web?Handling Limitations                 • Browser Memory                 • Slower Networks                ...
Why Mobile Web?Write once, works everywhere..
Why Mobile Web?Write once, works everywhere..(Still not there yet.)
Why Mobile Web?People are used to browsersCustomers•   Do they know your site?•   Specific use case: more likely    to use...
Why Mobile Web?People are used to browsersDevelopers•   Familiar technologies:•   HTML, Javascript, CSS
Why Mobile Web?Not competitive with Native Apps!Why not do both?
Why Mobile Web?Some frameworks let you:write web code => compiled to native:e.g. PhoneGap, Appcelerator‟s Titaniumetc.
Why Not Mobile Web?Native Apps still have betterperformance and responsiveness.
Why Not Mobile Web?The App Store is a good distributionchannel• easier to charge
Why Not Mobile Web?If you need Device APIse.g. Camera, Voice- (Phone Gap Workaround)
Why Not Mobile Web?It‟s good to be an app!• Homescreen real-estate• Push notifications
Frameworks
TouchFull out MVC Framework w/ Touch• built on top of Ext JS
TouchCross-browser• Both Mobile and Desktop
TouchDon‟t write HTML, glue together “Components”• Lots of GUI Components :  • E.g. Carousel, Picker, Toolbars, Animations...
TouchClose integration with PhoneGap
Touch• Reasonably well documented• Free to use (unless you‟re making an app builder)   • Can pay for support
TouchFor Examples:Sencha Kitchen Sinkhttp://dev.sencha.com/deploy/touch/examples/kitchensink/RedditUI(iPad Web App built b...
TouchCons:           • Heavy                   • 365KB, >40K lines of                     code, DOM Bloat                 ...
TouchCons:           • Heavy                   • 365KB, >40K lines of                     code, DOM Bloat                 ...
TouchCons:           • Heavy                   • 365KB, >40K lines of                     code, DOM Bloat                 ...
TouchCons:           • Heavy                   • 365KB, >40K lines of                     code, DOM Bloat                 ...
TouchCons:           • Sencha 2.0 is out in                  developer preview,                  working to fix many of   ...
•   Developed by Sencha Labs•   Not full MVC (separate from Ext JS)•   Touch events (swipe, tap)•   Some UI Components (no...
Zepto.js• Mobile WebKit browsers + Safari, Chrome,  Firefox, Opera• Based on jQuery syntax (familiar selectors, and  event...
Zepto.js• Mobile WebKit browsers + Safari, Chrome,  Firefox, Opera• Based on jQuery syntax (familiar selectors, and  event...
Zepto.js• Mobile WebKit browsers + Safari, Chrome,  Firefox, Opera
Zepto.js• Mobile WebKit browsers + Safari, Chrome,  Firefox, Opera• Based on jQuery syntax (familiar selectors, and  event...
Zepto.js• Mobile WebKit browsers + Safari, Chrome,  Firefox, Opera• Based on jQuery syntax (familiar selectors, and  event...
Zepto.js• Mobile WebKit browsers + Safari, Chrome,  Firefox, Opera• Based on jQuery syntax (familiar selectors, and  event...
Cubiq iScroll – Matteo Spinelli• http://cubiq.org/• Various components + experiments you can use• e.g. scrollable content,...
Other Frameworks to Checkout• Other Frameworks:   • DojoToolkit, jQuery Mobile,• Compile to native apps:   • PhoneGap, App...
How From The Ground Up• Setup Web App mode <meta    name="viewport"          content="width=device-width,          initial...
How From The Ground Up• Built in Touch Events in Safari  touchstart: a finger is placed on a DOM element.  touchmove: a fi...
How From The Ground Up• Built in Gesture Events    –   E.g. pinch,    –   Not available on all devices/browsers•   Built i...
How From The Ground Up• More than touch: –       Accelerometer + Gyroscope APIs –       GeoLocation –       Other HTML 5 +...
How From The Ground Up• More than touch: –       Accelerometer + Gyroscope APIs –       GeoLocation –       Other HTML 5 +...
Resources•   Checkout Frame for an example of what’s possible:     –   www.useframe.com     –   Sample Store (browse on iP...
Future of Mobile Web?2012:Gap between native and web shrinksDevice APIs opened up to browsers.A winning Framework?Write We...
Thanks for your time Resources will be online soon.
Upcoming SlideShare
Loading in...5
×

Mobile Web Apps in a Nutshell

1,398

Published on

Presentation from NYC Mobile Web Meetup:
http://www.meetup.com/NYC-Mobile-Web/

An overview on what Mobile Web is, why it matters and what you should consider, along with an overview of HTML 5, device APIs, and Frameworks that can help you start.

About Me:
Nicolae Rusan, Cofounder of Frame:
http://www.useframe.com/

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,398
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
25
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • High level overview to get you started on HTML 5 mobile web development.What does Mobile Web mean, what frameworks are out there to help you out, what are useful resources?
  • 5 minute way to turn your existing e-commerce site into beautiful, immersive touch experience for tablet visitors. I’ll talk a bit about why we focus on mobile web later in this presentation.Frame v1 built on top of Sencha (our experiences and lessons discussed here)
  • Optimizes Sites + Apps in the BrowserReally when people talk about mobile web, they talk about a range of technologies: everything from just providing versions of a website that looks reasonable on a range of screen sizes to building something that feels a lot more like a native app.
  • Designing for Screens of Various Sizes, and handling variety of device capabilityWhat APIs are available on that particular device, how do you handle the various APIs exposed for the devices in your code (e.g. they all perform some function differently). Frameworks can help here to abstract the differences between device APIs.You also have to design for the various screen sizes – which means more design time, and more testing time. One option here is to go with Responsive Design (e.g. start by designing for the smallest screen, and using only CSS 3 Media Queries, work your way up to enhancing the look for larger and larger screens).
  • Taking Advantage of Device Capabilitiesit’s mobile so you can do interesting things: e.g. GPS, accelorometer, gyroscope, orientation detection, Camera API (available on some Android devices).As time passes, devices will have more and more sensors/device capabilities – always interesting to explore the API and think of unique ways to leverage them to enhance user experience.
  • With the added opportunities that mobile presents, it also presents new limitations:e.g. slower internet speeds on 3G and other networks. Memory matters again (e.g. when working on Frame, we had to learn about how the mobile browsers handle memory, so that we could enable it to load more images without crashing).There’s not more Flash, so need to learn the equivalent HTML 5 technologies to replace itIn general, you will spend more time thinking about optimizing performance for mobile than for desktop – because the bottlenecks are larger.
  • There’s many reasons to choose Mobile WebOne of the most often stated reasons, is less work:The holy grail of mobile web is to have a single code base, that works everywhere.
  • Even though the aim is to have a single codebase, and even though frameworks exist that claim to support that, it still takes quite a bit of tweaking to get your codebase to work properly across all devices. But it’s improving.
  • If you have a site with a large existing customer base, it is worthwhile to also optimize your site because lots of people will follow their usual behavior of browsing to your site.. You can still offer an app in parallel to optimizing your site, and creating an amazing touch experience there.In some specific use cases, people are more likely to browse your site than download an app. For example, for Frame, we have the hypothesis that for e-commerce stores that don’t have a large inventory, people are more likely to want to shop via
  • I’ve watched my Mom use an iPad for example, and she always tends to go through the browser rather than the App Store. For older consumers, I think this is still their modus operandi.For web developers, it’s nice to be able to port years of experience in HTML, CSS and Javascript. You’ll have to likely learn a few new things (e.g. to support touch), and maybe learn a framework, but it’s definitely a smaller learning curve than learning Objective-C
  • - PhoneGap and other frameworks that enable you to run as an app also give you a way to have access to some Device APIs you don’t get natively in the browser.
  • Features:Built on top of Ext JS 4Entire MVC framework.Close integration with PhoneGap (although seen a bunch of issues with it)Supports lots of touch events.Kitchen Sink.Lots of components: Carousel, Picker, Toolbars, Animations, Charts and Graphs, Media etc.Cards to do Ajax, various animationsSeems to be most activeReasonably well documented (but found that in practice hit huge number of bugs), and it’s very heavyPay for SupportSencha 2.0 – could addresssomeof the cons (faster load times)- If you want to see an example app our CTO built while testing out Sencha 2.0 check out RedditUI the fully web browser UI.Works across Android, Desktop, Safari, BlackberryBunch of sample apps online that can help give you guidance on the code (would be nice if they walked through the reasoning of why they did things the way they did more)http://dev.sencha.com/deploy/touch/examples/kitchensink/Windows phone development is in works, smaller footpring, automanaged components (all this will make it easier) – they need to shed a lot of weight.Cons:Creates a heavy DOMSuper heavy, can be real overkill (partially because built on Ext 4.0Weird bugs and orientation issues300kb, 40K lines of code.Can’t take just components you want in an easy wayStill feels a bit closed because you pay for support, and lots of documentation is behind that wall in forums.Changing Quickly – what’s the right way to do it, what’s stable and what’s not?Full UI elements: Carousels,CostFree as long as not building an application builder.Support costs (299 forum access, – 1400 for phone and emergency bug fixes)
  • Features:Built on top of Ext JS 4Entire MVC framework.Close integration with PhoneGap (although seen a bunch of issues with it)Supports lots of touch events.Kitchen Sink.Lots of components: Carousel, Picker, Toolbars, Animations, Charts and Graphs, Media etc.Cards to do Ajax, various animationsSeems to be most activeReasonably well documented (but found that in practice hit huge number of bugs), and it’s very heavyPay for SupportSencha 2.0 – could addresssomeof the cons (faster load times)- If you want to see an example app our CTO built while testing out Sencha 2.0 check out RedditUI the fully web browser UI.Works across Android, Desktop, Safari, BlackberryBunch of sample apps online that can help give you guidance on the code (would be nice if they walked through the reasoning of why they did things the way they did more)http://dev.sencha.com/deploy/touch/examples/kitchensink/Windows phone development is in works, smaller footpring, automanaged components (all this will make it easier) – they need to shed a lot of weight.Cons:Creates a heavy DOMSuper heavy, can be real overkill (partially because built on Ext 4.0Weird bugs and orientation issues300kb, 40K lines of code.Can’t take just components you want in an easy wayStill feels a bit closed because you pay for support, and lots of documentation is behind that wall in forums.Changing Quickly – what’s the right way to do it, what’s stable and what’s not?Full UI elements: Carousels,CostFree as long as not building an application builder.Support costs (299 forum access, – 1400 for phone and emergency bug fixes)
  • Features:Built on top of Ext JS 4Entire MVC framework.Close integration with PhoneGap (although seen a bunch of issues with it)Supports lots of touch events.Kitchen Sink.Lots of components: Carousel, Picker, Toolbars, Animations, Charts and Graphs, Media etc.Cards to do Ajax, various animationsSeems to be most activeReasonably well documented (but found that in practice hit huge number of bugs), and it’s very heavyPay for SupportSencha 2.0 – could addresssomeof the cons (faster load times)- If you want to see an example app our CTO built while testing out Sencha 2.0 check out RedditUI the fully web browser UI.Works across Android, Desktop, Safari, BlackberryBunch of sample apps online that can help give you guidance on the code (would be nice if they walked through the reasoning of why they did things the way they did more)http://dev.sencha.com/deploy/touch/examples/kitchensink/Windows phone development is in works, smaller footpring, automanaged components (all this will make it easier) – they need to shed a lot of weight.Cons:Creates a heavy DOMSuper heavy, can be real overkill (partially because built on Ext 4.0Weird bugs and orientation issues300kb, 40K lines of code.Can’t take just components you want in an easy wayStill feels a bit closed because you pay for support, and lots of documentation is behind that wall in forums.Changing Quickly – what’s the right way to do it, what’s stable and what’s not?Full UI elements: Carousels,CostFree as long as not building an application builder.Support costs (299 forum access, – 1400 for phone and emergency bug fixes)
  • Features:Built on top of Ext JS 4Entire MVC framework.Close integration with PhoneGap (although seen a bunch of issues with it)Supports lots of touch events.Kitchen Sink.Lots of components: Carousel, Picker, Toolbars, Animations, Charts and Graphs, Media etc.Cards to do Ajax, various animationsSeems to be most activeReasonably well documented (but found that in practice hit huge number of bugs), and it’s very heavyPay for SupportSencha 2.0 – could addresssomeof the cons (faster load times)- If you want to see an example app our CTO built while testing out Sencha 2.0 check out RedditUI the fully web browser UI.Works across Android, Desktop, Safari, BlackberryBunch of sample apps online that can help give you guidance on the code (would be nice if they walked through the reasoning of why they did things the way they did more)http://dev.sencha.com/deploy/touch/examples/kitchensink/Windows phone development is in works, smaller footpring, automanaged components (all this will make it easier) – they need to shed a lot of weight.Cons:Creates a heavy DOMSuper heavy, can be real overkill (partially because built on Ext 4.0Weird bugs and orientation issues300kb, 40K lines of code.Can’t take just components you want in an easy wayStill feels a bit closed because you pay for support, and lots of documentation is behind that wall in forums.Changing Quickly – what’s the right way to do it, what’s stable and what’s not?Full UI elements: Carousels,CostFree as long as not building an application builder.Support costs (299 forum access, – 1400 for phone and emergency bug fixes)
  • Features:Built on top of Ext JS 4Entire MVC framework.Close integration with PhoneGap (although seen a bunch of issues with it)Supports lots of touch events.Kitchen Sink.Lots of components: Carousel, Picker, Toolbars, Animations, Charts and Graphs, Media etc.Cards to do Ajax, various animationsSeems to be most activeReasonably well documented (but found that in practice hit huge number of bugs), and it’s very heavyPay for SupportSencha 2.0 – could addresssomeof the cons (faster load times)- If you want to see an example app our CTO built while testing out Sencha 2.0 check out RedditUI the fully web browser UI.Works across Android, Desktop, Safari, BlackberryBunch of sample apps online that can help give you guidance on the code (would be nice if they walked through the reasoning of why they did things the way they did more)http://dev.sencha.com/deploy/touch/examples/kitchensink/Windows phone development is in works, smaller footpring, automanaged components (all this will make it easier) – they need to shed a lot of weight.Cons:Creates a heavy DOMSuper heavy, can be real overkill (partially because built on Ext 4.0Weird bugs and orientation issues300kb, 40K lines of code.Can’t take just components you want in an easy wayStill feels a bit closed because you pay for support, and lots of documentation is behind that wall in forums.Changing Quickly – what’s the right way to do it, what’s stable and what’s not?Full UI elements: Carousels,CostFree as long as not building an application builder.Support costs (299 forum access, – 1400 for phone and emergency bug fixes)
  • Features:Built on top of Ext JS 4Entire MVC framework.Close integration with PhoneGap (although seen a bunch of issues with it)Supports lots of touch events.Kitchen Sink.Lots of components: Carousel, Picker, Toolbars, Animations, Charts and Graphs, Media etc.Cards to do Ajax, various animationsSeems to be most activeReasonably well documented (but found that in practice hit huge number of bugs), and it’s very heavyPay for SupportSencha 2.0 – could addresssomeof the cons (faster load times)- If you want to see an example app our CTO built while testing out Sencha 2.0 check out RedditUI the fully web browser UI.Works across Android, Desktop, Safari, BlackberryBunch of sample apps online that can help give you guidance on the code (would be nice if they walked through the reasoning of why they did things the way they did more)http://dev.sencha.com/deploy/touch/examples/kitchensink/Windows phone development is in works, smaller footpring, automanaged components (all this will make it easier) – they need to shed a lot of weight.Cons:Creates a heavy DOMSuper heavy, can be real overkill (partially because built on Ext 4.0Weird bugs and orientation issues300kb, 40K lines of code.Can’t take just components you want in an easy wayStill feels a bit closed because you pay for support, and lots of documentation is behind that wall in forums.Changing Quickly – what’s the right way to do it, what’s stable and what’s not?Full UI elements: Carousels,CostFree as long as not building an application builder.Support costs (299 forum access, – 1400 for phone and emergency bug fixes)
  • Features:Built on top of Ext JS 4Entire MVC framework.Close integration with PhoneGap (although seen a bunch of issues with it)Supports lots of touch events.Kitchen Sink.Lots of components: Carousel, Picker, Toolbars, Animations, Charts and Graphs, Media etc.Cards to do Ajax, various animationsSeems to be most activeReasonably well documented (but found that in practice hit huge number of bugs), and it’s very heavyPay for SupportSencha 2.0 – could addresssomeof the cons (faster load times)- If you want to see an example app our CTO built while testing out Sencha 2.0 check out RedditUI the fully web browser UI.Works across Android, Desktop, Safari, BlackberryBunch of sample apps online that can help give you guidance on the code (would be nice if they walked through the reasoning of why they did things the way they did more)http://dev.sencha.com/deploy/touch/examples/kitchensink/Windows phone development is in works, smaller footpring, automanaged components (all this will make it easier) – they need to shed a lot of weight.Cons:Creates a heavy DOMSuper heavy, can be real overkill (partially because built on Ext 4.0Weird bugs and orientation issues300kb, 40K lines of code.Can’t take just components you want in an easy wayStill feels a bit closed because you pay for support, and lots of documentation is behind that wall in forums.Changing Quickly – what’s the right way to do it, what’s stable and what’s not?Full UI elements: Carousels,CostFree as long as not building an application builder.Support costs (299 forum access, – 1400 for phone and emergency bug fixes)
  • Features:Built on top of Ext JS 4Entire MVC framework.Close integration with PhoneGap (although seen a bunch of issues with it)Supports lots of touch events.Kitchen Sink.Lots of components: Carousel, Picker, Toolbars, Animations, Charts and Graphs, Media etc.Cards to do Ajax, various animationsSeems to be most activeReasonably well documented (but found that in practice hit huge number of bugs), and it’s very heavyPay for SupportSencha 2.0 – could addresssomeof the cons (faster load times)- If you want to see an example app our CTO built while testing out Sencha 2.0 check out RedditUI the fully web browser UI.Works across Android, Desktop, Safari, BlackberryBunch of sample apps online that can help give you guidance on the code (would be nice if they walked through the reasoning of why they did things the way they did more)http://dev.sencha.com/deploy/touch/examples/kitchensink/Windows phone development is in works, smaller footpring, automanaged components (all this will make it easier) – they need to shed a lot of weight.Cons:Creates a heavy DOMSuper heavy, can be real overkill (partially because built on Ext 4.0Weird bugs and orientation issues300kb, 40K lines of code.Can’t take just components you want in an easy wayStill feels a bit closed because you pay for support, and lots of documentation is behind that wall in forums.Changing Quickly – what’s the right way to do it, what’s stable and what’s not?Full UI elements: Carousels,CostFree as long as not building an application builder.Support costs (299 forum access, – 1400 for phone and emergency bug fixes)
  • Features:Built on top of Ext JS 4Entire MVC framework.Close integration with PhoneGap (although seen a bunch of issues with it)Supports lots of touch events.Kitchen Sink.Lots of components: Carousel, Picker, Toolbars, Animations, Charts and Graphs, Media etc.Cards to do Ajax, various animationsSeems to be most activeReasonably well documented (but found that in practice hit huge number of bugs), and it’s very heavyPay for SupportSencha 2.0 – could addresssomeof the cons (faster load times)- If you want to see an example app our CTO built while testing out Sencha 2.0 check out RedditUI the fully web browser UI.Works across Android, Desktop, Safari, BlackberryBunch of sample apps online that can help give you guidance on the code (would be nice if they walked through the reasoning of why they did things the way they did more)http://dev.sencha.com/deploy/touch/examples/kitchensink/Windows phone development is in works, smaller footpring, automanaged components (all this will make it easier) – they need to shed a lot of weight.Cons:Creates a heavy DOMSuper heavy, can be real overkill (partially because built on Ext 4.0Weird bugs and orientation issues300kb, 40K lines of code.Can’t take just components you want in an easy wayStill feels a bit closed because you pay for support, and lots of documentation is behind that wall in forums.Changing Quickly – what’s the right way to do it, what’s stable and what’s not?Full UI elements: Carousels,CostFree as long as not building an application builder.Support costs (299 forum access, – 1400 for phone and emergency bug fixes)
  • Features:Built on top of Ext JS 4Entire MVC framework.Close integration with PhoneGap (although seen a bunch of issues with it)Supports lots of touch events.Kitchen Sink.Lots of components: Carousel, Picker, Toolbars, Animations, Charts and Graphs, Media etc.Cards to do Ajax, various animationsSeems to be most activeReasonably well documented (but found that in practice hit huge number of bugs), and it’s very heavyPay for SupportSencha 2.0 – could addresssomeof the cons (faster load times)- If you want to see an example app our CTO built while testing out Sencha 2.0 check out RedditUI the fully web browser UI.Works across Android, Desktop, Safari, BlackberryBunch of sample apps online that can help give you guidance on the code (would be nice if they walked through the reasoning of why they did things the way they did more)http://dev.sencha.com/deploy/touch/examples/kitchensink/Windows phone development is in works, smaller footpring, automanaged components (all this will make it easier) – they need to shed a lot of weight.Cons:Creates a heavy DOMSuper heavy, can be real overkill (partially because built on Ext 4.0Weird bugs and orientation issues300kb, 40K lines of code.Can’t take just components you want in an easy wayStill feels a bit closed because you pay for support, and lots of documentation is behind that wall in forums.Changing Quickly – what’s the right way to do it, what’s stable and what’s not?Full UI elements: Carousels,CostFree as long as not building an application builder.Support costs (299 forum access, – 1400 for phone and emergency bug fixes)
  • Features:Built on top of Ext JS 4Entire MVC framework.Close integration with PhoneGap (although seen a bunch of issues with it)Supports lots of touch events.Kitchen Sink.Lots of components: Carousel, Picker, Toolbars, Animations, Charts and Graphs, Media etc.Cards to do Ajax, various animationsSeems to be most activeReasonably well documented (but found that in practice hit huge number of bugs), and it’s very heavyPay for SupportSencha 2.0 – could addresssomeof the cons (faster load times)- If you want to see an example app our CTO built while testing out Sencha 2.0 check out RedditUI the fully web browser UI.Works across Android, Desktop, Safari, BlackberryBunch of sample apps online that can help give you guidance on the code (would be nice if they walked through the reasoning of why they did things the way they did more)http://dev.sencha.com/deploy/touch/examples/kitchensink/Windows phone development is in works, smaller footpring, automanaged components (all this will make it easier) – they need to shed a lot of weight.Cons:Creates a heavy DOMSuper heavy, can be real overkill (partially because built on Ext 4.0Weird bugs and orientation issues300kb, 40K lines of code.Can’t take just components you want in an easy wayStill feels a bit closed because you pay for support, and lots of documentation is behind that wall in forums.Changing Quickly – what’s the right way to do it, what’s stable and what’s not?Full UI elements: Carousels,CostFree as long as not building an application builder.Support costs (299 forum access, – 1400 for phone and emergency bug fixes)
  • Baby Sencha?No MVCHad a bad impression before, but quite responsiveNo carouselsGeoLocationOfflineSwipedetection
  • Safari, Chrome, Firefox Opera – mbileWebkit browsersTried to make it as fast as pssible to download2KB ~ leverage mobile –webkit features Check out their presentationhttp://mir.aculo.us/2010/10/28/zepto-js-a-jquery-compatible-mobile-javascript-framework-in-2k-presentation/Jquery like syntax, animations, selection etc.Also touch events (swipeleft, swiperight, tap, doubletap, etc that you can bind to elements) pincinpinchout etc., aupport for ajax, nice support for environment.Active development.Their Websitehttp://zeptojs.com/
  • Safari, Chrome, Firefox Opera – mbileWebkit browsersTried to make it as fast as pssible to download2KB ~ leverage mobile –webkit features Check out their presentationhttp://mir.aculo.us/2010/10/28/zepto-js-a-jquery-compatible-mobile-javascript-framework-in-2k-presentation/Jquery like syntax, animations, selection etc.Also touch events (swipeleft, swiperight, tap, doubletap, etc that you can bind to elements) pincinpinchout etc., aupport for ajax, nice support for environment.Active development.Their Websitehttp://zeptojs.com/
  • Safari, Chrome, Firefox Opera – mbileWebkit browsersTried to make it as fast as pssible to download2KB ~ leverage mobile –webkit features Check out their presentationhttp://mir.aculo.us/2010/10/28/zepto-js-a-jquery-compatible-mobile-javascript-framework-in-2k-presentation/Jquery like syntax, animations, selection etc.Also touch events (swipeleft, swiperight, tap, doubletap, etc that you can bind to elements) pincinpinchout etc., aupport for ajax, nice support for environment.Active development.Their Websitehttp://zeptojs.com/
  • Safari, Chrome, Firefox Opera – mbileWebkit browsersTried to make it as fast as pssible to download2KB ~ leverage mobile –webkit features Check out their presentationhttp://mir.aculo.us/2010/10/28/zepto-js-a-jquery-compatible-mobile-javascript-framework-in-2k-presentation/Jquery like syntax, animations, selection etc.Also touch events (swipeleft, swiperight, tap, doubletap, etc that you can bind to elements) pincinpinchout etc., aupport for ajax, nice support for environment.Active development.Their Websitehttp://zeptojs.com/
  • Safari, Chrome, Firefox Opera – mbileWebkit browsersTried to make it as fast as pssible to download2KB ~ leverage mobile –webkit features Check out their presentationhttp://mir.aculo.us/2010/10/28/zepto-js-a-jquery-compatible-mobile-javascript-framework-in-2k-presentation/Jquery like syntax, animations, selection etc.Also touch events (swipeleft, swiperight, tap, doubletap, etc that you can bind to elements) pincinpinchout etc., aupport for ajax, nice support for environment.Active development.Their Websitehttp://zeptojs.com/
  • Safari, Chrome, Firefox Opera – mbileWebkit browsersTried to make it as fast as pssible to download2KB ~ leverage mobile –webkit features Check out their presentationhttp://mir.aculo.us/2010/10/28/zepto-js-a-jquery-compatible-mobile-javascript-framework-in-2k-presentation/Jquery like syntax, animations, selection etc.Also touch events (swipeleft, swiperight, tap, doubletap, etc that you can bind to elements) pincinpinchout etc., aupport for ajax, nice support for environment.Active development.Their Websitehttp://zeptojs.com/
  • Add to homescreenUsed by sites like Nike.com, appleGreat Load times – well written codeIscroll for scrollable areas. Some inertiaReally nice slide in menuPickerFull Page Carousel (Swipe View)Pull to refreshCarouselCustom scrollbarsVersion for just mobile as well (iscroll-lite.js)Used by apple, touchScroll is pretty nice.Accordian Hardware accelerated
  • Add to homescreenUsed by sites like Nike.com, appleGreat Load times – well written codeIscroll for scrollable areas. Some inertiaReally nice slide in menuPickerFull Page Carousel (Swipe View)Pull to refreshCarouselCustom scrollbarsVersion for just mobile as well (iscroll-lite.js)Used by apple, touchScroll is pretty nice.Accordian Hardware accelerated
  • Depending on your needs, may make sense for perf reasons to use no frameworks at all, and write from scratch. Here’s some starting points for how to write a web app.
  • Do they know your site?Are they more likely to browse to your site than download an app for it? i.e. not enough for an app
  • Transcript of "Mobile Web Apps in a Nutshell"

    1. 1. Mobile Web Apps in a Nutshell
    2. 2. Who Am I? Frame useframe.comNicolae RusanCo-founder,Design/JS Engineer
    3. 3. What Is Mobile Web? What Is Mobile Web?Optimized Sites up to Full Blown Appsin the Browser
    4. 4. What Is Mobile Web? What Is Mobile Web?Design for a variety of screen sizes anddevices
    5. 5. What Is Mobile Web?Taking advantage of device capabilities
    6. 6. What Is Mobile Web?Handling Limitations • Browser Memory • Slower Networks • Slower Hardware • Different Capabilities
    7. 7. Why Mobile Web?Write once, works everywhere..
    8. 8. Why Mobile Web?Write once, works everywhere..(Still not there yet.)
    9. 9. Why Mobile Web?People are used to browsersCustomers• Do they know your site?• Specific use case: more likely to use browser than native app?
    10. 10. Why Mobile Web?People are used to browsersDevelopers• Familiar technologies:• HTML, Javascript, CSS
    11. 11. Why Mobile Web?Not competitive with Native Apps!Why not do both?
    12. 12. Why Mobile Web?Some frameworks let you:write web code => compiled to native:e.g. PhoneGap, Appcelerator‟s Titaniumetc.
    13. 13. Why Not Mobile Web?Native Apps still have betterperformance and responsiveness.
    14. 14. Why Not Mobile Web?The App Store is a good distributionchannel• easier to charge
    15. 15. Why Not Mobile Web?If you need Device APIse.g. Camera, Voice- (Phone Gap Workaround)
    16. 16. Why Not Mobile Web?It‟s good to be an app!• Homescreen real-estate• Push notifications
    17. 17. Frameworks
    18. 18. TouchFull out MVC Framework w/ Touch• built on top of Ext JS
    19. 19. TouchCross-browser• Both Mobile and Desktop
    20. 20. TouchDon‟t write HTML, glue together “Components”• Lots of GUI Components : • E.g. Carousel, Picker, Toolbars, Animations, Charts and Graphs.• Lots of Touch Events
    21. 21. TouchClose integration with PhoneGap
    22. 22. Touch• Reasonably well documented• Free to use (unless you‟re making an app builder) • Can pay for support
    23. 23. TouchFor Examples:Sencha Kitchen Sinkhttp://dev.sencha.com/deploy/touch/examples/kitchensink/RedditUI(iPad Web App built by Frame CTO on Sencha 2.0)http://www.redditui.com
    24. 24. TouchCons: • Heavy • 365KB, >40K lines of code, DOM Bloat • Initial load time.
    25. 25. TouchCons: • Heavy • 365KB, >40K lines of code, DOM Bloat • Initial load time. • Weird Bugs, hard to identify best practices
    26. 26. TouchCons: • Heavy • 365KB, >40K lines of code, DOM Bloat • Initial load time. • Weird Bugs, hard to identify best practices • Hard to separate components
    27. 27. TouchCons: • Heavy • 365KB, >40K lines of code, DOM Bloat • Initial load time. • Weird Bugs, hard to identify best practices • Hard to separate components • Do you need all these browsers supported?
    28. 28. TouchCons: • Sencha 2.0 is out in developer preview, working to fix many of these issues
    29. 29. • Developed by Sencha Labs• Not full MVC (separate from Ext JS)• Touch events (swipe, tap)• Some UI Components (not as may as sencha)• Fairly performant, decent documentation, still crashes fairly often
    30. 30. Zepto.js• Mobile WebKit browsers + Safari, Chrome, Firefox, Opera• Based on jQuery syntax (familiar selectors, and event binding)• Very Small: 2KB – they care about speed.• Adds Touch events: • swipeleft, swiperight, tap, doubletap, pinchin pinchout etc. that you can bind to elements • e.g. $(„some selector‟).swipeLeft(function(){ });
    31. 31. Zepto.js• Mobile WebKit browsers + Safari, Chrome, Firefox, Opera• Based on jQuery syntax (familiar selectors, and event binding)• Very Small: 2KB – they care about speed.• Adds Touch events: • swipeleft, swiperight, tap, doubletap, pinchin pinchout etc. that you can bind to elements • e.g. $(„some selector‟).swipeLeft(function(){ });
    32. 32. Zepto.js• Mobile WebKit browsers + Safari, Chrome, Firefox, Opera
    33. 33. Zepto.js• Mobile WebKit browsers + Safari, Chrome, Firefox, Opera• Based on jQuery syntax (familiar selectors, and event binding)
    34. 34. Zepto.js• Mobile WebKit browsers + Safari, Chrome, Firefox, Opera• Based on jQuery syntax (familiar selectors, and event binding)• Very Small: 2KB – helps initial speed.
    35. 35. Zepto.js• Mobile WebKit browsers + Safari, Chrome, Firefox, Opera• Based on jQuery syntax (familiar selectors, and event binding)• Very Small: 2KB – helps initial speed.• Adds Touch events: • swipeleft, swiperight, tap, doubletap, pinchin pinchout etc. that you can bind to elements • e.g. $(„some selector‟).swipeLeft(function(){ });
    36. 36. Cubiq iScroll – Matteo Spinelli• http://cubiq.org/• Various components + experiments you can use• e.g. scrollable content, carousels very nice picker, full-page carousel, pull to refresh• Small file sizes• good examples and explanation of code• Used on Nike.com, Apple and others
    37. 37. Other Frameworks to Checkout• Other Frameworks: • DojoToolkit, jQuery Mobile,• Compile to native apps: • PhoneGap, Appcelerator‟s Titanium, Rhomobile, and many others
    38. 38. How From The Ground Up• Setup Web App mode <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0" /> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black- translucent" /> Checkout Viewporter: https://github.com/zynga/viewporter/
    39. 39. How From The Ground Up• Built in Touch Events in Safari touchstart: a finger is placed on a DOM element. touchmove: a finger is dragged along a DOM element. touchend: a finger is removed from a DOM element. touches: a list of all fingers currently on the screen. targetTouches: a list of fingers on the current DOM element. changedTouches: a list of fingers involved in the current event. For example, in a touchend event, this will be the finger that was removed.
    40. 40. How From The Ground Up• Built in Gesture Events – E.g. pinch, – Not available on all devices/browsers• Built in Orientation Events
    41. 41. How From The Ground Up• More than touch: – Accelerometer + Gyroscope APIs – GeoLocation – Other HTML 5 + CSS 3 goodness: • E.g. WebSockets, onhashchange • CSS 3 transforms for hardware acceleration, instead of javascript
    42. 42. How From The Ground Up• More than touch: – Accelerometer + Gyroscope APIs – GeoLocation – Other HTML 5 + CSS 3 goodness: • E.g. WebSockets, onhashchange • CSS 3 transforms for hardware acceleration, instead of javascript
    43. 43. Resources• Checkout Frame for an example of what’s possible: – www.useframe.com – Sample Store (browse on iPad) : www.shop.kindredclothiers.com• Frameworks and Libraries: – Zepto: http://zeptojs.com/ – Sencha: http://www.sencha.com/products/touch/ – jQTouch: http://jqtouch.com/ – jQuery Mobile: http://jquerymobile.com/ – Cubiq (iScroll): http://cubiq.org/ (also has sample of Add to Homescreen code for webapps) – Scrollability: http://joehewitt.github.com/scrollability/• Packaging as a Native App – PhoneGap: http://phonegap.com/ – Titanium: http://www.appcelerator.com/ – AppMobi: http://www.appmobi.com/• Native Browser Events/ Doing things from scratch – Great Intro Article and Resources: http://www.html5rocks.com/en/mobile/touch.html – Apple documentation on webkit touch events: http://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/Han dlingEvents.html – http://ross.posterous.com/2008/08/19/iphone-touch-events-in-javascript• Good Presentations – Performance: http://www.slideshare.net/firt/mobile-web-html5-performance-optimization?from=ss_embed – More About Why Perf Matters and Responsive Design: http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by- yiibu
    44. 44. Future of Mobile Web?2012:Gap between native and web shrinksDevice APIs opened up to browsers.A winning Framework?Write Web Straight to Native?
    45. 45. Thanks for your time Resources will be online soon.
    1. A particular slide catching your eye?

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

    ×