Diving into some of the clever ideas of the Elm programming language

1. What is Elm and Why Should I Care?
Diving into some of the clever ideas of the Elm programming language

2. Ehm, ok… But who
the hell are you?!?

3. Claudio
D’Alicandro
Backend developer for
AdEspresso by Hootsuite
@_cdali

4. Why you should listen to me
● My Javascript Jutsu is bad, so sooo bad!
● In my backend career I wrote two lambda and three node services, at best
● I work mainly in PHP, you know... that language you think when you need to do
negative examples!
● In recent years I have worked hard in speaking about technologies with which I
have not made a penny
● The more I study, the more I give up my certainties about the world of
programming

6. Features
Yeah,
this is the “What is Elm” part…
elm
A delightful language for
reliable webapps.
Generate JavaScript with great performance and no
runtime exceptions.

7. No Runtime Exceptions

8. Characteristics
● Declarative web development
● Virtual DOM
As React also the Elm Runtime uses Virtual DOM for fast node updates
● Immutability
All values in Elm are immutable (Constants, Collections, ...)
● Purely functional
Javascript can have a functional style but it is not a functional language!
Elm is functional (Pure functions, currying by default, pattern matching ...)
● Static type checking

9. How does it works?

10. How does it works?

11. Elm Union Types
I call it my billion-dollar mistake… At that time, I was designing the first
comprehensive type system for references in an object-oriented language. My
goal was to ensure that all use of references should be absolutely safe, with
checking performed automatically by the compiler. But I couldn’t resist the
temptation to put in a null reference, simply because it was so easy to implement.
This has led to innumerable errors, vulnerabilities, and system crashes, which
have probably caused a billion dollars of pain and damage in the last forty years.
– Tony Hoare, inventor of ALGOL W.

12. How does it works?

13. How does it works?

14. Elm is a pure
functional language

15. 100%Features that require side effects

16. Who will do the dirty work?
You will simply have to ask to the elm
runtime and it will do it for you!

17. How does it work?
I’m only describing how to generate a
random number and how to give it
back to me!
update
elm runtime
Random.generate produces a Cmd
msg, and sends it to the elm runtime…
Then the elm runtime generates a
random number for me, sends it back
to the update function in the way I
describe: as a NewFace Int
Cmd
Msg
Random.generate : (a -> msg) -> Random.Generator a -> Cmd msg

18. Elm Architecture
A comparison between redux
and elm architecture

19. Elm architecture vs Redux

20. Elm Runtime
Your code responsability: your code
elm runtime
Html
Msg
Sub
Cmd
● Produce HTML
● Emit Commands
● Establish Subscriptions

21. Elm Interop
Finally…
The “Why Should I Care” part!!

22. package.json

23. webpack.config.js

24. webpack.config.js

25. Hello from Elm!!

26. Hello from Elm!!

27. Hello from Elm… from React

28. Get fancier.... Flags and Ports

29. Get fancier.... Flags and Ports

30. Get fancier.... Flags and Ports

31. Get fancier.... Flags and Ports

32. Rewrite

33. Questions?