How to reuse elm view/logic on different projects?

[SimonLab]

On the following project: https://github.com/club-soda/club-soda-guide, one of the feature is to allow user to filter a list of drinks based on types (first level filters) and styles (sub level fitlers):

As the UI and logic of this type of feature is not obvious/easy to implement with vanilla js it makes sense to use elm and with the idea of being able to reuse this kind of filtering on other projects (see https://github.com/dwyl/technology-stack/issues/67) I looked at how to make the elm code reusable.

I'm still not sure what is the best way to do this. Some projects will have different requirements (for example different UI, different logic of filtering...) and it's quiet tricky to make the elm code abstract enough to be reused on different type of projects. I think trying to create some code that can be used and configured anywhere would be the perfect solution but I don't think it is the right way to start as it makes things overcomplicated for a first version.

So my goal is first to create an understanding step by step guide on how to create the above type of "dropdown filter" with Elm. Then during the writing of this guide some questions and solutions will come in mind and a better (more reusable) version of this Elm module will be created.

Some reading:

• https://www.reddit.com/r/elm/comments/6x5w07/components_in_elm_why_not_and_how/
• https://github.com/evancz/elm-sortable-table/blob/master/examples/1-presidents.elm
• https://becoming-functional.com/making-the-elm-model-modular-7c8a8dcdbf3
• https://package.elm-lang.org/help/design-guidelines
• https://github.com/elm/compiler/blob/master/docs/elm.json/package.md elm.json exemple for a elm package
• https://github.com/elm/file example of elm package
• https://korban.net/posts/elm/2018-10-02-basic-steps-publish-package-elm-19/ How to publish an Elm package (0.19)
• https://github.com/dillonkearns/idiomatic-elm-package-guide some general concepts to keep in mind when creating a package

some watching:

• https://www.youtube.com/watch?v=XpDsk374LDE&feature=youtu.be Elm Europe 2017 - Evan Czaplicki - The life of a file
• https://www.youtube.com/watch?v=DoA4Txr4GUs&feature=youtu.be Richard Feldman - Scaling Elm Apps, Elm Europe 2017
• https://www.youtube.com/watch?v=UiLGIQUGFQg Elm Europe 2017 - Greg Ziegan - Building Reorderable UI in Elm
• https://www.youtube.com/watch?v=yVn7FOQuwDM Let's publish nice package, Brian Hicks, Elm europe 2018
• https://www.youtube.com/watch?v=t-2GiOuLRZc&feature=youtu.be&t=49m41s Developing for the Web with Extreme Safety - Dillon Kearns, 2018

some tweets:

• https://twitter.com/czaplic/status/903266544544878592
• https://twitter.com/czaplic/status/928359033844539393

[ondrej-tucek]

Hi @SimonLab,

maybe this a repo could you help. Now we've almost finished it but we have to write a tons of descriptions for that (and maybe a few refactoring of code, mainly an animation part) before than we insert it on elm-package web. We've created a component (in our case it's modal window) which could be reused with different UI and different behaviours. I think that would be good point for your reading too.

[SimonLab]

Thanks for the link to your repository @ondrej-tucek , I'll definitely have a look at it and try to give you some feedback :+1:

[ondrej-tucek]

Okay, that would be great, thanks.

[SimonLab]

I've done more research and reading (especially https://github.com/evancz/elm-sortable-table) to try to understand how to make the code reusable. I think the main two concepts to remember is

• to have one source of truth for your data. Do not store the data in your package model
• Elm doesn't work well to create reusable components. Instead create your package as a reusable view. On previous project I've done this mistake and I think I start to understand the difference and see the advantages of creating reusable views.

I'll try to explain in more details about these two points on my PR (#126)