doc

readme.md

@@ -1,7 +1,80 @@
 # thunderstrike.ai intern resources
 
 ## purescript
-**Purescript** is a strongly-typed<a href="https://en.wikipedia.org/wiki/Type_safety"><sup>[type safety]</sup></a> purely functional programming language
+**Purescript** is a strongly-typed <a href="https://en.wikipedia.org/wiki/Type_safety"><sup>[type safety]</sup></a>
+purely functional <a href="https://en.wikipedia.org/wiki/Purely_functional_programming"><sup>[purely functional]</sup></a>
+programming language that compiles to javascript (like typescript).
 
-```purescript
+### In brief
+<ul>
+  <li>
+  effectful code
+  <a href="https://en.wikipedia.org/wiki/Side_effect_(computer_science)"><sup>[side effect]</sup></a>
+  is isolated from non-effectful code. This makes programs much more consistent to run and reason about.
+  </li>
+  <li>everything is an expression</li>
+  <li>interacting with raw javascript is relatively painless</li>
+</ul>
+
+### Motivating example: React vs Halogen
+this frontend app:
+ 1. renders `"Loading..."` until either data or error
+ 1. fetches data from a server
+ 1. if ok, render items in a list. if error, render error span at the bottom of the page.
+
+**React**
+```javascript
+export const App = () => {
+  const [items, setItems] = React.useState(undefined)
+  const [error, setError] = React.useState(undefined)
+
+  React.useEffect(() => {
+    fetch('/api/item')
+      .then(rep => rep.json())
+      .then(items => setItems(items))
+      .catch(e => setError(e))
+  }, [])
+
+  return error !== undefined
+    ? (<p class="error">{error.message}</p>)
+    : items === undefined
+    ? (<p>Loading...</p>)
+    : items.map(item => {
+        return (
+          <div key={item.id}>
+            <p>{item.title}</p>
+            <span class="small">{item.description}</span>
+          </div>
+        )
+      })
+}
+```
+
+**Halogen**
+```haskell
+type Item = {id :: String, title :: String, description :: String}
+data State = StateEmpty | StateErrored Error | StateGotItems (Array Item)
+data Action = Init
+
+renderItem item = div [] [ p [] [text item.title]
+                         , span [className "small"] [text item.description]
+                         ]
+
+renderApp StateEmpty = p [] [text "Loading..."]
+renderApp (StateErrored e) = p [className "error"] [text (message e)]
+renderApp (StateGotItems items) = map renderItem items
+
+action Init = do
+  response <- fetch (URL "/api/item") {method: Get}
+  jsonString <- text response
+  itemsOrError <- readJSON jsonString
+  case itemsOrError of
+    Right items -> put (StateGotItems items)
+    Left error -> put (StateErrored error)
+
+app = mkComponent
+  { initialState: StateEmpty
+  , render: renderApp
+  , eval: mkEval (defaultEval {handleAction = action, initialize: Just Init})
+  }
 ```