BayJax: Expanding Yahoo! Axis across 3 screens

Uploaded on

Axis (codename SearchX) has been a pure joy for our team to work on. It is one of the first projects at Yahoo! that runs on the new stack provided by the Cocktails infrastructure. Expanding Axis for …

Axis (codename SearchX) has been a pure joy for our team to work on. It is one of the first projects at Yahoo! that runs on the new stack provided by the Cocktails infrastructure. Expanding Axis for iPad, iPhone and all four major desktop browsers from day one, and using the brand new Mojito Application Framework has been a unique experience and today we want to walk you through some of the architecture decisions and lessons learned while trying to choose between a variety of choices like Hybrid vs Native vs Web. The paths we chose to achieve the level of maintainability and scalability required for such a large scale project, some of the UI optimizations we did along the way.

More in: Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Caridy PatinoPrincipal Frontend at Yahoo! SearchYUI EvangelistMojito
  • 2. Expanding Yahoo! Axis across 3 screens
  • 3. Axis(codename SearchX)
  • 4. From day one: ? iPhone/iPad/Desktop
  • 5. Build mobile products on top ofplatforms designed primarily for mobile products
  • 6. Yahoo! Cocktails is set to become the de factoinfrastructure for mobile applications at Yahoo!
  • 7. Yahoo! Cocktails Umbrella
  • 8. Mojito JavaScript Application Framework
  • 9. ManhattanHosting infrastructure forNode.js applications.
  • 10. Manhattan Stack
  • 11. Mojito Shaker Shaker is a static asset rollup manager for Mojito applications.
  • 12. Axisthe making
  • 13. "write once, deploy everywhere"
  • 14. Can you imagine a car that works exceptionallywell under any condition?
  • 15. "write once, deploy everywhere"
  • 16. "divide & conquer"
  • 17. Analyze each piece individually
  • 18. vsNative Web
  • 19. +Native Web
  • 20. vsCompiled Web-based
  • 21. vs$ mojito build $ mojito start
  • 22. ... then for each piece decide between: vs vsNative Compiled Web-based
  • 23. Where to put the shared logic?
  • 25. How to connect those pieces together? “Y.CL”
  • 26. Pros and Cons
  • 27. Reduce fragmentation
  • 28. No need to issue an app update
  • 29. Some webviews might need to berefreshed when restoring the app
  • 30. Easy to ramp-up for web developers
  • 31. Ideal for experiment-driven development
  • 32. It is all about control
  • 33. Network failures need to be controlled
  • 34. Initialization needs to be controlled
  • 35. A WebView loading remote content is not first class citizen in iOS
  • 36. Loading over the network is still easier and safer than stepping into the gray area of auto-upgrading HTML5 apps
  • 37. Optimization vs Adaptation
  • 38. Optimization vs Adaptation Analogy
  • 39. Optimization in Mojito
  • 40. Performance as a product feature
  • 41. Optimization in Mojito is about customizing the way your productbehaves per runtime and per request.
  • 42. It is about producing the right HTML, JS and CSS per runtime and per request.
  • 43. Mojito Runtimes
  • 44. 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 (???)
  • 45. Optimize per context
  • 46. /Mojits/Foo/definition.json
  • 47. What to do in an event of atraffic surge?
  • 48. /Mojits/Bar/definition.json
  • 49. Control your dimensions in Mojito
  • 50. /dimensions.json
  • 51. Adaptation in Mojito
  • 52. Adaptability as a product feature
  • 53. Adaptation in Mojito is aboutcustomizing the UI per screen size,per connection speed, per feature detection, etc.
  • 54. It is about responsive UI
  • 55. In Mojito,YUI covers alot in terms of adaptation: - YUI().use(‘cache-offline’) - Y.on(‘click’) - Y.on(‘orientationchange’) - Y.CL.on(‘query’) - Y.Foo
  • 56. Adapt per:- Screen size (css media queries)- Orientation (landscape vs portrait)- Connection Speed (3G)- Memory (iOS memory warning)- Foo / Bar / Baz (???)
  • 57. Let’s recap
  • 58. Axis runs on Yahoo! Cocktails
  • 59. Axis is some sort of hybrid applicationcomposed of independent small native and HTML5 apps
  • 60. HTML5 parts were written onYahoo! Mojito, an open source application framework on top of YUI and Node.js
  • 61. Axis leverages Mojito context tooptimize and adapt those HTML5 parts
  • 62. Axis leverages Y.CL as the maininfrastructure to connect different parts
  • 63. Thank you! @caridy