You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: content/python-webassets-elm.md
+6-6Lines changed: 6 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -19,11 +19,11 @@ Se você é geek e me conhece, ou se me segue nas redes sociais, já ouviu eu fa
19
19
20
20
A resposta foi o [webassets-elm](https://github.com/cuducos/webassets-elm) — pacote que escrevi hoje e já está [disponível no PyPI](https://pypi.python.org/pypi/webassets-elm).
21
21
22
-
Nesse texto vou fazer uma pequena introdução sobre interfaces reativas, sobre Elm em si, e depois explico um pouco do problema que o [webassets-elm](https://github.com/cuducos/webassets-elm) resolve — _spoiler_: é gambiarra.
22
+
Nesse texto vou fazer uma pequena introdução sobre interfaces reativas, sobre Elm em si, e depois explico um pouco do problema que o [webassets-elm](https://github.com/cuducos/webassets-elm) resolve — spoiler: é gambiarra.
23
23
24
24
## O que é um _front-end_ com componente reativo?
25
25
26
-
Compomentes reativos são elementos na interface do usuário que seguem a [programação reativa](https://en.wikipedia.org/wiki/Reactive_programming): “um paradigma de programação orientado ao fluxo de dados e a propagação de mudanças” — como a Wikipédia define.
26
+
Componentes reativos são elementos na interface do usuário que seguem a [programação reativa](https://en.wikipedia.org/wiki/Reactive_programming): “um paradigma de programação orientado ao fluxo de dados e a propagação de mudanças” — como a Wikipédia define.
27
27
28
28
Mas o que isso quer dizer? Comecemos com um exemplo básico **não** reativo:
29
29
@@ -36,11 +36,11 @@ print(c) # 42
36
36
a =11
37
37
print(c) # 42
38
38
```
39
-
Se esse bloco fosse reativo, ao mudar o valor de `a`, a alteração deveria também mudar o valor de `c` — ou seja, o segunto`print(c)` deveria resultar em `13`, não em `42`.
39
+
Se esse bloco fosse reativo, ao mudar o valor de `a`, a alteração deveria também mudar o valor de `c` — ou seja, o segundo`print(c)` deveria resultar em `13`, não em `42`.
40
40
41
-
Isso é muito útil quando gerenciamos interfaces complexas no _front-end_: ao invés de gerenciarmos vários `div`, `span` com suas classes e conteúdos, definimos uma estrutura de dados e as _regras_ para rendereização desses dados em HTML. Alterando os dados, o HTML é atualizado automáticamente.
41
+
Isso é muito útil quando gerenciamos interfaces complexas no _front-end_: ao invés de gerenciarmos vários `div`, `span` com suas classes e conteúdos, definimos uma estrutura de dados e as _regras_ para renderização desses dados em HTML. Alterando os dados, o HTML é atualizado automaticamente.
42
42
43
-
Isso seria uma carroça de lerdeza se tivéssemos que atualiar o [DOM](https://pt.wikipedia.org/wiki/Modelo_de_Objeto_de_Documentos) cada vez que nossos dados fossem alterados — afinal [não é o JavaScript que é lento, o DOM é que é](https://www.youtube.com/watch?v=hQVTIJBZook). Por isso mesmo todos as alternativas para _front-end_ reativo — [Elm](http://elm-lang.org/), [React](https://facebook.github.io/react/), [Vue](https://vuejs.org/) e muitas outras — trabalham com um DOM virtual: todas as alterações são feitas primeiro nesse (eficiente) DOM virtual, que é comparado com o DOM real e então apenas as alterações mínimas são feitas no (lento) DOM real para que a interface seja atualizada. Simples assim.
43
+
Isso seria uma carroça de lerdeza se tivéssemos que atualizar o [DOM](https://pt.wikipedia.org/wiki/Modelo_de_Objeto_de_Documentos) cada vez que nossos dados fossem alterados — afinal [não é o JavaScript que é lento, o DOM é que é](https://www.youtube.com/watch?v=hQVTIJBZook). Por isso mesmo todos as alternativas para _front-end_ reativo — [Elm](http://elm-lang.org/), [React](https://facebook.github.io/react/), [Vue](https://vuejs.org/) e muitas outras — trabalham com um DOM virtual: todas as alterações são feitas primeiro nesse (eficiente) DOM virtual, que é comparado com o DOM real e então apenas as alterações mínimas são feitas no (lento) DOM real para que a interface seja atualizada. Simples assim.
44
44
45
45
## Por quê Elm?
46
46
@@ -105,7 +105,7 @@ Em outras palavras, se o `source_path` for `/home/johndoe/42.sass`, é como se d
105
105
106
106
Mas o `elm-make` não funciona assim. Ele gera uma arquivo. Se chamarmos `elm-make hello.elm` ele gera um `index.html` (com o JavaScript compilado dentro). Podemos gerar apenas um JavaScript usando o argumento `--output`. Por exemplo, podemos usar `elm-make hello.elm --output hello.js` e teríamos apenas o JavaScript compilado no arquivo `hello.js`.
107
107
108
-
Por esse motivo o _wemassets-elm_ precisou de [uma gambiarra](https://github.com/cuducos/webassets-elm/blob/master/webassets_elm/__init__.py#L25-L43). Primeiro ele chama o `elm-make` gravando um arquivo temporário:
108
+
Por esse motivo o _webassets-elm_ precisou de [uma gambiarra](https://github.com/cuducos/webassets-elm/blob/master/webassets_elm/__init__.py#L25-L43). Primeiro ele chama o `elm-make` gravando um arquivo temporário:
0 commit comments