Mini Workshop - Supercharged Web Development With Purescript

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

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

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 • Conﬁguration 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-Conﬁguration Web Bundler • Dev
Server • parcel index.html • Build • parcel build index.html

Index.HTML <!doctype html> <html> <body> <div id="main"></div> <script src="index.js"></script> </body>
</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_ﬁle 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 :: Eﬀect 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
<ReactElement> <DomElement> • ReactClass -> ReactElement • React.createLeafElement <ReactClass> <Props> • React.createElement <ReactClass> <Props> <Children>

Creating New React Classes • React.component <Name> <Spec> • 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!

Mini Workshop - Supercharged Web Development With Purescript

Mini Workshop - Supercharged Web Development With Purescript

Anupam

More Decks by Anupam

Other Decks in Technology

Featured

Transcript

Supercharged Web Development With Purescript Functional Conf 2019 Anupam Jain

Hi, I’m Anupam Jain.. Functional Programming Web Development User Interfaces!

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

Purescript

Modern FP • Pure, Strong Static Types • Type Classes

Practical • Generates Readable Javascript Code • Excellent Community •

Setup From Scratch • npm init • npm install —save-dev

Tooling NPM Spago Parcel JS Deps PS Deps + Build

NPM - Optional • Installing Purescript Tools • npm install

Spago • Purescript Package Manager and Build Tool • spago

Dhall • Conﬁguration Language for Spago • The programmable, non-repetitive,

Spago.dhall • { name = “lib1" , dependencies = [

Packages.dhall { … , concur-react = { dependencies = [

Packages.dhall • Specify the package-set (Curated set of Packages that

Parcel - Optional • The Zero-Conﬁguration Web Bundler • Dev

Index.HTML <!doctype html> <html> <body> <div id="main"></div> <script src="index.js"></script> </body>

index.JS import Main from “./output/Main"; if (module.hot) { module.hot.accept(function ()

Clojure Compiler - Optional • spago bundle-app --to temp.js •

Hello Purescript module Main where import Data.Unit (Unit) import Effect

Hello React import Render (renderComponent) import React (ReactElement) import React.DOM

RenderComponent renderComponent :: ReactElement -> Effect Unit renderComponent component =

Live Code Demo

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

Creating New React Classes • React.component <Name> <Spec> • Spec

Importing React Classes from JS • — Foo.js exports.classFoo =

Live Code With FFI

Questions? Thank You!