O conjunto react-boilerplate recentemente, em 26 de junho de
2018 , foi atualizado para a versão 3.6.0. Esta montagem já tem mais de três anos, mas, destacando-se visivelmente no cenário de muitas
outras (mais de 18 mil Stars GitHub), quase nunca foi vista em Habré. Qual é a sua característica? Em resumo - a montagem oferece ao desenvolvedor "tudo de uma vez"!
Primeiro sobre triste
Primeiro, um pouco sobre coisas tristes. O valor da criação inicial para projetos de reação é enorme. Como você sabe, o React em si é apenas uma biblioteca que implementa o nível de apresentação e, para criar um aplicativo completo, você precisará usar muitas outras bibliotecas, já que o ecossistema do React oferece muitas delas. Por esse motivo, a configuração do projeto React é um problema sério, cuja solução é extremamente difícil para um desenvolvedor individual encontrar. O próprio Dan Abramov entende perfeitamente isso, afirmando: "A configuração não deve atrapalhar a maneira de começar ". E oferece uma solução - Criar aplicativo React . Nesta montagem inicial, que ganhou popularidade considerável (mais de 51 mil Stars GitHub), os autores tentaram proteger o desenvolvedor de problemas de configuração o máximo possível, ocultando a configuração padrão, reduzindo o conjunto de módulos ao mínimo, oferecendo a possibilidade de geração automática de componentes, criando uma sensação de simplicidade e simplicidade. facilidade de desenvolvimento de um aplicativo de reação. Além disso, eles, com base na mesma mensagem, oferecem sua lista de montagens recomendadas. A abordagem provavelmente é boa para atrair os recém-chegados, mas se esgotando rapidamente com suas limitações e problemas de configuração, questões de aplicação dos melhores módulos e melhores práticas ainda precisam ser abordadas. E o que dizer , por exemplo, de um desenvolvedor que está desenvolvendo seu primeiro projeto de reação?
Existe uma saída
O conjunto react-boilerplate é uma abordagem alternativa para resolver o problema e oferece "tudo de uma vez". Este é um conjunto de módulos reconhecidos como padrão de fato e testados no trabalho, um conjunto no qual as melhores práticas na organização do projeto são aplicadas, incluindo levando em consideração a escalabilidade e o desempenho, são introduzidas tecnologias que ajudam o programador a desenvolver e depurar códigos rapidamente.
Os desenvolvedores de montagem o posicionam como um "primeiro offline" altamente escalável (quando o aplicativo baixado funciona offline), levando em consideração a experiência dos melhores desenvolvedores, visando alto desempenho e construído de acordo com as "melhores práticas", forte, "pronto para produção", base testada em batalha para o desenvolvimento de aplicativos de reação.
Bibliotecas Aplicáveis
Mais informações sobre os módulos utilizados:
- React, v16.4 (Fiber) - uma implementação progressiva do principal algoritmo React que aumenta a produtividade no desenvolvimento de tarefas como animação, organização de elementos na página e movimento de elementos;
- React Router , v4.3 - um roteador de fato para aplicativos de reação, possibilita a criação de aplicativos com URLs amigáveis aos mecanismos de pesquisa;
- Redux , v4 - uma biblioteca que fornece um fluxo de dados estritamente unidirecional, tornando a lógica do aplicativo mais previsível e mais fácil de entender;
- Redux Saga , v0.16 - uma biblioteca projetada para simplificar e melhorar a execução de efeitos colaterais (ou seja, ações como operações assíncronas, como carregar dados, etc.) em aplicativos React / Redux;
- Reselect , v3 - uma biblioteca que permite impedir redesenhos e recontagens desnecessários dos dados recebidos, o que, por sua vez, acelera o aplicativo React / Redux;
- ImmutableJS , v4 - uma biblioteca que facilita o trabalho com dados imutáveis em aplicativos React / Redux;
- Styled Components , v3.3 - uma biblioteca que permite que você se livre das classes CSS como um estágio intermediário entre um componente e seus estilos;
- React Loadable , v5.4 - uma biblioteca que permite implementar uma abordagem orientada a componentes para separação de código e implementar carregamento tardio;
- Jest v23.1, Enzyme v3.3 - bibliotecas para testar aplicativos de reação.
Escalabilidade e desempenho
A montagem implementou consistentemente os princípios de suporte à escalabilidade e aumento da produtividade, detalhados pelo desenvolvedor da montagem Max Stoiber em sua palestra "Scaling ReactJS applications" e Dan Abramov na palestra "Presentation components and container components" .
Em particular, esses princípios incluem:
- separação de componentes em apresentação e recipientes;
- colocação de código de acordo com o princípio de um componente - uma pasta;
- o uso de ferramentas modernas (componentes estilizados, módulos CSS) para resolver problemas de herança CSS em grandes projetos;
- Aplicativo Redux / Saga para simplificar o fluxo de dados, simplificando operações assíncronas.
Codificação, depuração, teste
O assembly oferece amplas oportunidades para ajudar o programador a escrever e depurar códigos:
- JavaScript de próxima geração (modelos em minúsculas, reestruturação de objetos, sintaxe JSX, etc.);
- geração rápida de componentes / contêineres / rotas com seus seletores, sagas, redutores e testes via linha de comando;
- "Troca a quente" dos módulos, permitindo, sem demora, ver os resultados das alterações feitas no código do aplicativo;
- uso do Webpack Dll Plugin , que melhora o tempo de inicialização do aplicativo no servidor em 40% e durante a "recarga a quente" dos módulos;
- usando AppVeyor e TravisCI (arquivos de instalação são incluídos por padrão), o que permite executar automaticamente testes de aplicativos no Windows e Unix;
- análise de código estático: ESLint , Prettier e stylelint verificam e formatam automaticamente o código em seu editor (é necessária configuração , arquivos e instruções de configuração são anexados);
- posicionamento no Heroku , serviços de nuvem da AWS S3 : (configuração necessária, instruções incluídas).
Linha de comando
O assembly fornece, como já mencionado, um conjunto de comandos para a linha de comandos, na qual são implementados muitos recursos necessários para o desenvolvedor, incluindo:
- inicialização de um novo projeto com 100% de cobertura de teste;
- iniciar o aplicativo no servidor do desenvolvedor;
- geração de componentes, recipientes com seus seletores, sagas, redutores e testes;
- geração da versão "produção" do código do projeto;
- teste de projeto;
- depuração remota, que permite usar o serviço Ngrok para fornecer acesso seguro ao servidor local da Internet;
- fiapos;
- gerenciamento de traduções (adicionando idiomas, extraindo mensagens para arquivos JSON i18n);
- o perfil, embora mencionado entre os méritos da linha de comando de construção, infelizmente não foi encontrado.
Existe algo supérfluo?
Se você decidir que não precisa de alguns módulos, poderá removê-los e a montagem o ajudará com suas instruções ( aqui e aqui ).
Você acha que algo está faltando?
Recursos adicionais fornecidos pela montagem:
- “Primeiro offline”, o que significa que, uma vez que o aplicativo baixado funcione offline, mesmo em navegadores mais antigos;
- “Aplicativo da web nativo” significa que, após visitas repetidas ao aplicativo, o usuário receberá um convite para adicionar um ícone à tela inicial e o aplicativo pode ser usado exatamente como um aplicativo “nativo” (mas sem restrições impostas pelos armazenamentos de aplicativos);
- suporte para otimização de mecanismo de pesquisa (gerenciamento de tags de cabeçalho de página) para mecanismos de pesquisa que suportam indexação de conteúdo JavaScript;
- Carregamento rápido de fontes da Web, que elimina o atraso de exibição da página associado ao atraso de carregamento de fontes;
- otimização de imagem através do carregador de imagens do Webpack.
A documentação
A montagem está bem documentada e, por exemplo, até contém uma seção para solucionar possíveis problemas .
Atualizações, Bugs
O projeto é atualizado regularmente, respondendo prontamente às alterações em seus módulos constituintes (última atualização em 26/06/2018), resolvendo problemas ativamente: por exemplo, em 08/08/2018, 1367 foram resolvidos e 9 problemas estão em processo de solução.
E daí?
Portanto, a montagem fornece um excelente exemplo da configuração completa do projeto React, cria condições para o programador acelerar a gravação e a depuração de código, oferece exemplos da implementação das melhores práticas usadas no desenvolvimento de aplicativos altamente escaláveis e produtivos.
E finalmente - uma mensagem do autor da assembléia Maximilian Stoiber e sua equipe:
“Se você precisa de uma base sólida e testada em batalha para construir seu próximo superalimento, e tem alguma experiência com o React, isso é perfeito para você!”