Supercharged Web Development With Purescript Functional Conf 2019 Anupam Jain

Hi, I’m Anupam Jain.. Functional Programming Web Development User Interfaces! • Work at S&PGlobal on Financial Web Applications • Organise FPNCR Meetup Group https://fpncr.github.io • Wrote Concur UI Library in Purescript (+ Haskell and JS) https://github.com/purescript-concur

Prerequisite • git clone https://github.com/ajnsit/purescript-react-starter • npm install • npm run build • npm run start

Purescript

Modern FP • Pure, Strong Static Types • Type Classes • Higher Kinded Types • Row Types and Records • Effects • Syntactic Niceties • Granular Imports

No content

Practical • Generates Readable Javascript Code • Excellent Community • Excellent Ecosystem and Tooling • “IDE” Integration • Compiles to Javascript, BEAM, Native • All of Javascript Ecosystem

No content

No content

Setup From Scratch • npm init • npm install —save-dev purescript spago parcel-bundler • npm install —save react react-dom • npx spago init • npx spago install react react-dom web-html web-dom

Tooling NPM Spago Parcel JS Deps PS Deps + Build JS Build

NPM - Optional • Installing Purescript Tools • npm install —save-dev purescript spago parcel- bundler • Installing Javascript dependencies • npm install —save react react-dom • Build scripts • npm run start

Spago • Purescript Package Manager and Build Tool • spago list-packages • spago install react react-dom • spago repl • spago build --purs-args '-g sourcemaps’ • spago bundle-app —main Main —to bundle.js • spago test SourceMaps!

Dhall • Configuration Language for Spago • The programmable, non-repetitive, alternative to YAML • YAML + Functions + Types + Imports • NOT Turing Complete

Spago.dhall • { name = “lib1" , dependencies = [ "effect" , "console" , "prelude" ] , sources = [ "src/**/*.purs" ] , packages = ../packages.dhall }

Packages.dhall { … , concur-react = { dependencies = [ … ] , repo = "https://github.com/ajnsit/purescript-concur.git" , version = "v0.3.9" } … }

Packages.dhall • Specify the package-set (Curated set of Packages that build together) • let upstream = https://.../packages.dhall sha256:f9eb600e5… • Specify package additions and overrides • let overrides = { lib1 = ./lib1/spago.dhall as Location , lib2 = ./lib2/spago.dhall as Location } in upstream // overrides

Parcel - Optional • The Zero-Configuration Web Bundler • Dev Server • parcel index.html • Build • parcel build index.html

Index.HTML

index.JS import Main from “./output/Main"; if (module.hot) { module.hot.accept(function () { console.log('Reloaded, running main again'); main(); }); } main(); HMR Stuff

Clojure Compiler - Optional • spago bundle-app --to temp.js • java -jar closure-compiler-v20190301.jar --js temp.js -- js_output_file index.js • parcel build index.html • Only modest improvements with SIMPLE optimisations • Errors with ADVANCED optimisations

Hello Purescript module Main where import Data.Unit (Unit) import Effect (Effect) import Effect.Console (log) main :: Effect Unit main = log “Hello World”

Hello React import Render (renderComponent) import React (ReactElement) import React.DOM as D mainComponent :: ReactElement mainComponent = D.h1 [ ] [ D.text "Hello world!” ] main :: Effect Unit main = renderComponent mainComponent

RenderComponent renderComponent :: ReactElement -> Effect Unit renderComponent component = do window <- DOM.window document <- DOM.document window let node = DOM.toNonElementParentNode document mroot <- DOM.getElementById "main" node case mroot of Nothing -> pure unit Just root -> void (ReactDOM.render component root)

Live Code Demo

React Element / Class • ReactElement -> DOM • ReactDOM.render • ReactClass -> ReactElement • React.createLeafElement • React.createElement

Creating New React Classes • React.component • Spec = ReactThis -> Record { state :: Record State , render :: Effect ReactElement }

Importing React Classes from JS • — Foo.js exports.classFoo = require(‘Foo’).default • — Foo.purs foreign import classFoo :: ReactClass { }

Live Code With FFI

Questions? Thank You!