Avaliação Boilerplate - React&Redux

[SrVieira]

Boas pessoal,

Sou ainda um newbie no React, mas to me esforçando para aprender cada vez mais e com isso compartilhar com a comunidade um pouco deste conhecimento obtido.
Venho trabalhando á alguns dias em meu boilerplate para desenvolvimento de web applications, escolhi o React pois além de ser uma das tecnologias mais utilizadas possui uma grande aceitação do mercado.

Tive a idéia de montar este boilerplate estes tempos quando estava montando um projeto para estudos pessoais, encontrei vários na rede, mas nenhum destes sanava minha dor, com isso montei este simples boilerplate.

Ele utiliza as seguintes ferramentas/libs:

React, Babel, Webpack, ESLint (Utilizando o padrão do Airbnb), SASS, Redux e ReduxForm.

É um boilerplate simples, limpo e de fácil entendimento. Para quem está começando deixei algumas descrições em cada parte do projeto.

Então gostaria da opinião de vocês sobre o boilerplate, oque mudariam, críticas construtivas são bem vindas, tudo na vida precisa de um feedback e conto com vocês para isso.

https://github.com/SrVieira/react-redux-boilerplate

[linconkusunoki]

Cara é legal criar um boilerplate, mas acho que o uso dele vai muito do gosto de cada um, por exemplo, Sass é legal, mas para trabalhar com React tem uma galera que adora Styled Components outra que curte CSS em módulos e tem também quem use Functional CSS...

A estrutura do Redux acaba virando um tradeoff muito grande hoje, ainda mais com a chegada do React Hooks, talvez valeria a pena criar um boilerplate usando Hooks (?) kkk

O que eu adicionaria ainda neste boilerplate seria o Prettier, Jest, Enzyme, PropTypes, Env's, Husky, Axios, EditorConfig e alguma config de CI

[SrVieira]

Cara é legal criar um boilerplate, mas acho que o uso dele vai muito do gosto de cada um, por exemplo, Sass é legal, mas para trabalhar com React tem uma galera que adora Styled Components outra que curte CSS em módulos e tem também quem use Functional CSS...

A estrutura do Redux acaba virando um tradeoff muito grande hoje, ainda mais com a chegada do React Hooks, talvez valeria a pena criar um boilerplate usando Hooks (?) kkk

O que eu adicionaria ainda neste boilerplate seria o Prettier, Jest, Enzyme, PropTypes, Env's, Husky, Axios, EditorConfig e alguma config de CI

Sim sim, por este motivo até criei este para uso pessoal. Pois nenhum dos existentes me atraia haha, mas achei interessante as dicas, em relação aos componentes de testes eu já estou até implementando hahaha. vlws manito

[SrVieira]

@edit

havia esquecido de colocar o link do boilerplate

https://github.com/SrVieira/react-redux-boilerplate

[thismarcoantonio]

@linconkusunoki Qual a verdadeira utilidade do Prettier? Vejo muita gente usando, mas n vejo uma utilidade real.

[linconkusunoki]

@thismarcoantonio o prettier garante que o código fique formatado conforme as regras que é aplicado no projeto.
Imagine que você está contribuindo para algum projeto open source, se tem o prettier você não precisa se preocupar com a formatação do código, no code review pelo menos isto não será um problema :)

Dai você pode estar se perguntando, mas o ESLint já não faz isso?
prettier/prettier-eslint#101 (comment)

[thismarcoantonio]

@linconkusunoki Não querendo tirar o foco da issue, mas eu realmente me faço essa pergunta... Eu no caso uso
VSCODE e utilizando a extensão "ESLint" consigo dar o autofix on save:

Acredito que em outros editores também seja possível, por isso que fico sem entender o Prettier, e o eslint --fix já faz basicamente isso...

[linconkusunoki]

@thismarcoantonio são coisas diferentes
ESLint - detecta anti-patterns e potenciais erros
Prettier - tbm mostra alguns erros, mas não remove os bugs do seu código, porém facilita achá-los
https://engineering.hexacta.com/why-arent-you-using-prettier-4fe0a77713e8
https://twitter.com/slicknet/status/877194938508656641
https://twitter.com/dan_abramov/status/874601179334017024

[thismarcoantonio]

@linconkusunoki entendi agora, faz sentido.

[herberthenrique]

Gostaria de fazer uma leva provocação aqui.
Mas por favor não me leve a mal, não estou criticando o trabalho de ninguém 😅

É realmente necessário pensarmos em Redux nos dias de hoje?
Há algum tempo, muitos devs já abandonaram e eu particulamente não uso há um tempo por causa da API de Context do React.
Ela solucionou praticamente todos os casos onde Redux seria a antiga solução.

[herberthenrique]

E sobre o boilerplate eu tenho uma pergunta (ou sugestão) ☝️

Você tem os seguintes packages em dependencies:

• clean-webpack-plugin
• html-webpack-plugin
• webpack-merge

Eles não deveriam estar em devDependencies?

Enquanto isso, você tem redux e react-redux em devDependencies, sendo que deveriam estar em dependencies?

[SrVieira]

Gostaria de fazer uma leva provocação aqui.
Mas por favor não me leve a mal, não estou criticando o trabalho de ninguém 😅

É realmente necessário pensarmos em Redux nos dias de hoje?
Há algum tempo, muitos devs já abandonaram e eu particulamente não uso há um tempo por causa da API de Context do React.
Ela solucionou praticamente todos os casos onde Redux seria a antiga solução.

Opa cara, críticas são sempre bem vindas. Eu ainda utilizo o Redux por não ter muita familiaridade com o context, mas nada que eu não possa mudar futuramente hehe. Obrigado pela sugestão.

[SrVieira]

E sobre o boilerplate eu tenho uma pergunta (ou sugestão) ☝️

Você tem os seguintes packages em dependencies:

• clean-webpack-plugin
• html-webpack-plugin
• webpack-merge

Eles não deveriam estar em devDependencies?

Enquanto isso, você tem redux e react-redux em devDependencies, sendo que deveriam estar em dependencies?

Erros grotescos de minha parte, irei trabalhar nestas mudanças e manterei o uso do redux neste projeto. Futuramente estudarei o Context para trabalhar em meus futuros projetos. vlws

[wkrueger]

Sobre boilerplates

Dada a natureza modular do ecossistema react, acho que não é só recomendável mas essencial você ter um boilerplate (ou melhor, uma base comum, monolítica de trabalho, a SUA opinião) E fixar em uma opinião. Talvez não faça diferença se você pega um projetão de 3 anos, mas se você faz vários projetos menores, o tempo que você perde arrumando besteirinha de webpack é ridículo, o carinha 1997 do PHP+jquery já vai ter feito 2 sites.

Recomendação 2 aqui, só parafraseio algumas dezenas de artigos recomendando o uso do create-react-app/next.js ou outro "pacote", afinal esses são pacotes curados, tem alguém cuidando pra atualizar ele, é menos nas suas costas. Usar CRA não é questão de "ain tá com medo de aprender webpack", mas sim de manutenção, os problemas que você vai bater cabeça montando na mão outro cara já vai ter resolvido.

É realmente necessário pensarmos em Redux nos dias de hoje?

O redux ainda é muito bom na parte de performance (fora a utilidade de middlewares), ele permite que você declare renders seletivos de uma forma muito limpa. Não que não dê pra fazer via shouldComponentUpdate, mas é mais limpo. Context por padrão faz render de todos os seus consumidores em qualquer alteração...