The document discusses Elm, a functional programming language for frontend development, highlighting its advantages over JavaScript, such as a static type system and the avoidance of runtime exceptions. It explains Elm's architecture including the concepts of initialization, view, updates, and state management, as well as features like human-readable error messages and incremental adoption. The document also mentions the potential for seamless integration with existing JavaScript projects.

1. Elm
Functional Programming for Frontend
Jawahar
Thoughtworks

2. Agenda
Why Elm?
How does Elm work?
What distinguish Elm from other languages?

3. Why Elm?

4. Why not Javascript ?
● Not pure functional.
● Dynamically typed. Leads to runtime exceptions.
● Unpredictable.

5. Package Managers
State Management
Redux
Virtual DOM/UI Rendering
ReactJS Vue.js
Static Type system
Flow JSTypescript

6. Pure
functional
Strongly
typed
State
management
Virtual
DOM

7. How does Elm work?

8. INIT
VIEW
UPDATE
STATEDOM
STATE
MSG
STATE
on click

9. Redux evolves the ideas of flux, but
avoids its complexity by taking cues
from Elm.
-Dan Abramov, Author of Redux

10. .elm
.elm
bundle.js
runtime.js
.html
.css
Elm Project
Elm
Compiler
Build artifacts

11. Code Walkthrough

12. Human readable
error messages

13. Tagged Unions
(Composite Data Type)

14. Book Shop

16. New item Collectible

17. Store Item is a
Book
Or Art
Or Collectible

18. Zero runtime
exceptions

20. Possibility for null
exception

21. findByIdInteger Person
findByIdInteger Maybe Person

22. Enforced error handling

23. Auto semantic versioning

25. Summary
Great language features
Steep learning curve
Incremental Adoption
Javascript Interop