How Wikia is working on re-launching their mobile apps using a well calibrated mix of web and native app development on both iOS and Android

War of the worlds: Web or Native? Both!

Dzień dobry IxDA :)Federico "Lox" Lucignano

Senior Lead EngineerMobile & API Team - Wikia, Inc.

federico@wikia-inc.com

Who we are: WikiaWikia, Inc. San Francisco, CA

Wikia Sp.z.o.o., Poznańwww.wikia.com

Who we are: Mobile & API teamwww.wikia.com/Mobile

apps@wikia-inc.comwikiaapps@gmail.com

Who we are: Mobile & API team (for real)www.wikia.com/Mobile

apps@wikia-inc.comwikiaapps@gmail.com

What do we dowww.wikia.com/Mobile/Wikiamobile

www.wikia.com/Mobile/LyricWikiwww.wikia.com/Mobile/GameGuides

What do we dowww.wikia.com/Mobile/Wikiamobile

www.wikia.com/Mobile/LyricWikiwww.wikia.com/Mobile/GameGuides

... actually it has always been ...

The Mobile Nation is at war

WWI: Fixed vs Mobile

1 - 0 for Mobile

WWII: Smart vs Feature

Episode III: Phones wars

Let's keep the ball trolling rolling...

In the beginning there was no clear winner...

Web started from a privileged position, but apps have been

growing fast

... but after a while apps took control of the users' time

But "app" nowadays doesn't mean just "native", what about

"hybrid" solutions?

The quest for the sweet spot in mobile development

Four degrees of hybrid-ness

First things first: what is "hybrid"?

What are the implications?

Leaving in a golden cageThe limits of

hybrid solutions

Hybrid

The three four great orders

Mobile Browser

+

Web

Device API's

+

Native shell

+

Web

Device API's

+

Native shell

+

Web <=> Native

Device API's

+

Native code

Web apps Hybrid - web Hybrid - mixed Native apps

What does XYZ's app use?This graphics tries to

cateogorize some popular apps in one of the 4 categories

Hybrid app development @ Wikia

5 is the answer

Breaking out the limitsNative web

The sweet spot of mobile development

Native web

The fifth partyIntroducing Ponto

github.com/wikiaapps/Ponto

- Free (as in "free beer")

- Open (as in "open source")

- Secure (as in "sandbox")

- 100% native, 100% web

What's under the hood?Taking advantage of

Webkit's cross-platformfeatures

HTML5+

CSS3+

JavaScript

Native code

message

callback

callback

message

Webkit's JavascriptBridge

Device API'sWebview

Yeah... sure...What is the impact

on the user experience?

Things to watch out forDon't do it just for

the LULz

● Webviews are slow on older devices and OS versions, keep your JS/HTML/CSS light

● Animations aren't always smooth

● Switching to a Webview in the app flow is not glitchless by default

● JS failure in the Webview needs special care

And now for something totally differentLet's take a look at a real

world example

Talk is cheap,SHOW ME

THE DEMO!

... and back to web

From web to native...

Payback time: put some app in your mobile site

How native appsinfluence mobile web

development

● Animations and transitions● Gestures● Media as a first class citizen● Contextes● UI elements and paradigms● Typography● Simplicity and readability● Performance

Divide & conquer? Unite and inspire!

How keeping designers, mobile web developers and native app developers together results in

a great UX

You bet, time for another demo!

Thanks for staying awake :) Questions?

Join us!We're hiring in Poznańwww.wikia.com/Hiring