PureScript Workshop for JSConf Medellín Lesson 1: Getting Started
Install psc-package and pulp
npm i -g psc-package pulp
Initialize the project
Build the project
Do your happy dance!
My first PureScript project 🕺 Part 2: Resources and Creating a Bundle
PureScript by Example (Free eBook)Let's Build a Simon Game in PureScript PureScript Cheatsheet PureScript Slack Channel
Creat an index.html at the root of your directory
Add basic html markup
<!DOCTYPE html>
< html lang ="en ">
< head >
< meta charset ="UTF-8 ">
< meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
< meta http-equiv ="X-UA-Compatible " content ="ie=edge ">
< title > Document</ title >
</ head >
< body >
< script src ='./output/app.js '> </ script >
</ body >
</ html >
Run the server
Do your happy dance!
My first PureScript app 💃
Install Pux
Imports
import Prelude hiding (div )
import Control.Monad.Eff (Eff )
import Pux (CoreEffects , EffModel , start )
import Pux.DOM.Events (onClick )
import Pux.DOM.HTML (HTML )
import Pux.Renderer.React (renderToDOM )
import Text.Smolder.HTML (button , div , span )
import Text.Smolder.Markup (text , (#!) )
User Actions
data Event = Increment | Decrement
State
Update
foldp :: ∀ fx . Event -> State -> EffModel State Event fx
foldp Increment n = { state: n + 1 , effects: [] }
foldp Decrement n = { state: n - 1 , effects: [] }
View
view :: State -> HTML Event
view count =
div do
button #! onClick (const Increment ) $ text " Increment" span $ text (show count)
button #! onClick (const Decrement ) $ text " Decrement"
Main
main :: ∀ fx . Eff (CoreEffects fx ) Unit
main = do
app <- start
{ initialState: 0
, view
, foldp
, inputs: []
}
renderToDOM " #app" . markup app. input
Mount App and Add React
< body >
< div id ="app "> </ div >
< script src ="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js "> </ script >
< script src ="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js "> </ script >
< script src ='./output/app.js '> </ script >
</ body >
Bundle and Serve
Do your happy dance!
My first PureScript app that does something 🕺 💃
Install the aff module
Import modules
import Control.Monad.Aff.Console (CONSOLE , log )
import Data.Maybe (Maybe .. )) -- Part of Prelude
Define App Effects
type AppEffects = ( console :: CONSOLE )
Log state to console
foldp :: ∀ fx . Event -> State -> EffModel State Event AppEffects -- 👈Increment n = { state: n + 1 , effects: [
do
log $ " Current State: " <> (show $ n + 1 )
pure Nothing
]}
foldp Decrement n = { state: n - 1 , effects: [
do
log $ " Current State: " <> (show $ n - 1 )
pure Nothing
]}
Update Main
main :: ∀ fx . Eff (CoreEffects AppEffects ) Unit -- 👈= do
app <- start
{ initialState: 0
, view
, foldp
, inputs: []
}
renderToDOM " #app" . markup app. input
Run server
Do your happy dance!
My first PureScript side-effect 🕺
Install necessary modules
psc-package install argonaut-codecs affjax
Import modules
import Control.Monad.Aff (attempt )
import Data.Argonaut.Decode (decodeJson , (.?) )
import Data.Argonaut.Decode.Class (class DecodeJson )
import Data.Either (Either Left Right either )
import Data.Newtype (class Newtype , un )
import Network.HTTP.Affjax (AJAX , get )
import Text.Smolder.HTML (button , div , img )
import Text.Smolder.HTML.Attributes (src )
import Text.Smolder.Markup (text , (#!) , (!) )
Define effects
type AppEffects = ( console :: CONSOLE , ajax :: AJAX )
Define user actions
data Event = RequestGiphy | ReceiveGiphy (Either String Url )
Define a newtype (for decoding)
newtype Url = Url String :: Newtype Url _
unwrap :: Url -> String = un Url
Define the state
Decoder
instance decodeJsonUrl :: DecodeJson Url where
decodeJson json = do
obj <- decodeJson json
info <- obj .? " data" <- info .? " image_original_url" pure $ Url imgUrl
Update
foldp :: ∀ fx . Event -> State -> EffModel State Event AppEffects
foldp RequestGiphy state = { state: state, effects: [
do
result <- attempt $ get " https://api.giphy.com/v1/gifs/random?api_key=670526ba3bda46629f097f67890105ed&tag=&rating=G" let decode res = decodeJson res. response :: Either String Url
let url = either (Left <<< show ) decode result
pure $ Just $ ReceiveGiphy url
]}
foldp (ReceiveGiphy (Left = { state: state, effects: [ log " Error" *> pure Nothing ] }
foldp (ReceiveGiphy (Right = { state: url, effects: [ log " ReceivedGiphy" *> pure Nothing ]}
View
view url =
div do
button #! onClick (const RequestGiphy ) $ text " Get Random Giphy" ! src (unwrap url)
Main
main :: ∀ fx . Eff (CoreEffects AppEffects ) Unit
main = do
app <- start
{ initialState: Url " " -- 👈: []
}
renderToDOM " #app" . markup app. input
Run server
Do your happy dance!
My first PureScript HTTP request 🕺 💃 Part 6: Make request from user input
Update Imports
import Pux.DOM.Events (onClick , onChange , DOMEvent , targetValue )
import Text.Smolder.HTML (button , div , img , input )
import Text.Smolder.HTML.Attributes (src , type' , value )
Update state
type State =
{ url :: Url
, input :: String
Update
foldp :: ∀ fx . Event -> State -> EffModel State Event AppEffects
foldp RequestGiphy state = { state: state, effects: [
do
result <- attempt $ get $ " https://api.giphy.com/v1/gifs/random?api_key=670526ba3bda46629f097f67890105ed&tag=" <> state. input <> " &rating=G" let decode res = decodeJson res. response :: Either String Url
let url = either (Left <<< show ) decode result
pure $ Just $ ReceiveGiphy url
]}
foldp (ReceiveGiphy (Left = { state: state, effects: [ log " Error" *> pure Nothing ] }
foldp (ReceiveGiphy (Right = { state: state { url = url }, effects: [ log " ReceivedGiphy" *> pure Nothing ]}
foldp (UserInput ev) state = { state: state { input = targetValue ev }, effects: [] }
View
view state =
div do
input ! type' " text" #! onChange UserInput ! value state. input
button #! onClick (const RequestGiphy ) $ text " Get Random Giphy" ! src (unwrap state. url)
Main
main :: ∀ fx . Eff (CoreEffects AppEffects ) Unit
main = do
app <- start
{ initialState: { input: " " : Url " " -- 👈: []
}
renderToDOM " #app" . markup app. input
Run server
Do your happy dance!
My first PureScript Giphy App 💃