Brewfactory full-stack homebrew 2/2

My presentation on the Prezi Tech Talks meetup: http://www.meetup.com/Prezi-Tech-Talks/events/208008902/

"An IT engineer and a med student walks in to a bar. They get disappointed by the corn infested MegaBrews, so comes the motivation to put up a fight."

Brewfactory's story about their IoT brewing machine: Node.js, SparkCore, MongoDB, React, Flux.

The second half of the presentation introduces some Isomorphic JavaScript principles.

Lear more about Brewfactory: http://brewfactory.com

Transcript

1. Brewfactory full-stack homebrew 2/2
   Péter Márton
   @slashdotpeter
   

   View Slide

2. About the talk
   Brewfactory is heavily over-engineered
   It is my hobby
   

   View Slide

3. Hardware parts
   - digital temp. sensor
   - DS18B20 (1-Wire)
   - heating elements
   - PWM (pulse-width modulation)
   - Relay (solid state)
   - controller
   - PID
   

   View Slide

4. Internet of things: IoT
   - internet connected
   - communicate with each other
   - from $10
   - easy to program
   

   View Slide

5. IoT device: RaspberryPi
   - credit-card sized
   - linux
   - usb ports
   - ethernet
   - NO built-in Wi-Fi
   - any languages
   

   View Slide

6. IoT device: SparkCore
   - pint-sized
   - arduino compatible
   - built-in Wi-Fi
   - C++
   - Spark’s cloud
   

   View Slide

7. Architecture
   

   View Slide

8. Architecture
   

   View Slide

9. JavaScript everywhere
   2007 2014
   HW Microcontroller IoT devices from $10
   Control HW C, C++ Node.js:
   Johnny-Five, Tessel
   Web server .net, Java, PHP Node.js
   Database SQL MongoDB: JS API
   WebUI JavaScript: jQuery JavaScript: SPA
   (React, Angular etc.)
   

   View Slide

10. BrewCore
    - Node.js --harmony
    - Koa
    - WebSockets
    - Spark’s cloud
    - https://github.com/BrewCore
    

    View Slide

11. BrewUI
    - React app with Flux
    - CommonJS (Node style)
    - Webpack (~Browserify)
    - npm module
    - https://github.com/BrewUI
    

    View Slide

12. React
    - JS library
    - can be the view in MVC (model, view, controller)
    - renders on both client and server side
    - virtual DOM
    

    View Slide

13. Flux architecture
    - unidirectional data flow
    - designed by Facebook
    - less complex dependencies as in MVC
    

    View Slide

14. Single page applications (SPA)
    Pros
    - fast and smooth
    - less bandwidth
    Cons
    - SEO (without JS)
    - first load is heavy
    - needs more battery
    

    View Slide

15. Isomorphic JavaScript
    JavaScript code that can be shared between
    environments.
    

    View Slide

16. Isomorphic server side
    

    View Slide

17. Isomorphic client side
    

    View Slide

18. Isomorphic way
    DEMO
    

    View Slide

19. Isomorphic JavaScript
    Pros
    - server render: works without JavaScript
    - client render: power of SPA
    - code share
    - save energy on mobiles
    

    View Slide

20. Isomorphic JavaScript
    Cons
    - unfamiliar problems
    - async concurrency on server side
    - some things are missing
    

    View Slide

21. BrewMobile
    - Swift
    - WebSockets
    - push notif. is coming
    by @vasarhelyia
    

    View Slide

22. Join us!
    github.com/brewfactory
    

    View Slide

23. Q&A
    The end
    

    View Slide