ohanhi

Learning FP the hard way: Experiences on the Elm language

by Ossi Hanhinen, @ohanhi

with the support of Futurice 💚.

Licensed under CC BY 4.0.

Editorial note

acdlite

/**
 * Basic proof of concept.
 * - Hot reloadable
 * - Stateless stores
 * - Stores and action creators interoperable with Redux.
 */

import React, { Component } from 'react';

export default function dispatch(store, atom, action) {

pilwon

Usage

1. npm install babel-loader imports-loader webpack --save
2. Create webpack.config.js
3. Move index.ios.js to src/index.ios.jsx
4. webpack --watch

Example

src/index.ios.jsx

davidchambers

var R = require('ramda');

var zipMany =
  R.cond(R.isEmpty,
         R.always([]),
         R.converge(R.map,
                    R.flip(R.pluck),
                    R.pipe(R.head, R.length, R.range(0))));

var zipMany2 = function(lists) {

pburtchaell

/**
 * VH and VW units can cause issues on iOS devices: http://caniuse.com/#feat=viewport-units
 * 
 * To overcome this, create media queries that target the width, height, and orientation of iOS devices. 
 * It isn't optimal, but there is really no other way to solve the problem. In this example, I am fixing 
 * the height of element `.foo` —which is a full width and height cover image.
 *
 * iOS Resolution Quick Reference: http://www.iosres.com/
 */
 

alexmingoia

Beyond Angular and Backbone with Unidirectional apps

What is a unidirectional app?

Unidirectional is a term coined by React engineers to describe the data flow of an application. Unidirectional apps employ functional reactive programming techniques such as immutability, purity, and most importantly unidirectional (as opposed to bidirectional) data flow.

A unidirectional app is defined by no mutable references no two-way references between concerns.

Raynos

module.exports = clickEvent;

function clickEvent(handler, opts) {
    opts = opts || {};

    return function clickHandler(ev) {
        if (!opts.ctrl && ev.ctrlKey) {
            return;
        }

khoin

/**
 *  potasmic - dubstep dawn 
 *  (because all other wavepot loops' names are part of the day hehehe)
**/
var bpm = 148;
var tuning = 440;
var transpose = 0;
 
// constants
var tau = 2 * Math.PI;

sebmarkbage

/** @jsx React.DOM */

var Graphic = React.createClass({ 

  componentDidMount: function() {
    var context = this.getDOMNode().getContext('2d');
    this.paint(context);
  },

  componentDidUpdate: function() {

evancz

Architecture in Elm

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:

1. There is a single source of truth. Traditional approaches force you to write a decent amount of custom and error prone code to synchronize state between many different stateful components. (The state of this widget needs to be synced with the application state, which needs to be synced with some other widget, etc.) By placing all of your state in one location, you eliminate an entire class of bugs in which two components get into inconsistent states. We also think yo