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

• Front-end engineer at PERSOL • GitHub: boiyaa
 Twitter: boiyaaaaaa

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

• 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

C o u n t e r A p p

No content

No content

( . . ) 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

No content

No content

No content

No content

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

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

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

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 .

No content

“ V i e w ” f u n c t i o n • Returns HTML structure defined declaratively

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

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

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

No content

• 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

“ 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

“ 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

“ 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

“ 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

“ 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 .

F o r m A p p

“ 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

“ 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

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.

T h a n k y o u