Setup: Webpack + React + Flux + CSS Modules

Nessa apresentação faço um setup simples para iniciantes explicando o webpack, react, flux e css modules. Foi feito um live code onde o código criado foi publicado nesse repositório https://github.com/pedrotcaraujo/react-chat-demo

Transcript

1. Webpack + React + Flux + CSS Modules @pedrotcaraujo
2. Webpack https://webpack.js.org/ É um modules bundler para aplicações JavaScript. Basicamente ele lida com todas as dependências (assets, scripts, images, styles…) da aplicação e cria um pacote de entrega. - Tudo para o webpack é um módulo. - É possível quebrar a árvore de dependências em vários pedaços sob demanda (chunks). - É possível substituir ferramentas como Gulp, Bower.
3. Webpack O webpack é altamente configurável e para entender como ele funciona é necessário conhecer 4 core concepts. - Entry: webpack cria um gráfico de dependências, e o entry point fala para webpack por onde começar seguindo o gráfico de dependências. - Output: Depois que temos um bundle, o output é onde tratamos a saída desse bundle (filename, path). - Loaders: como tudo é módulo (.css, .html, .scss, .jpg, etc.), os loaders transforma esses arquivos em módulos para o gráfico de dependências. - Plugin: lida com o bundle gerado para fazer coisas extras (uglify, env var).
4. React https://facebook.github.io/react/ React é uma library javascript para desenvolver UIs interativas criada e mantida pelo facebook. Dizem que o React é o "V" do MVC. - Única coisa que faz é criar um wrapper de um componente. - NÃO é um framework e nem MVC. - NÃO utiliza template html, o html é no próprio js (tem um cara que chama jsx que facilita a escrita de html no js). - Diferente de todas as libs que tem no mercado, porém cumpre muito bem o que promete, então 'Give it 5 minutes' (https://signalvnoise.com/posts/3124-give-it-five-minutes)
5. React Em React tudo é componentes, logo precisamos saber como eles se relacionam. Temos essas possibilidades: SIBLINGS SIBLINGS PARENT CHILD PARENT CHILD ANY ANY
6. Vamos codar o código...
7. React SIBLINGS SIBLINGS PARENT CHILD PARENT CHILD ANY ANY Como fazer uma comunicação ANY to ANY?
8. Flux Flux é uma arquitetura de aplicações que o facebook usa para construir suas aplicações web client-side. - Model-View-Controller não existe dentro de uma arquitetura flux. - Mantém uma comunicação de dados unidirecional. - Pode ser utilizado com qualquer aplicação javascript, não precisa ser react.
9. Flux A comunicação dados unidirecional é a característica mais importante no flux, que possui três partes principais: dispatchers, stores e views (no caso, os componentes React). Essa imagem representa o modelo mental primário de um programador Flux. As "actions" são apenas objetos que contém as chamadas para o dispatcher com seus identificadores.
10. Flux As partes de uma arquitetura flux: - Action: são métodos helper que passa instruções para dispatcher. - Dispatcher: é o hub central que gerencia todo o data flow da aplicação. Basicamente faz registro de callbacks. - Store: contém o estado e a lógica da aplicação, parecido com o model do MVC, mas uma store gerencia vários objetos e emite um evento quando é atualizado. - View: são como os controllers views, faz chamada para as actions e escuta mudança dos estados das stores.
11. Vamos codar o código...
12. CSS Modules https://github.com/css-modules/css-modules Arquivo CSS onde todos os class names e animation names são "escopados" localmente por default. - Garante que o estilo funciona para um único componente. - Possui escopo por arquivo. - Possui dependência explícita. - Precisa ser "buildado" (webpack, browserfy, etc.) - NÃO é mais necessário o uso de BEM. - NÃO é uma spec oficial.
13. Vamos codar o código...
14. obrigado! https://github.com/pedrotcaraujo/react-chat-demo