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.

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