What Lies Ahead for HTML5
-
date post
20-Oct-2014 -
Category
Technology
-
view
749 -
download
1
description
Transcript of What Lies Ahead for HTML5
![Page 1: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/1.jpg)
What Lies Ahead for HTML5?
Krzysztof SzafranekWooga GmbH
@szafranek
![Page 2: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/2.jpg)
[ˈkʂɨʂtɔf ʂafranˈɛk]Web application
&game developer
Wooga(Roche, Nokia)
Let me start with the most technically difficult part of the presentation.
![Page 3: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/3.jpg)
How many of you would consider yourself developers?How many of you have used HTML5?
![Page 4: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/4.jpg)
I think the biggest mistake that we made, as a company, is betting too much on HTML5 as opposed to native... because it just wasn't there.
Last year’s quote that caused a lot of confusion
![Page 5: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/5.jpg)
The language
< >
![Page 6: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/6.jpg)
Next iteration of the HTML language
Markup language for structuring and presenting content for the World Wide Web.
![Page 7: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/7.jpg)
<video>
<audio>
![Page 8: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/8.jpg)
<canvas>
![Page 9: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/9.jpg)
New form elements
<input type=color>
<input type=date>
How many of you have implemented a date picker?
Less code to improve site’s usabilityFaster site
![Page 10: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/10.jpg)
The buzzword
[5]
![Page 11: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/11.jpg)
3D
WebGLDemo: 3D race car
![Page 12: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/12.jpg)
Media
video, audioScreenshot: mobile YouTube
![Page 13: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/13.jpg)
Offline
Screenshot: Twitter mobile
![Page 14: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/14.jpg)
CSS3
![Page 15: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/15.jpg)
Network
WebSockets, server-sent events, XHR2Screenshot: Facebook chat
![Page 16: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/16.jpg)
Devices
Microphone, cameraDemo: speech recognition
![Page 17: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/17.jpg)
HTML5has already
won
If you have a website built in the last 3 years, most likely you’ve been using HTML5 already.
![Page 18: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/18.jpg)
http://html5awesome.com/
![Page 19: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/19.jpg)
mobile
[15]Mobile doesn’t necessarily mean phone!
![Page 20: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/20.jpg)
0
7.5
15
22.5
30
% of sales done through mobile
16.269.84 2011
2012
Black Friday 2012
Source: http://www-01.ibm.com/software/marketing-solutions/benchmark-reports/benchmark-2012-black-friday.pdf
![Page 21: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/21.jpg)
0
7.5
15
22.5
30
% of traffic coming from mobile
24.04
14.3320112012
Black Friday 2012
![Page 22: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/22.jpg)
I think the biggest mistake that we made, as a company, is betting too much on HTML5 as opposed to native... because it just wasn't there.
![Page 23: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/23.jpg)
... we actually have more people on a daily basis using mobile Web Facebook than we have using our iOS or Android apps combined.So mobile Web is a big thing for us.
![Page 24: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/24.jpg)
Web or native?
![Page 25: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/25.jpg)
Native
![Page 26: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/26.jpg)
Native
![Page 27: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/27.jpg)
Native
Performance
![Page 28: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/28.jpg)
Native
![Page 29: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/29.jpg)
Native
![Page 30: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/30.jpg)
Access to device features
Native
![Page 31: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/31.jpg)
Native
![Page 32: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/32.jpg)
Native
![Page 33: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/33.jpg)
Distribution throughan app store
Native
![Page 34: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/34.jpg)
Native
![Page 35: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/35.jpg)
Native
![Page 36: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/36.jpg)
Payments
Native
![Page 37: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/37.jpg)
Native
![Page 38: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/38.jpg)
Opportunity cost
![Page 39: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/39.jpg)
Apple
Samsung
HTC
Nokia
RIM Sony
LGAmazon
m.guardian.co.uk
3.3m daily page viewsApple 80%Samsung 8%RIM 6%HTC 5%Nokia 1%
http://www.guardian.co.uk/info/developer-blog/2012/dec/11/fragmented-world-mobile-traffic-data
![Page 40: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/40.jpg)
Discoverability
Discoverability in the AppStore,over 700 000 apps.
![Page 41: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/41.jpg)
Development cost
1.3 million Android devices is being activated every single day.Source: http://techcrunch.com/2012/09/05/eric-schmidt-there-are-now-1-3-million-android-device-activations-per-day/
![Page 42: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/42.jpg)
Web
![Page 43: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/43.jpg)
Web
![Page 44: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/44.jpg)
Web
You already have it
![Page 45: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/45.jpg)
Web
![Page 46: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/46.jpg)
Web
![Page 47: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/47.jpg)
Web
Cheaper to build
![Page 48: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/48.jpg)
Web
![Page 49: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/49.jpg)
Web
Open standards not controlled by one company
![Page 50: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/50.jpg)
Web
Vendor independence
Open standards not controlled by one company
![Page 51: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/51.jpg)
Web
Open standards not controlled by one company
![Page 52: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/52.jpg)
Web
![Page 53: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/53.jpg)
Web
Easy updates
![Page 54: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/54.jpg)
Web
![Page 55: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/55.jpg)
Web
![Page 56: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/56.jpg)
Web
Future proof
![Page 57: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/57.jpg)
Web
![Page 58: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/58.jpg)
Discoverability
![Page 59: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/59.jpg)
Payments
![Page 60: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/60.jpg)
“Standards”
![Page 61: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/61.jpg)
Hybrid
![Page 62: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/62.jpg)
Hybrid
HTML5 inside
Native wrapper
![Page 63: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/63.jpg)
Hybrid
![Page 64: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/64.jpg)
Hybrid
![Page 65: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/65.jpg)
Hybrid
App store distribution
Access to device
features
![Page 66: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/66.jpg)
Hybrid
![Page 67: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/67.jpg)
Hybrid
![Page 68: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/68.jpg)
Hybrid
Cross platform
Notnative!
![Page 69: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/69.jpg)
Hybrid
![Page 70: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/70.jpg)
The story of
[30]
![Page 71: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/71.jpg)
![Page 72: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/72.jpg)
Hybrid: HTML5+PhoneGap
Over 20x less than my current game in Objective C
![Page 73: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/73.jpg)
Hybrid: HTML5+PhoneGap
22k lines of JS
Over 20x less than my current game in Objective C
![Page 74: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/74.jpg)
AppStore, worldwide
Released as open source
![Page 75: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/75.jpg)
github.com/wooga/Pocket-Island
![Page 76: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/76.jpg)
JavaScript!
![Page 77: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/77.jpg)
JavaScript!
•Development speed
![Page 78: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/78.jpg)
JavaScript!
•Developer talent
•Development speed
![Page 79: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/79.jpg)
JavaScript!
•Community
•Developer talent
•Development speed
![Page 80: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/80.jpg)
“Write once, run everywhere”
![Page 81: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/81.jpg)
“Run everywhere” – either a lie or programs that worked equally badly everywhere
![Page 82: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/82.jpg)
Sound, multitouch...
Sounds has been fixed in Safari 6, multitouch is being standardized right now.
![Page 83: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/83.jpg)
Performance
12 FPS instead of 60
![Page 84: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/84.jpg)
Conclusions
The web wasn’t the best platform for making mobile games in 2012.
[40]
![Page 85: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/85.jpg)
“Every new generation brings radical new features, and the Web will always be behind on those. So the cutting edge is native.”
Ian Hickson,editorof the HTML spec
Do you really need the cutting edge?Are you willing to pay for it?
![Page 86: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/86.jpg)
Games
![Page 87: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/87.jpg)
Games
![Page 88: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/88.jpg)
Games
![Page 89: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/89.jpg)
Games
![Page 90: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/90.jpg)
Games
![Page 91: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/91.jpg)
Operating system!
![Page 92: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/92.jpg)
WebAPIWebSMSWebTelephonyPower ManagementDevice StorageWebPaymentCameraCalendarWebBluetoothVibration API...
https://wiki.mozilla.org/WebAPI
![Page 93: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/93.jpg)
10 years from now
In many ways mobile web is where the desktop web was 15 years ago.But it is catching up.
![Page 94: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/94.jpg)
10 years from now
The web & HTML:still around.
In many ways mobile web is where the desktop web was 15 years ago.But it is catching up.
![Page 95: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/95.jpg)
10 years from now
App stores: not so sure.
In many ways mobile web is where the desktop web was 15 years ago.But it is catching up.
![Page 96: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/96.jpg)
10 years from now
In many ways mobile web is where the desktop web was 15 years ago.But it is catching up.
![Page 97: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/97.jpg)
Thank you!
wooga.com/jobswww.szafranek.net@szafranek
![Page 98: What Lies Ahead for HTML5](https://reader033.fdocuments.net/reader033/viewer/2022061106/544511b5b1af9f476c8b4679/html5/thumbnails/98.jpg)
Photo credits:
Crunchies2009
John Kannenberg
luisvilla