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

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

[MergeRequest]

IO Type

[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

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

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

update

Action

NewModel

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

update

Tick orUpdate

ListAction

MRs &refresh

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

lounge / Kraków / 16.02.2016

PURELY FUNCTIONAL WEB APPS

Michał Płachtawww.michalplachta.com

@miciek

THANK YOU!

purely functional web apps (extended version, 16.02.2016)

Software

purely fall magazine

posturi incomplete arges 16.02.2016.edu.ro

purely palace

hotărârea plenului csm nr. 169/16.02.2016 referitoare la...

policies and procedures vasayo - purely...

purely practical data structures

purely functional data structures

monitor país - clima socioemocional (16.02.2016)

new purely thermal-wave photopyroelectric interferometry ·...

purely february magazine | purely elizabeth

saarzeitung ausgabe saarlouis, 16.02.2016

saarzeitung, ausgabe st. wendel, 16.02.2016

purely summer magazine

purely march magazine | purely elizabeth

boletin oferta empleo publico 16.02.2016 al 22.02.2016.pdf

Адаптированная...

purely may magazine | purely elizabeth

australian national kennel...

national institute of technology tiruchirappalli - … ·...

palestra - coaching integrativo: uma abordagem...