zufgzufg
This commit is contained in:
parent
9d3fee618d
commit
20bd95ef56
20
readme.md
20
readme.md
@ -17,7 +17,11 @@ programming language that compiles to javascript (like typescript).
|
|||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
### Motivating example: React vs Halogen
|
### Motivating example: React vs Halogen
|
||||||
this frontend app:
|
You don't have to understand exactly how these examples work,
|
||||||
|
I'm providing them simply for you to glance over and get a feeling
|
||||||
|
for reading typescript/javascript vs purescript.
|
||||||
|
|
||||||
|
This app:
|
||||||
1. renders `"Loading..."` until either data or error
|
1. renders `"Loading..."` until either data or error
|
||||||
1. fetches data from a server
|
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.
|
1. if ok, render items in a list. if error, render error span at the bottom of the page.
|
||||||
@ -62,10 +66,7 @@ export const App: () => React.Node = () => {
|
|||||||
<summary>Purescript Halogen (click to expand)</summary>
|
<summary>Purescript Halogen (click to expand)</summary>
|
||||||
|
|
||||||
```haskell
|
```haskell
|
||||||
type Item = { id :: String
|
type Item = { id :: String, title :: String, description :: String }
|
||||||
, title :: String
|
|
||||||
, description :: String
|
|
||||||
}
|
|
||||||
|
|
||||||
data State
|
data State
|
||||||
= StateEmpty
|
= StateEmpty
|
||||||
@ -74,8 +75,7 @@ data State
|
|||||||
|
|
||||||
data Action = ActionInit
|
data Action = ActionInit
|
||||||
|
|
||||||
renderItem item =
|
renderItem item = div [] [ p [] [text item.title]
|
||||||
div [] [ p [] [text item.title]
|
|
||||||
, span
|
, span
|
||||||
[className "small"]
|
[className "small"]
|
||||||
[text item.description]
|
[text item.description]
|
||||||
@ -96,11 +96,7 @@ action ActionInit = do
|
|||||||
app = mkComponent
|
app = mkComponent
|
||||||
{ initialState: StateEmpty
|
{ initialState: StateEmpty
|
||||||
, render: renderApp
|
, render: renderApp
|
||||||
, eval:
|
, eval: mkEval ( defaultEval { handleAction = action, initialize: Just ActionInit } )
|
||||||
mkEval ( defaultEval { handleAction = action
|
|
||||||
, initialize: Just ActionInit
|
|
||||||
}
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user