BayJax: Expanding Yahoo! Axis across 3 screens
2 likes1,086 views
The document outlines Caridy Patino's role at Yahoo! as a principal frontend developer and Mojito ambassador, detailing the expansion of Yahoo! Axis across multiple screens using the Mojito framework. It discusses the strategy of building mobile products optimized for various devices and environments while addressing the challenges of adaptation and optimization in web applications. The document concludes by emphasizing the hybrid nature of Axis, combining native and HTML5 components with a focus on responsive design and performance.
BayJax: Expanding Yahoo! Axis across 3 screens
- 1. Caridy Patino Principal Frontend at Yahoo! Search YUI Evangelist Mojito Ambassador [email protected] @caridy
- 2. Expanding Yahoo! Axis across 3 screens
- 4. From day one: ? iPhone/iPad/Desktop
- 5. Build mobile products on top of platforms designed primarily for mobile products
- 7. Yahoo! Cocktails is set to become the de facto infrastructure for mobile applications at Yahoo!
- 9. Mojito JavaScript Application Framework http://github.com/yahoo/mojito
- 10. Manhattan Hosting infrastructure for Node.js applications.
- 11. Manhattan Stack
- 12. Mojito Shaker Shaker is a static asset rollup manager for Mojito applications. http://github.com/yahoo/mojito-shaker
- 13. Axis the making
- 14. "write once, deploy everywhere"
- 15. Can you imagine a car that works exceptionally well under any condition?
- 16. "write once, deploy everywhere"
- 20. Analyze each piece individually
- 21. vs Native Web
- 22. + Native Web
- 23. vs Compiled Web-based
- 24. vs $ mojito build $ mojito start
- 25. ... then for each piece decide between: vs vs Native Compiled Web-based
- 26. Where to put the shared logic?
- 28. How to connect those pieces together? “Y.CL”
- 29. Pros and Cons
- 31. No need to issue an app update
- 32. Some webviews might need to be refreshed when restoring the app
- 33. Easy to ramp-up for web developers
- 34. Ideal for experiment-driven development http://www.bluefountainmedia.com/blog/how-to-be-successful-using-ab-and-multivariate-testing/
- 35. It is all about control
- 36. Network failures need to be controlled
- 37. Initialization needs to be controlled http://blog.mobtest.com/2012/05/heres-why-the-facebook-ios-app-is-so-bad-uiwebviews-and-no-nitro/
- 38. A WebView loading remote content is not first class citizen in iOS
- 39. Loading over the network is still easier and safer than stepping into the gray area of auto-upgrading HTML5 apps
- 41. Optimization vs Adaptation Analogy
- 43. Performance as a product feature
- 44. Optimization in Mojito is about customizing the way your product behaves per runtime and per request.
- 45. It is about producing the right HTML, JS and CSS per runtime and per request.
- 46. Mojito Runtimes
- 47. Mojito Context - Locale (en-US. pt-BR) - Environment (staging, qa, prod) - Device type (iphone, ipad) - Runtime (Server, Client) - Network (AT&T, verizon) - CPU (low, medium, high) - Foo / Bar / Baz (???)
- 50. What to do in an event of a traffic surge?
- 52. Control your dimensions in Mojito
- 53. /dimensions.json
- 55. Adaptability as a product feature
- 56. Adaptation in Mojito is about customizing the UI per screen size, per connection speed, per feature detection, etc.
- 57. It is about responsive UI
- 58. In Mojito,YUI covers a lot in terms of adaptation: - YUI().use(‘cache-offline’) - Y.on(‘click’) - Y.on(‘orientationchange’) - Y.CL.on(‘query’) - Y.Foo
- 59. Adapt per: - Screen size (css media queries) - Orientation (landscape vs portrait) - Connection Speed (3G) - Memory (iOS memory warning) - Foo / Bar / Baz (???)
- 60. Let’s recap
- 61. Axis runs on Yahoo! Cocktails
- 62. Axis is some sort of hybrid application composed of independent small native and HTML5 apps
- 63. HTML5 parts were written on Yahoo! Mojito, an open source application framework on top of YUI and Node.js
- 64. Axis leverages Mojito context to optimize and adapt those HTML5 parts
- 65. Axis leverages Y.CL as the main infrastructure to connect different parts
- 66. Thank you! @caridy