When comparing Elm vs Web Components, the Slant community recommends Elm for most people. In the question“What are the best solutions to "The JavaScript Problem"?” Elm is ranked 1st while Web Components is ranked 29th. The most important reason people chose Elm is:
Lack of run-time exceptions makes it easy to produce large swathes of reliable front-end code without drowning in tests.
Specs
Ranked in these QuestionsQuestion Ranking
Pros
Pro No run-time exceptions
Lack of run-time exceptions makes it easy to produce large swathes of reliable front-end code without drowning in tests.
Pro Inferred static typing
ML static typing is great because it's always there, you just choose how explicit you want to be and how much you want the compiler to do.
Pro Super easy refactoring with very helpful compiler errors
In no other language you can refactor so easy without any worries, since the compiler will guide you through. It is like TDD but than compiler-error driven.
Pro Designed around high-level front-end development
As Elm was designed as a front-end langauge, it has out of the box support for things like DOM-element creation, letting programmers focus on their application logic, rather than implementation details specific to the web.
Pro Great and simple way to learn Purely Functional Programming
You can try to apply some functional programming ideas in other languages that have an imperative basis, but you haven't seen the real power unless you tried it in the environment of purely functional programming. Elm is a simple language with great learning resources and easy graphical output, which makes it easy to explore the power of functional programming. Plus programming in Elm is very readable.
Pro Good tooling
All major editors have great support. With Atom for example, Elm plugins are available for linting, formatting, make/compiler support and Elmjutsu will simply overflow you with super useful functions, like navigate to referenced definition and show expression type.
Pro Batteries included
The Elm Architecture means you don't need to spend valuable time and effort choosing the right frameworks, state management libraries, or build tooling. It's all built in.
Pro Static module system
Elm uses easy to use modules.
Use:
import List
import List as L
import List exposing (..)
import List exposing ( map, foldl )
import Maybe exposing ( Maybe )
import Maybe exposing ( Maybe(..) )
import Maybe exposing ( Maybe(Just) )
Creation:
module MyModule exposing (foo, bar)
Pro Missing syntactic sugar
Easy to learn, most functions have only one way, not 5 alternatives where you must study where to best use what.
Pro Growing community
Pro Interactive Programming and Hot Swapping
Support for hot swapping and interactive programming is included.
Pro Easy to code review
The lack of side-effects and simple, consistent language semantics make it easy to quickly review incoming changes.
Pro Higher confidence in code correctness and quality
Pure functions, immutable data structures, amazing compiler, clean and homologous syntax used for HTML, logic, and optionally to replace CSS, elimination of entire classes of bugs so you don't even need most unit tests. These factors lead to better code, better programs, higher confidence, and ultimately, more satisfaction.
Pro Not quite Haskell semantics
Luckily you do not have to learn Haskell to be able to do any Elm. It is meant to be a language that compiles to Javascript, so for Javascript programmers (Front end) not for CS students who want to learn as many different algorithms as possible.
Pro Great for small—likely published—reusable libraries
Very extendable as a single-import base layer for visual controls and probably also something like a react-redux Provider.
Pro Works with any framework
Less recreation of the wheel and fewer wrappers.
Pro Fallback styling when not yet defined
Before a component's script defines the custom element—either as the page is loading or with JavaScript disabled—it can be temporarily styled via :not(:defined)
. This may prevent the need for SSR.
Pro Customizable templates via custom-recognized "slots"
slot="name"
and <slot name="name">
for customizing a component's HTML in specific areas of its shadow DOM. Also fallbacks when not defined.
Pro Stylable via custom-exposed "parts"
::part(name)
pseudo-element for styling elements within a component's shadow DOM.
Cons
Con Lack of typeclasses
Elm doesn't have typeclasses which means some code needs to be duplicated. A fix in a function that needs typeclasses means all of the duplicates need to be fixed too.
Con limited js interop
only one way ports are available as a crude js FFI. This means you can only call functions both directions but will not get a result.
Con Harder to get buy-in from devs and mgmt
It's a total divergence from what most people are used to in the JS ecosystem. The change in syntax can be scary, the change in approaching problems can be scary. The fact that it's not backed by FANG can be scary. The fact that it's not v1.0 can be scary. The governance model and the deliberately slow release cadence can be scary. There are a couple harsh medium articles, hackernews/reddit posts out there made by people with an ax to grind that can be scary if you don't have a better picture of the Elm community, the tradeoffs that have been made, or the benefits to be had over other options. None of these are good reasons to write off further investigation of a great tech, but it happens.
Con Code Repetition
Because of the lack of genericness Elm needs a lot of code to be repeated. There are 130+ implementations of map in elms core libraries.
Con Features get removed without warning
Often features that are deemed to be misused by the community like infix operators get removed without much of a warning.
Con Community harsh if criticised
If one even dares to start a discussion about a feature on elms slack, discord, subreddit or github one will be aggressively shut down often argueing that one should use purescript instead
Con Poor Windows support
Few if any of Elm's core contributors are Windows users and breaking bugs are sometimes left for weeks or months.
Con Good for beginners not good for experts
Development in elm is quite nice until you need some more advanced features. These however are actively discontinued and removed because elm wants to establish a "single way of doing things" philosophy
Con Updates break existing code often
The last few updates of elm broke existing code in major ways.
Con Adds an additional layer of abstraction
Some users claim that Elm adds an additional layer of abstraction, meaning that it is one more hurdle between the brain and the product.
Con Functional programming itself has quite a steep learning curve
Functional programming can be quite difficult to get your head around. It takes time to unlearn object orientational habits.
Con No Genericness in the future
Currently there is no code genericness like typeclasses possible, it has been officially stated that this will never change.
Con Not database-friendly
It is lots of work to make a server or database your "one source of truth", as Elm makes you write endless JSON parse boilerplate to talk to the server.
Con No Syntactic Sugar
Often you need to write longer and less readable code because there are no alternatives that are more concise.
Con Not well-suited for application wiring
Having to serialize/deserialize data between components is not convenient. You'll probably still need a [light/simple] framework. Some things are still quite nice, such as using the light DOM -- think <option>
with <select>
and <datalist>
.
Con SSR is potentially more difficult
…if you need more than CSS' :not(:defined)
, that is.
Check out this video to see how the creator of SkateJS handled it: https://www.youtube.com/watch?v=yT-EsESAmgA