HTML5: Separating Fact and Fiction. #wipjam

Transcription

1 HTML5: Separating Fact and Fiction #wipjam

2 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

3 Announcements Part of a series of webinars from the Verizon Developer Community More details at Presentation will be posted To ask questions, please submit via the GoToWebinar console

4 Speakers Carlo Longino, Wireless Industry Partnership George McKinney, Hookstream Interactive Gibbs Murayama, Verizon Developer Community

5 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

6 It s cross platform! HTML5 is the Savior! It s easy to code! Better search and discovery than the app store!

7 HTML5 is terrible! It s slow! It can t work offline! It gives a terrible UI with bad design!

8 The Truth Is In The Middle HTML5 can work cross-platform Still have issues - 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

9 Native vs. Hybrid Native Full Device/Platform Capabilities Single Platform Many Platforms HTML5 Fewer Device/Platform

10 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*

11 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

12 The Bottom Line HTML5 is not a replacement for native apps But can be a viable alternative for many

13 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

14 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?

15 Decision Matrix Native HTML5 Hybrid Device Access Performance Cross-platform ability Ease of Development Ease of Support/Update Cost/Time

16 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

17 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

18 When to go hybrid Web skills are stronger than native skills You want to be in an appstore Your device functionality needs are covered

19 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

20 Technical Issues Feature detection (client-side) Modernizr Media queries Device detection (server-side) WURFL DeviceAtlas Working offline AppCache

21 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

22 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

23 Guest Developer

24 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

25 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

26 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

27 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

28 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

29 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

30 Message from the VDC

31 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 Follow us on

32 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

33 Upcoming Webinars Check back to the VDC frequently or follow us on Twitter for updates on upcoming webinars Follow us on

34 Q&A

35 Thank You Slides and details of future webinars at: Thanks to all our speakers Questions?