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 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