(by @andrestaltz)
If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.
(by @andrestaltz)
If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.
This document is a collection of concepts and strategies to make large Elm projects modular and extensible.
We will start by thinking about the structure of signals in our program. Broadly speaking, your application state should live in one big foldp
. You will probably merge
a bunch of input signals into a single stream of updates. This sounds a bit crazy at first, but it is in the same ballpark as Om or Facebook's Flux. There are a couple major benefits to having a centralized home for your application state:
// Include module references. | |
var events = require( "events" ); | |
var stream = require( "stream" ); | |
var util = require( "util" ); | |
var chalk = require( "chalk" ); | |
// ---------------------------------------------------------- // | |
// ---------------------------------------------------------- // |
// Include module references. | |
var stream = require( "stream" ); | |
var util = require( "util" ); | |
var chalk = require( "chalk" ); | |
// ---------------------------------------------------------- // | |
// ---------------------------------------------------------- // | |
someStream.on( "error", function( error ) { | |
this.emit( "end" ); | |
}); |
require('font-awesome/css/font-awesome.css'); | |
document.body.innerHTML = '<i class="fa fa-fw fa-question"></i>'; |
var webpack = require('webpack'); | |
var HtmlWebpackPlugin = require('html-webpack-plugin'); | |
var path = require('path'); | |
var folders = { | |
APP: path.resolve(__dirname, '../app'), | |
BUILD: path.resolve(__dirname, '../build'), | |
BOWER: path.resolve(__dirname, '../bower_components'), | |
NPM: path.resolve(__dirname, '../node_modules') | |
}; |
Tested under webpack-dev-server 1.7.0.
npm install
npm start
[Background] | |
Color=40,40,40 | |
[BackgroundIntense] | |
Color=40,40,40 | |
[Color0] | |
Color=73,72,62 | |
[Color0Intense] |
import Html exposing (Html, Attribute) | |
import Html.Attributes | |
import Html.Events | |
import Signal exposing (Address) | |
import List | |
import String | |
import StartApp | |
------------------ | |
--- HELPER CODE -- |