Elm 101

Transcript

1. Elm A delightful language for reliable webapps. speacker @tom76kimo
2. Generate JavaScript with great performance and no runtime exceptions.
3. Take a glance i m p o r t H t m l e x p o s i n g ( b e g i n n e r P r o g r a m , d i v , b u t t o n , t e x t ) i m p o r t H t m l . E v e n t s e x p o s i n g ( o n C l i c k ) m a i n = b e g i n n e r P r o g r a m { m o d e l = 0 , v i e w = v i e w , u p d a t e = u p d a t e } v i e w m o d e l = d i v [ ] [ b u t t o n [ o n C l i c k D e c r e m e n t ] [ t e x t " ‐ " ] , d i v [ ] [ t e x t ( t o S t r i n g m o d e l ) ] , b u t t o n [ o n C l i c k I n c r e m e n t ] [ t e x t " + " ] ] t y p e M s g = I n c r e m e n t | D e c r e m e n t u p d a t e m s g m o d e l = c a s e m s g o f I n c r e m e n t ‐ > m o d e l + 1 D e c r e m e n t ‐ > m o d e l ‐ 1
4. Why Elm? JavaScript Interop No Runtime Exceptions Great Performance Enforced Semantic Versioning Functional Programming
5. JavaScript Interop v a r E l m = r e q u i r e ( ' d i s t / e l m / a p p . j s ' ) ; v a r n o d e = d o c u m e n t . g e t E l e m e n t B y I d ( ' e l m ‐ a p p ' ) ; v a r a p p = E l m . A p p . e m b e d ( n o d e ) ;
6. No Runtime Exceptions
7. Great Performance
8. Functional Programming 無可避免地要來談一下 v a r a d d = f u n c t i o n ( x , y ) { r e t u r n x + y } ; v a r m u l t i p l y = f u n c t i o n ( x , y ) { r e t u r n x * y } ;
9. Functional Programming / / 结合律（a s s o s i a t i v e ） a d d ( a d d ( x , y ) , z ) = = a d d ( x , a d d ( y , z ) ) ; / / 交换律（c o m m u t a t i v e ） a d d ( x , y ) = = a d d ( y , x ) ; / / 同一律（i d e n t i t y ） a d d ( x , 0 ) = = x ; / / 分配律（d i s t r i b u t i v e ） m u l t i p l y ( x , a d d ( y , z ) ) = = a d d ( m u l t i p l y ( x , y ) , m u l t i p l y ( x , z ) ) ;
10. Functional Programming Pure Function No Side Effect 1 to 1 Function Cacheable Self‑Documenting Testable Reasonable
11. Side Effect 更改文件系统 往数据库插入记录 发送一个 http 请求 可变数据 打印/log 获取用户输入 DOM 查询 访问系统状态
12. Much More Curry Compose ...
13. Functional Programming map, filter, reduce [ ] . m a p ( i t e m = > i t e m . i d ) ; [ ] . f l i t e r ( i t e m = > ! ! i t e m . i d ) [ ] . r e d u c e ( ( a c c , c u r ) = > a c c + c u r )
14. Functional Programming s o r t [ 5 , 3 , 6 ] H t m l . m a p P l a y e r s M s g ( P l a y e r s . L i s t . v i e w m o d e l . p l a y e r s )
15. Hello World i m p o r t H t m l e x p o s i n g ( t e x t ) m a i n = t e x t " H e l l o , W o r l d ! "
16. Math f o u r = 2 + 2 s i x t e e n = 8 * 2 i s T e e n a g e a g e = ( a g e > 1 2 ) & & ( a g e < 2 0 ) i s T e e n a g e N o P a r e n s a g e = a g e > 1 2 & & a g e < 2 0
17. Calling Function f o u r = s q r t 1 6 e l e v e n = m a x 2 1 1 t w e n t y = m a x ( s q r t 1 0 0 ) ( 4 * 5 )
18. Think about redux
19. Elm Architecture
20. HTML m a i n = b e g i n n e r P r o g r a m { m o d e l = 0 , v i e w = v i e w , u p d a t e = u p d a t e } v i e w m o d e l = d i v [ ] [ b u t t o n [ o n C l i c k D e c r e m e n t ] [ t e x t " ‐ " ] , d i v [ ] [ t e x t ( t o S t r i n g m o d e l ) ] , b u t t o n [ o n C l i c k I n c r e m e n t ] [ t e x t " + " ] ] t y p e M s g = I n c r e m e n t | D e c r e m e n t u p d a t e m s g m o d e l = c a s e m s g o f I n c r e m e n t ‐ > m o d e l + 1 D e c r e m e n t ‐ > m o d e l ‐ 1
21. Real World generator‑elm‑app