This document discusses Wikia's strategy for re-launching their mobile apps using a mix of web and native app development. It explores the benefits of using hybrid apps that combine web views with native platform features. Wikia is developing their new mobile apps using an open-source framework called Ponto, which allows building fully native apps using HTML, CSS and JavaScript. This approach aims to provide a great user experience by taking advantage of native platform capabilities while reusing web development skills.

1. War of the worlds: Web or Native? Both!
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

2. Federico "Lox" Lucignano
Senior Lead Engineer
Dzień dobry IxDA :) Mobile & API Team - Wikia, Inc.
federico@wikia-inc.com

3. Wikia, Inc. San Francisco, CA
Wikia Sp.z.o.o., Poznań
Who we are: Wikia www.wikia.com

4. www.wikia.com/Mobile
apps@wikia-inc.com
Who we are: Mobile & API team wikiaapps@gmail.com

5. www.wikia.com/Mobile
apps@wikia-inc.com
Who we are: Mobile & API team (for real) wikiaapps@gmail.com

6. www.wikia.com/Mobile/Wikiamobile
www.wikia.com/Mobile/LyricWiki
What do we do www.wikia.com/Mobile/GameGuides

7. www.wikia.com/Mobile/Wikiamobile
www.wikia.com/Mobile/LyricWiki
What do we do www.wikia.com/Mobile/GameGuides

8. The Mobile Nation is at war
... actually it has always been ...

9. WWI: Fixed vs Mobile

10. 1 - 0 for Mobile

11. WWII: Smart vs Feature

12. Episode III: Phones wars

13. Let's keep the ball trolling rolling...

14. Web started from a privileged
In the beginning there was no position, but apps have been
growing fast
clear winner...

15. But "app" nowadays doesn't
... but after a while apps took mean just "native", what about
"hybrid" solutions?
control of the users' time

16. Four degrees of hybrid-ness
The quest for the sweet spot in mobile development

17. First things first: what is "hybrid"?

18. What are the implications?

19. The limits of
Leaving in a golden cage hybrid solutions
Hybrid

20. The three four great orders
Web apps Hybrid - web Hybrid - mixed Native apps
Device API's Device API's
Mobile Browser
+ + Device API's
+
Native shell Native shell +
Web + + Native code
Web Web <=> Native

21. This graphics tries to
cateogorize some popular apps
What does XYZ's app use? in one of the 4 categories

22. 5 is the answer
Hybrid app development @ Wikia

23. Native web
The sweet spot of mobile
Breaking out the limits development
Native web

24. Introducing Ponto
The fifth party github.com/wikiaapps/Ponto
- Free (as in "free beer")
- Open (as in "open source")
- Secure (as in "sandbox")
- 100% native, 100% web

25. Taking advantage of
Webkit's cross-platform
What's under the hood? features
Webkit's JavascriptBridge
message
callback
HTML5
Webview Native code Device API's
+
CSS3
+
JavaScript message
callback

26. What is the impact
Yeah... sure... on the user experience?

27. Don't do it just for
Things to watch out 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

28. Let's take a look at a real
And now for something totally different world example
Talk is cheap,
SHOW ME
THE DEMO!

29. From web to native...
... and back to web

30. How native apps
Payback time: put some app in your influence mobile web
development
mobile site

31. How keeping designers, mobile
Divide & conquer? Unite and web developers and native app
developers together results in
inspire! a great UX
● Animations and transitions
● Gestures
● Media as a first class citizen
● Contextes
● UI elements and paradigms
● Typography
● Simplicity and readability
● Performance

32. You bet, time for another demo!

33. Questions?
Thanks for staying awake :)