Federico Lox Lucignano, War of the worlds web or native both


Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Federico Lox Lucignano, War of the worlds web or native both

  1. 1. War of the worlds: Web or Native? Both!How Wikia is working on re-launching their mobile appsusing a well calibrated mix ofweb and native appdevelopment on both iOS andAndroid
  2. 2. Federico "Lox" Lucignano Senior Lead EngineerDzień dobry IxDA :) Mobile & API Team - Wikia, Inc. federico@wikia-inc.com
  3. 3. Wikia, Inc. San Francisco, CA Wikia Sp.z.o.o., PoznańWho we are: Wikia www.wikia.com
  4. 4. www.wikia.com/Mobile apps@wikia-inc.comWho we are: Mobile & API team wikiaapps@gmail.com
  5. 5. www.wikia.com/Mobile apps@wikia-inc.comWho we are: Mobile & API team (for real) wikiaapps@gmail.com
  6. 6. www.wikia.com/Mobile/Wikiamobile www.wikia.com/Mobile/LyricWikiWhat do we do www.wikia.com/Mobile/GameGuides
  7. 7. www.wikia.com/Mobile/Wikiamobile www.wikia.com/Mobile/LyricWikiWhat do we do www.wikia.com/Mobile/GameGuides
  8. 8. The Mobile Nation is at war... actually it has always been ...
  9. 9. WWI: Fixed vs Mobile
  10. 10. 1 - 0 for Mobile
  11. 11. WWII: Smart vs Feature
  12. 12. Episode III: Phones wars
  13. 13. Lets keep the ball trolling rolling...
  14. 14. Web started from a privilegedIn the beginning there was no position, but apps have been growing fastclear winner...
  15. 15. But "app" nowadays doesnt... but after a while apps took mean just "native", what about "hybrid" solutions?control of the users time
  16. 16. Four degrees of hybrid-nessThe quest for the sweet spot in mobile development
  17. 17. First things first: what is "hybrid"?
  18. 18. What are the implications?
  19. 19. The limits ofLeaving in a golden cage hybrid solutions Hybrid
  20. 20. The three four great orders Web apps Hybrid - web Hybrid - mixed Native apps Device APIs Device APIsMobile Browser + + Device APIs + Native shell Native shell + Web + + Native code Web Web <=> Native
  21. 21. This graphics tries to cateogorize some popular appsWhat does XYZs app use? in one of the 4 categories
  22. 22. 5 is the answerHybrid app development @ Wikia
  23. 23. Native web The sweet spot of mobileBreaking out the limits development Native web
  24. 24. Introducing PontoThe 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. 25. Taking advantage of Webkits cross-platformWhats under the hood? features Webkits JavascriptBridge message callback HTML5Webview Native code Device APIs + CSS3 + JavaScript message callback
  26. 26. What is the impactYeah... sure... on the user experience?
  27. 27. Dont do it just forThings to watch out for the LULz● Webviews are slow on older devices and OS versions, keep your JS/HTML/CSS light● Animations arent always smooth● Switching to a Webview in the app flow is not glitchless by default● JS failure in the Webview needs special care
  28. 28. Lets take a look at a realAnd now for something totally different world example Talk is cheap, SHOW ME THE DEMO!
  29. 29. From web to native...... and back to web
  30. 30. How native appsPayback time: put some app in your influence mobile web developmentmobile site
  31. 31. How keeping designers, mobileDivide & conquer? Unite and web developers and native app developers together results ininspire! a great UX● Animations and transitions● Gestures● Media as a first class citizen● Contextes● UI elements and paradigms● Typography● Simplicity and readability● Performance
  32. 32. You bet, time for another demo!
  33. 33. Questions?Thanks for staying awake :)