Pro Yearly is on sale from $80 to $50! »

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. days / Kraków / 19.02.2016 FUNCTIONAL WEB APPS Michał Płachta

    @miciek PURELY SUCH PURE
  2. days / Kraków / 19.02.2016 @miciek Let’s create a full-blown

    web application
  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:
  4. days / Kraków / 19.02.2016 @miciek Gitlab

  5. days / Kraków / 19.02.2016 @miciek Merge Request Stats Gitlab

    Our app
  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
  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
  8. days / Kraków / 19.02.2016 @miciek One slide Haskell tutorial

  9. days / Kraków / 19.02.2016 @miciek Using Servant as HTTP

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

    of libraries ▪ for HTTP related stuff ▪ DRY ▪ type safe ▪ type level DSL
  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
  12. days / Kraków / 19.02.2016 @miciek Gitlab API

  13. days / Kraków / 19.02.2016 @miciek Merge Request JSON

  14. days / Kraków / 19.02.2016 @miciek Merge Request Data Type

  15. days / Kraków / 19.02.2016 @miciek Evil smiley face emoticon

    :>
  16. days / Kraków / 19.02.2016 @miciek API Type /api/v3/projects/{projectId}/merge_requests/?page={page}

  17. days / Kraków / 19.02.2016 @miciek apiQuery Function Type URL

    to query
  18. days / Kraków / 19.02.2016 @miciek queryApi Return Type EitherT

    ServantError IO Paged [MergeRequest]
  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
  20. days / Kraków / 19.02.2016 @miciek Quick IO Side Note

    What’s the difference? Examples from Haskell
  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
  22. days / Kraków / 19.02.2016 @miciek apiQuery implementation client is

    a Servant function that looks at our type and provides the implementation
  23. days / Kraków / 19.02.2016 @miciek Nicer API with AppConfig

  24. days / Kraków / 19.02.2016 @miciek pagedMergeRequests function ▪ Maybe

    a type can be ◦ Just a ◦ Nothing
  25. days / Kraków / 19.02.2016 @miciek allMergeRequests function uses

  26. days / Kraków / 19.02.2016 @miciek allMergeRequests implementation EitherT ServantError

    IO context pagedResponse has type Paged [MergeRequest]
  27. days / Kraków / 19.02.2016 @miciek Side Effects without IO?

  28. days / Kraków / 19.02.2016 @miciek Merge Request Fetcher module

  29. days / Kraków / 19.02.2016 @miciek Same story: Comments

  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)
  31. days / Kraków / 19.02.2016 @miciek calculateStats function NOOO IOooo!!!

    It’s good, right?
  32. days / Kraków / 19.02.2016 @miciek fetchMRsAndSaveStats function

  33. days / Kraków / 19.02.2016 @miciek Serving the stats

  34. days / Kraków / 19.02.2016 @miciek main function

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

    Request Fetcher MR Stats Web Service In Memory Storage
  36. days / Kraków / 19.02.2016 @miciek Automatic JS client and

    Markdown!
  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
  38. days / Kraków / 19.02.2016 @miciek Elm architecture Elm Runtime

    Model update Action New Model view Effect Html Object Elm Rendering
  39. days / Kraków / 19.02.2016 @miciek Elm architecture in types

  40. days / Kraków / 19.02.2016 @miciek Our Model

  41. days / Kraków / 19.02.2016 @miciek Our Actions

  42. days / Kraków / 19.02.2016 @miciek update Function

  43. days / Kraków / 19.02.2016 @miciek mergeRequestsFetchEffect

  44. days / Kraków / 19.02.2016 @miciek view = virtual DOM

    objects
  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
  46. days / Kraków / 19.02.2016 @miciek Fame & Glory

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

    for yourself: http://debug.elm-lang.org/edit/Mario.elm
  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
  49. days / Kraków / 19.02.2016 PURELY FUNCTIONAL WEB APPS Michał

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