Brewfactory full-stack homebrew 2/2

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Architecture

Slide 8

Slide 8 text

Architecture

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Isomorphic JavaScript JavaScript code that can be shared between environments.

Slide 16

Slide 16 text

Isomorphic server side

Slide 17

Slide 17 text

Isomorphic client side

Slide 18

Slide 18 text

Isomorphic way DEMO

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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