Angular Meets Elm

How many times, as a developer, have you wondered:

How can I extend the capabilities of the tools I daily use at work?

Well, take for example Angular. An already proven to provide good results, across several markets, framework for developing apps for the web, and not only.

But…

Does it provide everything a developer would wish for?

Yes and No. It depends.

Does it produce good quality products for a company to thrive in the global market?

Yes and No. It depends.

What if there is “something” that can improve the way developers think and code and also makes them confident for their creations?

What if that “something” also helps a company release a bug-free product that works from day 1 until … well, let’s say for too long :D?

Well actually there is, and it is called Elm!

Elm

A functional programming language for the web, that compiles to JavaScript.

Functional programming language, you said?

Well yes. That means:

• No runtime errors in practice.
• Friendly error messages.
• Reliable refactoring.
• Automatically enforced semantic versioning for all Elm packages.

However the most important feature of Elm that we are going to rely on, is it’s interoperability with JavaScript. And this is done via ports.

Hmm, that gives me an idea!

So, without further a do, let’s create a prototype and consider ourselves how we (developers) could benefit from combining Angular and Elm by using them together.

Angular + Elm Prototype

Let’s create a prototype which will simulate a chat between 2 components, an Elm and an Angular one, coexisting on the same page.

So, shall we begin?

Let’s start creating an Angular project

ng new angular-meets-elm --defaults

Then let’s add Elm-ish stuff to the project

cd angular-meets-elm
elm init
elm install elm/json

Then let’s create our Elm component

Main.elm component

It looks like a big component, however all it does, is waiting for user to type something and press the button, thus sending the message to travel through ports to the “outside world” i.e the consumer of the component. Furthermore, a chat list is presented to the user and gets filled with messages coming from the “outside world”.

Now, lets move on to the Angular component’s template

App component template

And its source code is

App component source code

This component is taking the responsibility to initialize the Elm component and also communicate with it. It uses an “id” selector to locate a DOM element to attach the Elm component to, and then subscribes to messages coming from it, via ports.

Run The Prototype

Since this is a prototype we could simply compile and run the prototype manually.

So, let’s compile Elm component first

elm make src/Main.elm --optimize --output=src/elm-components/elm.js

and now let’s start Angular dev-server

npm start

Show Time

Visit http://localhost:4200 at your browser and voila!

Angular meets Elm

Let’s try to send a message from Elm component first (on the left)

Elm says hello to Angular

And the result is

Angular receives “hello” from Elm

Now it is time to send something from Angular component (on the right) back

Angular says “hi” back

And after pressing ‘Send to Elm’ button

Elm receives “hi” from Angular

Final Thoughts

As we saw from our prototype, we managed to create a project where Angular and Elm coexist, really combining whatever benefits we have from both of those worlds!

Well yes, but what does this mean for us, the developers?

It means that developers, apart from their normal every-day job of implementing new features, solving bugs e.t.c, they could also “change sides” and invest some time investigating new possibilities of adding new stuff to an existing product using a new code-base like Elm, which has to offer a lot i.e

• New way of thinking, before and during the development new features
• Sense of security by using enhanced, and in my opinion, better type safety than the one used in Typescript
• Productiveness due to faster compilation times

And what’ s the catch for a company?

A company could benefit from good quality code that is produced, i.e

• Much less bugs
• Performance gain by leveraging the gains of Elm
• Confidence spread across the development teams
• Flexible Management of different teams working on different code-bases at the same time: teams working on Angular, and teams working on Elm

What is next?

We verified that Angular and Elm can coexist at the same project, however this is a prototype we created after all. This means that it is far from a final product released as a viable solution. So, there are a couple of things that need to be taken care of, as future steps i.e

• Automate compilation of Elm components: scripts, package.json configuration, webpack configuration e.t.c
• Establish best practices for Elm components: folder structure, file naming, styling e.t.c
• Adapt testing to meet Elm standards: unit-testing, manual, automation

And that’s all folks!

Psst! Source code can be found here