Alternative Component Architecture

Components.elm

import Html exposing (..)
import Html.Attributes exposing (width, style)
import StartApp

import Effects exposing (Effects)
import Task exposing (Task)
import Time exposing (Time)

type MainAction = Sidebar Html | Content Html

type SidebarAction = Navigate | InitializeSidebar Time

type ContentAction = More | InitializeContent Time

type alias MainModel = 
  { sidebar : Html
  , content : Html
  }

type alias SidebarModel = String 
type alias ContentModel = String 

mainComponent sidebar content =
  let 


    init : MainModel 
    init = {sidebar = text "", content = text ""}
    
    update : MainAction -> MainModel -> (MainModel, Effects MainAction)
    update action model =
      case action of
        Sidebar html -> ({model| sidebar = html}, Effects.none)
        Content html -> ({model| content = html}, Effects.none)

    view : Signal.Address MainAction -> MainModel -> Html
    view address model =
      let
        sbStyle = style 
          [ ("background", "#ddf")
          , ( "width", "20%")
          , ("display", "block")
          , ("float", "left")
          , ("height", "100%")
          ] 

        cStyle = style 
          [ ("background", "#fdd")
          , ( "width", "80%")
          , ("display", "block")
          , ("float", "right")
          , ("height", "100%")
          ]
      in 
        div [ style [( "width", "100%"), ("height", "800px"),("background", "#ffd")]] 
        [ div [ sbStyle ] [model.sidebar]
        , div [ cStyle ] [model.content]
        ]

  in 
    StartApp.start 
      { init = (init, Effects.none)
      , update = update 
      , view = view
      , inputs = 
        [ Signal.map Sidebar sidebar.html
        , Signal.map Content content.html ]
      }

sidebar = 
  let 

    update : SidebarAction -> SidebarModel -> (SidebarModel, Effects SidebarAction)
    update action model =
      case action of 
        Navigate -> ( model, Effects.none)  
        InitializeSidebar _ -> ( model, Effects.none)  

    view : Signal.Address SidebarAction -> SidebarModel -> Html
    view address model =
      div [ ] [text "Sidebar"]

  in 
    StartApp.start
      { init = ("", Effects.tick InitializeSidebar)
      , update = update 
      , view = view
      , inputs = []
      }     

content = 
  let 

    update : ContentAction -> ContentModel -> (ContentModel, Effects ContentAction)
    update action model =
      case action of 
        More -> ( model, Effects.none) 
        InitializeContent _ -> ( model, Effects.none) 

    view : Signal.Address ContentAction -> ContentModel -> Html
    view address model =
      div [ ] [text "Content"]

  in 
    StartApp.start
      { init = ("", Effects.tick InitializeContent)
      , update = update 
      , view = view
      , inputs = []
      }     

app = mainComponent sidebar content

port tasks : Signal (Task Effects.Never ())
port tasks = app.tasks

port sbtasks : Signal (Task Effects.Never ())
port sbtasks = sidebar.tasks

port ctasks : Signal (Task Effects.Never ())
port ctasks = content.tasks

main = app.html