war of the worlds: web or native? both!
TRANSCRIPT
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.
Who we are: WikiaWikia, Inc. San Francisco, CA
Wikia Sp.z.o.o., Poznańwww.wikia.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