samsung devcon - state of html5 - chris heilmann
DESCRIPTION
Screencast is available on YouTube: https://www.youtube.com/watch?v=8Hq22HdEznMTRANSCRIPT
THE STATE OF HTML5
?!Christian Heilmann, Mozilla (@codepo8) Samsung Devcon, San Francisco 2013
THE STATE OF HTML5
?!Christian Heilmann, Mozilla (@codepo8) Samsung Devcon, San Francisco 2013
WHAT IS HTML5?
http://www.flickr.com/photos/37031529@N00/4468724263/
PROMISES OF HTML5
REALITIES OF HTML5
HTML5 WORRIES…
★ Performance
★ Fragmentation
★ Security
★ Access to hardware
★ Painless app updates
★ Development environment
BROKEN COMPARISONS
http://www.flickr.com/photos/richardnorth/7037250865http://www.flickr.com/photos/orangeacid/212833788
DIFFERENT GOALS…
NATIVE APPS WEB APPS / SITES
Provide the best experience in a defined environment.
Reach the largest amount of users, regardless of location, technical environment or ability.
FIXED IN A CURRENT STATE. FIERCELY FLEXIBLE AND ADAPTING
DIFFERENT APPROACHES…
NATIVE ENVIRONMENTS THE WEB
Innovate with closed, patented technology and secret features to gain advantage over competitors.
Use browser maker innovation to agree on standards, stay backwards compatible and vendor independent.
QUICK RESULTS, NO VISIBILITY, CONSTANT REPLACEMENT
HIGH VISIBILITY, CONSENSUS AND MAINTAINABILITY.
For an HTML5 solution to be as good as a native implementation, it would only have to work on one browser, on one operating system, on one defined piece of hardware in a fixed specification. !!
This is against everything the web stands for and not what HTML was invented for…
WORRYING TRENDS…
GET OUR APP!We don’t care if you came from an email or entered a URL, this is about us, not you!
CREATING A FIRST WORLD WEB…
BENEFITS OF THE WEB…
MILLIONS OF DEVELOPERS
INCREDIBLE REACH
CUSTOMISABLE EXPERIENCES
ATOMIC UPDATES
APP STORE INDEPENDENCE
TACKLING HTML5 ISSUES…
SOME FACTS…★ Released in six countries: Spain, Poland, Venezuela and
Columbia, Brazil and Mexico (more to come very soon)
★ 18 mobile operator partners, 6 hardware partners
★ Hardware options: Alcatel One Touch Fire, ZTE Open, Geeksphone Keon, Geeksphone Peak…
★ Aimed at emerging markets/low end market
★ Aimed to be an alternative to feature phones and unavailable closed environments.
★ Open source - it is all on GitHub
SECURITY
APPLICATION MANIFEST{ "version": "1.0", "name": "MozillaBall", "description": "Exciting Open Web development action!", "icons": { "16": "/img/icon-16.png", "48": "/img/icon-48.png", "128": "/img/icon-128.png" }, "developer": { "name": "Mozilla Labs", "url": "http://mozillalabs.com" }, "installs_allowed_from": ["*"], "appcache_path": "/cache.manifest", "locales": { "es": { "description": "¡Acción abierta emocionante del desarrollo del Web!", "developer": { "url": "http://es.mozillalabs.com/" } } }, "default_locale": "en" }
Privileged Web App
More access, more responsibility
Web Content
Regular web content
APPLICATIONS
Installed Web App
A regular web app
Certified Web App
Device-critical applications
PERMISSIONS
"permissions": { "contacts": { "description": "Required for autocompletion in the share screen", "access": "readcreate" }, "alarms": { "description": "Required to schedule notifications" } }
HARDWARE ACCESS
WEB APIS (FOR ALL)Vibration API, Screen Orientation, Geolocation API, Mouse Lock
API, Open WebApps, Network Information API, Battery Status API,
Alarm API, Push Notifications API, WebFM API / FMRadio,
WebPayment, IndexedDB, Ambient light sensor, Proximity sensor,
Notification, Device Storage API, Browser API, TCP Socket API,
Contacts API, systemXHR, WebTelephony, WebSMS, Idle API,
Settings API, Power Management API, Mobile Connection API,
WiFi Information API, WebBluetooth, Permissions API, Network
Stats API, Camera API, Time/Clock API, Attention screen, Voicemail
https://wiki.mozilla.org/WebAPI
BATTERY STATUS API
BATTERY STATUS API
var battery = navigator.battery; if (battery) { var batteryLevel = Math.round(battery.level * 100) + "%", charging = (battery.charging)? "" : "not ", chargingTime = parseInt(battery.chargingTime / 60, 10), dischargingTime = parseInt(battery.dischargingTime / 60, 10); // Set events battery.addEventListener("levelchange", setStatus, false); battery.addEventListener("chargingchange", setStatus, false); battery.addEventListener("chargingtimechange", setStatus, false); battery.addEventListener("dischargingtimechange", setStatus, false); }
WEB ACTIVITIES
GET A PHOTO?
APP DISTRIBUTION
FXOS, ANDROID, WINDOWS, OSX, LINUX
https://hacks.mozilla.org/2013/10/progress-report-on-cross-platform-open-web-apps/
INSTALL FROM THE WEB…
TOOLING
DEVELOPER ENVIRONMENT
ADOBE EDGE SUITE
http://html.adobe.com/edge/
WHAT’S COOKING?
ASM.JS / EMSCRIPTEN
https://blog.mozilla.org/blog/2013/03/27/mozilla-is-unlocking-the-power-of-the-web-as-a-platform-for-gaming
USING HTML5 NOW
STAY UP TO DATE
MOBILE AND OFFLINE FIRST
FLEXIBILITY IS THE SUPERPOWER
BE FEARLESS…
THANKS! CHRIS HEILMANN @CODEPO8