Upload
caridy-patino
View
1.769
Download
0
Embed Size (px)
DESCRIPTION
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.
Citation preview
Caridy PatinoPrincipal Frontend at Yahoo! SearchYUI EvangelistMojito Ambassador
[email protected]@caridy
Expanding Yahoo! Axis across 3 screens
Axis(codename SearchX)
?
From day one:
iPhone/iPad/Desktop
Build mobile products on top of platforms designed primarily for
mobile products
Yahoo! Cocktails is set to become the de facto infrastructure for mobile applications at Yahoo!
Yahoo! Cocktails Umbrella
Mojito JavaScript Application Framework
http://github.com/yahoo/mojito
ManhattanHosting infrastructure for Node.js applications.
Manhattan Stack
Mojito ShakerShaker is a static asset rollup manager for Mojito applications.
http://github.com/yahoo/mojito-shaker
Axisthe making
"write once, deploy everywhere"
Can you imagine a car that works exceptionally well under any condition?
"write once, deploy everywhere"
"divide & conquer"
Analyze each piece individually
vs
Native Web
+
Native Web
vs
Compiled Web-based
vs
$ mojito build $ mojito start
vs vs
... then for each piecedecide between:
Native Compiled Web-based
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 development
http://www.bluefountainmedia.com/blog/how-to-be-successful-using-ab-and-multivariate-testing/
It is all about control
Network failures need to be controlled
http://blog.mobtest.com/2012/05/heres-why-the-facebook-ios-app-is-so-bad-uiwebviews-and-no-nitro/
Initialization needs to be controlled
A WebView loading remote contentis 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 AdaptationAnalogy
Optimization in Mojito
Performance as a product feature
Optimization in Mojito is about customizing the way your product
behaves 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, Client)
- Network (AT&T, verizon)- CPU (low, medium, high)- Foo / Bar / Baz (???)
Optimize per context
/Mojits/Foo/definition.json
What to do in an event of a traffic surge?
/Mojits/Bar/definition.json
Control your dimensions in Mojito
/dimensions.json
Adaptation in Mojito
Adaptability as a product feature
Adaptation in Mojito is about customizing the UI per screen size, per connection speed, per feature
detection, etc.
It is about responsive UI
- YUI().use(‘cache-offline’)- Y.on(‘click’)- Y.on(‘orientationchange’)- Y.CL.on(‘query’)- Y.Foo
In Mojito, YUI covers a lot in terms of adaptation:
- Screen size (css media queries)- Orientation (landscape vs portrait)- Connection Speed (3G)- Memory (iOS memory warning)- Foo / Bar / Baz (???)
Adapt per:
Let’s recap
Axis runs on Yahoo! Cocktails
Axis is some sort of hybrid application composed of independent small native
and HTML5 apps
HTML5 parts were written on Yahoo! Mojito, an open source
application frameworkon top of YUI and Node.js
Axis leverages Mojito context to optimize and adapt those HTML5 parts
Axis leverages Y.CL as the main infrastructure to connect different parts
Thank you! @caridy