To HTML5 or Not to HTML5?Designing for Cross Platform Mobile

Experiences

Who are we?Derrick Morton, CEO, FlowPlay

20 years in game development, 17 years online development

Past companies – GameHouse, RealNetworks, iWin, Vivendi Universal Games

Douglas Pearson, CTO, FlowPlayPh.D. from Univ of Michigan in A.I.Founded company focused on mobile games

before they were easy12 years in casual game development

Who is FlowPlay?Casual game company focusing on virtual

worlds45 people in SeattleEstablished in 2006Funded by Intel Capital and the creators of

Skype

Who is FlowPlay?

Who is FlowPlay?

Don’t BlinkThe Past Five Years have seen incredible

technology changesNew Hardware Types – Tablets, Touchscreen

Laptops, SmartphonesNew Operating Systems – Rise of iOS and

AndroidNew Devices of Every Shape and SizeMigration from Desktop to Mobile Internet

Why cross platform?

Why cross platform?

Why cross platform?

Why cross platform?

What are the biggest issues?

IDC Poll of 3,500 Mobile Developers

What are you building?

Visual Complexity

Text &Simple Forms

Lots of StaticImages

2D games orenvironments

3D games orenvironments

How much money do you have?

Pots of gold

2 guys ingarage

10 guys withSeed funding

25 guys withVC backing

1000 guyspublic company

How technical is your team?Is somebody else building it for you?

Who is it for?

Target audience

B2B orInternal only

Your existingaudience

Mass marketNew and existing

How will they find it?

Audience source

B2B orInternal only

Search(SEO, SEM, app store positioning etc.)

Marketing campaigns(web, in-app ads, etc.)

Cross-platform – so which platforms?

Mobile

DesktopWeb

PCsConsoles

Cross-platform – so which platforms?

+ Android Phones

iPhone

+ Android Tablets

iPads

iOS

Mobile

Cross-platform – so which platforms?1. Just iOS2. Just mobile (iOS + Android)3. Mobile + PC/Console (e.g. games)

4. Mobile + Web (e.g. lots of interactive)

5. Mobile + Web + PC/Console (e.g. going really wide)

Available solutionsHTML5 viewed in browser on phoneHTML5 wrapped into app

(PhoneGap/Appcelerator etc.)Native appsUnityMarmaladeOpenFL (or Gingee)Flash/Air(And lots more…)

Major decision

Choice

App(Lots of choices)

No App(HTML5)

HTML5 viewed in a browserWhat is it?

JavaScript applicationRendering into a “canvas” (HTML5)Viewed in a browser (normal “web”

experience)

HTML5 viewed in a browserPros

One codebase that works everywhereFuture proof

HTML5 not going awayLots of industry support

Steadily better and better performanceDon’t pay 30% to Apple or Google

HTML5 viewed in a browserCons

Browsers can be fickle. Esp Internet Explorer (~40% market share on desktop) HTML5 is a loose standard – optional features, variable

support Browser release can break the app

Performance will likely be significantly worse than almost all other solutions Likely to be a big deal on mobile – if a highly interactive app

No access to native featuresNo access to app storeApple doesn’t want this to succeed

No rev share if you are in a browser, not an app They could kill off successful browser “apps” if they wished

HTML5 wrapped into an appWhat is it?

JavaScript applicationRendering into a “canvas” (HTML5)Built as an app that contains an embedded

browserPhoneGap, Appcelerator,… etc.Sometimes called “Hybrid”

HTML5 wrapped into an appPros

One codebase that works everywhereHave access to native features (via app

integration layer)Less browser variability (as embedding the

browser)Quick to market (esp. if existing web app)App store presence – discovery etc.

HTML5 wrapped into an appCons

Performance, performance, performance Likely to be a big deal on mobile – if a highly interactive

appWorse experience than your competitorsStill got to worry about Internet Explorer on

desktop Limited HTML5 support, nasty compatibility libraries

Facebook dropped this approach in a high profile move

Generally an “OK” rather than “Great” product solution

Native applicationsWhat is it?

Custom solution for each targeted platformiOS: Objective C and/or SwiftAndroid: Java applicationWeb: HTML or FlashPC/Console: C++

Native applicationsPros:

Fastest possible performanceAccess to every platform featureBest possible solution on each platform

Native applicationsCons:

Many separate codebases Bugs/issues in one may not appear in others Feature additions need to be made separately in each codebase Different tools and production paths, different platform

capabilitiesDivides engineering team skillsSlower to marketHard to be agile. Much easier if doing waterfall.May lead to a “ports” model where 1 version is great and

rest are so-soNew technologies require all new port (e.g. Windows

phone, Tizen (Samsung))

UnityWhat is it?

A cross-platform game development tool3D rendering engine primarily but adding 2D

supportCode written in C#

UnityPros

Impressive 3D engine performance on all platforms

Single implementation deployed everywhereCross compiles as a native app on mobile so

native customizations are possible“Future proof” against new platforms

becoming popularHuge developer community

UnityCons

Web support is a problemC# => C++ => JavaScript (asm.js a subset of

JavaScript)Amazing technology, but result is a very large

executable (~10MB for “hello world”)Internet Explorer support is still missingBrowsers dropping plug-in support

MarmaladeWhat is it?

A cross-platform SDKPrimarily targeting existing C++ apps/gamesCross compile for iOS, Android, PC/ConsoleJavaScript SDK for web

MarmaladePros

Single code baseNative performance (since C++)

ConsC++ is a tough language to develop in (1990s

vs 2010s)Slower development (in exchange for faster

performance)Web support seems unclear?

OpenFL / GingeeWhat are they?

Cross compiler solutions Actionscript (or Haxe) => C++ or JavaScript

One set of source code => Native apps => HTML5 => …

OpenFL is open sourceGingee includes “liquid UI” to scale/relayout

elements on a per-platform basis

OpenFL / GingeePros

Single implementation deployed everywhereCross compiles as a native app on mobile so native

customizations are possible“Future proof” against new platforms becoming

popularCan target HTML5 and Flash for web

ConsGingee is closed source. Small startup.OpenFL is a small team/communityLimited documentation/supportSomewhat unproven

Flash / AirWhat is it?

Actionscript programming languageRuns in Flash plugin in browserRuns as Air application on desktop/mobile

Works fine on iOS contrary to rumors…

Flash / AirPros

Single implementation deployed everywhereAccess to native features (via ANEs)Supports iOS (common confusion)Now with GPU support95%+ installed plugin supportMature and stable platform. Lots of

documentation etc.

Flash / AirCons

Flash perceived as “old tech”Browser support could be dropped in the

futureSlower performance than native (esp if no GPU

support)Higher memory usage

Potential Conclusions?

Apps vs Mobile Web

http://www.flurry.com/bid/109749/Apps-Solidify-Leadership-Six-Years-into-the-Mobile-Revolution

HTML5 interest declining?

http://www.appcelerator.com.s3.amazonaws.com/pdf/q4-2013-devsurvey.pdf

“Very interested” in HTML572.7% in July 201259.9% in Nov 2013

Browser compatibility issues

Performance problemsStill correct choice in

some cases

How much money do you have?

2 guys ingarage

10 guys withSeed funding

25 guys withVC backing

1000 guyspublic company

Native apps

(maybe)

A cross-platform toolkit or language

(not native)

Anything

What are you building?Text &

Simple FormsLots of Static

Images2D games orenvironments

3D games orenvironments

HTML5 in browserHTML5 wrapped as app

UnityUnityFlash+AirOpenFL

How important is the web?Not really

(Just mobile)(Mobile + PC/Console)

VeryImportant

UnityMarmalade

HTML5Flash+AirOpenFL

What are we doing?Flash + Air for tablets and web

Moving now to GPU accelerated performance Redesign of UI to better support tablets

OpenFL for handsets Somewhat experimental but could be good long

term

Questions / Comments?