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. NOTE: I will also try to do a short intro to Haskell and Elm during the presentation and use as fewest constructs as possible.

1. lounge / Kraków / 16.02.2016
FUNCTIONAL
WEB APPS
Michał Płachta
@miciek
PURELY
SUCH
PURE

2. lounge / Kraków / 16.02.2016@miciek
Let’s create a full-blown
web application

3. lounge / Kraków / 16.02.2016@miciek
MAIN DEV GOALS
■ explicit external dependencies
■ explicit side effects
■ explicit configuration
■ explicit error handling
pure functions & strong typesSolution:

4. lounge / Kraków / 16.02.2016@miciek
Gitlab

5. lounge / Kraków / 16.02.2016@miciek
Merge Request Stats
Gitlab Our app

6. lounge / Kraków / 16.02.2016@miciek
Application Architecture
Gitlab Server
Merge Request
Fetcher
MR Stats
Web Service
In Memory
Storage
MR Stats
Web Application
data flow

7. lounge / Kraków / 16.02.2016@miciek
Haskell & Elm
Gitlab Server
Merge Request
Fetcher
MR Stats
Web Service
In Memory
Storage
MR Stats
Web Application
data flow
Elm

8. lounge / Kraków / 16.02.2016@miciek
One slide Haskell tutorial

9. lounge / Kraków / 16.02.2016@miciek
Using Servant as
HTTP Client

10. lounge / Kraków / 16.02.2016@miciek
Haskell Servant
■ set of libraries
■ for HTTP related stuff
■ DRY
■ type safe
■ type level DSL

11. lounge / Kraków / 16.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. lounge / Kraków / 16.02.2016@miciek
Gitlab API

13. lounge / Kraków / 16.02.2016@miciek
Merge Request JSON

14. lounge / Kraków / 16.02.2016@miciek
Merge Request Data Type

15. lounge / Kraków / 16.02.2016@miciek
API Type
/api/v3/projects/{projectId}/merge_requests/?page={page}

16. lounge / Kraków / 16.02.2016@miciek
apiQuery Function Type
URL to query

17. lounge / Kraków / 16.02.2016@miciek
queryApi Return Type
EitherT
ServantError
IO
Paged
[MergeRequest]

18. lounge / Kraków / 16.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

19. lounge / Kraków / 16.02.2016@miciek
Quick IO Side Note
What’s the difference?
Examples from Haskell

20. lounge / Kraków / 16.02.2016@miciek
EitherT
EitherT
ServantError IO
■ can be either Left or Right
■ Left contains ServantError
■ Right contains IO a

21. lounge / Kraków / 16.02.2016@miciek
ServantError
■ FailureResponse
■ DecodeFailure
■ UnsupportedContentType
■ ConnectionError
■ InvalidContentTypeHeader

22. lounge / Kraków / 16.02.2016@miciek
apiQuery implementation
client is a Servant
function that looks at
our type and provides
the implementation

23. lounge / Kraków / 16.02.2016@miciek
Nicer API with AppConfig

24. lounge / Kraków / 16.02.2016@miciek
pagedMergeRequests function
■ Maybe a type can be
○ Just a
○ Nothing

25. lounge / Kraków / 16.02.2016@miciek
allMergeRequests function
uses

26. lounge / Kraków / 16.02.2016@miciek
allMergeRequests implementation

27. lounge / Kraków / 16.02.2016@miciek
Side Note: Side Effects without IO?

28. lounge / Kraków / 16.02.2016@miciek
Merge Request Fetcher module

29. lounge / Kraków / 16.02.2016@miciek
Same story: Comments

30. lounge / Kraków / 16.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. lounge / Kraków / 16.02.2016@miciek
calculateStats function
no IO!

32. lounge / Kraków / 16.02.2016@miciek
Now onto: In Memory Storage
Gitlab Server
Merge Request
Fetcher
MR Stats
Web Service
In Memory
Storage
MR Stats
Web Application
data flow

33. lounge / Kraków / 16.02.2016@miciek
StatsStorage

34. lounge / Kraków / 16.02.2016@miciek
main function

35. lounge / Kraków / 16.02.2016@miciek
fetchMRsAndSaveStats function

36. lounge / Kraków / 16.02.2016@miciek
Serving the stats

37. lounge / Kraków / 16.02.2016@miciek
We did it!
Merge Request
Fetcher
MR Stats
Web Service
In Memory
Storage

38. lounge / Kraków / 16.02.2016@miciek
Automatic JS client and Markdown!

39. lounge / Kraków / 16.02.2016@miciek
Let’s do the frontend
data flow
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

40. lounge / Kraków / 16.02.2016@miciek
Elm architecture
Elm Runtime
Model
update
Action
New
Model
view
Effect
Html
Object
Elm Rendering

41. lounge / Kraków / 16.02.2016@miciek
Elm architecture in types

42. lounge / Kraków / 16.02.2016@miciek
Our Model

43. lounge / Kraków / 16.02.2016@miciek
Our Actions
■ UpdateList is generated inside the app
■ Tick is generated outside of the app

44. lounge / Kraków / 16.02.2016@miciek
update Function

45. lounge / Kraków / 16.02.2016@miciek
mergeRequestsFetchEffect

46. lounge / Kraków / 16.02.2016@miciek
view = virtual DOM objects

47. lounge / Kraków / 16.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

48. lounge / Kraków / 16.02.2016@miciek
DEMO TIME!
Fame & Glory

49. lounge / Kraków / 16.02.2016@miciek
Time Travel Debugger
See for yourself: http://debug.elm-lang.org/edit/Mario.elm

50. lounge / Kraków / 16.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

51. lounge / Kraków / 16.02.2016
PURELY FUNCTIONAL
WEB APPS
Michał Płachta
www.michalplachta.com
@miciek
THANK YOU!