How we failed with Angular & Elm is the solution

Link to the original article

## Angular 1 The framework that conquered the world
AngularJS is the most common front end framework (in Israel at least) as of 2018. The trend towards alternatives mainly React has long been ongoing but the legacy, the stain of the framework from Google, still marks the industry due to countless reasons.

Angular started out as a library to help create online forms, later the target audience became server IT professionals, that’s why Angular code always seems like belongs on the server rather than a browser. There is no way to render all these {{tags}} without parsing the entire DOM creating a performance issue.

But the main problem AngularJS created, is the illusion we can use it to design the UX as we please (uh … like develop) and that is not the case. So we went looking for solutions in the docs as portrayed by Shai Resnick in his epic presentation ng-wat:

While that’s awesome and entertaining, difficulties implementing the functionality we wanted to provide our users is far from entertaining.
How did we overcome these issues? We’re ninjas, hackers, we googled.. we found solutions in SO — it’s never easy, our lives are a continuous nightmare that rolls from sprint to sprint, swelling backlogs yet these things will never surface because, after all we’re a community, a family ❤

Angular 2,4,5,6 and what happened to 3?
We waited 5 years for the next Angular version until 2016, 18 months later we got Angular 4 and 5. Now in 2018 there’s Angular 6 . Angular 3 was never released.

So Angular 2: we were thrilled to see that there are no more directives, controllers nor services, they’ve all been replaced by components and we learned typescript 😀
Angular 4: lifecycle hooks were changed to an interface instead of an abstract class though we had to upgrade immediately to Angular 5 since version 4 did not include optimization 😮

Unfortunaly the new versions did not absorb well in the community indicated by long list of avid followers that started “defecting” to React.

React
React was created as a library for web interfaces not a complete framework so it never included most of the tools we need to develop web applications, thus requires the use of external libraries for everything else.

Application state can be kept in props inside a component but that does not mean other components are aware of this (modularity), this also compels us to spread our business logic to the components.

So wether we stayed with Angular or chose React or Vue, we still need to use one of the following technologies so that our web application preserve state:
flux, redux, relay, redux-saga, mobX, RxJs, reflux

Keeping the state in Elm is trivial just put it in the model 😜

So maybe, before we switch to another framework, let’s check again and identify the problem we want to solve?

Success does not consist in never making mistakes but in never making the same one a second time. George Bernard Shaw

The reasons why Amazon AWS, Rakuten and countless other companies have already decided on Elm

• Amazon strives to develop the world’s fastest interface for the AWS interface, the world’s most sophisticated interface, and chose Elm
• Rakuten the e-commerce platform with billions of consumers

Elm
Elm is a pure functional language with static type checking, that generates Javascript, Css and Html and provides a complete solution for web development and it’s toolset include the time-traveling-debugger.

Elm’s benefits

1. Performance ​​(2x faster than React and 4x faster Angular)
2. Front end development without side-effects
3. A development environment that includes a dedicated debugger
4. Following 3: refactoring and maintenance operations are significantly easier almost trivial
5. No problem preserving application state
6. Type safety can be applied to css — never have css errors!
7. More safety! you cannot hijack elm network requests
8. Packages are located on github instead of node packages
9. Development process significantly more pleasent without fatigue
10. Produce richer UX, less time debugging and testing

Q: Where can we find Elm developers?
A: You can expect developers to write production code within 3 weeks of training.

Evan Czaplicki Elm’s creator said in a presentation: I wanted to build a site and it wouldn’t let me!

As someone who comes from Angular it took me a while to get used to Elm not just the language (similar to Haskell) but the functional paradigm that says: model the problem as Evan says code is the easy part.

Comparing Frontend Approaches

A look at jQuery, Vue.js, React, and Elm by Peter Jang

As it turns out someone has already made a comparison on how popular frameworks stack up against each other solving the same problem, the writer did an amazing job, his experience comes from the typeless world of frameworks thus his solution in the Elm example isn’t making use of Elms power.

So on this brief example I demonstrate how one could “model the problem” of a notes or todo-list application by creating a type that represents the state.
A link to the ellie example

A functional language is not just a type system, it’s a paradigm that eliminates side-effects.

Some fun facts about Elm :

• Everything is a function
• Everything must have a type
• Everything must have value
• Functions are pure: they must return a type
• All values ​​are static
• Must have a main function

The Elm architecture

The Elm architecture is similar to MVC with a runtime, a runtime that takes care of side-effects for us. So Elm has Model, View, Update and Msg.

View is a function that accepts Model as parameter and outputs HTML
Update is a function that accepts Model and Msg (message) and the according to the message returns an updated Model.
Model is a data structure to holds the information we want to show in the View , i.e information that isn’t visible shouldn’t be included in the Model.
Msg is the message we’re using to communicate events, it could be anything.

Anything? what does that mean? In order to avoid bad practice, such as string comparison, we intoduce a new type:

Meet the Union!

The Union is a type that describes one of several states

type Me = Walking | ChewingGum

While more talented people can walk and chew gum at the same time, Meprovides a quintessential representation of me since it’s impossible for both states to exist at the same time.

It’s easy to fall in love with the ability to define ad hoc types to describe real world problems.

Let’s create aApptype that describes a state of an application

type App = Initialising | Loaded Data

By creating a app property and adding it to our model we’ll always know the state of our application.

To understand just how powerful this simple feature can be, please consider the following example:

type UserStatus = LoggedOut | LoggedIn (Result Http.Error User)

What’s amazing here is that if the value of UserStatus is LoggedInall the users’ information will be available to us or an error message.

so our Model would look like

type alias Model = { user : UserStatus, app : App }

Thanks to your comments I added a list of disadvantages

Cons

• It takes time to learn Elm

The transition form JS land to Elm is not like from Angular to React— not just a language but a completely different paradigm, a new way of thinking and problem analysis.

• It took me personally over 4 months in the evenings, I did not use Slack begginers community enough where every question is received with love ❤
  This avoidance elongated my learning curve, to model the problem is not just a slogan.
  It takes time to learn how to create a model that best represents a solution to our problem— it takes patience and perseverance starting in the shallow waters before setting sail and diving into the ocean.

• Lack of Typeclasses

To coders from the functional world, Elm may feel like a Haskel on crutches, but it’s important remember that front-end is running on a browser, a powerful feature though it may be introducing typeclasses will most likely hurt Elm’s incredible speed, also adding typeclasses may confaound Elm’s target audience — JS developers at this stage when Elm is being absorbed.

Summary

To summarize, this was never meant to be a rant on Angular nor a tutorial on Elm, just a glimpse on real problems of the front-end world and how Elm is emerging triumphant compared to frameworks, that, were never created to deal with the problems we are trying to solve, and this is just the tip of the iceberg on the amazing things that distinguish Elm in this industry.

Talk, talk
The Union type rotates a lot in these places:
https://guide.elm-lang.org/types/union_types.html
https://elmlang.slack.com
http://elm-lang.org/