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

Experience Report: Building Web Apps with Haskell and Elm

Experience Report: Building Web Apps with Haskell and Elm

Created for STL Women Who Code: 2018-10-16

This experience report summarizes some of my thoughts regarding developing web applications with Haskell and elm


Rebecca Skinner

October 16, 2018

More Decks by Rebecca Skinner

Other Decks in Programming


  1. Building Web Apps with Haskell and Elm Rebecca Skinner @cercerilla

    October 15, 2018 1
  2. 1 Introduction 2

  3. Experience Report This presentation will focus on the experience of

    using these two technologies together to build a working application. 3
  4. MetaLanguage, Not Machine Learning ML stands for MetaLanguage. It’s a

    language originally designed for working with the LCF theorem prover. Today, there are quite a few ML dialects, as well as several languages that have been influenced by ML 4
  5. Haskell Haskell is a functional programming language with a syntax

    that is heavily influenced by the style of ML dialects. Haskell compiles to: • x86 • ARM • LLVM • Web Assembly • Javascript 5
  6. Elm Elm is a functional language written in haskell and

    built for creating client-side single-page applications. Elm currently compiles to: • Javascript 6
  7. 2 Motivation 7

  8. Make Programs that Don’t Go Wrong Debugging is much harder

    than writing code, so I would like the computer to help me find my errors early. 8
  9. Make Refactoring Easier For long-lived applications, code is refactored much

    more often than it’s written. I want to work with tools that make refactoring easier and less error-prone. 9
  10. Automate Away Tests I want the biggest return on investment

    with automated checking. I want to have to write as few tests as possible to ensure my programs work well. 10
  11. Ergonomics ML-like languages have comfortable ergonomics that make them nicer

    to work with compared to languages like Javascript. 11
  12. 2.1 Non-Motivators 12

  13. Popularity I don’t care how many people already know my

    implementation language. 13
  14. Performance Raw performance is less important than good-enough performance along

    with correctness and ease of refactoring. 14
  15. Library Support I only care about the libraries I need

    for my project, and not about the totality of the library ecosystem. 15
  16. 3 Building A Server 16

  17. Haskell for Backend Services Haskell is a great choice for

    building web services. In particular, it has reasonable performance, good libraries, and can generally runs without crashing. 17
  18. An Embarassement of Frameworks There are several web frameworks for

    haskell. My favorites are Scotty and Servant. • Scotty • Spock • Yesod • Happstack • Servant 18
  19. Beam Me Up, Scotty main = scotty 8080 $ do

    S. get " / " d e f a u l t F i l e S. post " / : render " $ do outputFormat <− param " render " inputFormat <− param " format " toConvert <− getPostBody case convertDoc inputFormat outputFormat toConvert of Left errMsg −> do status status500 f i n i s h Right r e s u l t −> t e x t r e s u l t 19
  20. The Toolchain • nix • stack • docker • quickcheck

    • hlint 20
  21. If It Compiles, It Works Haskell’s type system helps find

    errors for us that we might miss in other languages. This can be a big help when we’re prototyping because it can save us from having to write a lot of tests or spending a lot of time debugging. 21
  22. QuickCheck Once we decide to write tests, QuickCheck is a

    great way to write many test cases very quickly and easily. test_wordWrap : : Spec test_wordWrap = do i t " returns words in the r i g h t order " $ property $ \ str ’ ( Positive width ) −> l e t s t r = BS. pack str ’ words = concatMap BS. words $ HCat . wordWrap width s t r in words ‘ shouldBe ‘ (BS. words s t r ) i t " does not break a word " $ property $ \ ( Positive width ) −> l e t width ’ = width + 5 s t r = BS. pack $ replicate width ’ ’a ’ wrapped = HCat . wordWrap width s t r in do ( length wrapped ) ‘ shouldBe ‘ 1 (head wrapped ) ‘ shouldBe ‘ s t r i t " breaks l i n e s to the appropriate length " $ property $ \ str ’ ( Positive width ) −> l e t s t r = BS. pack str ’ lines = HCat . wordWrap width s t r in shouldSatisfy lines $ a l l $ \ l i n e −> (BS. length l i n e ) <= width | | ( length . BS. words $ l i n e ) == 1 22
  23. 4 Building A Frontend in Elm 23

  24. Why Elm? Elm borrows syntax from Haskell while being narrowly

    focused on providing a useful language for the frontend. 24
  25. The Elm Architecture The Elm Architecture is the control flow

    that elm applications follow. Elm applications are functional reactive event loops that should look familiar to you if you’ve worked with frameworks like react.js 25
  26. The Differences Between Elm and Haskell Elm is a simpler

    language that is focused on ease of use, approachability, and cohesiveness. It’s less flexible, and offers fewer features than Haskell, but makes up for that with a consistent and coherent sandbox for developing SPAs. 26
  27. 5 A Survey of Other Options 27

  28. Backend Languages • Go • Rust • Erlang • Ruby

    • Python • Javascript 28
  29. Frontend Languages • PureScript • Haskell • Javascript • TypeScript

  30. 6 Demo 30