Video and slides synchronized, mp3 and slide download available at URL http://bit.ly/2pWj8Ra. Richard Feldman introduces Elm, how it works, what differentiates it from the other front-end technologies, and gives practical advice for introducing it to an existing JavaScript codebase. Filmed at qconlondon.com. Richard Feldman works as a Software Engineer at Noredink. He is the author of “Elm in Action” from Manning Publications, and the instructor for the Frontend Masters 2-Day Elm Workshop.

1. IN PRODUCTIONelmFULL-SCALE
@rtfeldman

2. InfoQ.com: News & Community Site
Watch the video with slide
synchronization on InfoQ.com!
https://www.infoq.com/presentations/
elm-producton
• Over 1,000,000 software developers, architects and CTOs read the site world-
wide every month
• 250,000 senior developers subscribe to our weekly newsletter
• Published in 4 languages (English, Chinese, Japanese and Brazilian
Portuguese)
• Post content from our QCon conferences
• 2 dedicated podcast channels: The InfoQ Podcast, with a focus on
Architecture and The Engineering Culture Podcast, with a focus on building
• 96 deep dives on innovative topics packed as downloadable emags and
minibooks
• Over 40 new content items per week

3. Purpose of QCon
- to empower software development by facilitating the spread of
knowledge and innovation
Strategy
- practitioner-driven conference designed for YOU: influencers of
change and innovation in your teams
- speakers and topics driving the evolution and innovation
- connecting and catalyzing the influencers and innovators
Highlights
- attended by more than 12,000 delegates since 2007
- held in 9 cities worldwide
Presented at QCon London
www.qconlondon.com

4. 2014 201620152013

6. 2 billion questions answered
100,000 lines of elm code
0 runtime exceptions
IN PRODUCTION

7. Ellie

8. VIEW FUNCTION
ARGUMENTS → VIRTUAL DOM

9. the elm architecture
viewupdate Model
Msg VDOM
Elm Runtime

10. JavaScript
React
Elm
DOM + globals
components
1 immutable value
APPLICATION STATE
+ stores

11. Object-Oriented vs Functional
different paradigm to learn
Elm has no components

12. Dynamic Types vs Type-Checked
cheaper refactoring → less technical debt
“if it compiles, it usually just works”
more time in the console, less in the browser

13. IMPACT ON VELOCITY
JS: Quicker to get something on the screen
Elm: Higher overall velocity

14. Interoprerating with JavaScript
Elm code talks to JavaScript
the way it talks to servers
JAVASCRIPT AS A SERVICE

15. MAINTAIN GUARANTEES
JAVASCRIPT ECOSYSTEM
while accessing the huge

16. npm
much bigger than elm-package ecosystem
publish JavaScript, binaries, etc.
may also install keyloggers

17. elm-package
installing packages can’t install keyloggers
supports Elm code, not arbitrary JavaScript
semantic versioning automatically enforced

18. elm-package
less available off-the-shelf, more DIY
write a wrapper around moment.js
write a Date library in pure Elm
long-term ecosystem quality

19. Full-Scale Elm
Small-Scale Elm
begins with

20. SHIP SOMETHING SMALL

21. GET IT INTO
PRODUCTION

22. how will we...
INTEGRATE it into our code?
TEACH it to our teammates?
BUILD and deploy it?

23. MINIMAL RISK
MAJOR REWARD

24. how will we BUILD it?
Sprockets (Rails)
Webpack loader
elm-make

25. ADVANCED BUILDS?

26. Server-Side Elm
Server-Side Rendering
Code Splitting
What about...

27. “Why not use ______ instead?”

28. delight

29. “That should be an inspiration for every error message.” —John Carmack“That should be an inspiration for every error message.” —John Carmack

30. reliability

31. (optional types)(optional types)(optional types)

33. “just don’t use it”
“also don’t use libraries that use it”
any

34. any is considered part of best practices

35. LESS CRASHING THAN PLAIN JS
ZERO RUNTIME EXCEPTIONS
Elm

36. OCaml + BuckleScript
Haskell (or GHCjs)
Scala
Clojure ClojureScript
“Why not use a different FP language?”

37. optional typing
ClojureScript

38. anything can be null
ClojureScript

39. anything can run arbitrary JS code
ClojureScript
+ BuckleScript

40. how will we HIRE anyone?

41. 11 developers hired in 2016
9 cited Elm as a reason for applying
hiring was much harder before we used Elm!

42. Hiring for React, Redux, Immutable.js, Babel
Hiring for Angular 2, TypeScript, Ramda
Want to come write Elm full-time?
WHICH JOB POSTS STAND OUT?

43. how will we TEACH it?
more new hires already know React than Elm
compiler aids beginner learning a LOT
similar time to becoming prod contributor

44. guide.elm-lang.org
RESOURCES
How to Use Elm at Work
elm-lang.org/blog

46. Kris Jenkins
jenkster.com
created elm-remote-data
Luke Westby
humblespark.com
created Ellie
TRAINING
Brian Hicks
aster.is
created elm-benchmark

47. elmtown.github.io
Elm Town Podcast

48. beginner-friendly community
SLACK (5,000+ members, #beginners channel)
elmlang.herokuapp.com
REDDIT (weekly beginner questions thread)
reddit.com/r/elm

49. St. Louis
Zürich
Chicago
Seattle
Utrecht
Denver
Copenhagen Hamburg
DCHelsinki
London
Paris
San Francisco

52. HOW CAN OUR TEAM DO THIS?

53. Full-Scale Elm
Small-Scale Elm
begins with

54. SHIP SOMETHING SMALL

55. GET IT INTO
PRODUCTION

56. @rtfeldman

57. Watch the video with slide synchronization on
InfoQ.com!
https://www.infoq.com/presentations/elm-
producton