-
Notifications
You must be signed in to change notification settings - Fork 0
/
guia-informal-do-fulcro.html
131 lines (104 loc) · 3.88 KB
/
guia-informal-do-fulcro.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="twitter:site" content="@souenzzo"/>
<meta name="twitter:creator" content="@souenzzo"/>
<meta name="author" content="Enzzo Cavallo">
<title>Guia informal do fulcro</title>
<meta property="og:title" content="Guia informal do fulcro"/>
<meta name="Description" content="Guia informal do fulcro"/>
<meta name="description" content="Guia informal do fulcro">
<meta property="og:description" content="Guia informal do fulcro"/>
</head>
<body>
<pre>
# Guia informal do fulcro
Fulcro é uma biblioteca de Clojurescript para desenvolver interfaces.
Ele agrega algumas ações comuns do desenvolvimento de interfaces
- Renderiza a interface (em geral, via React)
- Administra o estado
- Adminsitra eventos
- Administra a obtenção de dados
Tudo isso de forma muito simples
Diferente de outras ferramentas que (prometem) fazer o mesmo, como Relay,
o fulcro sempre permite que a qualquer momento você transpasse ele e administre esses elementos manualmente
Vamos começar conhecendo os Componentes fulcro.
O componente fulcro tem 3 elementos principais:
- `:query`: Descreve com EQL quais dados aquele componente irá precisar
- `:ident`: (opcional) Diz qual atributo da `:query` pode ser usado para normalizar o dado
- render: O componente React
Montado na macro `defsc`, fica assim:
```clojure
(defsc LiTodo [app props]
{:query [:todo/id
:todo/text
:todo/done?]
:ident :todo/id}
(dom/li
(dom/p (:todo/text props))
(dom/button (if (:todo/done? props)
"✗""✔"))))
(def ui-li-todo (comp/factory LiRoot {:keyfn :todo/id}))
```
Quando vc escreve um componente, vc não precisa se preocupar com "de onde vem o dado", apenas em
"quais dados ele precisa"
O defsc retorna uma estrutura de dados do fulcro, com vários metadados e tal
Quando fazemos `comp/factory` do componente, o retorno é um componente react.
Para motivos de aprendizado, podemos montar esse componente numa aplicação simples
```clojure
(defsc Root [this props]
{:query []}
(dom/div
(ui-li-todo {:todo/id 42
:todo/text "Olá!"
:todo/done? false})))
(defn ^:export main
[]
(let [app (app/fulcro-app)]
(app/mount! Root "app")))
```
# Ident's
Os ident's do fulcro servem para normalizar o banco.
Quando vc faz um `(df/load app :todos/my-todos LiTodo)` será enviado uma query para o servidor no seguinte formato:
```
[{:todos/my-todos [:todo/id
:todo/text
:todo/done?]}]
```
Essa query deve retornar um dado com formato parecido com
```
{:todos/my-todos [{:todo/id 1
:todo/text "a"
:todo/done? false}
{:todo/id 2
:todo/text "b"
:todo/done? true}]}
```
Uma vez que `LiTodo` possui `:ident :todo/id`, o fulcro irá normalizar seus elementos via `:todo/id`
No "app-db", ficará assim:
```
:todos/my-todos [[:todo/id 1]
[:todo/id 2]]
:todo/id {1 {:todo/id 1
:todo/text "a"
:todo/done? false}
2 {:todo/id 2
:todo/text "b"
:todo/done? true}}
```
</pre>
<footer>
<p>
Em caso de dúvidas ou erros,
<a target="_blank"
rel="noreferrer noopener"
href="https://github.com/souenzzo/souenzzo.github.io/issues/new">reporte uma issue</a>
</p>
<p>Se preferir, <a target="_blank"
rel="noreferrer noopener"
href="https://t.me/souenzzo">fale diretamente comigo</a></p>
</footer>
</body>
</html>