Caridy PatinoPrincipal Frontend at Yahoo! SearchYUI EvangelistMojito Ambassadorcaridy@yahoo-inc.com@caridy
Expanding Yahoo! Axis  across 3 screens
Axis(codename SearchX)
From day one:                       ? iPhone/iPad/Desktop
Build mobile products on top ofplatforms designed primarily for        mobile products
Yahoo! Cocktails is set to become the de factoinfrastructure for mobile applications at Yahoo!
Yahoo! Cocktails Umbrella
Mojito JavaScript                Application                Frameworkhttp://github.com/yahoo/mojito
ManhattanHosting infrastructure forNode.js applications.
Manhattan Stack
Mojito Shaker                     Shaker is a static asset rollup                     manager for Mojito applications.http...
Axisthe making
"write once, deploy everywhere"
Can you imagine a car that works exceptionallywell under any condition?
"write once, deploy everywhere"
"divide & conquer"
Analyze each piece individually
vsNative        Web
+Native       Web
vsCompiled        Web-based
vs$ mojito build        $ mojito start
... then for each piece              decide between:              vs              vsNative             Compiled        Web...
Where to put the shared logic?
REUSEREDUCERECYCLEREPLACE
How to connect those pieces together?               “Y.CL”
Pros and Cons
Reduce fragmentation
No need to issue an app update
Some webviews might need to berefreshed when restoring the app
Easy to ramp-up for web developers
Ideal for experiment-driven developmenthttp://www.bluefountainmedia.com/blog/how-to-be-successful-using-ab-and-multivariat...
It is all about control
Network failures need to be controlled
Initialization needs to be controlledhttp://blog.mobtest.com/2012/05/heres-why-the-facebook-ios-app-is-so-bad-uiwebviews-a...
A WebView loading remote content   is not first class citizen in iOS
Loading over the network is still easier and safer than stepping into the gray area of       auto-upgrading HTML5 apps
Optimization vs Adaptation
Optimization vs Adaptation         Analogy
Optimization in Mojito
Performance as a product feature
Optimization in Mojito is about customizing the way your productbehaves per runtime and per request.
It is about producing the right HTML, JS  and CSS per runtime and per request.
Mojito Runtimes
Mojito Context- Locale (en-US. pt-BR)- Environment (staging, qa, prod)- Device type (iphone, ipad)- Runtime (Server, Clien...
Optimize per context
/Mojits/Foo/definition.json
What to do in an event of atraffic surge?
/Mojits/Bar/definition.json
Control your dimensions in Mojito
/dimensions.json
Adaptation in Mojito
Adaptability as a product feature
Adaptation in Mojito is aboutcustomizing the UI per screen size,per connection speed, per feature          detection, etc.
It is about responsive UI
In Mojito,YUI covers alot in terms of adaptation: - YUI().use(‘cache-offline’) - Y.on(‘click’) - Y.on(‘orientationchange’) ...
Adapt per:- Screen size (css media queries)- Orientation (landscape vs portrait)- Connection Speed (3G)- Memory (iOS memor...
Let’s recap
Axis runs on Yahoo! Cocktails
Axis is some sort of hybrid applicationcomposed of independent small native           and HTML5 apps
HTML5 parts were written onYahoo! Mojito, an open source    application framework  on top of YUI and Node.js
Axis leverages Mojito context tooptimize and adapt those HTML5 parts
Axis leverages Y.CL as the maininfrastructure to connect different parts
Thank you!   @caridy
BayJax: Expanding Yahoo! Axis across 3 screens
BayJax: Expanding Yahoo! Axis across 3 screens
BayJax: Expanding Yahoo! Axis across 3 screens
Upcoming SlideShare
Loading in...5
×

BayJax: Expanding Yahoo! Axis across 3 screens

1,883

Published 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 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.

Published in: Technology, Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,883
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
2
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

BayJax: Expanding Yahoo! Axis across 3 screens

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

    Clipping is a handy way to collect important slides you want to go back to later.

×