Your SlideShare is downloading. ×
Mojito@nodejstw
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Mojito@nodejstw

828
views

Published on

Introduction to Mojito and Cocktails @ NodeJS Taiwan community

Introduction to Mojito and Cocktails @ NodeJS Taiwan community

Published in: Technology, Education

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
828
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Mojito and Cocktails@ddsakura
  • 2. I am…—  ddsakura / 賽拉維.柯南 2
  • 3. Outline 3
  • 4. Cocktails is—  an alcoholic mixed drink that contains two or more ingredients — at least one of the ingredients must be a spirit. 4
  • 5. Cocktails is also—  amix of HTML5, NodeJS, CSS3,YUI and a lot of ingenious, creative mind-bending tricks from Yahoo! 5
  • 6. Cocktails and YUI—  YUI is a free, open source JavaScript and CSS framework for building richly interactive web applications ◦  http://developer.yahoo.com/yui/ ◦  https://github.com/yui§  YUI3 is a foundation for Cocktails 6
  • 7. Eating your own dog food—  like Yahoo! Livestand. 7
  • 8. Mojito is—  Mojito (/moʊˈhiːtoʊ/) ◦  It is a kind of cocktail 8
  • 9. Mojito is—  Mojito is a MVC application framework built on YUI 3.—  One Language ◦  Mojito allows developers to write client and server components in the same language - JavaScript, using the same framework.—  Two Runtimes ◦  Mojito can run on the client (in the browser) and on the server (with Node.js).—  In addition, Mojito has built-in support for internationalization and testing 9
  • 10. The idea isFrom Matt Taylor http://www.slideshare.net/rhyolight/mojito-sl-2011 10
  • 11. The idea isFrom Matt Taylor http://www.slideshare.net/rhyolight/mojito-sl-2011 11
  • 12. The idea isFrom Matt Taylor http://www.slideshare.net/rhyolight/mojito-sl-2011 12
  • 13. Mojito is open!—  http://developer.yahoo.com/cocktails/ mojito/—  https://github.com/yahoo/mojito/ 13
  • 14. Mojits 14
  • 15. 16
  • 16. 17
  • 17. 19
  • 18. Mojito application concept 20
  • 19. Mojito application directorystructure 21
  • 20. DEMO - Hello World—  Install nodejs and npm—  Get mojito from npm registry ◦  npm install mojito -g—  Create a mojito application ◦  mojito create app helloworld—  Create a mojit in application ◦  mojito create mojit myMojit—  Modify the controller.server.js ◦  vi mojits/myMojit/controller.server.js—  Run the mojito application ◦  mojito start—  Go to http://localhost:8666/@myMojit/index 22
  • 21. Configuration—  Application Configuration ◦  The application is configured in the application.json file in the application directory. ◦  http:// developer.yahoo.com/ cocktails/mojito/docs/ intro/ mojito_configuring.html 23
  • 22. Configuration—  Routing [ { ◦  In Mojito, routing is the "settings": [ "master" ], mapping of URLs to "foo index": { specific mojit actions. This "verbs": ["get"], "path": "/", section will describe the "call": ”@myMojit.index" routing configuration file } routes.json } ◦  http:// ] developer.yahoo.com/ cocktails/mojito/docs/ intro/ mojito_configuring.html 24
  • 23. DEMO - Routing—  Create the file routes.json with the following [ { "settings": ["master"], "index_route": { "verbs": ["get"], "path": "/index", "call": "@myMojit.index" } } ]—  Run the mojito application ◦  mojito start—  Go to http://localhost:8666/index 25
  • 24. Template Engine—  Currently, theonly template system allowed is Mustache, so the name of view templates always contains mu—  http://mustache.github.com/ 26
  • 25. Views in Mojito—  The views are HTML files that can include template tags, such as Mustache tags, and are located in the views directory—  We call these files view templates—  Naming Convention for view templates ◦  {controller_function}.[{device}].{rendering_engine}.html—  Example ◦  greeting.mu.html - This view template gets data from the greeting function of the controller and the calling device is determined to be a Web browser. ◦  get_photos.iphone.mu.html - This view template gets data from the get_photos function of the controller and the calling device is an iPhone. ◦  find_friend.android.mu.html - This view template gets data from the find_friend function of the controller and the calling device is Android based. 27
  • 26. The tools for Multi-Device—  CSS3 Media Queries—  Mojito view template 28
  • 27. DEMO – Views for different Devices—  Create index.iphone.mu.html ◦  cp index.mu.html index.iphone.mu.html ◦  vi mojits/myMojit/views/index.iphone.mu.html—  Run the mojito application ◦  mojito start—  Go to http://localhost:8666/index 29
  • 28. Mojito API—  Mojito has an API that includes addons and methods for handling parameters, cookies, URLs, assets, REST calls, globalization/ localization, and more.—  http://developer.yahoo.com/cocktails/ mojito/docs/api_overview/—  http://developer.yahoo.com/cocktails/ mojito/api/index.html 30
  • 29. Built-in Mojits—  Mojito comes with the built-in utility mojits that make developing applications easier.—  HTMLFrameMojit ◦  The HTMLFrameMojit builds the HTML skeleton of a Web page.—  LazyLoadMojit ◦  This allows Mojito application to load the page quickly and then lazily load parts of the page.—  http://developer.yahoo.com/cocktails/mojito/ docs/topics/mojito_framework_mojits.html 31
  • 30. DEMO – HTMLFrameMojit & API 32
  • 31. DEMO – LazyLoad 33
  • 32. Deployment—  Mojito on Heroku 34
  • 33. Mojito Shaker—  Shaker is a static asset rollup manager for Mojito applications.—  https://github.com/yahoo/mojito-shaker—  http://developer.yahoo.com/cocktails/ shaker/ 35
  • 34. Conclusion—  Cocktails is an ecosystem mix of HTML5, NodeJS, CSS3,YUI and relative technology—  Mojito is a MVC application framework ◦  One language ◦  Two Runtimes—  Mojito is available under a BSD license—  A lot of docs are available, we can start from http://developer.yahoo.com/cocktails/mojito/—  We also have forum to discuss this: http://developer.yahoo.com/forum/Yahoo-Mojito 36
  • 35. Contact info—  @ddsakura—  Demo sample code https://github.com/ddsakura/ mojitoHelloworld 37