days / Kraków / 19.02.2016 FUNCTIONAL WEB APPS Michał Płachta @miciek PURELY SUCH PURE 

days / Kraków / 19.02.2016 @miciek Let’s create a full-blown web application 

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: 

days / Kraków / 19.02.2016 @miciek Gitlab 

days / Kraków / 19.02.2016 @miciek Merge Request Stats Gitlab Our app 

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 

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 

days / Kraków / 19.02.2016 @miciek One slide Haskell tutorial 

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

days / Kraków / 19.02.2016 @miciek Haskell Servant ■ set of libraries ■ for HTTP related stuff ■ DRY ■ type safe ■ type level DSL 

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 

days / Kraków / 19.02.2016 @miciek Gitlab API 

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

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

days / Kraków / 19.02.2016 @miciek Evil smiley face emoticon :> 

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

days / Kraków / 19.02.2016 @miciek apiQuery Function Type URL to query 

days / Kraków / 19.02.2016 @miciek queryApi Return Type EitherT ServantError IO Paged [MergeRequest] 

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 

days / Kraków / 19.02.2016 @miciek Quick IO Side Note What’s the difference? Examples from Haskell 

days / Kraków / 19.02.2016 @miciek EitherT EitherT ServantError IO ■ can be either Left or Right ■ Left contains ServantError ■ Right contains IO a 

days / Kraków / 19.02.2016 @miciek apiQuery implementation client is a Servant function that looks at our type and provides the implementation 

days / Kraków / 19.02.2016 @miciek Nicer API with AppConfig 

days / Kraków / 19.02.2016 @miciek pagedMergeRequests function ■ Maybe a type can be ○ Just a ○ Nothing 

days / Kraków / 19.02.2016 @miciek allMergeRequests function uses 

days / Kraków / 19.02.2016 @miciek allMergeRequests implementation EitherT ServantError IO context pagedResponse has type Paged [MergeRequest] 

days / Kraków / 19.02.2016 @miciek Side Effects without IO? 

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

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

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) 

days / Kraków / 19.02.2016 @miciek calculateStats function NOOO IOooo!!! It’s good, right? 

days / Kraków / 19.02.2016 @miciek fetchMRsAndSaveStats function 

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

days / Kraków / 19.02.2016 @miciek main function 

days / Kraków / 19.02.2016 @miciek We did it! Merge Request Fetcher MR Stats Web Service In Memory Storage 

days / Kraków / 19.02.2016 @miciek Automatic JS client and Markdown! 

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 

days / Kraków / 19.02.2016 @miciek Elm architecture Elm Runtime Model update Action New Model view Effect Html Object Elm Rendering 

days / Kraków / 19.02.2016 @miciek Elm architecture in types 

days / Kraków / 19.02.2016 @miciek Our Model 

days / Kraków / 19.02.2016 @miciek Our Actions 

days / Kraków / 19.02.2016 @miciek update Function 

days / Kraków / 19.02.2016 @miciek mergeRequestsFetchEffect 

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

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 

days / Kraków / 19.02.2016 @miciek Fame & Glory 

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

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 

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