Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Brewfactory full-stack homebrew 2/2

Peter Marton
November 17, 2014

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

Peter Marton

November 17, 2014
Tweet

More Decks by Peter Marton

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. Architecture

    View full-size slide

  8. Architecture

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. Isomorphic server side

    View full-size slide

  17. Isomorphic client side

    View full-size slide

  18. Isomorphic way
    DEMO

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  22. Join us!
    github.com/brewfactory

    View full-size slide