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.

1. Caridy Patino
Principal Frontend at Yahoo! Search
YUI Evangelist
Mojito Ambassador
caridy@yahoo-inc.com
@caridy

2. Expanding Yahoo! Axis
across 3 screens

3. Axis
(codename SearchX)

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!

8. Yahoo! Cocktails Umbrella

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"

17. "divide & conquer"

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?

27. REUSE
REDUCE
RECYCLE
REPLACE

28. How to connect those pieces together?
“Y.CL”

29. Pros and Cons

30. Reduce fragmentation

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

40. Optimization vs Adaptation

41. Optimization vs Adaptation
Analogy

42. Optimization in Mojito

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 (???)

48. Optimize per context

49. /Mojits/Foo/definition.json

50. What to do in an event of a
traffic surge?

51. /Mojits/Bar/definition.json

52. Control your dimensions in Mojito

53. /dimensions.json

54. Adaptation in Mojito

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