Elm Revolution

Language by Itself and How It Brings Functional Programming into Web. Presented at Munich Frontend Meetup 2017.

Recommended Links:

https://marcosh.github.io/presentations/2016/10/28/elm-or-how-I-learned-to-love-frontend-development.html

https://infi.nl/nieuws/why-i-became-an-elm-evangelist/

https://medium.com/@ckoster22/advanced-types-in-elm-opaque-types-ec5ec3b84ed2

Transcript

1. ELM THE LANGUAGE ITSELF, AND HOW IT BRINGS FUNCTIONAL PROGRAMMING INTO WEB BY @SHAMAN_SIR • 2017 •
2. A LITTLE PIECE OF HISTORY
3. MVC THIS IS https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller#/media/File:MVC-Process.svg MODEL / VIEW / CONTROLLER
4. FRP FUNCTIONAL REACTIVE PROGRAMMING http://rxmarbles.com
5. — Nikita Dudnik ALL THIS FRP HYPE MADE IT CLEAR HOW USEFUL IT IS TO BE ABLE
 TO CREATE YOUR UI=ƒ(state) ” “
6. IT STARTED WITH GRAPHICS
7. DEBUG.ELM-LANG.ORG/ EDIT/MARIO.ELM
8. TEA THE ELM ARCHITECTURE https://marcosh.github.io/presentations/2016/10/28/img/elm-architecture-simple.png
9. ELLIE-APP.COM
10. SYNTAX
11. module exposing ( what ) name MODULE HEAD
12. module exposing ( what ) definition definition … MODULE WITH DEFINITIONS
13. module exposing ( what ) definition definition … imports MODULE WITH IMPORTS AND DEFINITIONS
14. import module IMPORTING A MODULE
15. import module IMPORTING A MODULE WITH NAME as alias
16. import exposing ( what ) module IMPORT SPECIFIC TYPES FROM A MODULE
17. type type alias definition to what name = name = TYPE DEFINITION
18. module exposing ( what ) definition definition … imports types COMPLETE MODULE: 
 MODULE WITH TYPES, IMPORTS AND DEFINITIONS
19. “ text ” ‘ text ’ number item [ … ] VALUES OF BASIC TYPES , item ( … ) , number character string tuple list
20. { = field , type = field , type … } RECORD AS A VALUE
21. String Int Float Bool Char BASIC TYPES IN DEFINITIONS
22. type ( … ) , List a BASIC TYPES IN DEFINITIONS record alias
23. UNION TYPE type name MyType1 type1 = MyType2 type1 type2 | MyType3 type1 type2 | ( ) … |
24. { : field , type : field , type … } RECORD AS A TYPE
25. { : field , type : field , type … } RECORD AS A TYPE type alias
26. Result err val Html msg Maybe a BASIC TYPES IN DEFINITIONS …
27. subject : type subject = definition VARIABLE DEFINITION
28. subject : type subject = definition VARIABLE DEFINITION (WHICH IS A FUNCTION THAT IMMEDIATELY RETURNS A VALUE)
29. subject : type subject = definition type … → argX … FUNCTION DEFINITION argX → return value
30. subject : type subject = definition type → arg1 FUNCTION DEFINITION arg1 return value
31. subject : type subject = definition type → arg1 arg2 FUNCTION DEFINITION arg1 arg2 type → return value
32. type name = type type → … FUNCTION AS A TYPE
33. function arg1 arg2 arg3 … CALLING A FUNCTION
34. function arg1 arg2 arg3 … ( ) CALLING A FUNCTION
35. function arg1 arg2 arg3 ▻ IMPORTANT TRICK #1
36. function arg1 arg2 arg3 ▻ IMPORTANT TRICK #1 MAKE FUNCTION SUBJECT ALWAYS THE LAST ARGUMENT
37. function arg1 arg2 arg3 ◅ IMPORTANT TRICK #2
38. let in assignments usage GROUPING VARIABLES
39. if condition then code else code IF-CONDITION
40. case option code → option code → … UNBOXING UNION TYPES
41. type ( … ) , UNBOXING (A.K.A. DEREFERENCING) { field , … ) Maybe var MyType var1 var2 …
42. subject : type type → … port PORTS: PORTALS TO JS ENVIRONMENT
43. items [ … ] :: items [ … ] CONCATENATE LISTS
44. record { | = field } value CREATE NEW RECORD USING ANOTHER AS A SOURCE
45. record { | = field , value = field , value … } CREATE NEW RECORD USING ANOTHER AS A SOURCE
46. TYPICAL APP
47. TEA THE ELM ARCHITECTURE https://marcosh.github.io/presentations/2016/10/28/img/elm-architecture-simple.png
48. TEA THE ELM ARCHITECTURE
49. TEA THE ELM ARCHITECTURE
50. WHY?
51. SAFE SIDE EFFECTS ARE ISOLATED
52. LACONIC SYNTAX IS SIMPLE AND MINIMAL
53. FRIENDLY HELPS YOU WRITE BEAUTIFUL CODE WITH CARE
54. RECOMMENDED • https://marcosh.github.io/presentations/2016/10/28/ elm-or-how-I-learned-to-love-frontend-development.html • https://infi.nl/nieuws/why-i-became-an-elm-evangelist/ • https://medium.com/@ckoster22/
 advanced-types-in-elm-opaque-types-ec5ec3b84ed2
55. BY @SHAMAN_SIR THANK YOU • 2017 •