Giter Club home page Giter Club logo

local-channel's Introduction

local-channel

The general recommendation for making Elm applications modular is to write as much code as possible without signals. We should be primarily be using plain old functions. A typical component will have roughly this API:

-- A model of our component
type alias Model = { ... }

-- Different ways we can update our model
type Update = ...

-- A function to actually perform those updates
step : Update -> Model -> Model

-- A way to view our model on screen and to trigger updates
view : Signal.Channel Update -> Model -> Html

One challenge seems to be that writing a view often requires hooking up to some signal channel. The hard question seems to be, how can we have all our different components reporting to a signal channel in a modular way? Local channels answer this question!

Usage Example

Say we want to model an app that has a search component and a results component. Ideally those components can be written by different people on different teams with minimal amounts of coordination or dependency between their code. Local channels allow them to write self-contained modules that expose view functions with the following types.

  • Search.view : LocalChannel Search.Update -> Search.Model -> Html
  • Results.view : LocalChannel Results.Update -> Results.Model -> Html

Once you have those building blocks, you can wire them together in a larger application like this:

import Signal
import LocalChannel as LC

type alias Model =
    { search : Search.Model
    , results : Results.Model
    , ...
    }

type Update
    = NoOp
    | SearchUpdate Search.Update
    | ResultsUpdate Results.Update
    | ...

updateChannel : Signal.Channel Update
updateChannel =
    Signal.channel NoOp

view : Model -> Html
view model =
    div [] [
      Search.view (LC.create SearchUpdate updateChannel) model.search,
      Results.view (LC.create ResultsUpdate updateChannel) model.results
    ]

In this world, we can create the true Signal.Channel at the very root of our application with all the other signals. Our components do not need to know anything about that though, they just need to ask for a local channel to report things to.

local-channel's People

Contributors

franklinchen avatar process-bot avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.