HTML5: Separating Fact and Fiction www.wipconnector.com @caaarlo #wipjam
Announcements What is HTML5? Agenda What can HTML5 do? What can t it do? Pure HTML5/Native vs. Hybrid approaches Guest Developer Message from the VDC Q&A
Announcements Part of a series of webinars from the Verizon Developer Community More details at http://bit.ly/vdcwebinars Presentation will be posted To ask questions, please submit via the GoToWebinar console
Speakers Carlo Longino, Wireless Industry Partnership George McKinney, Hookstream Interactive Gibbs Murayama, Verizon Developer Community
What is HTML5? The latest hypertext markup language standard More multimedia support Support for mobile apps: Offline support Canvas drawing Streaming media support Geolocation API
It s cross platform! HTML5 is the Savior! It s easy to code! Better search and discovery than the app store!
HTML5 is terrible! It s slow! It can t work offline! It gives a terrible UI with bad design!
The Truth Is In The Middle HTML5 can work cross-platform Still have issues - http://mobilehtml5.org/ It can be easier to code with JS/CSS/HTML There are some limitations You can t beat the app store (yet) Performance issues v. native are declining It does support offline use UI/design are in the hands of the dev
Native vs. Hybrid Native Full Device/Platform Capabilities Single Platform Many Platforms HTML5 Fewer Device/Platform
HTML5 Key Strengths Cross-platform code reuse Write once, optimize everywhere Ease of support Fix/upgrade server-side, it s done Use of web standards and technologies Ease of distribution*
HTML5 Key Weaknesses No (or very limited) access to device features Camera, hard keys, notifications No access to native UI elements Getting the look and feel right can be difficult Graphics performance *Lack of app store presence
The Bottom Line HTML5 is not a replacement for native apps But can be a viable alternative for many
A 3 rd Way: Hybrid Apps HTML5 in a native wrapper Combines ease of HTML5 development with access to native device features and APIs Retain some cross-platform benefits Also retain some UI issues Added benefit: appstore distribution
Which is the right approach? It depends on your app and your users How complex is your app? What features are essential? Device features? What will the UI be? What graphics are needed? Cross-platform or single platform? What are your existing skills and resources? Do you need to be in the app store?
Decision Matrix Native HTML5 Hybrid Device Access Performance Cross-platform ability Ease of Development Ease of Support/Update Cost/Time
When to Go Native You need device functionality You only need to target one platform You have existing native skills, not web You have significant UI needs
When to go HTML5 You have strong web skills, no native skills You don t need device capabilities You want to go cross-platform You don t need to be in an app store
When to go hybrid Web skills are stronger than native skills You want to be in an appstore Your device functionality needs are covered
HTML5 Distribution Without a native wrapper, not in usual app stores There are HTML-5 specific stores Currently low traffic OpenAppMkt, Appsfuel, Zeewe Mozilla Firefox Marketplace Facebook App Center
Technical Issues Feature detection (client-side) Modernizr Media queries Device detection (server-side) WURFL DeviceAtlas Working offline AppCache
Storage/offline Web storage Web SQL Roll your own UI Technical Issues No access to native UI elements, as in native apps This is a good and bad thing
Frameworks and Hybrid platforms Frameworks can make things easier Provide UI controls and assets, transitions, forms 10s-100s of examples Sencha Touch, jquery Mobile, jqtouch Hybrid platforms code in HTML/CSS/JS, output native apps Added device API support PhoneGap, Appcelerator Titanium, AppMobi, Tiggzi
Guest Developer
DEVELOPMENT ENVIRONMENT Local HTTP Server - IIS, Apache - Build your projects in your server For BlackBerry - WebWorks, BBUI, Ripple Emulator For Windows Phone - Visual Studio, WinJS, TypeScript Cloud-based Mobile Services - PhoneGap Build, Tiggzi, BlackBerry App Generator
DEBUGGING / TESTING Firebug, Chrome Web Inspector, IE Developer Tools Ripple Emulator - UI Testing in Chrome Weinre - Adobe Shadow - BB10 BlackBerry devices have built-in support
MOBILE BROWSERS Used by Hybrid Apps Webkit, IE, Presto, Gecko layout engines Each platform has a desktop pair, so use it Limited vs. desktop Best to test on a real device though
Canvas vs. HTML DOM - Canvas faster than DOM - jquery is heavy on the DOM HTML5 JavaScript - Adobe Edge Animate - Construct 2 Flash to HTML5 JavaScript - Adobe CreateJS - Google Swiffy - Spaceport.io HTML5 CANVAS
HTML5 UI MOBILE FRAMEWORKS jquery Mobile (Windows Phone, ios, Android) - ThemeRoller for jquery Mobile - Adobe Fireworks BBUI (BlackBerry devices) - WebWorks jqtouch (ios, Android) - Zepto - jquery
IMPROVE PERFORMANCE Use one HTML file Use HTTP requests sparingly Embed images as Base64 text CSS - goes in the <head></head> - use <link rel="stylesheet" href = "style.css" /> - will block page loading JavaScript - at the bottom of the page - minify.js files - include.js files only once
Message from the VDC
Verizon Developer Community (VDC) THE PROGRAM The focus of The VDC (Verizon Developer Community) is to support mobile developers with their developmental needs with information, tools and API s that help to develop and enhance applications to run on the Verizon Wireless network BENEFITS VDC is the entry point to all VZ Tools & Platforms Merchandising opportunities to distribute your app or services to millions of customers Develop your app for basic phones, smart phones and tablets Utilize our 3G and 4G LTE networks to develop and distribute across networks http://developer.verizon.com Follow us on Twitter: @VerizonDev
Verizon APIs, Tools and Platforms Verizon APIs SMS, MMS, Terminal Status & Location and Carrier Properties Developer Tools NBI, ScanLife, Urban Airship, Printer On, Mobile Roadie, Open Mobile, Kiip, and more Verizon Platforms Are You Taking Advantage? Brew, Enterprise, FIOS, M2M, Vodafone, and more New! Verizon M2M
Upcoming Webinars Check back to the VDC frequently or follow us on Twitter for updates on upcoming webinars http://developer.verizon.com Follow us on Twitter: @VerizonDev
Q&A
Thank You Slides and details of future webinars at: http://bit.ly/vdcwebinars Thanks to all our speakers Questions? carlo@wipconnector.com