Skip to content

Commit ef40ec8

Browse files
author
brucou
committed
chore(README): update
1 parent c6aa3eb commit ef40ec8

File tree

1 file changed

+24
-16
lines changed

1 file changed

+24
-16
lines changed

README.md

Lines changed: 24 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -95,13 +95,13 @@ A component combinator is a **parametrizable** function which... **combines** co
9595
The principle is deceptively simple. Now let's see some examples of use.
9696

9797
# Examples
98-
## Layout vs. feature
98+
## Separating layout from feature
9999
The following implementation corresponds to the layout specifications :
100100

101101
- layout specifications (in order from top to bottom of appearance on screen)
102102
- header
103-
- feature : we will reuse here the component from the routing demo (introduced in a later
104-
section)
103+
- feature : we will reuse here the component from the nested routing demo (introduced in a
104+
later section)
105105
- footer
106106
- made of three groups (with miscellaneous navigation links) and a header
107107
- sitemap
@@ -178,7 +178,19 @@ the structure of our application is more self-evident, i.e. simpler to read.
178178
Let's move on to cases exemplifying a more complex combining logic.
179179

180180
## Login gateway
181-
For instance, the structure behind a login section of an application goes as such:
181+
For instance, specification for a login section of an application could go as such:
182+
183+
- Functional specifications
184+
- if user is logged, show the main page
185+
- if user is not logged, show the login page, and redirect to `index` route when login is performed
186+
- Technical specifications
187+
- `MainPage` takes the concern of implementing the main page logic.
188+
- `LoginPage` is parameterized by a redirect route, and is in charge of logging in the user
189+
- `convertAuthToIsLoggedIn` emits `IS_NOT_LOGGED_IN` or `IS_LOGGED_IN` according to whether the user is logged or not
190+
191+
![login demo with Switch combinator](examples/SwitchLogin/assets/login_demo.gif)
192+
193+
A tentaive code to implement those specification with our library would look like :
182194

183195
```javascript
184196
export const App = Switch({
@@ -194,18 +206,6 @@ export const App = Switch({
194206
]);
195207
```
196208

197-
and translates the simple design :
198-
199-
- Functional specifications
200-
- if user is logged, show the main page
201-
- if user is not logged, show the login page, and redirect to `index` route when login is performed
202-
- Technical specifications
203-
- `MainPage` takes the concern of implementing the main page logic.
204-
- `LoginPage` is parameterized by a redirect route, and is in charge of logging in the user
205-
- `convertAuthToIsLoggedIn` emits `IS_NOT_LOGGED_IN` or `IS_LOGGED_IN` according to whether the user is logged or not
206-
207-
![login demo with Switch combinator](examples/SwitchLogin/assets/login_demo.gif)
208-
209209
The same code could be written in a `JSX`-like dialect as :
210210

211211
```javascript
@@ -418,6 +418,8 @@ function getProjectNavigationItems$(sources, settings) {
418418
}
419419
```
420420

421+
![sample app demo with miscellaneous combinators](examples/AllInDemo/assets/images/animated_demo.gif)
422+
421423
Note the use of the ad-hoc combinators `Navigation`, `NavigationSection` and `NavigationItem`.
422424
They are for instance defined as :
423425

@@ -455,6 +457,12 @@ function Navigation(navigationSettings, componentArray) {
455457
}
456458
```
457459
460+
Unless you have to implement some very specific combining logic that we haven't met in our large
461+
codebase, you should not have to use `m` in another form than `Combine`. If that should happen,
462+
you will need to delve into the documentation where we detail the three strategies we use for
463+
combining components. If you come up with a useful component combinator that is not here, feel
464+
free to publish it in its own package.
465+
458466
While the full syntax and semantics of the component combinators haven't been exposed[^EFSM],
459467
hopefully the examples serve to portray the merits of using a component model, under which an
460468
application is written as a component tree, where components are glued with convenient component combinators

0 commit comments

Comments
 (0)