Federico Lox Lucignano, War of the worlds web or native both
-
Upload
ixdapoznan -
Category
Documents
-
view
617 -
download
0
Transcript of Federico Lox Lucignano, War of the worlds web or native both
![Page 1: Federico Lox Lucignano, War of the worlds web or native both](https://reader033.fdocuments.in/reader033/viewer/2022060110/5560b494d8b42afe3b8b48d3/html5/thumbnails/1.jpg)
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!
![Page 2: Federico Lox Lucignano, War of the worlds web or native both](https://reader033.fdocuments.in/reader033/viewer/2022060110/5560b494d8b42afe3b8b48d3/html5/thumbnails/2.jpg)
Dzień dobry IxDA :)Federico "Lox" Lucignano
Senior Lead EngineerMobile & API Team - Wikia, Inc.
![Page 3: Federico Lox Lucignano, War of the worlds web or native both](https://reader033.fdocuments.in/reader033/viewer/2022060110/5560b494d8b42afe3b8b48d3/html5/thumbnails/3.jpg)
Who we are: WikiaWikia, Inc. San Francisco, CA
Wikia Sp.z.o.o., Poznańwww.wikia.com
![Page 6: Federico Lox Lucignano, War of the worlds web or native both](https://reader033.fdocuments.in/reader033/viewer/2022060110/5560b494d8b42afe3b8b48d3/html5/thumbnails/6.jpg)
What do we dowww.wikia.com/Mobile/Wikiamobile
www.wikia.com/Mobile/LyricWikiwww.wikia.com/Mobile/GameGuides
![Page 7: Federico Lox Lucignano, War of the worlds web or native both](https://reader033.fdocuments.in/reader033/viewer/2022060110/5560b494d8b42afe3b8b48d3/html5/thumbnails/7.jpg)
What do we dowww.wikia.com/Mobile/Wikiamobile
www.wikia.com/Mobile/LyricWikiwww.wikia.com/Mobile/GameGuides
![Page 8: Federico Lox Lucignano, War of the worlds web or native both](https://reader033.fdocuments.in/reader033/viewer/2022060110/5560b494d8b42afe3b8b48d3/html5/thumbnails/8.jpg)
... actually it has always been ...
The Mobile Nation is at war
![Page 9: Federico Lox Lucignano, War of the worlds web or native both](https://reader033.fdocuments.in/reader033/viewer/2022060110/5560b494d8b42afe3b8b48d3/html5/thumbnails/9.jpg)
WWI: Fixed vs Mobile
![Page 10: Federico Lox Lucignano, War of the worlds web or native both](https://reader033.fdocuments.in/reader033/viewer/2022060110/5560b494d8b42afe3b8b48d3/html5/thumbnails/10.jpg)
1 - 0 for Mobile
![Page 11: Federico Lox Lucignano, War of the worlds web or native both](https://reader033.fdocuments.in/reader033/viewer/2022060110/5560b494d8b42afe3b8b48d3/html5/thumbnails/11.jpg)
WWII: Smart vs Feature
![Page 12: Federico Lox Lucignano, War of the worlds web or native both](https://reader033.fdocuments.in/reader033/viewer/2022060110/5560b494d8b42afe3b8b48d3/html5/thumbnails/12.jpg)
Episode III: Phones wars
![Page 13: Federico Lox Lucignano, War of the worlds web or native both](https://reader033.fdocuments.in/reader033/viewer/2022060110/5560b494d8b42afe3b8b48d3/html5/thumbnails/13.jpg)
Let's keep the ball trolling rolling...
![Page 14: Federico Lox Lucignano, War of the worlds web or native both](https://reader033.fdocuments.in/reader033/viewer/2022060110/5560b494d8b42afe3b8b48d3/html5/thumbnails/14.jpg)
In the beginning there was no clear winner...
Web started from a privileged position, but apps have been
growing fast
![Page 15: Federico Lox Lucignano, War of the worlds web or native both](https://reader033.fdocuments.in/reader033/viewer/2022060110/5560b494d8b42afe3b8b48d3/html5/thumbnails/15.jpg)
... but after a while apps took control of the users' time
But "app" nowadays doesn't mean just "native", what about
"hybrid" solutions?
![Page 16: Federico Lox Lucignano, War of the worlds web or native both](https://reader033.fdocuments.in/reader033/viewer/2022060110/5560b494d8b42afe3b8b48d3/html5/thumbnails/16.jpg)
The quest for the sweet spot in mobile development
Four degrees of hybrid-ness
![Page 17: Federico Lox Lucignano, War of the worlds web or native both](https://reader033.fdocuments.in/reader033/viewer/2022060110/5560b494d8b42afe3b8b48d3/html5/thumbnails/17.jpg)
First things first: what is "hybrid"?
![Page 18: Federico Lox Lucignano, War of the worlds web or native both](https://reader033.fdocuments.in/reader033/viewer/2022060110/5560b494d8b42afe3b8b48d3/html5/thumbnails/18.jpg)
What are the implications?
![Page 19: Federico Lox Lucignano, War of the worlds web or native both](https://reader033.fdocuments.in/reader033/viewer/2022060110/5560b494d8b42afe3b8b48d3/html5/thumbnails/19.jpg)
Leaving in a golden cageThe limits of
hybrid solutions
Hybrid
![Page 20: Federico Lox Lucignano, War of the worlds web or native both](https://reader033.fdocuments.in/reader033/viewer/2022060110/5560b494d8b42afe3b8b48d3/html5/thumbnails/20.jpg)
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
![Page 21: Federico Lox Lucignano, War of the worlds web or native both](https://reader033.fdocuments.in/reader033/viewer/2022060110/5560b494d8b42afe3b8b48d3/html5/thumbnails/21.jpg)
What does XYZ's app use?This graphics tries to
cateogorize some popular apps in one of the 4 categories
![Page 22: Federico Lox Lucignano, War of the worlds web or native both](https://reader033.fdocuments.in/reader033/viewer/2022060110/5560b494d8b42afe3b8b48d3/html5/thumbnails/22.jpg)
Hybrid app development @ Wikia
5 is the answer
![Page 23: Federico Lox Lucignano, War of the worlds web or native both](https://reader033.fdocuments.in/reader033/viewer/2022060110/5560b494d8b42afe3b8b48d3/html5/thumbnails/23.jpg)
Breaking out the limitsNative web
The sweet spot of mobile development
Native web
![Page 24: Federico Lox Lucignano, War of the worlds web or native both](https://reader033.fdocuments.in/reader033/viewer/2022060110/5560b494d8b42afe3b8b48d3/html5/thumbnails/24.jpg)
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
![Page 25: Federico Lox Lucignano, War of the worlds web or native both](https://reader033.fdocuments.in/reader033/viewer/2022060110/5560b494d8b42afe3b8b48d3/html5/thumbnails/25.jpg)
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
![Page 26: Federico Lox Lucignano, War of the worlds web or native both](https://reader033.fdocuments.in/reader033/viewer/2022060110/5560b494d8b42afe3b8b48d3/html5/thumbnails/26.jpg)
Yeah... sure...What is the impact
on the user experience?
![Page 27: Federico Lox Lucignano, War of the worlds web or native both](https://reader033.fdocuments.in/reader033/viewer/2022060110/5560b494d8b42afe3b8b48d3/html5/thumbnails/27.jpg)
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
![Page 28: Federico Lox Lucignano, War of the worlds web or native both](https://reader033.fdocuments.in/reader033/viewer/2022060110/5560b494d8b42afe3b8b48d3/html5/thumbnails/28.jpg)
And now for something totally differentLet's take a look at a real
world example
Talk is cheap,SHOW ME
THE DEMO!
![Page 29: Federico Lox Lucignano, War of the worlds web or native both](https://reader033.fdocuments.in/reader033/viewer/2022060110/5560b494d8b42afe3b8b48d3/html5/thumbnails/29.jpg)
... and back to web
From web to native...
![Page 30: Federico Lox Lucignano, War of the worlds web or native both](https://reader033.fdocuments.in/reader033/viewer/2022060110/5560b494d8b42afe3b8b48d3/html5/thumbnails/30.jpg)
Payback time: put some app in your mobile site
How native appsinfluence mobile web
development
![Page 31: Federico Lox Lucignano, War of the worlds web or native both](https://reader033.fdocuments.in/reader033/viewer/2022060110/5560b494d8b42afe3b8b48d3/html5/thumbnails/31.jpg)
● 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
![Page 32: Federico Lox Lucignano, War of the worlds web or native both](https://reader033.fdocuments.in/reader033/viewer/2022060110/5560b494d8b42afe3b8b48d3/html5/thumbnails/32.jpg)
You bet, time for another demo!
![Page 33: Federico Lox Lucignano, War of the worlds web or native both](https://reader033.fdocuments.in/reader033/viewer/2022060110/5560b494d8b42afe3b8b48d3/html5/thumbnails/33.jpg)
Thanks for staying awake :) Questions?