用 Reactjs 和 WoT 標準來降低大眾進入硬體門檻

497b0ae3672631318bc2450ec0c7d87f?s=47 blue chen
October 31, 2015

用 Reactjs 和 WoT 標準來降低大眾進入硬體門檻

497b0ae3672631318bc2450ec0c7d87f?s=128

blue chen

October 31, 2015
Tweet

Transcript

  1. 如何⽤用 ReactJS + WoT 降低⼤大眾進⼊入硬體⾨門檻

  2. Blue @聯發科技

  3. 微型電腦 Powerful 處理單元 豐富多媒體介⾯面,可外接螢幕 具有完整的  OS  系統(  Linux  ) 需多針腳可以做訊號接收輸出

  4. 微型控制器 低效能的處理單元(省電⾄至上)   KB  等級的  RAM 需多針腳可以做訊號接收輸出

  5. 組合式開發版 低效能的處理單元(省電⾄至上) 需多針腳可以做訊號接收輸出 Powerful 處理單元 ( ⽤用來 處理 wifi )

  6. 關鍵在使⽤用的晶⽚片 對  javascript  開發者⽽而⾔言如何去區分?

  7. Embedded board 晶⽚片上的規格區分 MPU  (  Microproccess  Unit) MCU  (MIcrocontroller  Unit)

    1.  ⼯工作時脈幾百Hz   2.  MB  等級的  RAM   3.  可以跑完整的  Linux   1.  ⼯工作時脈  100Hz  以下   2.  KB  等級的  RAM     3.  輕量級的  OS  :  freeRTOS  …etc  
  8. None
  9. MPU

  10. None
  11. MCU

  12. None
  13. MPU MCU

  14. MPU MCU 業界⾓角度來看雙晶⽚片的趨勢明顯

  15. 我在嘗試各種  POC  過程所傳達給⼤大家的不是⼀一個⽅方法   ⽽而是想⼤大家能夠藉由  JS  開發者所遇到的挑戰做⼀一個省思   
 要知道『為何⽽而做』

  16. 降低⼤大眾進⼊入硬體⾨門檻會遇到很多挑戰

  17. 挑戰⼀一 硬體上的難題- 我要如何去選適合 JS 的開發板?

  18. 先從⼀一般基本跑得動 javascript 情境來談 OS   Linux,  openWRT,  freeRTOS…etc 想像⼀一下各位現有的  server

     如何跑  javascript  ?  
  19. 先從⼀一般基本跑得動 javascript 情境來談 Nodejs OS   Linux,  openWRT,  freeRTOS…etc 硬碟⾄至少要

     1X  mb,  RAM  建議⾄至少要  128  mb 想像⼀一下各位現有的  server  如何跑  javascript  ?  
  20. 先從⼀一般基本跑得動 javascript 情境來談 Nodejs OS   Applicaton Linux,  openWRT,  freeRTOS…etc

    硬碟⾄至少要  1X  mb,  RAM  建議⾄至少要  128  mb 想像⼀一下各位現有的  server  如何跑  javascript  ?  
  21. 先從⼀一般基本跑得動 javascript 情境來談 Nodejs OS   Applicaton 硬碟⾄至少要  1X  mb,

     RAM  建議⾄至少要  128  mb 想像⼀一下各位現有的  server  如何跑  javascript  ?   規格 架構 Linux,  openWRT,  freeRTOS…etc
  22. 先從⼀一般基本跑得動 javascript 情境來談 Nodejs OS   Applicaton 硬碟⾄至少要  1X  mb,

     RAM  建議⾄至少要  128  mb 想像⼀一下各位現有的  server  如何跑  javascript  ?   規格 架構 MPU Linux,  openWRT,  freeRTOS…etc
  23. None
  24. 具有很多現成的  Arduino  模組

  25. MPU MCU

  26. 挑戰⼆二 軟體上的難題-如何讓兩個晶⽚片溝通

  27. MPU MCU Linux (js 跑在這) Digital  0 Digital  13 i2C

    uart Arduino  sensor
  28. MPU MCU 硬體上就有線路連接

  29. MPU MCU Firmata  把每個通道都打通 Digital  0 Digital  13 i2C uart

  30. MPU MCU Serial  port  接收對話 Digital  0 Digital  13 i2C

    uart 相同的  burnrate下 Firmata  把每個通道都打通
  31. 挑戰三 軟體上的難題-如何讓 js 去控制 sensor

  32. MPU MCU Serial  port  接收對話 firmata  把每個通道都打通 Digital  0 Digital

     13 i2C uart
  33. MPU MCU Serial  port  接收對話 Digital  0 Digital  13 i2C

    uart firmata  把每個通道都打通 MPU 101010000000
  34. MPU MCU Serial  port  接收對話 Digital  0 Digital  13 i2C

    uart firmata  把每個通道都打通 MPU 101010000000 node-­‐serialport
  35. MPU MCU Serial  port  接收對話 Digital  0 Digital  13 i2C

    uart firmata  把每個通道都打通 MPU 101010000000 node-­‐serialport framework
  36. MPU MCU Serial  port  接收對話 Digital  0 Digital  13 i2C

    uart firmata  把每個通道都打通 MPU Application 101010000000 node-­‐serialport framework
  37. Framework 的選擇

  38. 挑戰四 軟體上的難題-如何做到裝置讓外界溝通

  39. 現今物聯『網』標準幾個重要關注重點: 1.安全性   2.每個『物』都能彼此定義⾃自⼰己   3.能  leverage  現成既定  protocol  

  40. 現今的 protocol 很多 1.websocket   2.CoAP   3.WAMP   4.HTTP/HTTPS

      5.MQTT  …
  41. WoT  按照  wiki  講的有4個層⾯面:          1.  Programing

     web  (  programing  spec  )      2.  Seman]c  web  (  JSON-­‐LD  )    3.  Real-­‐]me  web  (  web  socket    or  other  protocol  )    4.  Social  web  (  安全機制  ) https://github.com/w3c/web-­‐of-­‐things-­‐framework W3C    今年對於  Web  of  things    這個議題做了很積極的改變
  42. https://github.com/w3c/web-­‐of-­‐things-­‐framework 定義  (schema)   ⼿手機的屬性   可能的⾏行為
 誰可以授權⽤用它   ⾨門

    ⼿手機 定義  (schema)   ⾨門的屬性   可能的⾏行為   誰可以授權⽤用它    1.  Programing  web  (  programing  spec  )      2.  Seman]c  web  (  JSON-­‐LD  )      3.  Real-­‐]me  web  (  web  socket    or  other  protocol  )      4.  Social  web  (  安全機制  )   2 2
  43. https://github.com/w3c/web-­‐of-­‐things-­‐framework 定義  (schema)   ⼿手機的屬性   可能的⾏行為
 誰可以授權⽤用它   ⾨門

    ⼿手機 定義  (schema)   ⾨門的屬性   可能的⾏行為   誰可以授權⽤用它   websocket  1.  Programing  web  (  programing  spec  )      2.  Seman]c  web  (  JSON-­‐LD  )      3.  Real-­‐]me  web  (  web  socket    or  other  protocol  )      4.  Social  web  (  安全機制  )   2 3 2
  44. https://github.com/w3c/web-­‐of-­‐things-­‐framework 定義  (schema)   ⼿手機的屬性   可能的⾏行為
 誰可以授權⽤用它   (security)

    ⾨門 ⼿手機 定義  (schema)   ⾨門的屬性   可能的⾏行為   誰可以授權⽤用它   (security) websocket security  1.  Programing  web  (  programing  spec  )      2.  Seman]c  web  (  JSON-­‐LD  )      3.  Real-­‐]me  web  (  web  socket    or  other  protocol  )      4.  Social  web  (  安全機制  )   2 3 4 4 2 4
  45. 使⽤用 ReactJS 1. 封裝  component   2. 設計機制把  code  丟進

     device
  46. 搭配 ReactJS 可以 Run 在 server side 的特性

  47. Web  端 Arduino  Yun  端 (寫好  React  component)

  48. Cylon.js NodeJS OpenWRT  framework Firmata Sensor Arduino   MCU Web

     端 Arduino  Yun  端 (寫好  React  component)
  49. Cylon.js Code NodeJS OpenWRT  framework Firmata Sensor Web  透過  WoT

     framework  跟  device  端對話(丟code) 1 1 MPU Arduino   MCU Web  端 WoT(JSON-­‐LD) Arduino  Yun  端 (寫好  React  component)
  50. Cylon.js Code NodeJS OpenWRT  framework Firmata Sensor Web  透過  WoT

     framework  跟  device  端對話 1 Framework  透過垂直整合接收  /  控制sensor 2 2 1 MPU Arduino   MCU Web  端 WoT(JSON-­‐LD) Arduino  Yun  端 (寫好  React  component)
  51. ⽤用 ReactJS + WoT 初步達成什麼願景? 讓⼤大眾進⼊入硬體的⾨門檻降低 ! JS  是全世界最容易上⼿手的語⾔言,搭配  

    ReactJS  套件化組裝,可以輕易把套件跟封 裝成跑在各平台上 降低開發⾨門檻 ◎ 把每個 firmware 想像是⼀一個app, maker 可以分享⾃自⼰己設計的 firmware 創造出獨特 app store ⽣生 態系,讓⼤大眾直接⽤用安裝 app 的⽅方 式快速部署到 device 上 易上⼿手 firmware 更新機制 # 只要在任何⾏行動機器上開啟  web, 隨時都可以對任何  device  控制  or  看 其現在狀態 Control / Display $ 所有的開發跟debug模式都可以在 web上執⾏行,不需考量windows/mac 作業環境 開發/ debug ⼿手機/  電腦/  平板端 z
  52. Demo

  53. 但是... ⺫⽬目前 js 做法離業界和市場有很⼤大⼀一段遙遠的距離。

  54. ็≳၂ೂޅ⇢≢၂ἠϱሰĤNQV NDVᄸḰ  ็≳ؽೂޅ⃸‥ἠࣖோἦ๙ GJSNBUB  ็≳೘ೂޅ⃸KTಀ॥ᇅTFOTPS DZMPOKT  ็≳ඹೂޅቓ֞⊬ᇂ⃸ຓࢸἦ๙

    8P5KT  以業界⾓角度來看的話,問題出在哪?
  55. 挑戰⼀一如何選擇⼀一個版⼦子? mpu, mcu怎辦? Nodejs OS   Applicaton Linux(  Ubuntu,  openwrt…)

    硬碟⾄至少要  1X  mb,  RAM  建議⾄至少要  128  mb 規格 架構
  56. Nodejs 很重要的三個部分 JIT  (動態編譯),     靜態編譯的程式在執⾏行前全部被翻譯為機器碼,⽽而直譯執⾏行的則是⼀一句⼀一句邊執⾏行邊翻譯   即時編譯器則混合了這⼆二者,⼀一句⼀一句編譯原始碼,但是會將翻譯過的代碼快取起來以降低效能損耗。  

    Inline-­‐cache  造成  Memory  ⾮非常吃重 libuv   ! Compile  engie   (v8)   node-­‐gyp  
  57. ! Compile  engie   (v8)   node-­‐gyp   Async,  Event

     driven,  OS  operator libuv   Nodejs 很重要的三個部分
  58. addon ! Compile  engie   (v8)   libuv   node-­‐gyp

      Nodejs 很重要的三個部分
  59. Smart Things- v7 (靜態編譯)

  60. Samsung IoT.js

  61. AllJoyn.js

  62. ReactJS 的組件化有很⼤大關連

  63. 挑戰⼆二如何讓兩個晶⽚片溝通 ? firmata ? Firmata  is  not  a  good  pattern

    MPU MCU Serial  port  接收對話 firmata  把每個通道都打通 Digital  0 Digital  13 i2C uart
  64. 挑戰⼆二.三如何讓兩個晶⽚片溝通 ? firmata ? Firmata  is  not  a  good  pattern

    MPU MCU Serial  port  接收對話 firmata  把每個通道都打通 Digital  0 Digital  13 i2C uart 且所有運算都在  MPU  端 1 很多  sensor  只有  C  不提供  JS  parser 2
  65. 挑戰⼆二如何讓兩個晶⽚片溝通 ? 其實原來的  Arduino  就可以了! MPU MCU Serial  port  接收對話

    Gesture  sensor
  66. 挑戰⼆二如何讓兩個晶⽚片溝通 ? 其實原來的  Arduino  就可以了! MPU MCU Serial  port  接收對話

    Gesture  sensor 運算好結果再丟回MPU Serial.print(‘靠北’) Serial.print(‘靠北’)
  67. 挑戰四如何做到裝置讓外界溝通 ? WoT? 實際上  OIC  ,  Alljoyn  聯盟本來就有針對不同  protocol  整合計畫

      使⽤用層級並⾮非在應⽤用層,⽽而在更低⼀一層的網路層 整合 ⽅方式 安全 Bluetooth   wifi   zigbee   NFC p2p   wifi  infrastructor credential  management
  68. 挑戰四如何做到裝置讓外界溝通 ? WoT? 實際上  OIC  ,  Alljoyn  聯盟本來就有針對不同  protocol  整合計畫

      使⽤用層級並⾮非在應⽤用層,⽽而在更低⼀一層的網路層 整合 ⽅方式 安全 Bluetooth   wifi   zigbee   NFC p2p   wifi  infrastructor credential  management 時間可能是:  3~5年後
  69. Learn once use everywhere 這件事真的很難

  70. 但是市場趨勢值得期待

  71. One more thing…

  72. 聯發科 Linkit 平台 ? Linkit connect 7681 LinkitOne ᆞൔỚຓ܄҃

  73. 第⼀一個 針對⾼高階語⾔言族群設計開發版 48)8ປಆῘჷ -FWFSBHFBMM"SEVJOPTFOTPS 䌉ࡄ֥≐ڛ↩ⅴ⇼ ൲ᾁӑьၒ ಸၞΆೆਈ㸗ᾲ؍ ?