Mais conteúdo relacionado Semelhante a 全端物聯網探索之旅 - 重點整理版 Semelhante a 全端物聯網探索之旅 - 重點整理版 (20) 3. Full-Stack Web Development
2
前端 後端
全端
Example
MEAN Stack
前端語言：JavaScript, HTML, CSS
前端(框架)：JQuery, Bootstrap, Handlebars, Backbone, Angular, React, 五花八門
後端語言：Node.js, PHP, Ruby, Python, ...
後端框架：Express, Laravel, Rails, Django, ...
資料庫：SQL, MongoDB, …
5. 不 Full-stack 都不行
4
物聯網
應用
Web/Cloud 服務
儲存設施
API Gateway
周邊裝置設計 (硬/韌體)
組織網路 (PAN/WAN) 與網管
(本地) 機器網路應用程式
閘道器之需求與設計
視覺設計
體驗設計
(跨平台)應用程式
9. 在後端環境進行前端開發
8
Task
Runner
Package Manager
Pre-compiler
Transpiler
Bundler
Linter
Dev
Server
npm, bower, spm, pip, gem
webpack, RequireJS (AMD), Browserify (CommonJS)
Non-JS Resources (via plugin, transform, loader)
Babel (ES6, ES7, JSX), less, sass
Utils
JSHint, ESHint
uglify, watchify
grunt, gulp,
npm, webpack
10. Node.js
9
Node.js Core
Node.js Bindings (C++)
Google V8 (C++) libuv
JavaScript Engine Cross-platform Async I/O
Server-side, JS runtime
┌───────────────────────┐
┌─>│ timers │
│ └──────────┬────────────┘
│ ┌──────────┴────────────┐
│ │ I/O callbacks │
│ └──────────┬────────────┘
│ ┌──────────┴────────────┐
│ │ idle, prepare │
│ └──────────┬────────────┘
│ ┌──────────┴────────────┐
│ │ poll │
│ └──────────┬────────────┘
│ ┌──────────┴────────────┐
│ │ check │
│ └──────────┬────────────┘
│ ┌──────────┴────────────┐
└──┤ close callbacks │
└───────────────────────┘
[ ]
[ ]
[ ]
[ ]
[ ]
[ ]
Concurrency – Event Loop
Network I/O
TCP, UDP, TTY, …
File
I/O
DNS
Ops.
User
code
uv__io_t
epoll kqueue event ports
IOCP
TRD
Pool
Linux OSX/BSD SunOS Windows
Async I/O – libuv
11. 設計命令行工具 (CLI Tool)
10
使用 JavaScript 寫命令行工具
process.argv[]
命令行剖析／問答式框架
node-optimist minimist (substack)
nomnom commander (tj)
yargs
inquirer, liftoff, vantage, vorpal
終端著色 / 圖形工具 / 框架
chalk, cli-color
clui, ora, cli-spinners
blessed, react-blessed
12. 除錯工具
11
$ npm install iron-node -g
$ iron-node app.js
$ npm install devtool -g
$ devtool app.js
Chrome DevTools
IDE 內建/外掛除錯環境
WebStorm, VS Code, Cloud9, Nuclide, Eclipse, ATOM, brackets, …
break; $ node debug app.js # c, n, s, o
$ npm install node-inspector -g
$ node-debug app.js
原生除錯工具
第三方工具
13. 除錯訊息與日誌 (Logging)
12
stdout / stderr [ + pipe ] [ + redirect ]
時間戳
格式
層級
位置
uuid
捲動
console.log();
console.error();
$ node app.js
$ node app.js > ./mylog
$ npm install winston --save
$ node app.js
$ npm install bunyan --save
$ node app.js | bunyan [opts]
$ npm install pino --save
$ node app.js | pino-<xxx>
json
text$ npm install debug --save
$ DEBUG=namespace node app.js
intel, log4js, loggly, bole
第三方模組
14. 測試框架/工具
13
Test Framework
Assertions Test Double
Code
Coverage
Hosted CI Services
Travis CI, Circle CI, GitLab CI, wercker, codeship
mocha,
jasmie-node,
tape, tap
istanbul,
JSCover,
blanket.js
sinon.jsassert, should, expect, chai
17. 依區域範疇劃分
16
# 空間範疇 典型距離 協定範例
1 Near Field < 10 cm NFC Forum
2 PAN 1 m ~ 50 m Bluetooth, ZigBee, Thread, IEEE 802.15.4
3 LAN 50 m ~ 1 km Wi-Fi, Ethernet
4 (LP)WAN 1 km ~ 50 km SigFix, LoRa, 5G, 4G, 3G, Internet
距離
資
料
傳
輸
率 LPWAN
WANPAN
LAN
18. 常見 PAN/WAN 之特性
17
# 協定 耗電量 室內距離 MESH 開放度 易用度 網際網路
1 EnOcean 非常低 < 30 m 否 低 中等 否
2 ZigBee 低 < 50 m 是 低 困難 否
3 Thread 低 < 50 m 是 中 中等 是
4 BLE 低 < 50 m 2016 (否) 中 中等 否
5 WiFi 高 (新低) < 30 m 否 高 簡單 是
# 協定 耗電量 距離 下行 開放度 覆蓋率
1 Weightless 非常低 20+ km 受限 中 中
2 SigFox 非常低 30+ km 受限 低 中高
3 LoRa 非常低 30+ km 受限 中 中
4 3G/4G 高 50+ km 是 高 高
5 5G 非常低 未知 未知 高 部分佈建
