SlideShare a Scribd company logo
Yahoo! 酿的酒– 浅尝 Cocktails

                Yahoo! 前端工程师
                          廖英翔
                    Aug 18, 2012
About

廖英翔/Clay Liao
Yahoo! 前端工程师
微博/Twitter @clayliao




                       1
Agenda

   网路应用程式的新挑战
   Cocktails 解决方案
   Mojito框架介绍
   DEMO




                     2
网路应用程式的新挑战


             3

Recommended for you

Fluid 3 showcase
Fluid 3  showcaseFluid 3  showcase
Fluid 3 showcase

This company has over 7 years of experience developing international standard websites using open source technologies like Magento, Opencart, WordPress, and Joomla. They have created e-commerce and responsive websites for clients such as Vodafone, Telstra, and the Singapore LNG Corporation. They also have experience building mobile apps for iOS and Android platforms, as well as web applications and CMS solutions for clients across industries.

Web of Technologies Again
Web of Technologies AgainWeb of Technologies Again
Web of Technologies Again

The document discusses Firefox OS and its potential uses for developing Internet of Things (IoT) devices and applications. Specifically, it mentions that Firefox OS can run on various IoT devices to connect to the web, supports Bluetooth Low Energy (BLE) and Zigbee connections, and could allow hobbyists to create new IoT devices. It also provides examples of using computer vision and text recognition through the browser and connecting devices to services like movies and shopping.

https://html5j.doorkeeper.jp/events/20754
Akshita
AkshitaAkshita
Akshita

The document discusses the competition between Apple and Android mobile platforms. It notes that Apple refuses to support Adobe Flash and has faced legal action, while Android officially supports Flash but many devices do not include it due to performance issues. The document also provides a list of developer resources for both platforms, including Android developer guides, tutorials, and technology blogs focused on Android news.

1. 终端设备愈益复杂


              4
复杂的使用情境




          圖片來源: Apple 5
2. 要懂的程式语言愈来愈多


                 6
工程师必须身怀绝技

   PHP/Java/ASP/.Net
   Python/Ruby/Perl
   JavaScript
   CSS
   HTML
   YUI/jQuery
   Node.js
   …
                        圖片來源
                               7

Recommended for you

I Like iPhone & Android But I am .NET Developer
I Like iPhone & Android But I am .NET DeveloperI Like iPhone & Android But I am .NET Developer
I Like iPhone & Android But I am .NET Developer

This document discusses options for developing mobile applications using .NET and C#, including developing native applications for iOS and Android using MonoTouch and MonoDroid, creating hybrid applications using technologies like PhoneGap that combine web technologies with native platforms, and developing HTML5 web applications. It also provides an overview of JavaScript frameworks for mobile development and considerations for choosing an approach.

Go mobile with Windows Phone
Go mobile with Windows PhoneGo mobile with Windows Phone
Go mobile with Windows Phone

Windows Phone 7 introduced a new "Metro" interface that focused on the end user experience. It featured a 1 GHz processor, multi-touch screen, sensors like accelerometers and GPS, and the ability to develop applications using Silverlight or XNA. The Windows Phone marketplace allowed developers to distribute apps and games through a centralized storefront. Overall, Windows Phone 7 marked a significant change from older Windows Mobile platforms and aimed to make the user interface and development experience more cohesive.

windows phone 7lviv net user groupnet
Mobile Apps Business
Mobile Apps BusinessMobile Apps Business
Mobile Apps Business

My presentation on National Seminar of Technology (NST) 2013. Oct 13rd, 2013. Held by Himpunan Mahasiswa Teknik Computer-Informatika Institut Teknologi Sepuluh November Surabaya (HMTC ITS). Seminar Topic: Leading the Future of National Industry with Mobile Technology. http://schematics-its.com/event/nst

business modelcreativitymobile app
3. 一个产品 多个 Codebase


                      8
The Solution: Yahoo! Cocktails

解决之道:Yahoo! Cocktails


                                 9
Yahoo! Cocktails




                   Mojito      Manhattan




                            圖片來源: Mojito, Manhattan
                                                 10
11

Recommended for you

Modern mobile development overview
Modern mobile development overviewModern mobile development overview
Modern mobile development overview

The document provides an overview of modern mobile development platforms, trends, and specifics. It discusses the history and major players in mobile development, including Java ME, Symbian, BlackBerry, iOS, and Android. It analyzes the advantages and disadvantages of each platform and provides recommendations on platform selection and development strategies. Key trends mentioned include cross-platform development, mobile advertising, and integration with cloud services.

iosblackberryandroid
Promotee
PromoteePromotee
Promotee

Promotee is a Mac app that allows users to create and share promotional images and screenshots on social media and other websites. It was created by Mathieu Vaidis and is available on the Mac App Store. Promotee uses a drag and drop interface to make it easy for users to customize screenshots with text, images, and other elements to promote their apps and websites.

The Web Performance Testing Toolbox (Jfokus 2013)
The Web Performance Testing Toolbox (Jfokus 2013)The Web Performance Testing Toolbox (Jfokus 2013)
The Web Performance Testing Toolbox (Jfokus 2013)

Slides from my Jfokus 2013 presentation. (Demos not included.) So, your web application is slow. You read all the books, follow all advices, but users are still complaining. What now? It turns out that there are really good tools out there to help you, whether your problem is slow loading third party widgets, badly performing javascript or heavy paint times for DOM elements. But which one is right for you? This hands on session will give guide help you assemble your own toolbox with the the different (mostly free) tools available for analyzing and troubleshooting web performance. You'll learn what you can expect from high level tools that measure page load time through synthetic or real user monitoring, down to low level javascript profiling and graphic rendering. We'll dive straight into the advanced parts of WebPagetest, Chrome Dev Tools, Dynatrace Ajax Edition and others, and you'll also get to know how to do most of this on actual mobile devices.

jfokusweb performance
开源项目




 http://developer.yahoo.com/cocktails/mojito/
                                                12
Yahoo! 釀的酒 - 淺嚐 Cocktails
Production-ready
   Yahoo! Axis
   Fantasy Finance
   Sportacular
   Search Direct
   …




                      iPhone   iPad
                                      14
One language, Two Runtimes

一种语言 两个运行环境


                             15

Recommended for you

Firefox os how large open source project works
Firefox os   how large open source project worksFirefox os   how large open source project works
Firefox os how large open source project works

This document summarizes a presentation about how the large open source Firefox OS project works. It discusses fundamentals like version control using Mercurial and Git, issue tracking with Bugzilla, continuous integration using Travis and TBPL/Jenkins for daily builds. It also covers collaboration tools like Wikis, emails, and video conferencing used by the geographically distributed team. The presentation aims to provide insights for other projects on building an open source project at Mozilla's scale.

firefoxos
Adobe Max 2010
Adobe Max 2010Adobe Max 2010
Adobe Max 2010

The document summarizes the Adobe MAX 2010 conference held in Los Angeles from October 23-27, 2010. Over 4,600 attendees participated in keynotes, parallel sessions, and a community summit focused on web development, digital publishing, video delivery across platforms, enterprise solutions, and gaming. Major themes included the shift to mobile/tablet development, HTML5, and multi-screen applications. The BlackBerry PlayBook tablet was also discussed.

adobe maxflexzgflex
An introduction to Windows Mobile development
An introduction to Windows Mobile developmentAn introduction to Windows Mobile development
An introduction to Windows Mobile development

This document provides an introduction to developing mobile applications for Windows Mobile. It discusses screen types, development tools like Visual Studio 2005 and emulators, options for native or managed development, extending existing applications, networking APIs, and creating installers for mobile apps.

纯正 100% JavaScript




 Server    Common    Client
    JS         JS     JS


                              16
Views for Different Devices

一套代码支援多种终端设备


                              17
android.mu.html                    blackberry.mu.html

                  iphone.mu.html                   18
更多内建支援功能

   单元测试 Unit Test
   多国语系 Internationalization
   渐进式增强 Progressive Enhancement
   …




                                    19

Recommended for you

UI於現階段與未來的應用趨勢
UI於現階段與未來的應用趨勢UI於現階段與未來的應用趨勢
UI於現階段與未來的應用趨勢

The document discusses the evolution of user interfaces from command line interfaces (CLI) to graphical user interfaces (GUI) to natural user interfaces (NUI). It notes that as mobile devices and touchscreens became popular in the late 2000s, usage of personal computers declined while mobile app usage increased. The document outlines several technologies that enabled more natural interfaces, such as gesture and motion control, and provided examples of interfaces using these technologies. It argues that future interfaces will become even more natural and context-aware as new technologies are incorporated.

uxfutureui
製作 Unity Plugin for Android
製作 Unity Plugin for Android製作 Unity Plugin for Android
製作 Unity Plugin for Android

The document discusses how to create a Unity plugin for Android. It covers Unity concepts like GameObjects and Components. It then discusses how to implement an Android plugin in Unity using C# and Java interfaces. It provides examples of using AndroidJavaClass and AndroidJavaObject to call Java methods from Unity scripts. It also covers file packaging and some considerations like plugin file locations. The presentation includes questions and references additional Unity and plugin development resources.

unitypluginsandroid
超理性使用者介面設計 - Data-driven A/B Testing
超理性使用者介面設計 - Data-driven A/B Testing超理性使用者介面設計 - Data-driven A/B Testing
超理性使用者介面設計 - Data-driven A/B Testing

Web 介面設計並非憑空蹦出來的,頁面上的每一個連結、按鈕、位置甚至色碼都有其意義。除了眼球追蹤、焦點群體法外,其實我們還可以讓數字說話,利用海量數據引導介面設計。有效的 Data-driven A/B Test 需要團隊合作無間才能完成:PM 設計實驗並解讀報表、Desinger 設計介面、 Engineer 打造產品與產生報表。

user experience designuser experienceabtesting
Mojito 101: Quick Start

第一次 Mojito 就上手


                          20
Quick Start: 安装 Mojito
   Installation

    $npm install mojito -g




                             21
Quick Start: 建立 Mojito App

   Create a Mojito Application
    $mojito create app hello_world

    $cd hello_world

    $mojito create mojit myMojit




                                     22
Quick Start: 打完收工

   Running the Application
    $mojito start

    http://localhost:8666/@myMojit/index




                                           23

Recommended for you

第一次 Mobile App 就上手
第一次 Mobile App 就上手第一次 Mobile App 就上手
第一次 Mobile App 就上手
iosandroidmobile web
Chinese Handwriting in Yahoo! F2E Summit 2011
Chinese Handwriting in Yahoo! F2E Summit  2011Chinese Handwriting in Yahoo! F2E Summit  2011
Chinese Handwriting in Yahoo! F2E Summit 2011

Chinese handwriting input can be difficult, especially for users not familiar with pinyin or character stroke order systems. Yahoo provides a Chinese handwriting input solution that allows users to write Chinese characters on their desktop computer, making input easier. The handwriting panel can be accessed through a simple three step process of clicking the icon, writing the character, and seeing it converted to text. This offers a friendly option for typing Chinese characters without needing in-depth knowledge of other input methods.

f2eyahoochinese
YUI 3 菜鳥救星
YUI 3 菜鳥救星YUI 3 菜鳥救星
YUI 3 菜鳥救星
yuitutorial
Architecture

                     Mojito




                                           Mustache
                              Express
           YUI 3

                              Connect

     JavaScript Runtime (Node.js or Browser)
目录结构
   application.json
   mojits
    -   models
    -   views
    -   controller
    -   assets
   assets



                       25
“Mojit”==Module + Widget

                     The User Interface
                      - Model + Controller +
                        View
                     The User Interaction
                      - Binder




                                               26
DEMO:Bomberman

   多人实时在线游戏
   纯HTML/CSS/
    JavaScript
   HTML5/Canvas
   CSS 3
   源码



                   27

Recommended for you

【前端測試】打造自動化的持��集成測試系統
【前端測試】打造自動化的持續集成測試系統【前端測試】打造自動化的持續集成測試系統
【前端測試】打造自動化的持續集成測試系統

This document discusses continuous integration testing using Yahoo! User Interface Library (YUI) Test, Selenium, and Hudson. It begins with an introduction to continuous integration and how YUI Test allows for unit testing JavaScript code. It then covers how Selenium allows for browser-based testing and can be used with YUI Test. The document demonstrates how Hudson can be used as a continuous integration server to run tests automatically on code commits. It provides live demos of using YUI Test and Selenium together, and integrating them with Hudson for continuous testing.

yui yuitest hudson selenium
Gamification for webapps
Gamification for webappsGamification for webapps
Gamification for webapps
淺談 NodeJS 與框架
淺談 NodeJS 與框架淺談 NodeJS 與框架
淺談 NodeJS 與框架

This document discusses Node.js and frameworks. It begins with an introduction to Node.js and its non-blocking and event-driven nature. It then discusses how to get started with Node.js, including downloading, installing Node.js, and creating a basic HTTP server. Finally, it introduces the Mojito framework used at Yahoo! for building isomorphic JavaScript applications that can run on both the server and client.

nodejsyahoococktails
Thank You!   28
Resources

   Yahoo! Cocktails
    - http://developers.yahoo.com/cocktails
   Yahoo! Mojito
    - http://developers.yahoo.com/cocktails/mojito
   Yahoo! Mojito Shaker
    - http://developer.yahoo.com/cocktails/shaker/



                                                     29

More Related Content

What's hot

Ugly truths about html5 moosecon - robert virkus - 2013-03-07
Ugly truths about html5   moosecon - robert virkus - 2013-03-07Ugly truths about html5   moosecon - robert virkus - 2013-03-07
Ugly truths about html5 moosecon - robert virkus - 2013-03-07
Enough Software
 
Android a brief intro
Android a brief introAndroid a brief intro
Android a brief intro
Kieran Gutteridge
 
10 things to make you a Great Mobile Web Developer
10 things to make you a Great Mobile Web Developer10 things to make you a Great Mobile Web Developer
10 things to make you a Great Mobile Web Developer
Chris Love
 
Fluid 3 showcase
Fluid 3  showcaseFluid 3  showcase
Fluid 3 showcase
fluid3
 
Web of Technologies Again
Web of Technologies AgainWeb of Technologies Again
Web of Technologies Again
dynamis
 
Akshita
AkshitaAkshita
Akshita
sophi7291
 
I Like iPhone & Android But I am .NET Developer
I Like iPhone & Android But I am .NET DeveloperI Like iPhone & Android But I am .NET Developer
I Like iPhone & Android But I am .NET Developer
Tellago
 
Go mobile with Windows Phone
Go mobile with Windows PhoneGo mobile with Windows Phone
Go mobile with Windows Phone
Dima Maleev
 
Mobile Apps Business
Mobile Apps BusinessMobile Apps Business
Mobile Apps Business
Oon Arfiandwi
 
Modern mobile development overview
Modern mobile development overviewModern mobile development overview
Modern mobile development overview
Dima Maleev
 
Promotee
PromoteePromotee
The Web Performance Testing Toolbox (Jfokus 2013)
The Web Performance Testing Toolbox (Jfokus 2013)The Web Performance Testing Toolbox (Jfokus 2013)
The Web Performance Testing Toolbox (Jfokus 2013)
Tobias Järlund
 
Firefox os how large open source project works
Firefox os   how large open source project worksFirefox os   how large open source project works
Firefox os how large open source project works
Fred Lin
 
Adobe Max 2010
Adobe Max 2010Adobe Max 2010
Adobe Max 2010
Ivan Ilijasic
 
An introduction to Windows Mobile development
An introduction to Windows Mobile developmentAn introduction to Windows Mobile development
An introduction to Windows Mobile development
Dale Lane
 
UI於現階段與未來的應用趨勢
UI於現階段與未來的應用趨勢UI於現階段與未來的應用趨勢
UI於現階段與未來的應用趨勢
Justin Lee
 
製作 Unity Plugin for Android
製作 Unity Plugin for Android製作 Unity Plugin for Android
製作 Unity Plugin for Android
Johnny Sung
 

What's hot (17)

Ugly truths about html5 moosecon - robert virkus - 2013-03-07
Ugly truths about html5   moosecon - robert virkus - 2013-03-07Ugly truths about html5   moosecon - robert virkus - 2013-03-07
Ugly truths about html5 moosecon - robert virkus - 2013-03-07
 
Android a brief intro
Android a brief introAndroid a brief intro
Android a brief intro
 
10 things to make you a Great Mobile Web Developer
10 things to make you a Great Mobile Web Developer10 things to make you a Great Mobile Web Developer
10 things to make you a Great Mobile Web Developer
 
Fluid 3 showcase
Fluid 3  showcaseFluid 3  showcase
Fluid 3 showcase
 
Web of Technologies Again
Web of Technologies AgainWeb of Technologies Again
Web of Technologies Again
 
Akshita
AkshitaAkshita
Akshita
 
I Like iPhone & Android But I am .NET Developer
I Like iPhone & Android But I am .NET DeveloperI Like iPhone & Android But I am .NET Developer
I Like iPhone & Android But I am .NET Developer
 
Go mobile with Windows Phone
Go mobile with Windows PhoneGo mobile with Windows Phone
Go mobile with Windows Phone
 
Mobile Apps Business
Mobile Apps BusinessMobile Apps Business
Mobile Apps Business
 
Modern mobile development overview
Modern mobile development overviewModern mobile development overview
Modern mobile development overview
 
Promotee
PromoteePromotee
Promotee
 
The Web Performance Testing Toolbox (Jfokus 2013)
The Web Performance Testing Toolbox (Jfokus 2013)The Web Performance Testing Toolbox (Jfokus 2013)
The Web Performance Testing Toolbox (Jfokus 2013)
 
Firefox os how large open source project works
Firefox os   how large open source project worksFirefox os   how large open source project works
Firefox os how large open source project works
 
Adobe Max 2010
Adobe Max 2010Adobe Max 2010
Adobe Max 2010
 
An introduction to Windows Mobile development
An introduction to Windows Mobile developmentAn introduction to Windows Mobile development
An introduction to Windows Mobile development
 
UI於現階段與未來的應用趨勢
UI於現階段與未來的應用趨勢UI於現階段與未來的應用趨勢
UI於現階段與未來的應用趨勢
 
製作 Unity Plugin for Android
製作 Unity Plugin for Android製作 Unity Plugin for Android
製作 Unity Plugin for Android
 

Viewers also liked

超理性使用者介面設計 - Data-driven A/B Testing
超理性使用者介面設計 - Data-driven A/B Testing超理性使用者介面設計 - Data-driven A/B Testing
超理性使用者介面設計 - Data-driven A/B Testing
Ying-Hsiang Liao
 
第一次 Mobile App 就上手
第一次 Mobile App 就上手第一次 Mobile App 就上手
第一次 Mobile App 就上手
Ying-Hsiang Liao
 
Chinese Handwriting in Yahoo! F2E Summit 2011
Chinese Handwriting in Yahoo! F2E Summit  2011Chinese Handwriting in Yahoo! F2E Summit  2011
Chinese Handwriting in Yahoo! F2E Summit 2011
Ying-Hsiang Liao
 
【前端測試】打造自動化的持續集成測試系統
【前端測試】打造自動化的持續集成測試系統【前端測試】打造自動化的持續集成測試系統
【前端測試】打造自動化的持續集成測試系統
Ying-Hsiang Liao
 
淺�� NodeJS 與框架
淺談 NodeJS 與框架淺談 NodeJS 與框架
淺談 NodeJS 與框架
Ying-Hsiang Liao
 
Handbook - From jQuery to YUI 3
Handbook - From jQuery to YUI 3Handbook - From jQuery to YUI 3
Handbook - From jQuery to YUI 3
Ying-Hsiang Liao
 
Mobile Internet Matters
Mobile Internet MattersMobile Internet Matters
Mobile Internet Matters
Justin Lee
 
屏基 防疫雲簡報20150129
屏基 防疫雲簡報20150129屏基 防疫雲簡報20150129
屏基 防疫雲簡報20150129
台灣醫學資訊學會
 
Spock:願你的測試長長久久、生生不息
Spock:願你的測試長長久久、生生不息Spock:願你的測試長長久久、生生不息
Spock:願你的測試長長久久、生生不息
Shihpeng Lin
 
Vital UI kit
Vital UI kitVital UI kit
Vital UI kit
DesBear Li
 
20130112用原型驅動設計@webconf
20130112用原型驅動設計@webconf20130112用原型驅動設計@webconf
20130112用原型驅動設計@webconf
Justin Lee
 
那些mockup沒告訴你的事@WebConf.tw 2013
那些mockup沒告訴你的事@WebConf.tw 2013那些mockup沒告訴你的事@WebConf.tw 2013
那些mockup沒告訴你的事@WebConf.tw 2013
Adam Wang
 
Let's talk about Web Design
Let's talk about Web DesignLet's talk about Web Design
Let's talk about Web Design
Abby Chiu
 
Web Design 設計過程與合作經驗分享
Web Design 設計過程與合作經驗分享Web Design 設計過程與合作經驗分享
Web Design 設計過程與合作經驗分享
Abby Chiu
 
设计好的用户体验 郑磊
设计好的用户体验 郑磊设计好的用户体验 郑磊
设计好的用户体验 郑磊
麦哥UE
 
阿肯 - UI & UX 從核心資訊與路徑設計談起 (2015/01/27)
阿肯 - UI & UX 從核心資訊與路徑設計談起 (2015/01/27)阿肯 - UI & UX 從核心資訊與路徑設計談起 (2015/01/27)
阿肯 - UI & UX 從核心資訊與路徑設計談起 (2015/01/27)
阿肯 KEN studio
 
ECX2014 不改介面設計也能創造業績的秘訣
ECX2014 不改介面設計也能創造業績的秘訣ECX2014 不改介面設計也能創造業績的秘訣
ECX2014 不改介面設計也能創造業績的秘訣
悠識學院
 

Viewers also liked (20)

超理性使用者介面設計 - Data-driven A/B Testing
超理性使用者介面設計 - Data-driven A/B Testing超理性使用者介面設計 - Data-driven A/B Testing
超理性使用者介面設計 - Data-driven A/B Testing
 
第一次 Mobile App 就上手
第一次 Mobile App 就上手第一次 Mobile App 就上手
第一次 Mobile App 就上手
 
Chinese Handwriting in Yahoo! F2E Summit 2011
Chinese Handwriting in Yahoo! F2E Summit  2011Chinese Handwriting in Yahoo! F2E Summit  2011
Chinese Handwriting in Yahoo! F2E Summit 2011
 
YUI 3 菜鳥救星
YUI 3 菜鳥救星YUI 3 菜鳥救星
YUI 3 菜鳥救星
 
【前端測試】打造自動化的持續集成測試系統
【前端測試】打造自動化的持續集成測試系統【前端測試】打造自動化的持續集成測試系統
【前端測試】打造自動化的持續集成測試系統
 
Gamification for webapps
Gamification for webappsGamification for webapps
Gamification for webapps
 
淺談 NodeJS 與框架
淺談 NodeJS 與框架淺談 NodeJS 與框架
淺談 NodeJS 與框架
 
Handbook - From jQuery to YUI 3
Handbook - From jQuery to YUI 3Handbook - From jQuery to YUI 3
Handbook - From jQuery to YUI 3
 
CSS 菜鳥救星
CSS 菜鳥救星CSS 菜鳥救星
CSS 菜鳥救星
 
Mobile Internet Matters
Mobile Internet MattersMobile Internet Matters
Mobile Internet Matters
 
屏基 防疫雲簡報20150129
屏基 防疫雲簡報20150129屏基 防疫雲簡報20150129
屏基 防疫雲簡報20150129
 
Spock:願你的測試長長久久、生生不息
Spock:願你的測試長長久久、生生不息Spock:願你的測試長長久久、生生不息
Spock:願你的測試長長久久、生生不息
 
Vital UI kit
Vital UI kitVital UI kit
Vital UI kit
 
20130112用原型驅動設計@webconf
20130112用原型驅動設計@webconf20130112用原型驅動設計@webconf
20130112用原型驅動設計@webconf
 
那些mockup沒告訴你的事@WebConf.tw 2013
那些mockup沒告訴你的事@WebConf.tw 2013那些mockup沒告訴你的事@WebConf.tw 2013
那些mockup沒告訴你的事@WebConf.tw 2013
 
Let's talk about Web Design
Let's talk about Web DesignLet's talk about Web Design
Let's talk about Web Design
 
Web Design 設計過程與合作經驗分享
Web Design 設計過程與合作經驗分享Web Design 設計過程與合作經驗分享
Web Design 設計過程與合作經驗分享
 
设计好的用户体验 郑磊
设计好的用户体验 郑磊设计好的用户体验 郑磊
设计好的用户体验 郑磊
 
阿肯 - UI & UX 從核心資訊與路徑設計談起 (2015/01/27)
阿肯 - UI & UX 從核心資訊與路徑設計談起 (2015/01/27)阿肯 - UI & UX 從核心資訊與路徑設計談起 (2015/01/27)
阿肯 - UI & UX 從核心資訊與路徑設計談起 (2015/01/27)
 
ECX2014 不改介面設計也能創造業績的秘訣
ECX2014 不改介面設計也能創造業績的秘訣ECX2014 不改介面設計也能創造業績的秘訣
ECX2014 不改介面設計也能創造業績的秘訣
 

Similar to Yahoo! 釀的酒 - 淺嚐 Cocktails

Yahoo! Mojito
Yahoo! MojitoYahoo! Mojito
Yahoo! Mojito
Gaurav Vaish
 
YUIConf2012: Mojito for YUI Developers
YUIConf2012: Mojito for YUI DevelopersYUIConf2012: Mojito for YUI Developers
YUIConf2012: Mojito for YUI Developers
Caridy Patino
 
Mojito@nodejstw
Mojito@nodejstwMojito@nodejstw
Mojito@nodejstw
Yu-Wei Chuang
 
Open Hack Taiwan 2012 - Mojito intro
Open Hack Taiwan 2012 - Mojito introOpen Hack Taiwan 2012 - Mojito intro
Open Hack Taiwan 2012 - Mojito intro
sriramiyer2007
 
BayJax: Expanding Yahoo! Axis across 3 screens
BayJax: Expanding Yahoo! Axis across 3 screensBayJax: Expanding Yahoo! Axis across 3 screens
BayJax: Expanding Yahoo! Axis across 3 screens
Caridy Patino
 
BruCon (Brussels 2011) Hacking Conference - Botnets and Browsers (Brothers in...
BruCon (Brussels 2011) Hacking Conference - Botnets and Browsers (Brothers in...BruCon (Brussels 2011) Hacking Conference - Botnets and Browsers (Brothers in...
BruCon (Brussels 2011) Hacking Conference - Botnets and Browsers (Brothers in...
Aditya K Sood
 
Mojito: Building for multiple devices using a single language and framework
Mojito: Building for multiple devices using a single language and frameworkMojito: Building for multiple devices using a single language and framework
Mojito: Building for multiple devices using a single language and framework
Diego Ferreiro Val
 
Building for multiple devices using a single language and framework
Building for multiple devices using a single language and frameworkBuilding for multiple devices using a single language and framework
Building for multiple devices using a single language and framework
Fabian Frank
 
FEDM Meetup: Introducing Mojito
FEDM Meetup: Introducing MojitoFEDM Meetup: Introducing Mojito
FEDM Meetup: Introducing Mojito
Caridy Patino
 
Cocktails – Shaken, Not Stirred @osdc.tw
Cocktails – Shaken, Not Stirred @osdc.twCocktails – Shaken, Not Stirred @osdc.tw
Cocktails – Shaken, Not Stirred @osdc.tw
Yu-Wei Chuang
 
Publicis Mojito
Publicis MojitoPublicis Mojito
Publicis Mojito
isaoyagi
 
Publicis Mojito
Publicis MojitoPublicis Mojito
Publicis Mojito
isaoyagi
 
Wpp mojito-novid.pptx
Wpp mojito-novid.pptxWpp mojito-novid.pptx
Wpp mojito-novid.pptx
isaoyagi
 
Html5 mobile develop tools
Html5 mobile develop toolsHtml5 mobile develop tools
Html5 mobile develop tools
Ley Liu
 
HackInTheBox - AMS 2011 , Spying on SpyEye - What Lies Beneath ?
HackInTheBox -  AMS 2011 , Spying on SpyEye - What Lies Beneath ?HackInTheBox -  AMS 2011 , Spying on SpyEye - What Lies Beneath ?
HackInTheBox - AMS 2011 , Spying on SpyEye - What Lies Beneath ?
Aditya K Sood
 
Mobile Dev For Web Devs
Mobile Dev For Web DevsMobile Dev For Web Devs
Mobile Dev For Web Devs
Justin James
 
Mobile Widgets Development
Mobile Widgets DevelopmentMobile Widgets Development
Mobile Widgets Development
Maximiliano Firtman
 
Inside Mobile Widgets Publish
Inside Mobile Widgets PublishInside Mobile Widgets Publish
Inside Mobile Widgets Publish
360|Conferences
 
Yahoo! Mojito talk on Agency Hackday
Yahoo! Mojito talk on Agency HackdayYahoo! Mojito talk on Agency Hackday
Yahoo! Mojito talk on Agency Hackday
Gaurav Vaish
 
Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3
Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3
Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3
Doris Chen
 

Similar to Yahoo! 釀的酒 - 淺嚐 Cocktails (20)

Yahoo! Mojito
Yahoo! MojitoYahoo! Mojito
Yahoo! Mojito
 
YUIConf2012: Mojito for YUI Developers
YUIConf2012: Mojito for YUI DevelopersYUIConf2012: Mojito for YUI Developers
YUIConf2012: Mojito for YUI Developers
 
Mojito@nodejstw
Mojito@nodejstwMojito@nodejstw
Mojito@nodejstw
 
Open Hack Taiwan 2012 - Mojito intro
Open Hack Taiwan 2012 - Mojito introOpen Hack Taiwan 2012 - Mojito intro
Open Hack Taiwan 2012 - Mojito intro
 
BayJax: Expanding Yahoo! Axis across 3 screens
BayJax: Expanding Yahoo! Axis across 3 screensBayJax: Expanding Yahoo! Axis across 3 screens
BayJax: Expanding Yahoo! Axis across 3 screens
 
BruCon (Brussels 2011) Hacking Conference - Botnets and Browsers (Brothers in...
BruCon (Brussels 2011) Hacking Conference - Botnets and Browsers (Brothers in...BruCon (Brussels 2011) Hacking Conference - Botnets and Browsers (Brothers in...
BruCon (Brussels 2011) Hacking Conference - Botnets and Browsers (Brothers in...
 
Mojito: Building for multiple devices using a single language and framework
Mojito: Building for multiple devices using a single language and frameworkMojito: Building for multiple devices using a single language and framework
Mojito: Building for multiple devices using a single language and framework
 
Building for multiple devices using a single language and framework
Building for multiple devices using a single language and frameworkBuilding for multiple devices using a single language and framework
Building for multiple devices using a single language and framework
 
FEDM Meetup: Introducing Mojito
FEDM Meetup: Introducing MojitoFEDM Meetup: Introducing Mojito
FEDM Meetup: Introducing Mojito
 
Cocktails – Shaken, Not Stirred @osdc.tw
Cocktails – Shaken, Not Stirred @osdc.twCocktails – Shaken, Not Stirred @osdc.tw
Cocktails – Shaken, Not Stirred @osdc.tw
 
Publicis Mojito
Publicis MojitoPublicis Mojito
Publicis Mojito
 
Publicis Mojito
Publicis MojitoPublicis Mojito
Publicis Mojito
 
Wpp mojito-novid.pptx
Wpp mojito-novid.pptxWpp mojito-novid.pptx
Wpp mojito-novid.pptx
 
Html5 mobile develop tools
Html5 mobile develop toolsHtml5 mobile develop tools
Html5 mobile develop tools
 
HackInTheBox - AMS 2011 , Spying on SpyEye - What Lies Beneath ?
HackInTheBox -  AMS 2011 , Spying on SpyEye - What Lies Beneath ?HackInTheBox -  AMS 2011 , Spying on SpyEye - What Lies Beneath ?
HackInTheBox - AMS 2011 , Spying on SpyEye - What Lies Beneath ?
 
Mobile Dev For Web Devs
Mobile Dev For Web DevsMobile Dev For Web Devs
Mobile Dev For Web Devs
 
Mobile Widgets Development
Mobile Widgets DevelopmentMobile Widgets Development
Mobile Widgets Development
 
Inside Mobile Widgets Publish
Inside Mobile Widgets PublishInside Mobile Widgets Publish
Inside Mobile Widgets Publish
 
Yahoo! Mojito talk on Agency Hackday
Yahoo! Mojito talk on Agency HackdayYahoo! Mojito talk on Agency Hackday
Yahoo! Mojito talk on Agency Hackday
 
Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3
Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3
Building Beautiful and Interactive Windows 8 apps with JavaScript, HTML5 & CSS3
 

Recently uploaded

Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Bert Blevins
 
What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024
Stephanie Beckett
 
20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf
Sally Laouacheria
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
Lidia A.
 
Manual | Product | Research Presentation
Manual | Product | Research PresentationManual | Product | Research Presentation
Manual | Product | Research Presentation
welrejdoall
 
Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx
ishalveerrandhawa1
 
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces
Mark Billinghurst
 
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems
ScyllaDB
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
HackersList
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
huseindihon
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
ArgaBisma
 
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfINDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
jackson110191
 
20240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 202420240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 2024
Matthew Sinclair
 
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdfPigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
KAMAL CHOUDHARY
 
Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024
BookNet Canada
 
20240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 202420240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 2024
Matthew Sinclair
 
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
Safe Software
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
Adam Dunkels
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
Tatiana Al-Chueyr
 

Recently uploaded (20)

Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
 
What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024
 
20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
 
Manual | Product | Research Presentation
Manual | Product | Research PresentationManual | Product | Research Presentation
Manual | Product | Research Presentation
 
Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx
 
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces
 
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
 
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfINDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
 
20240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 202420240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 2024
 
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdfPigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdf
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
 
Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024
 
20240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 202420240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 2024
 
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
 

Yahoo! 釀的酒 - 淺嚐 Cocktails

Editor's Notes

  1. one javascript frameworkruns on client and server
  2. one javascript frameworkruns on client and server
  3. one javascript frameworkruns on client and server
  4. one javascript frameworkruns on client and server
  5. Developers do not have a method for delivering high quality experiences to all popular consumer devices, without having to create applications specific to each device, which is slow and expensive.Current available technologies that try to solve for this problem are proprietary, locking developers to vendors.
  6. A Mix of HTML5, CSS3, YUI and a lot of ingenious, creative mind-binding tricks from Yahoo!
  7. With Mojito developers can create ONE app for several devices while lowering costs, increasing agility and maintaining a uniform aesthetic across screens (web, mobile, tablet). The Mojito code-base that has been open sourced accelerates the development of applications by giving developers the ability to maintain a single codebase for all the connected devices and optimize the application for each device. Because Mojito is built in one language, JavaScript, for client AND server environments, developers enjoy increased productivity - only one code-base to test and fix.an MVC framework to help developers share structured component-based JavaScript code that runs both on client and server.
  8. Yahoo! open sourced Mojito on April 2nd, 2012
  9. Yahoo ! AxisYahoo! Fantasy Finance – is a stock trading game that pits players against each other and their friends for the chance to win $50,000.Sportacular- Fantasy Premier League Football – is the first major fantasy game to allow Premier League fans to draft, manage and discuss their fantasy teams entirely on their smartphone or tablet. Users can also play the game on their laptops; it is the same game on all screens for all fans.Search Direct – Search Direct is a search feature delivering the same rich content from Yahoo!’s products, aggregated as answers, not links, to give people the option to immediately engage and bypass a traditional search results page.
  10. one javascript frameworkruns on client and server100% JavaScript
  11. Views for Different Devices
  12. When you are supporting so many different runtimes, it is important your testing is done right. Mojito offers this built in using YUI 3 Test. YUI Internationalization utilityi18n and BCP 47 as language tags are the identifiers for languages used on the internetJSLint
  13. Views for Different Devices
  14. Analyzing Artifacts
  15. A Mojit is an just an MVC component.Every controller has actions, which generally maps to a view.Views have binders. Can not run on the server, needs to access the view (DOM) for user interaction like click events etc…Binder lets you execute actions back on the controller, whether the controller is on the server or the client, via a Mojit proxy.