Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
P
purescript-gargantext
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
148
Issues
148
List
Board
Labels
Milestones
Merge Requests
2
Merge Requests
2
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
gargantext
purescript-gargantext
Commits
e0a0b19f
Commit
e0a0b19f
authored
Apr 27, 2021
by
Alexandre Delanoë
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
[REVIEW] presentation formulation (feedback welcome)
parent
514025ca
Changes
1
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
31 additions
and
25 deletions
+31
-25
REACTIX.md
REACTIX.md
+31
-25
No files found.
REACTIX.md
View file @
e0a0b19f
...
@@ -8,37 +8,43 @@ Prerequisite knowledge:
...
@@ -8,37 +8,43 @@ Prerequisite knowledge:
## Background
## Background
React is a component-based user interface library for the web written
React is a component-based user interface library for the web written
in
j
avascript. It provides a declarative API for building a Single
in
J
avascript. It provides a declarative API for building a Single
Page (web) Application (SPA). React is the primary way we handle
u
ser
Page (web) Application (SPA). React is the primary way we handle
U
ser
interfaces
in the
`purescript-gargantext`
codebase.
Interfaces (UI)
in the
`purescript-gargantext`
codebase.
React exposes two APIs:
React exposes two APIs:
*
The traditional
`object`
component model, where each component is a class
*
The traditional
`object`
component model, where each component is a class
*
The new
`hooks`
model where each component is a function that follows some rules.
*
The new
`hooks`
model where each component is a function that follows some rules.
Almost all of our UI code is written with the
`Reactix`
p
urescript
Almost all of our UI code is written with the
`Reactix`
P
urescript
library, a quite simple wrapper over the
`hooks`
api only. This is a
library, a quite simple wrapper over the
`hooks`
API only. This is
pragmatic choice: we believe that it results in simpler, more
a pragmatic choice: we believe that it results in simple, easy and
understandable
purescript code that is just more
fun to maintain.
understandable
Purescript code that is just
fun to maintain.
This choice is not without downside, in particular some of those rules
We acknowledge this choice is not without downside, in particular some
that components must follow
*
cannot be automatically enforced by the
of those rules that components must follow
*
cannot be automatically
compiler for you
*
. Thus we lose one of the benefits a lot of peopl
e
enforced by the compiler for you
*
yet. Thus for now we lose one of th
e
associate with languages with good type systems - "if it compiles, it
benefits a lot of people associate with languages with good type systems
will work".
-
"if it compiles, it
will work".
To put it another way, you are essentially left with only the
To put it another way,
currently
you are essentially left with only the
guarantees
react provides - that it will work if you follow the rules,
guarantees
React provides - that it will work if you follow some good
*some of which you will have to enforce yourself*
. To some degree,
practices,
*some of which you will have to enforce yourself*
. To some
it's
*as if you're writing javascript with a type system*
.
degree,
it's
*as if you're writing javascript with a type system*
.
We appreciate some people might be uncomfortable with this tradeoff,
This trade-off worked out pretty well for our needs to start with the
but on the whole we think it's worked out pretty well for our needs.
scientific project. Nevertheless, we are working on improving the state
on the Type level side. Indeed we are working on improving our Types in
focusing on invariants dealing with the User Interface we are building.
The more we are using it, the more it will be well typed.
You are welcome to join and help us to improve it, thanks in advance for
your kind feedbacks.
## Let's learn Reactix!
## Let's learn Reactix!
Let's start off by looking at some simple
r
eactix code. It's kinda
Let's start off by looking at some simple
R
eactix code. It's kinda
like writing html in
p
urescript:
like writing html in
P
urescript:
```
purescript
```
purescript
import Reactix as R
import Reactix as R
...
@@ -114,14 +120,14 @@ There are three important things going on in the component definition:
...
@@ -114,14 +120,14 @@ There are three important things going on in the component definition:
*
We have added a
`pure`
, because the body of a component function is
*
We have added a
`pure`
, because the body of a component function is
monadic (specifically the
`Reactix.Hooks`
monad).
monadic (specifically the
`Reactix.Hooks`
monad).
While an appropriate name in the
r
eact devtools is not to be sniffed
While an appropriate name in the
R
eact devtools is not to be sniffed
at, our last example really only scratches the surface of
at, our last example really only scratches the surface of
components. At risk of opening pandora's box, we can do
*much*
more!
components. At risk of opening pandora's box, we can do
*much*
more!
### Adding interactivity: our first hook
### Adding interactivity: our first hook
So far, we've made mild improvements over basic html. Since it's a bit
So far, we've made mild improvements over basic html. Since it's a bit
dumb to force
p
urescript on someone for something html could do, we
dumb to force
P
urescript on someone for something html could do, we
should probably do something it couldn't: interaction!
should probably do something it couldn't: interaction!
We will make a component that simply counts how many times a button
We will make a component that simply counts how many times a button
...
@@ -163,7 +169,7 @@ How all of that actually happens under the hood is a little
...
@@ -163,7 +169,7 @@ How all of that actually happens under the hood is a little
complicated, but let's pick off the easy bits.
complicated, but let's pick off the easy bits.
The
`on`
property is treated specially by the html constructors - it
The
`on`
property is treated specially by the html constructors - it
plumbs
p
urescript functions into being and react event handlers. In
plumbs
P
urescript functions into being and react event handlers. In
this case, the
`click`
entry becomes an
`onClick`
handler. We ignore
this case, the
`click`
entry becomes an
`onClick`
handler. We ignore
the provided event and call the setter function with an increment (to
the provided event and call the setter function with an increment (to
be applied to the current value).
be applied to the current value).
...
@@ -247,7 +253,7 @@ the button, that would be the end of the story.
...
@@ -247,7 +253,7 @@ the button, that would be the end of the story.
Of course you want to click the button. And when you do that, a whole
Of course you want to click the button. And when you do that, a whole
chain of events sets in motion:
chain of events sets in motion:
*
The
`click`
handler is called, which...
*
The
`click`
handler is called, which...
*
Calls the setter function, which...
*
Calls the setter function, which...
*
Increments the counter state, which...
*
Increments the counter state, which...
*
Makes react rerender the component, which...
*
Makes react rerender the component, which...
...
@@ -267,7 +273,7 @@ version.
...
@@ -267,7 +273,7 @@ version.
takes an initial value,
`useState`
takes a function to calculate an
takes an initial value,
`useState`
takes a function to calculate an
initial value. In our case, we have the value already, so
`useState'`
.
initial value. In our case, we have the value already, so
`useState'`
.
### Going in circles: rerendering by changing
p
rops
### Going in circles: rerendering by changing
P
rops
We have already explored one way of getting a component to rerender in
We have already explored one way of getting a component to rerender in
response to the world - the
`useState'`
hook. Another way is to change
response to the world - the
`useState'`
hook. Another way is to change
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment