book

Estratégias de JavaScript de pilha completa

by Milecia McGregor

March 2025

Intermediate to advanced

480 pages

13h 45m

Portuguese (Portugal, Brazil)

O'Reilly Media, Inc.

Read now

Unlock full access

A quem se destina este livroO que vais aprenderO que este livro não éComo este livro está organizadoConvenções utilizadas neste livroUtilizar exemplos de códigoAprendizagem em linha da O'ReillyComo contactar-nosAgradecimentos
O projeto que vais construirReunião de lançamento do projetoConsiderações sobre a conceçãoDesign orientado para os dadosDecompor os desenhos em tarefasRefinamento de tarefas a partir de requisitos de caraterísticasDiscutir prazos com as equipas de produto e outras equipasFalar com outras equipas de desenvolvimentoCoordenação com o DevOpsTrabalhar com QAPlanear com apoioConclusão
Porquê o NestJS?Escolher uma abordagem de projetoConfigurando o NestJSTestando o back-end localmenteAtualizando o READMEAdicionar um CHANGELOGArquitecturas de monólitos e de microsserviçosArquitecturas alternativas a considerarSelecionando um padrão de design de API: REST e GraphQLConclusão
Considerações iniciaisDiagramação do esquema de dadosConfigurar o PostgresDecidir que ORM utilizarEscrever migraçõesSemear a base de dadosConclusão
Certificando-se de que o front-end e o back-end estão de acordoCriar um documento para convençõesCriar a API e o primeiro ponto de extremidadeCriar os pontos de extremidade das ordensTrabalhar no serviço de encomendasVerificar a ligação à base de dadosConclusão
Escolher um serviço de terceirosLista de serviços potenciaisIntegrar o StripeEscrever o controladorRedigir o serviçoConclusão
Atualizar a arquitetura de backendUtilizar tarefas CronAlertas e monitorizaçãoRegistoProblemas com a sincronização de dados e a execução de tarefasConsiderações futurasConclusão
Porquê gastar tempo com testes?Como abordar a redação de testesDados de simulaçãoConclusão

AutenticaçãoAutorizaçãoOWASP Top 10Outras práticas dignas de notaConclusão
Mensagens de registo detalhadasConfigurações de ambienteEstratégias para localizar insectosAjudando outros desenvolvedores a depurarLista de verificação de depuraçãoConclusão
MétricasAlertas e monitorizaçãoArmazenamento em cacheEstratégias de cacheTipos de cacheImplementação de cache com RedisConsiderações sobre o produtoConclusão
Tipos de escalonamentoEscala verticalEscala horizontalEscalonamento híbridoDimensionamento de recursosMelhores práticas de dimensionamentoFaz um planoDocumenta o planoExecuta os testesComunica os progressosComeça a mudar o tráfegoConclusão
Utilizações para registos e monitorizaçãoUsa os logs para depuraçãoUtiliza a monitorização para informar as tuas acçõesFerramentas de monitorização e registoManuais de IncidentesFases do manualModelo de resposta a incidentesPostmortems sem culpaConclusão
Decisões de arquitetura de front-endEscolher uma estrutura de front-endOpções de configuração da aplicaçãoComponentes comunsEscolher pacotesTrabalhar com outras equipasConclusão
Configura a aplicação React inicialConfigura os Linters e FormatadoresDefine as configurações de compilaçãoConfigura os estilosPrepara os testesConfigura o CHANGELOG e o READMEExecuta a aplicação localmenteConstrói a primeira funcionalidadeEstrutura do projetoConfigura o encaminhamentoActualiza a raiz da aplicaçãoConclusão
Como funciona a Componente EstadouseStateusaRedutorusaContextoSaber em que nível de aplicação gerir o estadoDiferentes abordagens à gestão do EstadoConfigurar o Gestor de EstadoConclusão
Ferramentas potenciais para a obtenção de dadosManipulação de chamadas de API com Axios e TanStack QueryO ficheiro .envTratamento dos estados de cargaTratamento de estados de erroConfigurar os cabeçalhos dos pedidosQuando verificar a funcionalidade de backendConclusão
AcessibilidadeCriar um formulário acessívelVerificar as tuas implementações de acessibilidadeMais considerações sobre acessibilidadeDesenhos consistentesTemas personalizadosDesign responsivoConclusão
Abordagens de limite de erroComponentes de erroRegisto de errosErros de validação do utilizadorErros da APIConclusão
Vulnerabilidades comunsValidação da lógica empresarialGestão de sessõesAtualização da versão do pacoteValidação de entradaOutros princípiosComo verificar a tua própria aplicaçãoConclusão
Métricas de referênciaFerramentas do farolSitespeed.ioÁreas de melhoriaAnálise do tamanho do pacoteConfigurações de construçãoConfiguração de cacheCarregamento lentoPré-buscaCSS, imagens e tipos de letraConclusão
Determinação de cenários de testeTestes unitáriosBiblioteca de testes Jest e ReactVitestTrabalhador de serviço simuladoTestes E2E com a CypressConclusão
O processo de depuraçãoVer os registosVerificar o códigoUtilizar mensagens console.logUtilizar pontos de interrupçãoUsando testes de unidadeUtilizar o GitUtilizar as ferramentas de desenvolvimento do navegadorO separador ElementosO separador FontesO separador Network+O separador AplicaçãoDepuração em outros ambientesDepuração em locais inesperadosConclusão
Equipas envolvidas em implementaçõesEtapas de ligação do backend e do frontendEtapas do backendEtapas do FrontendPassos de limpezaEtapas de documentação e manutençãoConclusão
Os casos de testeTestes de ponta a ponta com a CypressTestes de ponta a ponta com o dramaturgoTestes de ponta a ponta com o NightwatchComparação entre pacotesConclusão
Implantação de atualizações somente de front-end ou somente de back-endImplementa estratégiasDatas de lançamentoLançamentos de versõesImplantações Blue-GreenCanary implementaEstratégias para fazer rollbacksImplantação de versões mais antigasReverter ou anular PRsImplantação de um HotfixConclusão
Preocupações de front-end e back-endPreocupações com serviços de terceirosDados e segurança na produçãoContentorização da tua aplicaçãoConclusão
Criar o teu próprio pipelineConsiderações sobre a velocidadeGit HooksConfigurações do GitHubConfigurações do CircleCIAmbiente PipelinesFuncionalidade AmbienteAmbiente de desenvolvimentoAmbiente de preparaçãoAmbiente de produçãoVariáveis de ambienteConclusão
Estratégias de ramificaçãoRamificações comuns e fluxo de mesclagemComentários de RPSucursais para funcionalidades mais pequenasRamificações de recursos para implementações maioresEsmagando compromissosRebase e mesclagem de ramificaçõesComo lidar com conflitos de mesclagemDiscute com o desenvolvedor que fez as alteraçõesUsa o git bisect para encontrar os ficheiros afectadosCompara manualmente as alterações de ficheirosConclusão
Discussões sobre a SprintEstimativasCapacidade de desenvolvimentoRequisitos das caraterísticasRevisão de bilhetes da equipa de desenvolvimentoRoteirosDefinir e gerir tarefasMantém a consciência da equipaEscreve e clarifica os bilhetesConsidera as tarefas geraisTem calmaGerir a mudança de contextoMantém a comunicação abertaConclusão
Conhecimentos específicos do domínioAprende com as pessoas que trabalham diretamente no domínioFrequenta cursosTrabalha no domínioDecisões de arquitetura e design de sistemasDesign orientado para o domínioC4 DesignAprende com outras equipasParticipa em chamadas de vendasParticipa em estudos de pesquisa de utilizadoresFala com o MarketingEscuta as chamadas de apoio ao clienteAprende sobre o sector jurídicoConsiderações sobre a documentaçãoDefine o jargãoGuarda apenas as informações relevantesPartilha os teus conhecimentosMostra como o produto afecta a organizaçãoConclusão
Considerações sobre as novas aplicaçõesCompreende o problema que estás a tentar resolverCria o esquema de dadosDecide sobre uma arquiteturaEscolhe o teu fornecedor de CloudConstrói o backendConstrói o FrontendIntegrar o Backend e o FrontendConfigurar o teu pipeline de CI/CDEfectua testes de garantia de qualidadeVerificar a tua aplicação em produçãoConsiderações sobre as aplicações existentesObtém acesso aos serviços de que necessitasColoca uma instância de desenvolvimento em execuçãoVê a aplicação em produçãoVê a aplicação em não produçãoLê o códigoToma notas sobre potenciais refactoresFaz perguntas e documenta as respostasMelhora a qualidade do códigoAdicionar testesAprende o que significam os diferentes alertasA tua carreiraO caminho técnicoO caminho da gestãoRevista profissionalMudança para outras áreasConclusão

Content preview from Estratégias de JavaScript de pilha completa

Capítulo 14. Construindo o aplicativo React

Este trabalho foi traduzido com recurso a IA. Agradecemos o teu feedback e comentários: translation-feedback@oreilly.com

Agora que já fizeste a tua pesquisa e conheces as ferramentas que vais utilizar, está na altura de inicializar o teu projeto de front-end! Vais configurar a aplicação React e todas as ferramentas de que precisas para construir o teu frontend.

Neste momento, já revisaste os designs várias vezes, discutiste com a equipa de Produto e com a tua equipa de desenvolvimento e falaste com a equipa de DevOps sobre a preparação da infraestrutura para o frontend. Tens alguns diagramas e documentos para te orientar a ti e à equipa na construção de todos os componentes. Também tens muitos tickets para dividir entre a equipa. No entanto, quando estás a iniciar um projeto greenfield, vais ser visto como a pessoa que vai inicializar o repositório e criar a estrutura do projeto. Dessa forma, a tua equipa pode começar a trabalhar em diferentes partes da aplicação e todos têm a confiança de que o desenvolvimento pode prosseguir sem problemas.

Neste capítulo, abordar-te-ei:

Configura a aplicação React com alguns dos pacotes
Construir a primeira funcionalidade
Escreve o primeiro teste

Não precisas de ter tudo pronto, apenas o suficiente para a equipa começar a trabalhar. Podes ser encarregado do desenvolvimento de fundo enquanto o resto da equipa trabalha nas funcionalidades. Esta é uma forma de actuares como um multiplicador para ...