SITCON 6/13 雲林聚

1. 快速入坑 node.js
超強全端開發神器！

2. About Me
Lorex L. Yang（普羅）
joe50613@gmail.com
• 黑丟，我就是那隻普羅 <3
• 萬年高中生一枚XD
• 興趣是玩電腦跟養雞養伺服器

5. 個人經歷
哥只是個徘徊在新手村的 NPC

6. 高雄市公車到站時間 & 誤點紀錄

7. 環境監控系統

8. 車載式救護車道路預警系統

9. 經歷
• Lorex’s Sour Flog 工程濕的酸筆記 站長
• SITA 學生電腦與資訊技術交流聯盟 理事長
• SintaDesign 學生資訊社群 副社長
• 徘徊於資訊界新手村的正太控NPC

10. 專長 & 興趣
• 「養雞」
• 伺服器架設
• 網管相關技術
• Arduino & RPi 程式開發
• C & C++、C#、VB.NET、node.js
• 略懂 Python、Ruby、PHP
• 養小正太

11. 如何寫 node.js

12. 對不起，放錯圖了……

13. 免責聲明
什麼？這年頭演講還要擔心會不會變成消波塊？

14. 歡迎發問、回答
ლ(◉◞౪◟◉ )ლ
安安，雖然講的很雷，但多少請給我點互動 ❤❤❤

15. 這次要介紹的是
新手無痛上…（？）

16. 新手無痛上手 node.js （O）

17. But 講者不是程設專家

18. 就只是略懂略懂的路人
<(_ _)>

20. 因為等等會有一些 Live Demo

21. 不小心 NG 的話就別笑我惹QQ
真的想笑的話，請小聲點 QQ

22. 聽完回家你也不一定能馬上開發
出成熟的網站（靠杯）

24. 如果喜歡這個 Slide
歡迎找我索取
記得餵普羅吃精靈乾糧 OU<

25. 正片開始
咳，各位可以先趴下去睡了 （無誤）

27. WTF is Node.js
• A script language
• A dynamic programming language
• “JavaScript on the server”
• Node.js is “NOT” a web framework!

28. 等等！

29. JavaScript on the server ???

30. 你是說那個醜不拉機的東西？
奇怪的運作原理
語法設計差
效能悲劇

31. 那不是複製貼上就會寫了嗎 ˊ_>ˋ
安安還記得那個會跟著你游標跑的 div 嗎？XD

32. ㄎㄎ，人家早進化惹

33. 鄧__華都可以把到正咩

36. Node.js
V8 + APIs

37. 從此征服網站設計三大洲
前端、後端、雲端

38. Why Node.js
• Easy to learn
• Super duper FAST
• Open source
• Cross platform
• Lots of modules

39. So this is Node.js

40. 概觀
直接看程式碼最快XD

41. Javascript
• 我們熟悉的 JS 事實上是 ECMAScript + Host Environment
• Host Environment
• 就好像是工作間，不同工作間提供不同工具給你
• 在 Browser 上就是那些 DOM 物件
• 在 Node.js 上就是 Node.js API，一堆內建的 modules

42. Node Modules
• 函式庫？套件？模組？類別（class）？
• 一個 .js 檔就能構成一個 module
• 一個 module 就能成一支程式
• 較複雜的程式需要許多 module 完成

43. Module 架構解析

44. Example I
Require Section
Local Section

45. Example II
Local Section
Export Section
lorex_as_mod.js

46. Example III
use_lorex.js
Require Section
Local Section

47. Hello World!

48. 安裝 Node.js
• Windows & Mac OS X
• 下載安裝包：https://nodejs.org/
• 執行安裝包進行安裝
• Linux
• 下載安裝包：https://nodejs.org/
• 解壓縮
• ./configure
• make & make install

49. Hello World!
• 建立 HelloWorld.js
• node HelloWorld.js
• 執行結果

50. 動手自幹 HTTP Server

51. 打開你的瀏覽器
然後輸入 http://127.0.0.1:8888

52. 神奇的事情發生惹QUQ

54. 來分析一下程式碼

55. 引入 HTTP 核心模組

56. 關於 HTTP module
• HTTP module 是 Node.js 的 core module 之一
• 提供各項 HTTP Server / Client 的操作
• API Reference：https://nodejs.org/api/http.html

57. 創建一個 HTTP Server

58. http.createServer()
創建一個 HTTP Server

59. 可是，後面那串洗殺小？

60. 隆重介紹

61. Callback
一個讓人又愛又恨的婊子

62. Async vs. Sync

64. 假設今天你與粉絲巧遇

65. 不小心咻一下滑進摩鐵

66. Sync
• 讀國際禮儀，直到整本滾瓜爛熟
• 讓嘴巴開始麻，直到整張嘴都麻
掉為止
• 開始擁抱，直到完全感受到溫暖

67. Async
• 開始讀國際禮儀（讀完了，就懂了！）
• 嘴巴麻掉（麻掉了，就可以 KISS 了！）
• 擁抱（感受到溫暖，就可以上了！）

68. 所有事情一起做

69. 做完再來回報成果

70. 不用一直等上一條指令跑完

71. 最後啟動伺服器並監聽 Port 8888

72. 有沒有比上阿帕契還簡單！

73. 可是睿凡，這樣寫感覺好慢QQ

74. NPM & Modules

75. 使用 Framework 可以讓你更快

76. 一個人幹不出來
那就大家一起幹吧 ❤

77. Node Package Manager （NPM）
• Node 套件管理程式
• 155,000+ modules
• 輕鬆打包自己的 module
• npm init
• 安裝好的模組會放在 ./node_modules

78. Using NPM
• 安裝新模組
• npm install <module>
• 尋找模組
• npm search <string>
• 列出當前使用的模組（以及相依性關係）
• npm list
• 查看模組詳細資訊
• npm info <module>

79. Express
• 一個 Node.js 底下的 Framework
• MVC Framework
• rendering, routing, REST controls.
• 容易上手

80. 安裝 Express
npm install express@3.4.8

81. 把剛剛的東西稍微變化一下
Configure
Routing
Load Express
Module

82. 但是
HTML 還是一樣長長又臭臭 der

83. 身為新世代的工程濕

84. 一定要有三大美德

85. 懶惰、傲慢、不耐煩 (o)

86. Jade
• HTML 模板系統
• 幫你產生 HTML Code
• 支援巨集功能
• 簡單、好學！
• 可以少打很多字 OU<

87. HTML vs. Jade

88. 安裝 Jade
npm install jade

89. 在 express 啟用模板系統

90. 基本 Jade 範例

91. 新增一條 route

92. 也可以丟參數

94. 什麼？網站太醜了？

95. 自己上 Bootstrap 阿XD
http://getbootstrap.com/

96. 模板系統的進階玩法
Node.js x Express x Jade x Bootstrap

97. 先建立好 Bootstrap Template…

98. 把該切割的都切割好…

99. 把剛剛的頁面套用一下 Template

100. 十分鐘速成！！！

101. BEFORE AFTER

103. Lorex（普羅）
Q&A Time
Lorex.lionfree.net
joe50613@gmail.com