+ All Categories
Home > Technology > What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

Date post: 20-Oct-2014
Category:
View: 2,996 times
Download: 1 times
Share this document with a friend
Description:
 
Popular Tags:
98
What Lies Ahead for HTML5? Krzysztof Szafranek Wooga GmbH @szafranek
Transcript
Page 1: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

What Lies Ahead for HTML5?

Krzysztof SzafranekWooga GmbH

@szafranek

Page 2: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

[ˈ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 of HTML5_Ooop Munich 2013_Krzysztof Szafranek

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

Page 4: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

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 of HTML5_Ooop Munich 2013_Krzysztof Szafranek

The language

< >

Page 6: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

Next iteration of the HTML language

Markup language for structuring and presenting content for the World Wide Web.

Page 7: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

<video>

<audio>

Page 8: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

<canvas>

Page 9: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

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 of HTML5_Ooop Munich 2013_Krzysztof Szafranek

The buzzword

[5]

Page 11: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

3D

WebGLDemo: 3D race car

Page 12: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

Media

video, audioScreenshot: mobile YouTube

Page 13: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

Offline

Screenshot: Twitter mobile

Page 14: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

CSS3

Page 15: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

Network

WebSockets, server-sent events, XHR2Screenshot: Facebook chat

Page 16: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

Devices

Microphone, cameraDemo: speech recognition

Page 17: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

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 of HTML5_Ooop Munich 2013_Krzysztof Szafranek

http://html5awesome.com/

Page 19: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

mobile

[15]Mobile doesn’t necessarily mean phone!

Page 20: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

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 of HTML5_Ooop Munich 2013_Krzysztof Szafranek

0

7.5

15

22.5

30

% of traffic coming from mobile

24.04

14.3320112012

Black Friday 2012

Page 22: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

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 of HTML5_Ooop Munich 2013_Krzysztof Szafranek

... 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 of HTML5_Ooop Munich 2013_Krzysztof Szafranek

Web or native?

Page 25: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

Native

Page 26: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

Native

Page 27: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

Native

Performance

Page 28: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

Native

Page 29: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

Native

Page 30: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

Access to device features

Native

Page 31: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

Native

Page 32: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

Native

Page 33: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

Distribution throughan app store

Native

Page 34: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

Native

Page 35: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

Native

Page 36: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

Payments

Native

Page 37: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

Native

Page 38: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

Opportunity cost

Page 39: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

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 of HTML5_Ooop Munich 2013_Krzysztof Szafranek

Discoverability

Discoverability in the AppStore,over 700 000 apps.

Page 41: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

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 of HTML5_Ooop Munich 2013_Krzysztof Szafranek

Web

Page 43: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

Web

Page 44: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

Web

You already have it

Page 45: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

Web

Page 46: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

Web

Page 47: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

Web

Cheaper to build

Page 48: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

Web

Page 49: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

Web

Open standards not controlled by one company

Page 50: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

Web

Vendor independence

Open standards not controlled by one company

Page 51: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

Web

Open standards not controlled by one company

Page 52: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

Web

Page 53: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

Web

Easy updates

Page 54: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

Web

Page 55: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

Web

Page 56: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

Web

Future proof

Page 57: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

Web

Page 58: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

Discoverability

Page 59: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

Payments

Page 60: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

“Standards”

Page 61: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

Hybrid

Page 62: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

Hybrid

HTML5 inside

Native wrapper

Page 63: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

Hybrid

Page 64: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

Hybrid

Page 65: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

Hybrid

App store distribution

Access to device

features

Page 66: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

Hybrid

Page 67: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

Hybrid

Page 68: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

Hybrid

Cross platform

Notnative!

Page 69: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

Hybrid

Page 70: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

The story of

[30]

Page 71: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek
Page 72: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

Hybrid: HTML5+PhoneGap

Over 20x less than my current game in Objective C

Page 73: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

Hybrid: HTML5+PhoneGap

22k lines of JS

Over 20x less than my current game in Objective C

Page 74: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

AppStore, worldwide

Released as open source

Page 75: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

github.com/wooga/Pocket-Island

Page 76: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

JavaScript!

Page 77: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

JavaScript!

•Development speed

Page 78: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

JavaScript!

•Developer talent

•Development speed

Page 79: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

JavaScript!

•Community

•Developer talent

•Development speed

Page 80: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

“Write once, run everywhere”

Page 81: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

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

Page 82: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

Sound, multitouch...

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

Page 83: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

Performance

12 FPS instead of 60

Page 84: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

Conclusions

The web wasn’t the best platform for making mobile games in 2012.

[40]

Page 85: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

“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 of HTML5_Ooop Munich 2013_Krzysztof Szafranek

Games

Page 87: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

Games

Page 88: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

Games

Page 89: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

Games

Page 90: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

Games

Page 91: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

Operating system!

Page 92: What lies ahead of HTML5_Ooop Munich 2013_Krzysztof Szafranek

WebAPIWebSMSWebTelephonyPower ManagementDevice StorageWebPaymentCameraCalendarWebBluetoothVibration API...

https://wiki.mozilla.org/WebAPI


Recommended