Purely Functional Web Apps

Purely Functional Web Apps

Are you familiar with the following recipe?
- First define an API and its documentation.
- Then take the API and create its server implementation.
- Then create a client for the same API, but in JavaScript land.
- Then imperatively modify the browser’s DOM in order to allow user to do and see stuff.

Sounds about right?

During this talk you will forget about all these things and become a functional web developer. I will show you how to write type-level web APIs, purely functional server and client implementations and how to render things without touching browser’s DOM.

The talk is divided into two parts: backend & frontend. The first part of the talk will introduce the concepts behind haskell-servant and we will implement a simple web app backend. Then we will code the app itself using Elm and reactive approach.

6f6dc1b13fd3fe35d36db3adafcb0c8e?s=128

Michał Płachta

February 19, 2016
Tweet

Transcript

  1. 3.

    days / Kraków / 19.02.2016 @miciek MAIN DEV GOALS ▪

    explicit external dependencies ▪ explicit side effects ▪ explicit configuration ▪ explicit error handling pure functions & strong types Solution:
  2. 6.

    days / Kraków / 19.02.2016 @miciek Application Architecture Gitlab Server

    Merge Request Fetcher MR Stats Web Service In Memory Storage MR Stats Web Application data flow
  3. 7.

    days / Kraków / 19.02.2016 @miciek Haskell & Elm Gitlab

    Server Merge Request Fetcher MR Stats Web Service In Memory Storage MR Stats Web Application Elm data flow
  4. 10.

    days / Kraków / 19.02.2016 @miciek Haskell Servant ▪ set

    of libraries ▪ for HTTP related stuff ▪ DRY ▪ type safe ▪ type level DSL
  5. 11.

    days / Kraków / 19.02.2016 @miciek Let’s start with the

    Fetcher Gitlab Server Merge Request Fetcher MR Stats Web Service In Memory Storage MR Stats Web Application data flow
  6. 18.
  7. 19.

    days / Kraków / 19.02.2016 @miciek IO Type IO Paged

    [MergeRequest] ▪ side effecting ▪ an action ▪ e.g. get something from the server ▪ can’t get rid of it Nope
  8. 20.

    days / Kraków / 19.02.2016 @miciek Quick IO Side Note

    What’s the difference? Examples from Haskell
  9. 21.

    days / Kraków / 19.02.2016 @miciek EitherT EitherT ServantError IO

    ▪ can be either Left or Right ▪ Left contains ServantError ▪ Right contains IO a
  10. 22.

    days / Kraków / 19.02.2016 @miciek apiQuery implementation client is

    a Servant function that looks at our type and provides the implementation
  11. 26.
  12. 30.

    days / Kraków / 19.02.2016 @miciek Business Logic: Stats Calculations

    ▪ title ▪ create date ▪ last update date ▪ upvotes ▪ downvotes ▪ list of comments ▪ Merge Request object ▪ time to merge (calculated) ▪ comments quantity (calculated) ▪ url to the MR Merge Request (from Gitlab) Merge Request Stats (ours)
  13. 35.

    days / Kraków / 19.02.2016 @miciek We did it! Merge

    Request Fetcher MR Stats Web Service In Memory Storage
  14. 37.

    days / Kraków / 19.02.2016 @miciek Let’s do the frontend

    Gitlab Server Merge Request Fetcher MR Stats Web Service In Memory Storage MR Stats Web Application ▪ using Elm ▪ merge request stats in a table ▪ dynamically updated each 5 seconds
  15. 38.

    days / Kraków / 19.02.2016 @miciek Elm architecture Elm Runtime

    Model update Action New Model view Effect Html Object Elm Rendering
  16. 45.

    days / Kraków / 19.02.2016 @miciek Effects are Data Elm

    Runtime MRs & refresh time update Tick or Update List Action MRs & refresh time view Tick or Fetch Effect MRs Table Object Elm Rendering
  17. 47.

    days / Kraków / 19.02.2016 @miciek Time Travel Debugger See

    for yourself: http://debug.elm-lang.org/edit/Mario.elm
  18. 48.

    days / Kraków / 19.02.2016 @miciek Links ▪ Backend project:

    https://github.com/miciek/mr-stats-haskell- servant ▪ Frontend project: https://github.com/miciek/mr-stats-frontend- elm ▪ Elm architecture tutorial: https://github.com/evancz/elm- architecture-tutorial ▪ Haskell Servant: https://github.com/haskell-servant/servant ▪ Let’s be mainstream - user-focused design in Elm: https://www. youtube.com/watch?v=oYk8CKH7OhE ▪ Monad Transformers: https://www.youtube.com/watch? v=pzouxmWiemg ▪ Make the backend team jealous - Elm in Production: https://www. youtube.com/watch?v=FV0DXNB94NE ▪ Children do projects using Elm: http://outreach.mcmaster. ca/tutorials/shapes/shapes.html
  19. 49.

    days / Kraków / 19.02.2016 PURELY FUNCTIONAL WEB APPS Michał

    Płachta www.michalplachta.com @miciek THANK YOU!