淺談 NodeJS 與框架

  • 3,046 views
Uploaded on

Nov 29, 2012 在國立海洋大學資工系的分享,對象為大四與研究所一年級同學。

Nov 29, 2012 在國立海洋大學資工系的分享,對象為大四與研究所一年級同學。

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,046
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
10
Comments
0
Likes
4

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
  • one javascript frameworkruns on client and server
  • one javascript frameworkruns on client and server
  • 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.
  • A Mix of HTML5, CSS3, YUI and a lot of ingenious, creative mind-binding tricks from Yahoo!
  • 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.
  • Yahoo! open sourced Mojito on April 2nd, 2012
  • 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.
  • one javascript frameworkruns on client and server100% JavaScript
  • Views for Different Devices
  • 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
  • Views for Different Devices

Transcript

  • 1. 淺談 NodeJS 與框架 Yahoo! 資深前端工程師 廖英翔 Nov 29, 2012
  • 2. About廖英翔Yahoo! 資深前端工程師@clayliao 1
  • 3. Agenda The Legend of Node Getting Started Node in Yahoo! DEMO 2
  • 4. The Legend of Node 3
  • 5. Case Study source 4
  • 6. High Performance source 5
  • 7. High Performance source 6
  • 8. About Node Non-blocking Event-driven High concurrency V8 engine Server side JavaScript … 7
  • 9. Open Source! https://github.com/joyent/node 8
  • 10. Getting Started 9
  • 11. Node 官方網站 http://nodejs.org/ 10
  • 12. Download & Install http://nodejs.org/download/ 11
  • 13. Create a HTTP Servervar http = require(http);http.createServer(function (req, res) { res.writeHead(200, {Content-Type: text/plain}); res.end(Hello World);}).listen(1337, 127.0.0.1);console.log(Server running at http://127.0.0.1:1337/); 12
  • 14. MORE THINGS NODE CAN DO 13
  • 15. YUIDoc http://yui.github.com/yuidoc/ 14
  • 16. TypeScript http://www.typescriptlang.org/ 15
  • 17. Yahoo! CocktailsNODE IN YAHOO! 16
  • 18. 1. 終端設備愈來愈複雜 17
  • 19. Multi Screen 圖片來源: Apple 18
  • 20. 2. 要懂得程式語言愈來愈多 19
  • 21. 工程師必須身懷絕技 PHP/Java/ASP/.Net Python/Ruby/Perl JavaScript CSS HTML YUI/jQuery Node.js … 圖片來源 20
  • 22. 3. 一個產品 多個Codebase 21
  • 23. The Solution: Yahoo! Cocktails解決之道:Yahoo! Cocktails 22
  • 24. Yahoo! Cocktails Mojito Manhattan 圖片來源: Mojito, Manhattan 23
  • 25. 24
  • 26. Open Source! http://developer.yahoo.com/cocktails/mojito/ 25
  • 27. Production-ready Yahoo! Axis Fantasy Finance Sportacular Search Direct … iPhone iPad 27
  • 28. One language, Two Runtimes一個語言 兩個運行環境 28
  • 29. 100% 純 JavaScript Server Common Client JS JS JS 29
  • 30. Views for Different Devices一套程式碼支援多種終端設備 30
  • 31. Android.hb.html Blackberry.hb.html Iphone.hb.html 31
  • 32. 更多內建功能 單元測試 Unit Test 多國語系 Internationalization 漸進式增強 Progressive Enhancement … 32
  • 33. Mojito 101: Quick Start第一次 Mojito 就上手 33
  • 34. Quick Start: 安裝 Mojito Installation $ npm install mojito -g 34
  • 35. Quick Start: 建立 Mojito App Create a Mojito Application $ mojito create app hello_world $ cd hello_world $ mojito create mojit myMojit 35
  • 36. Quick Start: 打完收工 Running the Application $ mojito start http://localhost:8666/@myMojit/index 36
  • 37. Architecture Mojito Handlebar Express YUI 3 Connect JavaScript Runtime (Node.js or Browser)
  • 38. DEMO: Bomberman 多人即時遊戲 純HTML/CSS/ JavaScript HTML5/Canvas CSS 3 原始碼 38
  • 39. Thank You! 39
  • 40. Resources NodeJS - http://nodejs.org/ Express Framework - http://expressjs.com/ Yahoo! Cocktails - http://developers.yahoo.com/cocktails Yahoo! Mojito - http://developers.yahoo.com/cocktails/mojito 40