Elm at Treefin

Stefan Ostermayr — Mon, 14 Jun 2021 10:33:27 +0000

Hello lovely Elm-Community! We at treefin (Munich, Germany) love Elm and want to share our story along with some exciting news with you!

As a short intro: Treefin is a digital assistant for all of your financial matters. It allows you to keep your bank accounts, insurances and investments in one place, providing you with helpful insights and a 360° overview of your spendings.

A few years back we have made the decision to rewrite our codebase. With treefin being a finance app, our users’ trust has always been our primary concern. Stability and a high standard of quality were therefore of great importance when it came to choosing the frontend tools. TL;DR: We chose Elm!

Our approach is to gradually migrate chunks of our old AngularJS-frontend to a new codebase using Elm. We keep those two codebases strictly separated. To enforce this (also on CSS level) the new app is integrated into the old one using an iFrame, with the option of making it a custom element with shadow DOM in the future. The two components are packaged using Webpack. The app is finally shipped as Cordova Hybrid app which helps us to easily target web browsers as well as Google and Apple Phones.

While implementing the new app, we adhered to community standards for writing SPAs in Elm: We keep a Main.elm as a central unit, managing state, rendering all views and handling commands and subscriptions.

Our Elm caching layer is a robust and scalable solution for complex single page applications. With a Cache.elm we keep all communication to the outer world and our application’s global state in one place. Any data required by a Page is expressed as a Need, which abstracts requests to cache (read more).

With a new app comes a fresh UI design, too! We follow the Material Design guidelines and use Material Components from the aforemny/material-components-web-elm package as much as possible. Additionally, all of our CSS is following the BEM methodology. To enforce this, we have implemented helper functions in a Utils.Bem module and use those for displaying any part of the UI. To make the navigation between the old and new areas of the app as seamless as possible, huge efforts were put into styling on both sides of the code.

If you would like to test out the treefin app, you can use one of our demo bank accounts! You can find the web app here or download the mobile version both from Play Store and App Store. After registration, you can add a dummy bank connection through searching for “Demo Provider” in the list of bank providers. The demo account names and credentials are displayed on screen, however, demo2/demo has to most data in it, so we would advise you to go for this one!

That's all folks.

Forem: Stefan Ostermayr

Elm at Treefin