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

Transcript

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

   View Slide

2. Blue
   @聯發科技
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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  
   

   View Slide

8. View Slide

9. MPU
   

   View Slide

10. View Slide

11. MCU
    

    View Slide

12. View Slide

13. MPU
    MCU
    

    View Slide

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

    View Slide

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

    要知道『為何⽽而做』
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

23. View Slide

24. 具有很多現成的  Arduino  模組
    

    View Slide

25. MPU
    MCU
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

30. MPU MCU
    Serial  port  接收對話
    Digital  0
    Digital  13
    i2C
    uart
    相同的  burnrate下
    Firmata  把每個通道都打通
    

    View Slide

31. 挑戰三
    軟體上的難題-如何讓 js 去控制 sensor
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

37. Framework 的選擇
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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    這個議題做了很積極的改變
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

45. 使⽤用 ReactJS
    1. 封裝  component  
    2. 設計機制把  code  丟進  device
    

    View Slide

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

    View Slide

47. Web  端
    Arduino  Yun  端
    （寫好  React  component）
    

    View Slide

48. Cylon.js
    NodeJS
    OpenWRT
     framework
    Firmata
    Sensor
    Arduino  
    MCU
    Web  端
    Arduino  Yun  端
    （寫好  React  component）
    

    View Slide

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）
    

    View Slide

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）
    

    View Slide

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
    

    View Slide

52. Demo
    

    View Slide

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

    View Slide

54. ็≳၂ೂޅ⇢≢၂ἠϱሰĤNQV NDVᄸḰ
    ็≳ؽೂޅ⃸‥ἠࣖோἦ๙ GJSNBUB
    ็≳೘ೂޅ⃸KTಀ॥ᇅTFOTPS DZMPOKT
    ็≳ඹೂޅቓ֞⊬ᇂ⃸ຓࢸἦ๙ 8P5KT
    以業界⾓角度來看的話，問題出在哪？
    

    View Slide

55. 挑戰⼀一如何選擇⼀一個版⼦子? mpu, mcu怎辦?
    Nodejs
    OS  
    Applicaton
    Linux(  Ubuntu,  openwrt…)
    硬碟⾄至少要  1X  mb,  RAM  建議⾄至少要  128  mb
    規格
    架構
    

    View Slide

56. Nodejs 很重要的三個部分
    JIT  (動態編譯),    
    靜態編譯的程式在執⾏行前全部被翻譯為機器碼，⽽而直譯執⾏行的則是⼀一句⼀一句邊執⾏行邊翻譯  
    即時編譯器則混合了這⼆二者，⼀一句⼀一句編譯原始碼，但是會將翻譯過的代碼快取起來以降低效能損耗。  
    Inline-­‐cache  造成  Memory  ⾮非常吃重
    libuv  
    !
    Compile  engie  
    (v8)  
    node-­‐gyp  
    

    View Slide

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

    View Slide

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

    View Slide

59. Smart Things- v7 (靜態編譯)
    

    View Slide

60. Samsung IoT.js
    

    View Slide

61. AllJoyn.js
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

66. 挑戰⼆二如何讓兩個晶⽚片溝通 ?
    其實原來的  Arduino  就可以了!
    MPU MCU
    Serial  port  接收對話
    Gesture  sensor
    運算好結果再丟回MPU
    Serial.print(‘靠北’)
    Serial.print(‘靠北’)
    

    View Slide

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

    View Slide

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

    View Slide

69. Learn once use everywhere 這件事真的很難
    

    View Slide

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

    View Slide

71. One more thing…
    

    View Slide

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

    View Slide

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

    View Slide