Friendly Elm (怖くないElm)

An introduction to Elm, spoken at #10 市ヶ谷Geek★Night「型のあるフロントエンドの世界〜フロントエンド・フロンティア〜」 http://ichigayageek.connpass.com/event/43149/

Transcript

1. 1
   Friendly Elm
   2016/11/04
   Yosuke Torii
   

   View Slide

2. 2
   怖くない Elm
   2016/11/04
   Yosuke Torii
   

   View Slide

3. 3
   Who I am
   * Yosuke Torii
   * @jinjor
   * Works Applications Co., Ltd.
   * Contributor of Elm
   

   View Slide

4. 4
   Who I am
   * Yosuke Torii
   * @jinjor
   * Works Applications Co., Ltd.
   * Contributor of Elm
   

   View Slide

5. 5
   Introduction to Elm
   

   View Slide

6. 6
   Q. How many folks have heard of Elm?
   Q. How many folks have written
   any piece of code in Elm?
   

   View Slide

7. 7
   Q. How many folks have heard of Elm?
   45
   Q. How many folks have written
   any piece of code in Elm?
   5
   

   View Slide

8. 8
   Elm is a FP Language
   * Generates JavaScript
   * Static Typing
   * Everything is Immutable
   * Fast rendering via Virtual DOM
   

   View Slide

9. 9
   Elm = Language + Framework
   VS
   No more JavaScript Fatigue!
   

   View Slide

10. 10
    How strong is Elm's type?
    Strong
    Haskell
    Elm
    Scala
    Java
    TypeScript
    JavaScript Ruby Python
    Flow
    

    View Slide

11. 11
    How strong is Elm's type?
    Strong
    Haskell
    Elm
    Scala
    Java
    TypeScript
    JavaScript Ruby Python
    Flow
    No Runtime Errors
    

    View Slide

12. 12
    Experiencing Elm in Practice
    

    View Slide

13. 13
    Making a seat arrangement app
    

    View Slide

14. 14
    Lots of complex UIs!
    * Copy / Cut / Paste
    * Undo / Redo
    * Selecting
    * Dragging
    * Zooming
    * Searching
    * Context Menu
    * Clipboard
    * Keyboard Shortcuts
    * Auto Saving
    * Co-editing
    

    View Slide

15. 15
    After several months...
    * Started using in our company
    (Still continuing development)
    * Open Source (WorksApplications/office-maker)
    

    View Slide

16. 16
    Stats
    

    View Slide

17. 17
    Stats
    9,400 lines of Elm code
    

    View Slide

18. 18
    Stats
    9,400 lines of Elm code
    0 runtime errors
    

    View Slide

19. 19
    Refactoring with confidence
    * Regressions rarely happen
    * No fear with large/frequent changes
    * No untouchable code any more!
    

    View Slide

20. 20
    But... it looks difficult to learn
    

    View Slide

21. 21
    Elm is friendly for FP beginners
    ✓ FP for Front End developer
    ✗ Front End for FP programmer
    

    View Slide

22. 22
    No need to learn Haskell
    VS
    * Monad and other terminologies from Category theory
    * Type classes in general use
    The most difficult parts do not exist in Elm
    

    View Slide

23. 23
    Elm is getting even simpler
    0.16 (2015/11)
    * More friendly compile error messages
    * Remove some record operations
    * Remove multi-way if
    0.17 (2016/05)
    * Remove Signals (which was the most defficult)
    * Simplify main function
    0.18 (2016/11)
    * More friendly compile error messages
    * Remove backticks
    * Remove [1..4] syntax
    * Remove primes in variable name
    

    View Slide

24. 24
    Elm is getting even simpler
    0.16 (2015/11)
    * More friendly compile error messages
    * Remove some record operations
    * Remove multi-way if
    0.17 (2016/05)
    * Remove Signals (which was the most defficult)
    * Simplify main function
    0.18 (2016/11)
    * More friendly compile error messages
    * Remove backticks
    * Remove [1..4] syntax
    * Remove primes in variable name
    

    View Slide

25. 25
    Conclusion
    

    View Slide

26. 26
    Elm is reliable
    Elm is easy to approach
    

    View Slide

27. 27
    Thank you!
    

    View Slide