Learning Elm in JS

Presentation at Roppongi.js #1
https://roppongi-js.connpass.com/event/81528/

日本語
https://speakerdeck.com/boiyaa/learning-elm-in-js-ja

Transcript

1. L e a r n i n g E l m i n J S 2 0 1 8 . 3 . 2 0 R o p p o n g i . j s # 1
2. • Front-end engineer at PERSOL • GitHub: boiyaa
 Twitter: boiyaaaaaa
3. T h e o b j e c t o f t h i s s l i d e By emulating Elm code in JavaScript, • Know Elm syntax • Know what Elm does • Learn better JS code from Elm
4. • Purely functional language for front-end web • Compiles to JS • Type-safe and non-nullable • Declarative UI building like React • Single source of truth like Redux
5. C o u n t e r A p p
8. ( . . ) m e a n s t h i s m o d u l e e x p o r t s a l l d e f i n i t i o n s
13. F u n c t i o n t h a t t a k e s “ m o d e l ” a s a n a rg u m e n t
14. C u r r i e d f u n c t i o n t h a t t a k e s “ m s g ” a n d “ m o d e l ” a s a rg u m e n t s
15. L o o k s l i k e c o n s t a n t B u t f u n c t i o n t h a t t a k e s n o a rg u m e n t s
16. E l m d o e s n o t h a v e v a r i a b l e s , c o n s t a n t s , a n d c l a s s . A n d e v e r y t h i n g i s a n e x p re s s i o n . T h a t i s w h y f e w k e y w o rd s s u c h a s v a r, l e t , c o n s t , f u n c t i o n , a n d re t u r n .
18. “ V i e w ” f u n c t i o n • Returns HTML structure defined declaratively
19. A f u n c t i o n a p p l i c a t i o n i n E l m i s u s e d w h i t e s p a c e i n s t e a d o f p a re n t h e s i s b e c a u s e e v e r y f u n c t i o n s a re c u r r i e d “ V i e w ” f u n c t i o n
20. J S c u r r i e d f u n c t i o n s a re h a rd t o re a d “ V i e w ” f u n c t i o n
21. J S X l o o k s b e t t e r “ V i e w ” f u n c t i o n
23. • Messages are things that happen (Action in Redux) • Update function is called when message is received and returns updated app state (Reducer in Redux) “ M e s s a g e s ” a n d “ U p d a t e ” f u n c t i o n
24. “ M e s s a g e s ” a n d “ U p d a t e ” f u n c t i o n
25. “ M e s s a g e s ” a n d “ U p d a t e ” f u n c t i o n U n i o n t y p e s C a s e e x p re s s i o n
26. “ M e s s a g e s ” a n d “ U p d a t e ” f u n c t i o n U n i o n t y p e s C a s e e x p re s s i o n D a t a c o n s t r u c t o r
27. “ M e s s a g e s ” a n d “ U p d a t e ” f u n c t i o n U n i o n t y p e s C a s e e x p re s s i o n D a t a c o n s t r u c t o r c a n b e u s e d a s a f i r s t c l a s s v a l u e . B y u s i n g u n i o n t y p e s a n d c a s e e x p re s s i o n , c o m p i l e r f a i l s w h e n p a t t e r n s d o n o t c o v e r a l l c a s e s D a t a c o n s t r u c t o r
28. “ M e s s a g e s ” a n d “ U p d a t e ” f u n c t i o n U n a b l e t o e m u l a t e i n J S b e c a u s e o f u n s u p p o r t i n g t h e m . U n i o n t y p e s i n Ty p e S c r i p t a n d F l o w a re t h e s e t o f o t h e r t y p e s , a re n o t f i r s t c l a s s , a n d c a n n o t b e u s e d p a t t e r n m a t c h i n g .
29. F o r m A p p
30. “ M e s s a g e s ” a n d “ U p d a t e ” f u n c t i o n C o d e g e t s f a t t e r i f t h e c o n s t r u c t o r h a s a n a rg u m e n t s C o d e i s n e s t e d e a c h t i m e a n c o n s t r u c t o r i s a d d e d
31. “ M e s s a g e s ” a n d “ U p d a t e ” f u n c t i o n R e d u x w a y
32. C o n c l u s i o n s • Difficult to emulate Elm’s robustness in JS • Possible to adopt what everything is an expression and reduce coding patterns by restricting some statements and return. • Necessary to care about what it is hard to ensure the robustness in TypeScript or Flow due to using JS modules and using the any type.
33. T h a n k y o u