Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Learning Elm in JS

F425aff2e1f934fc1e5fa95b1f933068?s=47 boiyama
March 20, 2018

Learning Elm in JS

F425aff2e1f934fc1e5fa95b1f933068?s=128

boiyama

March 20, 2018
Tweet

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

  6. None
  7. None
  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
  9. None
  10. None
  11. None
  12. None
  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 .
  17. None
  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
  22. None
  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