Caridy Patino
Principal Frontend at Yahoo! Search
YUI Evangelist
Mojito Ambassador

caridy@yahoo-inc.com
@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
BayJax: Expanding Yahoo! Axis across 3 screens
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
Manhattan
Hosting infrastructure for
Node.js applications.
Manhattan Stack
Mojito Shaker
                     Shaker is a static asset rollup
                     manager for Mojito applications.




http://github.com/yahoo/mojito-shaker
Axis
the making
"write once, deploy everywhere"
Can you imagine a car that works exceptionally
well under any condition?
"write once, deploy everywhere"
"divide & conquer"
BayJax: Expanding Yahoo! Axis across 3 screens
BayJax: Expanding Yahoo! Axis across 3 screens
Analyze each piece individually
vs

Native        Web
+

Native       Web
vs

Compiled        Web-based
vs

$ mojito build        $ mojito start
... then for each piece
              decide between:



              vs              vs

Native             Compiled        Web-based
Where to put the shared logic?
REUSE
REDUCE
RECYCLE
REPLACE
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 be
refreshed 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
Initialization needs to be controlled




http://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 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 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
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
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 application
composed of independent small native
           and HTML5 apps
HTML5 parts were written on
Yahoo! Mojito, an open source
    application framework
  on 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

More Related Content

PDF
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
PDF
(2015년 상반기) HTML5 및 Hybrid app 최신 동향
PDF
Responsive Navigation Patterns, UX and Guidelines
PPTX
Developing cross platform mobile applications with phone gap for windows phone
PDF
Mobile advertising by Yann Lechelle from Appsfire
PDF
Smart app banners
PPTX
Kendo UI 101
PPTX
Building Mobile Web Apps using ASP.NET MVC, HTML5, & jQuery Mobile
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
(2015년 상반기) HTML5 및 Hybrid app 최신 동향
Responsive Navigation Patterns, UX and Guidelines
Developing cross platform mobile applications with phone gap for windows phone
Mobile advertising by Yann Lechelle from Appsfire
Smart app banners
Kendo UI 101
Building Mobile Web Apps using ASP.NET MVC, HTML5, & jQuery Mobile

What's hot (19)

PPTX
X-Platform native apps in C# and .NET using Xamarin tools (iOS/WP/Android)
PDF
Responsive Web Design using the Foundation 5 CSS Framework
PDF
The mobile landscape london tfm&a 2013
PDF
Responsive design bookmarklet
PPTX
HTML5 and jQuery Mobile
PPT
Bar Camp Iphone Web Hackery
PDF
Getting started with PhoneGap
PDF
Mobile Web Mega Trend 2010
PPTX
Introduction to jQueryMobile
PPTX
Drupal Business Summit - making your sites mobile accessible, four methods
PPTX
Modev ux brian lacey presentation
PDF
Wpp mojito-novid.pptx
PPTX
Adobe Max 2010
PDF
Building WebApp with HTML5
PDF
Develop mobile applications with Flex
PDF
Creating a crowdsourced contraband reporting web app with a headless Drupal
ODP
Mobile web application production for business
PPTX
Hybrid Mobile Development - Overview and Intro to Cordova/Ionic Framework
PPTX
Hybrid mobile and Ionic
X-Platform native apps in C# and .NET using Xamarin tools (iOS/WP/Android)
Responsive Web Design using the Foundation 5 CSS Framework
The mobile landscape london tfm&a 2013
Responsive design bookmarklet
HTML5 and jQuery Mobile
Bar Camp Iphone Web Hackery
Getting started with PhoneGap
Mobile Web Mega Trend 2010
Introduction to jQueryMobile
Drupal Business Summit - making your sites mobile accessible, four methods
Modev ux brian lacey presentation
Wpp mojito-novid.pptx
Adobe Max 2010
Building WebApp with HTML5
Develop mobile applications with Flex
Creating a crowdsourced contraband reporting web app with a headless Drupal
Mobile web application production for business
Hybrid Mobile Development - Overview and Intro to Cordova/Ionic Framework
Hybrid mobile and Ionic
Ad

Similar to BayJax: Expanding Yahoo! Axis across 3 screens (20)

PDF
FEDM Meetup: Introducing Mojito
PDF
YUIConf2012: Mojito for YUI Developers
PDF
Plattformübergreifende App-Entwicklung (ein Vergleich) - MobileTechCon 2010
PDF
Developing for Mobile Web
PPTX
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
PDF
Mobile Widgets Development
PDF
Inside Mobile Widgets Publish
PDF
HTML5 Can't Do That
PDF
Começando com Android
PPTX
Yahoo! Mojito
PDF
BACnet HMI5 - BACnet Touch Panel - BACnet Touch Screen - HMI
PDF
Fixing the mobile web - Internet World Romania
PDF
iEnterprise - Mit HTML-5 zum Unternehmens-Dashboard für Tablets
PDF
iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets
PDF
Future of Mobile Web Application and Web App Store
PDF
Building Mobile Websites with Joomla
PDF
HiUED 前端/web 發展和體驗
PPTX
I like i phone and android but know .net
PPT
Jason.O Keefe.Genuitec.Presentation.Final
PDF
Mobile First: Responsive Design for eCommerce | Imagine 2013 Technology | B…
FEDM Meetup: Introducing Mojito
YUIConf2012: Mojito for YUI Developers
Plattformübergreifende App-Entwicklung (ein Vergleich) - MobileTechCon 2010
Developing for Mobile Web
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
Mobile Widgets Development
Inside Mobile Widgets Publish
HTML5 Can't Do That
Começando com Android
Yahoo! Mojito
BACnet HMI5 - BACnet Touch Panel - BACnet Touch Screen - HMI
Fixing the mobile web - Internet World Romania
iEnterprise - Mit HTML-5 zum Unternehmens-Dashboard für Tablets
iEnterprise - Mit HTML5 zum Unternehmens-Dashboard für Tablets
Future of Mobile Web Application and Web App Store
Building Mobile Websites with Joomla
HiUED 前端/web 發展和體驗
I like i phone and android but know .net
Jason.O Keefe.Genuitec.Presentation.Final
Mobile First: Responsive Design for eCommerce | Imagine 2013 Technology | B…
Ad

More from Caridy Patino (9)

PPTX
MiamiJS - The Future of JavaScript
PDF
CSP Level 2: Defensa en profundidad para aplicaciones Web
PDF
The rise of single-page applications
PDF
YUIConf2013: Introducing The "Modown" Project
PDF
FOWA2013: The rise of single page applications
PDF
HTML5 summit - DevCon5 - Miami - Feb 2, 2012
PDF
Conquistando el Servidor con Node.JS
PPT
JS Loading strategies
PPT
YUI 3 Loading Strategies - YUIConf2010
MiamiJS - The Future of JavaScript
CSP Level 2: Defensa en profundidad para aplicaciones Web
The rise of single-page applications
YUIConf2013: Introducing The "Modown" Project
FOWA2013: The rise of single page applications
HTML5 summit - DevCon5 - Miami - Feb 2, 2012
Conquistando el Servidor con Node.JS
JS Loading strategies
YUI 3 Loading Strategies - YUIConf2010

Recently uploaded (20)

PPTX
MuleSoft-Compete-Deck for midddleware integrations
PDF
“A New Era of 3D Sensing: Transforming Industries and Creating Opportunities,...
PDF
The influence of sentiment analysis in enhancing early warning system model f...
PDF
sbt 2.0: go big (Scala Days 2025 edition)
PDF
giants, standing on the shoulders of - by Daniel Stenberg
PDF
sustainability-14-14877-v2.pddhzftheheeeee
PPTX
Build Your First AI Agent with UiPath.pptx
PPTX
GROUP4NURSINGINFORMATICSREPORT-2 PRESENTATION
PDF
Flame analysis and combustion estimation using large language and vision assi...
PDF
Convolutional neural network based encoder-decoder for efficient real-time ob...
PDF
CXOs-Are-you-still-doing-manual-DevOps-in-the-age-of-AI.pdf
PPTX
Module 1 Introduction to Web Programming .pptx
PPTX
AI-driven Assurance Across Your End-to-end Network With ThousandEyes
PDF
Comparative analysis of machine learning models for fake news detection in so...
PDF
AI.gov: A Trojan Horse in the Age of Artificial Intelligence
PPTX
Custom Battery Pack Design Considerations for Performance and Safety
PDF
Transform-Your-Streaming-Platform-with-AI-Driven-Quality-Engineering.pdf
PDF
Early detection and classification of bone marrow changes in lumbar vertebrae...
DOCX
search engine optimization ppt fir known well about this
PDF
Advancing precision in air quality forecasting through machine learning integ...
MuleSoft-Compete-Deck for midddleware integrations
“A New Era of 3D Sensing: Transforming Industries and Creating Opportunities,...
The influence of sentiment analysis in enhancing early warning system model f...
sbt 2.0: go big (Scala Days 2025 edition)
giants, standing on the shoulders of - by Daniel Stenberg
sustainability-14-14877-v2.pddhzftheheeeee
Build Your First AI Agent with UiPath.pptx
GROUP4NURSINGINFORMATICSREPORT-2 PRESENTATION
Flame analysis and combustion estimation using large language and vision assi...
Convolutional neural network based encoder-decoder for efficient real-time ob...
CXOs-Are-you-still-doing-manual-DevOps-in-the-age-of-AI.pdf
Module 1 Introduction to Web Programming .pptx
AI-driven Assurance Across Your End-to-end Network With ThousandEyes
Comparative analysis of machine learning models for fake news detection in so...
AI.gov: A Trojan Horse in the Age of Artificial Intelligence
Custom Battery Pack Design Considerations for Performance and Safety
Transform-Your-Streaming-Platform-with-AI-Driven-Quality-Engineering.pdf
Early detection and classification of bone marrow changes in lumbar vertebrae...
search engine optimization ppt fir known well about this
Advancing precision in air quality forecasting through machine learning integ...

BayJax: Expanding Yahoo! Axis across 3 screens