Stepping out of the chaos with Elm

So many frameworks! The javascript world seems to have an explosion of tools, a new one appears every other day with the promise of revolutionizing the way you program. We have seen the rise and fall of giants, but we are somehow not significantly more productive than before. What can we learn from our past and change in our present? Enter Elm. Elm is a programming language for the web with the unparalleled combination of speed and maintainability that the javascript world is so much looking forward to have. This talk talks is about the three major aspects of Elm and why I think it is leads the only sane step out of the chaos we are living in the frontend world: Elm as a language and how it can drastically change the maintainability issue for javascript apps; Elm as a architecture and how having clear guidelines that are enforced by the language is a good idea; and Elm as a fast growing ecosystem of very high quality resources.

Transcript

1. STEPPING OUT OF THE CHAOS With Elm
2. STEPPING OUT OF THE CHAOS With Elm
3. THE CHAOTIC JS WORLD
4. TOO MANY LIBRARIES! ➤ When starting a project it is not clear what combination of libraries should be picked.
5. WHAT IS JAVASCRIPT’S SINGLE BIGGEST ISSUE?
6. MAYBE ITS QUIRKINESS?
7. MAYBE ITS QUIRKINESS? …Not really
8. IT IS: MAINTAINABILITY
9. IT IS: MAINTAINABILITY
10. JS IS EASY TO GET STARTED WITH ➤ But it is also difficult to maintain in the long run.
11. JS IS EASY TO GET STARTED WITH ➤ But it is also difficult to maintain in the long run. ➤ A wide array of runtime errors can happen due to simple overlooks
12. JS IS EASY TO GET STARTED WITH ➤ But it is also difficult to maintain in the long run. ➤ A wide array of runtime errors can happen due to simple overlooks
13. JS IS EASY TO GET STARTED WITH ➤ But it is also difficult to maintain in the long run. ➤ A wide array of runtime errors can happen due to simple overlooks ➤ It is easier to come up with hacks for solving issues. Hacks are rarely documented.
14. JS IS EASY TO GET STARTED WITH ➤ But it is also difficult to maintain in the long run. ➤ A wide array of runtime errors can happen due to simple overlooks ➤ It is easier to come up with hacks for solving issues. Hacks are rarely documented. ➤ TypeScript, flow, Rx, unit tests… they all help, but they are only used by people that understand their value.
15. EXPERIENCE AND DISCIPLINE The magic combo to make javascript maintainable
16. EXPERIENCE AND DISCIPLINE
17. VS TIGHT DEADLINE
18. STEPPING OUT OF THE CHAOS With Elm
19. STEPPING OUT OF THE CHAOS With Elm
20. “What I want to do is: I want to get to this magic realm where we get that [insanely high] level of maintainability, but where we also have something usable. -Evan Czaplicki, creator of Elm
21. CAN YOU IMAGINE NEVER HAVING A RUNTIME ERROR?
22. CAN YOU IMAGINE NEVER HAVING A RUNTIME ERROR?
23. A simple Elm program Module importing Defining a Value Defining a Function Calling a function with a value
24. A simple Elm program Module importing Defining a Value Defining a Function Calling a function with a value
28. Declare a new data type
29. Declare a new data type }Properties of the Person
30. Declare a new data type }Properties of the Person } Type annotation
31. Declare a new data type }Properties of the Person } Type annotation Takes the person argument and sets the property to newAddress
32. Declare a new data type }Properties of the Person } Type annotation Takes the person argument and sets the property to newAddress This function actually returns a different person. It does not change the passed argument!
34. Tak for hjælpen
35. YOU DON’T NEED TO TELL HOW THE DOM IS CHANGED just declare how it should look like
37. This builds a single <li>
38. Html is constructed declaratively This builds a single <li>
39. Html is constructed declaratively First argument is a list of attributes This builds a single <li>
40. Html is constructed declaratively First argument is a list of attributes Second argument is a list of children Html Nodes This builds a single <li>
41. Html is constructed declaratively First argument is a list of attributes Second argument is a list of children Html Nodes This builds a single <li>
42. YOU DON’T NEED TO HANDLE EVENTS just declare the message they represent
44. Does the initial wiring for you
45. Does the initial wiring for you we start the app with an empty list
46. Does the initial wiring for you we start the app with an empty list The view function in this file
47. Does the initial wiring for you we start the app with an empty list The view function in this file }Defines the type of messages the app will get from the user
48. Does the initial wiring for you we start the app with an empty list The view function in this file }Defines the type of messages the app will get from the user Pass the message on click
49. Does the initial wiring for you we start the app with an empty list The view function in this file }Defines the type of messages the app will get from the user Pass the message on click
51. The message from the user
52. The message from the user The “model” (list of languages)
53. }scopes variables to this function The message from the user The “model” (list of languages)
54. }scopes variables to this function The message from the user The “model” (list of languages) } These are always safe operations. Even on empty lists
55. }scopes variables to this function The message from the user The “model” (list of languages) } These are always safe operations. Even on empty lists Finally return the modified “model”
56. }scopes variables to this function The message from the user The “model” (list of languages) } These are always safe operations. Even on empty lists Finally return the modified “model” The pipe is like the “.” operator in JS
57. WOULD YOU LIKE SOME TEA? TEA: The Elm Architecture
58. DO YOU REMEMBER THIS?
59. DO YOU REMEMBER THIS? Idea: It would be nice if we could have composable and reusable modules by only having to declare these 3 things.
60. Declare a module with the TEA API Instead of hardcoding the languages. Make them dynamic Refactored the previous code to use helper functions
62. We’ll have two list of languages. Here are the defaults
63. We’ll have two list of languages. Here are the defaults The same pattern repeats, here’s the main program’s Model
64. We’ll have two list of languages. Here are the defaults The same pattern repeats, here’s the main program’s Model Re-use the Model from the other module
65. We’ll have two list of languages. Here are the defaults The same pattern repeats, here’s the main program’s Model Re-use the Model from the other module The messages are coming from either one list or the other. We distinguish them by “tag”
66. We’ll have two list of languages. Here are the defaults The same pattern repeats, here’s the main program’s Model Re-use the Model from the other module The messages are coming from either one list or the other. We distinguish them by “tag” We can call this a “tag”
67. We’ll have two list of languages. Here are the defaults The same pattern repeats, here’s the main program’s Model Re-use the Model from the other module The messages are coming from either one list or the other. We distinguish them by “tag” We can call this a “tag” We delegate the update logic to the sub-module
68. We’ll have two list of languages. Here are the defaults The same pattern repeats, here’s the main program’s Model Re-use the Model from the other module The messages are coming from either one list or the other. We distinguish them by “tag” We can call this a “tag” We delegate the update logic to the sub-module
70. Re-use the view from the other module
71. Re-use the view from the other module Automatically tag events coming from this view
72. Re-use the view from the other module Automatically tag events coming from this view Pass only the relevant data
73. Re-use the view from the other module Automatically tag events coming from this view Pass only the relevant data Wire the application together
74. Re-use the view from the other module Automatically tag events coming from this view Pass only the relevant data Wire the application together
75. COMMUNITY Elm as a community of high quality packages
76. THE PACKAGING SYSTEM
77. THE PACKAGING SYSTEM ➤ elm-package is the tool for sharing packages with the community
78. THE PACKAGING SYSTEM ➤ elm-package is the tool for sharing packages with the community ➤ Documentation in every package is automatically displayed online
79. THE PACKAGING SYSTEM ➤ elm-package is the tool for sharing packages with the community ➤ Documentation in every package is automatically displayed online ➤ The packager will prevent you from publishing broken code
80. THE PACKAGING SYSTEM ➤ elm-package is the tool for sharing packages with the community ➤ Documentation in every package is automatically displayed online ➤ The packager will prevent you from publishing broken code ➤ If you make an API change the packager will automatically bump the semantic version for you
81. PLENTY OF RESOURCES AND HELP
82. PLENTY OF RESOURCES AND HELP ➤ Elm was designed with usability in mind. Concepts are explained with clear examples in the guide.
83. PLENTY OF RESOURCES AND HELP ➤ Elm was designed with usability in mind. Concepts are explained with clear examples in the guide. ➤ Plenty of example applications linked from the homepage
84. PLENTY OF RESOURCES AND HELP ➤ Elm was designed with usability in mind. Concepts are explained with clear examples in the guide. ➤ Plenty of example applications linked from the homepage ➤ The best place to ask for help is the slack channel or IRC, where several hundred people hang out during the day.
85. PLENTY OF RESOURCES AND HELP ➤ Elm was designed with usability in mind. Concepts are explained with clear examples in the guide. ➤ Plenty of example applications linked from the homepage ➤ The best place to ask for help is the slack channel or IRC, where several hundred people hang out during the day. ➤ Monthly @elmcph meet up in Copenhagen. Next one is tomorrow!!
86. QUESTIONS?
87. QUESTIONS? Thanks for attending!