# Scaling Views with Master View Types

**URL:** <https://discourse.elm-lang.org/t/scaling-views-with-master-view-types/4014>\
**Category:** Show and Tell\
**Created:** [July 18, 2019, 7:40am UTC](https://discourse.elm-lang.org/t/scaling-views-with-master-view-types/4014 "2019-07-18T07:40:45Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![ceddlyburge](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/ceddlyburge/32/2316_2.png) [@ceddlyburge](https://discourse.elm-lang.org/u/ceddlyburge)\
**Post date:** [July 18, 2019, 7:40am UTC](https://discourse.elm-lang.org/t/scaling-views-with-master-view-types/4014/1 "2019-07-18T07:40:45Z")

</div>

I have been doing some thinking about how to scale the `view` as applications get larger and more complicated, and I think that using a Type to define the `view` has a lot of benefits. I’ve gone in to some more details in the article below.

> **[Scaling Elm Views with Master View Types](https://www.freecodecamp.org/news/scaling-elm-views-with-master-view-types/)**
>
> A concept to help Elm Views scale as applications grow larger and more complicated.

Any comments welcome

Thanks, Cedd

---

<div class="post-metadata">

**Author:** ![rupert](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/rupert/32/1775_2.png) [@rupert](https://discourse.elm-lang.org/u/rupert)\
**Post date:** [July 18, 2019, 10:10am UTC](https://discourse.elm-lang.org/t/scaling-views-with-master-view-types/4014/2 "2019-07-18T10:10:07Z")

</div>

Hi,

You talk about the idea of ‘Reusable Views’ which is something that chimes with me. I also like the idea of using types to guide the implementation of a program at a larger scale. We use types all the time for small stuff, like making sure we put the right kind of thing into a list, but it can be very powerful to use types in a more zoomed out fashion to give shape to a whole application.

The principal way in which functional programming allows for code re-use is through higher-order functions. In your article you have explored a different approach, which is to use a custom type to describe a set of permitted options (TextBanner, ViewerBanner, ArticleBanner, …) and to restrict construction of the view using that type so that the various pieces of the view can only be plugged together in the right way.

I have previously explored the other option, which is to make use of higher-order functions; to allow customizable behaviour to be plugged into some defined piece of view logic in order to make it work in different settings. This is a more open-ended way of re-using code.

> [@Looking into Guide Types](https://discourse.elm-lang.org/t/looking-into-guide-types/2507):
>
> I don’t know if this concept has another name, because it is something that I thought of myself, and I call it ‘guide types’. But I am sure I am not the first to think of it, so do let me know if you have another name for it. A ‘guide type’ is a type, usually higher order, that aims to structure a whole program or at least a larger piece of a program, not just an individual function or data model or module. They are very often higher order, because they describe a way in which two pieces of sof…

Perhaps you will find this interesting, when considering the use of ‘large types’ in overall program structure.

---

<div class="post-metadata">

**Author:** ![ceddlyburge](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/ceddlyburge/32/2316_2.png) [@ceddlyburge](https://discourse.elm-lang.org/u/ceddlyburge)\
**Post date:** [July 18, 2019, 11:04am UTC](https://discourse.elm-lang.org/t/scaling-views-with-master-view-types/4014/3 "2019-07-18T11:04:37Z")

</div>

That is interesting! And it seems like it is addressing the same problem, more or less.

Is there a repository I can look at that uses the `Layout` and `Template` types you mention so I can get a better feel for how it works?

---

<div class="post-metadata">

**Author:** ![rupert](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/rupert/32/1775_2.png) [@rupert](https://discourse.elm-lang.org/u/rupert)\
**Post date:** [July 18, 2019, 11:23am UTC](https://discourse.elm-lang.org/t/scaling-views-with-master-view-types/4014/4 "2019-07-18T11:23:09Z")

</div>

Try these two for the `Template` and `Layout` pattern:

[elm-swagger example](https://github.com/the-sett/elm-swagger/blob/master/example/src/elm/Structure.elm)

[the-sett-laf example](https://github.com/the-sett/the-sett-laf/blob/master/example/src/elm/Structure.elm)

You can find another different example here:

[cedar](https://github.com/rupertlssmith/cedar/blob/master/src/elm/Renderer/Flexi.elm)

That last one uses higher order functions to describe templates and layouts with links and an editor - its for a content editor. In client mode, the editor is active and allows content to be edited in the browser. In server mode, a dummy editor is supplied that just renders the content. That one is still on Elm 0.18.

---

<div class="post-metadata">

**Author:** ![ceddlyburge](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/ceddlyburge/32/2316_2.png) [@ceddlyburge](https://discourse.elm-lang.org/u/ceddlyburge)\
**Post date:** [July 18, 2019, 5:02pm UTC](https://discourse.elm-lang.org/t/scaling-views-with-master-view-types/4014/5 "2019-07-18T17:02:19Z")

</div>

That editor looks interesting, and a lot of my stuff is still in 0.18 to be honest.

I’m having trouble understanding what’s going on, but it looks like the view code defines the html, and then the layout code transforms it, adding styling and wrapping the html (within a header / footer and other layout things), is that right?

---

<div class="post-metadata">

**Author:** ![dwayne](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/dwayne/32/5478_2.png) [@dwayne](https://discourse.elm-lang.org/u/dwayne)\
**Post date:** [July 18, 2019, 8:13pm UTC](https://discourse.elm-lang.org/t/scaling-views-with-master-view-types/4014/6 "2019-07-18T20:13:13Z")

</div>

Your link is missing a **c** , so it’s linking to saling-elm-…

---

<div class="post-metadata">

**Author:** ![ceddlyburge](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/ceddlyburge/32/2316_2.png) [@ceddlyburge](https://discourse.elm-lang.org/u/ceddlyburge)\
**Post date:** [July 18, 2019, 8:39pm UTC](https://discourse.elm-lang.org/t/scaling-views-with-master-view-types/4014/7 "2019-07-18T20:39:52Z")

</div>

Apologies, I’ve fixed that …

---

<div class="post-metadata">

**Author:** ![rupert](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/rupert/32/1775_2.png) [@rupert](https://discourse.elm-lang.org/u/rupert)\
**Post date:** [July 19, 2019, 9:42am UTC](https://discourse.elm-lang.org/t/scaling-views-with-master-view-types/4014/8 "2019-07-19T09:42:39Z")

</div>

> [@ceddlyburge](#):
>
> I’m having trouble understanding what’s going on, but it looks like the view code defines the html, and then the layout code transforms it, adding styling and wrapping the html (within a header / footer and other layout things), is that right?

Yes, that is why layout is a function `Template -> Template`. A template builds some HTML for a page body, and a layout wraps that in header footer etc. The result of applying a layout is just another template, but one that builds a page body with all the other stuff.

I took this idea from node express.

---

<div class="post-metadata">

**Author:** ![ceddlyburge](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/ceddlyburge/32/2316_2.png) [@ceddlyburge](https://discourse.elm-lang.org/u/ceddlyburge)\
**Post date:** [July 19, 2019, 11:12am UTC](https://discourse.elm-lang.org/t/scaling-views-with-master-view-types/4014/9 "2019-07-19T11:12:07Z")

</div>

I see what you mean, it’s a bit like express middleware.

I’ve had a think, and I believe that the following is the main difference between our approaches (they’re kind of opposites of each other it seems).

In mine, child views must know about the master view type, but the master view render function doesn’t need to know anything about the child views.

In yours, the child views don’t need to know about the Layout transformation, but the Layout transformation must know about the child views (for example to detect the presence of an editor, and render either the real editor or a dummy editor)

Does that match your understanding?

---

<div class="post-metadata">

**Author:** ![rupert](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/rupert/32/1775_2.png) [@rupert](https://discourse.elm-lang.org/u/rupert)\
**Post date:** [July 19, 2019, 1:56pm UTC](https://discourse.elm-lang.org/t/scaling-views-with-master-view-types/4014/10 "2019-07-19T13:56:26Z")

</div>

Kind of. The template only needs to know about the editor through its type:

```
type alias Editor msg =
    Zipper Content -> Html msg

```

So long as an editor is supplied with this type, the template can use it, but without knowing in advance which one it will get and how it will be implemented. It is basically an interface describing what an editor does - takes a tree of content and renders it to html.

So I think in both our cases the ‘master’ or top-level view does not need to know about the child view, its just that you enumerated the child views as a custom type, and I described them as function types.

I don’t think your approach or my approach is better; they are different ways of using types to describe pieces of software that can be flexibly combined together. That is what interests me about this topic, seeing different ways that types can be used to describe how an application is structured and learning about the merits of different approaches.

I am sure there are plenty other ways that types can be used at the application design level and to hear what other ideas may exist for this purpose.

---

<div class="post-metadata">

**Author:** ![ceddlyburge](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/ceddlyburge/32/2316_2.png) [@ceddlyburge](https://discourse.elm-lang.org/u/ceddlyburge)\
**Post date:** [July 21, 2019, 4:37pm UTC](https://discourse.elm-lang.org/t/scaling-views-with-master-view-types/4014/11 "2019-07-21T16:37:45Z")

</div>

Hi Rupert, I’m not trying to work out who’s is best, so apologies if its coming across that way. Like you say, its an interesting topic, and I think relatively unexplored. I have a good feel for how master view types work, having used them once in a real app and another two times when writing / thinking about the blog post. I haven’t used guide types, so I don’t have the same level of understanding. I’m not as sure what the pros and cons are, and what situations it is best suited to and things like that. Maybe I need to take the plunge and give them a try 🙂

---

<div class="post-metadata">

**Author:** ![rupert](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/rupert/32/1775_2.png) [@rupert](https://discourse.elm-lang.org/u/rupert)\
**Post date:** [July 21, 2019, 8:35pm UTC](https://discourse.elm-lang.org/t/scaling-views-with-master-view-types/4014/12 "2019-07-21T20:35:16Z")

</div>

> [@ceddlyburge](#):
>
> I’m not trying to work out who’s is best, so apologies if its coming across that way.

Not at all - was really just trying to say that I don’t think my approach is better either and to encourage others to put forward ideas and be experimental in this space.

---

<div class="post-metadata">

**Author:** ![ceddlyburge](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/ceddlyburge/32/2316_2.png) [@ceddlyburge](https://discourse.elm-lang.org/u/ceddlyburge)\
**Post date:** [July 21, 2019, 8:49pm UTC](https://discourse.elm-lang.org/t/scaling-views-with-master-view-types/4014/13 "2019-07-21T20:49:36Z")

</div>

Cool cool, sounds like we’re on the same page 🙂

---

<div class="post-metadata">

**Author:** ![ianmackenzie](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/ianmackenzie/32/86_2.png) [@ianmackenzie](https://discourse.elm-lang.org/u/ianmackenzie)\
**Post date:** [July 23, 2019, 12:21am UTC](https://discourse.elm-lang.org/t/scaling-views-with-master-view-types/4014/14 "2019-07-23T00:21:40Z")

</div>

I really like this approach! One other cool advantage I can think of is that the render-to-HTML step can look at the entire structure of the view to determine how best to render it. The rendering engine might choose to merge borders between adjacent elements depending on exactly what they are, or might choose to render a `List Option` as either a set of radio buttons or as an auto-completing dropdown depending on how many options there are in the list.

---

<div class="post-metadata">

**Author:** ![ceddlyburge](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/ceddlyburge/32/2316_2.png) [@ceddlyburge](https://discourse.elm-lang.org/u/ceddlyburge)\
**Post date:** [July 23, 2019, 7:34am UTC](https://discourse.elm-lang.org/t/scaling-views-with-master-view-types/4014/15 "2019-07-23T07:34:25Z")

</div>

Thanks Ian, this is a good point, I’ll update the blog post to mention it.

---

<div class="post-metadata">

**Author:** ![wking-io](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/wking-io/32/2533_2.png) [@wking-io](https://discourse.elm-lang.org/u/wking-io)\
**Post date:** [July 23, 2019, 10:17pm UTC](https://discourse.elm-lang.org/t/scaling-views-with-master-view-types/4014/16 "2019-07-23T22:17:10Z")

</div>

Now that is an interesting idea Ian! I can see that being combined with an Elm only view library like `elm-ui` to create a lot of interesting possibilities for restricting and also managing `View`

---

<div class="post-metadata">

**Author:** ![ceddlyburge](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/ceddlyburge/32/2316_2.png) [@ceddlyburge](https://discourse.elm-lang.org/u/ceddlyburge)\
**Post date:** [July 24, 2019, 2:46pm UTC](https://discourse.elm-lang.org/t/scaling-views-with-master-view-types/4014/17 "2019-07-24T14:46:58Z")

</div>

Hi Will. The concept is agnostic to the view library. The example code from the blog post uses the standard elm `Html` functions with bootstrap, but I’ve also used it with `style-elements` (the predecessor to `elm-ui` - I need to get round to upgrading)

You can look at the [rendering code](https://github.com/ceddlyburge/elm-league-tables-from-google-sheets/blob/master/src/Pages/RenderPage.elm) for this if you are interested. It is probably a bit less clear at demonstrating the point, as its part of a real application, but probably better than nothing.

---

<div class="post-metadata">

**Author:** ![wking-io](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/wking-io/32/2533_2.png) [@wking-io](https://discourse.elm-lang.org/u/wking-io)\
**Post date:** [July 24, 2019, 3:14pm UTC](https://discourse.elm-lang.org/t/scaling-views-with-master-view-types/4014/18 "2019-07-24T15:14:48Z")

</div>

Oh for sure! Sorry, wasn’t trying to say you idea needed a specific view library. I was just thinking it could be leveraged with a elm view library to be able to use Types to explore some of the thing Ian mentioned with types to help along the way.

---

<div class="post-metadata">

**Author:** ![ceddlyburge](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/ceddlyburge/32/2316_2.png) [@ceddlyburge](https://discourse.elm-lang.org/u/ceddlyburge)\
**Post date:** [July 24, 2019, 4:34pm UTC](https://discourse.elm-lang.org/t/scaling-views-with-master-view-types/4014/19 "2019-07-24T16:34:13Z")

</div>

Cool, I wasn’t trying to saying that you were trying to say that it needed a specific view library 🙂 Sounds like everybody is happy!

---

<div class="post-metadata">

**Author:** ![wking-io](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/wking-io/32/2533_2.png) [@wking-io](https://discourse.elm-lang.org/u/wking-io)\
**Post date:** [July 24, 2019, 4:46pm UTC](https://discourse.elm-lang.org/t/scaling-views-with-master-view-types/4014/20 "2019-07-24T16:46:26Z")

</div>

Okay cool sounds like we are on the same one about me not trying to say that you not trying to say that I was trying to say that it needs a specific view library. 😂

[Next page](https://discourse.elm-lang.org/t/scaling-views-with-master-view-types/4014.md?page=2)