BayJax: Expanding Yahoo! Axis across 3 screens

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://github.com/yahoo/mojito-shaker

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-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 developmenthttp://www.bluefountainmedia.com/blog/how-to-be-successful-using-ab-and-multivariate-testing/

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-and-no-nitro/

A WebView loading remote content is not ﬁrst 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, Client)- Network (AT&T, verizon)- CPU (low, medium, high)- Foo / Bar / Baz (???)

Optimize per context

/Mojits/Foo/deﬁnition.json

What to do in an event of atrafﬁc surge?

/Mojits/Bar/deﬁnition.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-ofﬂine’) - Y.on(‘click’) - Y.on(‘orientationchange’) - Y.CL.on(‘query’) - Y.Foo

Adapt per:- Screen size (css media queries)- Orientation (landscape vs portrait)- Connection Speed (3G)- Memory (iOS memory warning)- Foo / Bar / Baz (???)

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

http://caridy.name	905
http://localhost	6
http://www.youtube.com	1
http://caridy.github.io	1

BayJax: Expanding Yahoo! Axis across 3 screens

by Caridy Patino on Jun 26, 2012

Accessibility

Categories

Upload Details

Usage Rights

4 Embeds 913

Statistics