Purely Functional Web Apps (Extended Version, 16.02.2016)

lounge / Kraków / 16.02.2016

FUNCTIONALWEB APPS

Michał Płachta@miciek

PURELY

SUCHPURE

lounge / Kraków / 16.02.2016@miciek

Let’s create a full-blown web application


MAIN DEV GOALS■ explicit external dependencies■ explicit side effects■ explicit configuration■ explicit error handling

pure functions & strong typesSolution:


Gitlab


Merge Request StatsGitlab Our app


Application Architecture

Gitlab Server

Merge RequestFetcher

MR StatsWeb Service

In MemoryStorage

MR StatsWeb Application

data flow


Haskell & Elm

Gitlab Server


MR StatsWeb Service

In MemoryStorage


data flow

Elm

http://www.qualitycompass.com/css/images/haskell-logo-with-name.png

http://namaristats.com/static/img/langs/logo-elm.png


One slide Haskell tutorial


Using Servant asHTTP Client


Haskell Servant■ set of libraries■ for HTTP related stuff■ DRY■ type safe■ type level DSL


Let’s start with the Fetcher

Gitlab Server


MR StatsWeb Service

In MemoryStorage


data flow


Gitlab API


Merge Request JSON


Merge Request Data Type


API Type

/api/v3/projects/{projectId}/merge_requests/?page={page}


apiQuery Function Type

URL to query


queryApi Return Type

EitherT

ServantError

IO

Paged

[MergeRequest]


IO Type

IO

Paged

[MergeRequest]

■ side effecting■ an action■ e.g. get something

from the server■ can’t get rid of it


Quick IO Side NoteWhat’s the difference?

Examples from Haskell


EitherT

EitherT

ServantError IO

■ can be either Left or Right■ Left contains ServantError■ Right contains IO a


ServantError

■ FailureResponse

■ DecodeFailure

■ UnsupportedContentType

■ ConnectionError

■ InvalidContentTypeHeader


apiQuery implementation

client is a Servant function that looks at our type and provides the implementation


Nicer API with AppConfig


pagedMergeRequests function

■ Maybe a type can be○ Just a

○ Nothing


allMergeRequests function

uses


allMergeRequests implementation


Side Note: Side Effects without IO?


Merge Request Fetcher module


Same story: Comments


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)


calculateStats function

no IO!


Now onto: In Memory Storage

Gitlab Server


MR StatsWeb Service

In MemoryStorage


data flow


StatsStorage


main function


fetchMRsAndSaveStats function


Serving the stats


We did it!Merge Request

FetcherMR Stats

Web ServiceIn Memory

Storage


Automatic JS client and Markdown!


Let’s do the frontenddata flow

Gitlab Server


MR StatsWeb Service

In MemoryStorage


■ using Elm■ merge request stats in a table■ dynamically updated each 5 seconds


Elm architecture

Elm Runtime

Model

update

Action

NewModel

view

Effect

HtmlObject

Elm Rendering


Elm architecture in types


Our Model


Our Actions

■ UpdateList is generated inside the app■ Tick is generated outside of the app


update Function


mergeRequestsFetchEffect


view = virtual DOM objects


Effects are Data

Elm Runtime

MRs &refresh

time

update

Tick orUpdate

ListAction

MRs &refresh

time

view

Tick or FetchEffect

MRs TableObject

Elm Rendering


DEMO TIME!

Fame & Glory


Time Travel Debugger

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


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

https://github.com/miciek/mr-stats-haskell-servant



https://github.com/miciek/mr-stats-frontend-elm



https://github.com/evancz/elm-architecture-tutorial



https://github.com/haskell-servant/servant

https://www.youtube.com/watch?v=oYk8CKH7OhE



https://www.youtube.com/watch?v=pzouxmWiemg



https://www.youtube.com/watch?v=FV0DXNB94NE%5C



http://outreach.mcmaster.ca/tutorials/shapes/shapes.html



lounge / Kraków / 16.02.2016

PURELY FUNCTIONAL WEB APPS

Michał Płachtawww.michalplachta.com

@miciek

THANK YOU!

Software

Purely Functional Web Apps (Extended Version, 16.02.2016)