Arquitetura para a nova geração de aplicações

Talk @ React Conf Brasil. Logic Hooks, Interfaces, Pure Components

Transcript

1. Arquitetura para a nova geração de aplicações com React e React Native Charbel Rami @charbelrami HOOKS :)
2. Charbel Rami - Faço coisas com código desde os 13 (comecei com RGSS no RPG Maker); - Gosto de trabalhar com acessibilidade e performance; - Fui colaborador no início do Brave; - Trabalho na VAGAS.
3. Um dia normal em um chat qualquer:
4. Cliente: — Sabe o que seria legal? Front:
5. Cliente: ▶ ──────── 2:59:03 Front:
6. Cliente: — Resumindo: um Todo List para web e mobile ;) Front:
7. Front:
8. Front: if (React && React Native && React Native Web) SUCESSO!
9. Como o Front imagina:
12. Como realmente é:
15. Front:
17. Hooks - São funções com suporte para as principais funcionalidades do React, como state, lifecycle e context; - Não renderizam nada;
18. Hooks - Possuem estado local isolado no componente em que se encontram; - Permitem reutilizar lógica de estado.
19. Coooode
20. export function Todos() { const [title, setTitle] = useState(""); const todos = useContext(TodoStateContext); … useEffect(() => { … }, [todos, id]); function addTodo() { … } function handleTitleChange() { … } … return ( <> <input value={title} onChange={handleTitleChange} … /> … <button onClick={addTodo}>Add Todo</button> <ol> {todos.map(({ id, title }) => ( …
21. export function Todos() { const [title, setTitle] = useState(""); const todos = useContext(TodoStateContext); … useEffect(() => { … }, [todos, id]); function addTodo() { … } function handleTitleChange() { … } … return ( <> <input value={title} onChange={handleTitleChange} … /> … <button onClick={addTodo}>Add Todo</button> <ol> {todos.map(({ id, title }) => ( …
22. // pure-components/TodoInput.js export function TodoInput({ value, setValue, … }) { function handleChange(e) { setValue(e.target.value); } return ( <input value={value} onChange={handleChange} … /> ); }
23. // pure-components/TodoInput.js export function TodoInput({ value, setValue, … }) { function handleChange(e) { setValue(e.target.value); } return ( <input value={value} onChange={handleChange} … /> ); }
24. // pure-components/TodoInput.js export function TodoInput({ value, setValue, … }) { function handleChange(e) { setValue(e.target.value); } return ( <input value={value} onChange={handleChange} … /> ); }
25. // pure-components/TodoList.js export function TodoList({ todos }) { return ( <ol> {todos.map(({ id, title }) => ( <TodoListItem id={id}>{title}</TodoListItem> ))} </ol> ); }
26. Pure components - São componentes funcionais: dadas as mesmas props, a renderização é a mesma (se a = b, então f(a) = f(b));
27. Pure components - Recebem, exclusivamente via props, valores de estado e callbacks para atualizar esse estado; - Podem ter sua performance otimizada com React.memo.
28. export function Todos() { const [title, setTitle] = useState(""); const todos = useContext(TodoStateContext); … useEffect(() => { … }, [todos, id]); function addTodo() { … } function handleTitleChange() { … } … return ( <> <input value={title} onChange={handleTitleChange} … /> … <button onClick={addTodo}>Add Todo</button> <ol> {todos.map(({ id, title }) => ( …
29. export function Todos() { const [title, setTitle] = useState(""); const todos = useContext(TodoStateContext); … useEffect(() => { … }, [todos, id]); function addTodo() { … } function handleTitleChange() { … } … return ( <> <input value={title} onChange={handleTitleChange} … /> … <button onClick={addTodo}>Add Todo</button> <ol> {todos.map(({ id, title }) => ( …
30. // logic-hooks/useTodos export function useTodos() { const [title, setTitle] = useState(""); const todos = useContext(TodoStateContext); … useEffect(() => { … }, [todos, id]); function addTodo() { … } return { title, setTitle, addTodo, todos, … }; }
31. // logic-hooks/useTodos export function useTodos() { const [title, setTitle] = useState(""); const todos = useContext(TodoStateContext); … useEffect(() => { … }, [todos, id]); function addTodo() { … } return { title, setTitle, addTodo, todos, … }; }
32. // logic-hooks/useTodos export function useTodos() { const [title, setTitle] = useState(""); const todos = useContext(TodoStateContext); … useEffect(() => { … }, [todos, id]); function addTodo() { … } return { title, setTitle, addTodo, todos, … }; }
33. // logic-hooks/useTodos export function useTodos() { const [title, setTitle] = useState(""); const todos = useContext(TodoStateContext); … useEffect(() => { … }, [todos, id]); function addTodo() { … } return { title, setTitle, addTodo, todos, … }; }
34. Logic hooks - São custom hooks; - Cuidam da lógica de negócio;
35. Logic hooks - Se comunicam com contexts, actions, stores, API, localstorage, etc; - Retornam valores de estado e callbacks para atualizar esse estado.
36. // interfaces/TodoInterface.js export function TodoInterface() { const { title, setTitle, addTodo, todos, … } = useTodos(); return ( <> <TodoInput value={title} setValue={setTitle} … /> … <Button onClick={addTodo}>Add Todo</Button> <TodoList todos={todos} /> …
37. // interfaces/TodoInterface.js export function TodoInterface() { const { title, setTitle, addTodo, todos, … } = useTodos(); return ( <> <TodoInput value={title} setValue={setTitle} … /> … <Button onClick={addTodo}>Add Todo</Button> <TodoList todos={todos} /> …
38. // interfaces/TodoInterface.js export function TodoInterface() { const { title, setTitle, addTodo, todos, … } = useTodos(); return ( <> <TodoInput value={title} setValue={setTitle} … /> … <Button onClick={addTodo}>Add Todo</Button> <TodoList todos={todos} /> …
39. // interfaces/TodoInterface.js export function TodoInterface() { const { title, setTitle, addTodo, todos, … } = useTodos(); return ( <> <TodoInput value={title} setValue={setTitle} … /> … <Button onClick={addTodo}>Add Todo</Button> <TodoList todos={todos} /> …
40. Interfaces - São componentes-função (!== componentes funcionais); - Renderizam pure components; - Recebem valores fornecidos por Logic Hooks, e os distribuem para pure components.
41. Logic hook → Interface → Pure component Fluxo de dados
42. Logic Hooks → LOOKS
43. E como isso resolve o problema do Todo List na prática?
46. // interfaces/TodoInterface.js export function TodoInterface() { const { title, setTitle, description, setDescription, addTodo, todos, currentTodo } = useTodos(); return ( <> <TodoInput value={title} setValue={setTitle} /> <TodoInput value={description} setValue={setDescription} /> <Button onClick={addTodo}>Add Todo</Button> <TodoList todos={todos} /> … <TodoTitle>{currentTodo.title}</TodoTitle> <TodoDescription>{currentTodo.description}</TodoDescription> …
47. // interfaces/TodoInterface.js export function TodoInterface() { const { title, setTitle, description, setDescription, addTodo, todos, currentTodo } = useTodos(); return ( <> <TodoInput value={title} setValue={setTitle} /> <TodoInput value={description} setValue={setDescription} /> <Button onClick={addTodo}>Add Todo</Button> <TodoList todos={todos} /> … <TodoTitle>{currentTodo.title}</TodoTitle> <TodoDescription>{currentTodo.description}</TodoDescription> …
48. // interfaces/TodoInterface.js export function TodoInterface() { const { title, setTitle, description, setDescription, addTodo, todos } = useTodos(); return ( <> <TodoInput value={title} setValue={setTitle} /> <TodoInput value={description} setValue={setDescription} /> <Button onClick={addTodo}>Add Todo</Button> <TodoList todos={todos} /> …
49. // interfaces/TodoContentInterface.js export function TodoContentInterface() { const { currentTodo } = useTodos(); return ( <> <TodoTitle>{currentTodo.title}</TodoTitle> <TodoDescription> {currentTodo.description} </TodoDescription> </> ); }
50. Vantagens - Permite reutilizar a mesma lógica de estado com diferentes interfaces e vice-versa ; - Componentes que são fracamente acoplados podem ser testados e otimizados com mais facilidade;
51. Vantagens - Torna mais fácil refatorar e deletar código; - Logic hooks podem ser consumidos sem conhecimento sobre seu funcionamento interno; - Monorepo: um logic hook pode ser um package.
52. Desvantagens - Não é ideal para aplicações mais simples, onde não há necessidade frequente de reutilizar código; - Muitas camadas (lasagna code) se utilizada com Flux; Action → Dispatcher → Store → Logic hook → Interface → Pure component - Pouca documentação.
53. https:/ /codesandbox.io/s/talk-logic-hooks-ct0jb
54. Dúvidas?
55. Para quem quiser entrar em contato: Twitter: @charbelrami GitHub: /charbelrami
56. Regras para participação no sorteio do DRONE: 1. Seguir o perfil @VagasTech no Twitter 2. Dar RT no Tweet fixado em nosso perfil 3. Estar presente na hora do sorteio :)