1. What Lies Ahead
for HTML5?
Krzysztof Szafranek @szafranek
Wooga GmbH

2. [ˈkʂɨʂtɔf ʂafranˈɛk]
Web application
&
game developer
Wooga
(Roche, Nokia)
Let me start with the most technically difficult part of the presentation.

3. How many of you would consider yourself developers?
How many of you have used HTML5?

4. 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

5. The language
< >

6. Next iteration of the
HTML language
Markup language for structuring and presenting content for the World Wide Web.

7. <video>
<audio>

8. <canvas>

9. New form elements
<input type=date>
<input type=color>
How many of you have implemented a date picker?
Less code to improve site’s usability
Faster site

10. The buzzword
[5]

11. 3D
WebGL
Demo: 3D race car

12. Media
video, audio
Screenshot: mobile YouTube

13. Offline
Screenshot: Twitter mobile

14. CSS3

15. Network
WebSockets, server-sent events, XHR2
Screenshot: Facebook chat

16. Devices
Microphone, camera
Demo: speech recognition

17. HTML5
has already
won
If you have a website built in the last 3 years, most likely you’ve been using HTML5 already.

18. http://html5awesome.com/

19. mobile
[15]
Mobile doesn’t necessarily mean phone!

20. Black Friday
30
2012
22.5
15
7.5 16.26
9.84 2011
2012
0
% of sales done through mobile
Source: http://www-01.ibm.com/software/marketing-solutions/benchmark-reports/
benchmark-2012-black-friday.pdf

21. Black Friday
30
2012
22.5
15
24.04
7.5 14.33
2011
2012
0
% of traffic coming from mobile

22. 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.

23. ... 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.

24. Web or native?

25. Native

26. Native

27. Native
Performance

28. Native

29. Native

30. Native
Access to
device
features

31. Native

32. Native

33. Native
Distribution
through
an app store

34. Native

35. Native

36. Native
Payments

37. Native

38. Opportunity
cost

39. m.guardian.co.uk
Amazon
HTC LG
Sony
RIM
Apple
Samsung Nokia
3.3m daily page views
Apple 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

40. Discoverability
Discoverability in the AppStore,
over 700 000 apps.

41. 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/

42. Web

43. Web

44. Web
You already
have it

45. Web

46. Web

47. Web
Cheaper to
build

48. Web

49. Web
Open standards not controlled by one company

50. Web
Vendor
independence
Open standards not controlled by one company

51. Web
Open standards not controlled by one company

52. Web

53. Web
Easy updates

54. Web

55. Web

56. Web
Future proof

57. Web

58. Discoverability

59. Payments

60. “Standards”

61. Hybrid

62. Hybrid
Native HTML5
wrapper inside

63. Hybrid

64. Hybrid

65. Hybrid
Access to
App store
device
distribution
features

66. Hybrid

67. Hybrid

68. Hybrid
Cross Not
platform native!

69. Hybrid

70. The story of
[30]

72. Hybrid:
HTML5+PhoneGap
Over 20x less than my current game in Objective C

73. Hybrid:
HTML5+PhoneGap
22k lines of JS
Over 20x less than my current game in Objective C

74. AppStore, worldwide
Released as open
source

75. github.com/wooga/Pocket-Island

76. JavaScript!

77. JavaScript!
•Development speed

78. JavaScript!
•Development speed
•Developer talent

79. JavaScript!
•Development speed
•Developer talent
•Community

80. “Write once,
run everywhere”

81. “Run everywhere” – either a lie or programs that worked equally badly everywhere

82. Sound, multitouch...
Sounds has been fixed in Safari 6, multitouch is being standardized right now.

83. Performance
12 FPS instead of 60

84. Conclusions
The web wasn’t the best platform for making mobile games in 2012.
[40]

85. “Every new
generation brings
radical new features,
and the Web will
always be behind on
those. So the cutting
edge is native.”
Ian Hickson,
editor
of the HTML spec
Do you really need the cutting edge?
Are you willing to pay for it?

86. Games

87. Games

88. Games

89. Games

90. Games

91. Operating
system!

92. WebAPI
WebSMS
WebTelephony
Power Management
Device Storage
WebPayment
Camera
Calendar
WebBluetooth
Vibration API
...
https://wiki.mozilla.org/WebAPI

93. 10 years
from now
In many ways mobile web is where the desktop web was 15 years ago.
But it is catching up.

94. 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.

95. 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.

96. 10 years
from now
In many ways mobile web is where the desktop web was 15 years ago.
But it is catching up.

97. Thank you!
www.szafranek.net wooga.com/jobs
@szafranek

98. Photo credits:
Crunchies2009
John Kannenberg
luisvilla