Desenvolvimento Front-end Sem Estrutura

De Jideon F Marques

Explore um método alternativo de desenvolvimento de aplicativos front-end sem usar estruturas ou bibliotecas de terceiros. Este livro fornece as habilidades necessárias e a liberdade para considerar uma abordagem “sem estrutura” ao escolher uma tecnologia para criar um novo projeto. Você trabalhará nas questões mais importantes de maneira clara e sensata, usando métodos e ferramentas práticas para compreender os requisitos não funcionais. Este livro responde perguntas sobre tópicos importantes como gerenciamento de estado, criação de um sistema de roteamento, criação de um cliente REST usando fetch e revela as compensações e riscos associados à escolha da estrutura ou ferramenta errada para o seu projeto, além de fornecer recursos sustentáveis, alternativas funcionais. O Desenvolvimento Front-End Sem Estrutura divide o conceito de dívida técnica e as maneiras pelas quais uma estrutura pode impactar a vida útil de um projeto. Além de obter um guia abrangente e claro sobre codificação eficaz do zero, sem estruturas, você também aprenderá alguns princípios de tomada de decisões técnicas. O QUE VOCÊ VAI APRENDER: Revise como funciona a manipulação do DOM Gerencie o estado de um aplicativo front-end com diferentes padrões Migre com segurança aplicativos existentes para uma nova estrutura ou para código sem estrutura Use ferramentas de tomada de decisão, como Framework Compass Chart e Architectural Clash Veja como a escolha dos frameworks pode afetar a ‘saúde’ e a vida útil de uma base de código PARA QUEM É ESTE LIVRO: Desenvolvedores de JavaScript; gerentes técnicos responsáveis ​​por ajudar as equipes a escolher pilhas de tecnologia para novos projetos; consultores que pretendem refatorar bases de código front-end JavaScript existentes

• Idioma: Português
• Editora: Clube de Autores
• Data de lançamento: 27 de nov. de 2023

Pré-visualização do livro

Desenvolvimento front-end sem estrutura

Desenvolvimento front-end sem estrutura

você controla suas dependências ou elas estão controlando você?

Jideon Marques

Copyright © 2023 Jideon Marques

Este trabalho está sujeito a direitos autorais. Todos os direitos são único e exclusivamente licenciados pela Editora, quer se trate da totalidade ou de parte do material, especificamente os direitos de tradução, reimpressão, reutilização de ilustrações, recitação, difusão, reprodução em microfilmes ou de qualquer outra forma física, e transmissão ou armazenamento e recuperação de informações, adaptação eletrônica, software de computador ou por metodologia semelhante ou diferente agora conhecida ou desenvolvida no futuro.

O uso de nomes descritivos gerais, nomes registrados, marcas registradas, marcas de serviço, etc. nesta publicação não implica, mesmo na ausência de uma declaração específica, que tais nomes estejam isentos das leis e regulamentos de proteção relevantes e, portanto, gratuitos para uso geral. usar.

A editora, os autores e os editores podem assumir com segurança que os conselhos e informações contidos neste livro são considerados verdadeiros e precisos na data de publicação. Nem o editor, nem os autores ou editores oferecem garantia, expressa ou implícita, com relação ao material aqui contido ou por quaisquer erros ou omissões que possam ter sido cometidos. A editora permanece neutra em relação a

reivindicações jurisdicionais em mapas publicados e afiliações institucionais.

Publicado de forma independente

Este conteúdo é fornecido com o único propósito de fornecer informações relevantes sobre um tópico específico para o qual todos os esforços razoáveis foram feitos para garantir que seja preciso e razoável. No entanto, ao adquirir este conteúdo, você concorda com o fato de que o autor, assim como o editor, não são de forma alguma especialistas nos tópicos aqui contidos, independentemente de quaisquer

reivindicações como tal que possam ser feitas nele. Como tal, todas as sugestões ou recomendações feitas aqui são feitas exclusivamente para fins de entretenimento. É

recomendável que você sempre consulte um profissional antes de realizar qualquer um dos conselhos ou técnicas discutidos aqui.

A reprodução, transmissão e duplicação de qualquer conteúdo aqui encontrado, incluindo qualquer informação específica ou extensa, será feita como um ato ilegal, independentemente da forma final que a informação assuma. Isso inclui versões copiadas da obra física, digital e de áudio, a menos que o consentimento expresso do Editor seja fornecido com antecedência. Quaisquer direitos adicionais reservados.

Introdução

Este livro trata de dois tópicos principais. A primeira é trabalhar de forma eficaz sem estruturas; a segunda é escolher a estrutura certa para o projeto certo. criamos o Movimento Frameworkless1para explorar melhor esses tópicos.

Este movimento visa conscientizar sobre esses temas, reunindo as pessoas em uma comunidade. Nossa principal preocupação é ajudar as pessoas a entenderem que trabalhar sem framework é uma possibilidade real hoje em dia. Este livro faz parte das atividades do nosso grupo para ajudar as pessoas a compreender a importância da tomada de decisões técnicas.

Qualquer código-fonte ou outro material suplementar referenciado pelo autor neste livro está disponível para leitores no GitHub (https://github.com/Apress).

1. A definição de estrutura

Você não precisa de uma estrutura. Você precisa de uma pintura, não de uma moldura.

—Klaus Kinski

Se você está lendo este livro, provavelmente está interessado em aprender como desenvolver aplicativos complexos sem depender — ou sem depender demais — de estruturas front-end.

Não seria inteligente começar a explorar soluções sem framework sem primeiro explorar o significado de framework. Considere a primeira definição de estrutura do Cambridge Dictionary:2

Uma estrutura de suporte em torno da qual algo pode ser construído.

Esta primeira e simples definição é consistente com a ideia geral de uma estrutura de software. Pense em Angular:3ele fornece, pronta para uso, uma estrutura que

suporta sua aplicação e uma série de elementos, como Serviços, Componentes e Pipe, que podem ser usados para construir suas aplicações. No entanto, esta definição simplista não é a única possibilidade. Vamos analisar a definição de framework sob outros pontos de vista.

1 http://frameworklessmovement.org

2 https://dictionary.cambridge.org/dictionary/english/framework

3 https://angular.io/

Frameworks versus bibliotecas

Pode parecer contra-intuitivo, mas uma maneira de definir facilmente frameworks é destacar suas diferenças em relação a outra parte importante de cada base de código: as bibliotecas. Sem pensar demais, é seguro dizer que Angular é um Framework enquanto lodash é uma biblioteca. Você pode perceber instantaneamente a diferença entre as duas ferramentas por causa desta outra definição4da estrutura:

Uma estrutura chama seu código, seu código chama uma biblioteca.

Um framework poderia usar internamente uma ou mais bibliotecas, mas esse fato geralmente fica oculto do desenvolvedor, que vê o framework como uma unidade única, ou um monte de módulos se você escolher um framework modular. O

relacionamento entre código de aplicação, estruturas e bibliotecas pode ser

condensado, conforme mostrado na Figura1-1.

Um modelo ilustra os seguintes relacionamentos: a estrutura chama o código do aplicativo e o código do aplicativo chama a biblioteca. A estrutura pode conter a biblioteca.

Figura 1-1

Relacionamento entre frameworks, bibliotecas e código de aplicação

Comparando Frameworks com Bibliotecas

Esta seção fornece vários trechos de código que ilustram a diferença entre estruturas e bibliotecas. Esta comparação usa Angular e date-fns.5

Listagens1-1e1-2são exemplos básicos de componentes e serviços em Angular.

importar {Injetável} de '@angular/core'

importar {HttpClient} de '@angular/common/http'

4Leio essa definição frequentemente em livros ou online, mas não consigo identificar a fonte original, se houver.

5 https://date-fns.org/

importar {Observável} de 'rxjs'

importar {Pedido} de './model/order'

URL const = 'http://example.api.com/'

@Injetável({

fornecidoIn: 'root'

})

classe de exportação Pedidos {

construtor (http privado: HttpClient) {}

lista(): Observable {

retorne isto.http.get(URL)

}

}

Listagem 1-1

Exemplo de serviço angular

importar { Componente, OnInit } de '@angular/core'

importar {Pedidos} de '. /pedidos'

importar {Pedido} de '. /model/pedido'

@Componente({

seletor: 'lista de pedidos de aplicativos',

templateUrl: './order-list.component.html',

styleUrls: ['./order-list.component.css']

})

classe de exportação OrderListComponent implementa OnInit {

lista: Pedido[] = []

construtor(pedidos privados: Pedidos) { }

ngOnInit(): void {

this.orders.list()

.subscribe(_orders => this.list = _orders)

}

}

Listagem 1-2

Exemplo de componente angular

Listagem1-3é um exemplo de uso de date-fns para formatar uma data.

importar {formato} de 'date-fns'

const DATE_FORMAT = 'DD/MM/AAAA'

exportar const formatoData = data => {

formato de retorno (data, DATE_FORMAT)

}

Listagem 1-3

Exemplo de data-fns

A definição anterior da diferença entre um framework e uma biblioteca é bastante marcante quando você analisa Listagens1-1para1-3. Angular é uma estrutura, e Orders e OrderListComponent deixarão de funcionar em uma base de código sem

Angular. Angular está chamando o código do aplicativo. Se você remover a anotação

@Injectable, o serviço se tornará invisível para o código Angular e a classe Orders dependerá do utilitário HttpClient para cumprir sua tarefa.

Por outro lado, date-fns não opina sobre como estruturar o código do aplicativo; você pode simplesmente importá-lo e, se respeitar a API pública, estará pronto. Mesa1-

1mostra uma lista de bibliotecas agrupadas por sua finalidade.

Tabela 1-1

Algumas bibliotecas JavaScript

Propósito

Bibliotecas

Serviços de utilidade pública Lodash, Ramda

Manipulação de data

data-fns, Day.js

Visualização de dados

D3.js, gráficos altos, chart.js

Animação

tween.js, anime.js

Estruturas e Decisões

O Dicionário Cambridge fornece outra definição de estrutura que é interessante analisar:

Um sistema de regras, ideias ou crenças usado para planejar ou decidir algo.

Embora um sistema de regras seja fácil de aplicar a uma estrutura de software –

toda API é um sistema de regras – a parte interessante dessa definição é que um sistema de regras (também conhecido como estrutura) poderia ser usado para decidir algo. As estruturas de software podem ser usadas para decidir algo? A resposta curta é sim, mas deixe-me elaborar uma resposta mais longa. Quando as equipes optam por trabalhar com uma estrutura, elas estão deliberadamente decidindo não decidir ou, em outros termos, deixando a estrutura tomar algumas decisões por elas. Delegar algumas decisões a outra equipe não é um problema em si, mas pode se tornar um problema porque essas decisões ficam ocultas à vista de todos. Equipes atentas devem analisar essas decisões ocultas que estão delegando e compreender profundamente suas consequências.

Decisões da Angular

Para explicar melhor como uma estrutura pode tomar decisões no lugar de uma

equipe de desenvolvimento, esta seção explica as decisões que uma equipe que usa Angular delega à estrutura.

Linguagem

Usar Angular significa, antes de tudo, usar TypeScript. No passado, você poderia trabalhar com JavaScript simples6em um aplicativo Angular, mas esse recurso foi removido. TypeScript é um superconjunto digitado de JavaScript que é compilado em JavaScript simples. Além da verificação de tipo, também permite usar alguns recursos que não estão presentes no idioma original, como anotações.

O TypeScript pode ser útil se você e sua equipe estão acostumados a trabalhar com linguagens fortemente tipadas. Mas isso também significa que se você usar Angular, todo o seu código será escrito em uma linguagem que requer um transpilador.

Observáveis

Angular é fortemente projetado em torno de RxJS, uma biblioteca para programação reativa usando observáveis; na verdade, no exemplo anterior, para obter os dados de PeopleListService, você teria que usar o método subscribe do objeto Observable. Esta é uma abordagem muito diferente do resto dos frameworks front-end, onde as

6Você pode ver a alteração significativa neste

commithttps://github.com/angular/angular/commit/cac130eff9b9cb608f2308ae40c

42c9cd1850c4d

solicitações HTTP são projetadas como promessas. As promessas fornecem uma maneira padrão de representar a eventual conclusão (ou falha) de uma operação assíncrona. RxJS permite transformar facilmente um Observável em uma promessa7e vice versa. Mas se você precisar integrar alguma biblioteca baseada em promessas ao seu projeto Angular, precisará fazer algum trabalho extra. Para completar, este é um exemplo semelhante usando fetch,8uma API de plataforma usada para fazer

solicitações HTTP baseadas em promessas. Ver listagens1-4e1-5.

URL const = 'http://example.api.com/'

classe de exportação Pedidos {

lista assíncrona(): Promise {

resposta const = aguarda busca (URL)

dados const = aguardar resposta.json();

retornar dados;

}

}

Listagem 1-4

Serviço Angular sem Observáveis9

classe de exportação OrderListComponent implementa OnInit {

lista: Pedido[] = []

construtor(pedidos privados: Pedidos) { }

ngOnInit(): void {

this.orders.list()

.then(_orders => this.list = _orders)

}

7toPromise foi descontinuado em favor de

"lastValueFrom"https://inprofundidade.dev/posts/1287/rxjs-heads-up-topromise-is-

being-deprecated

8 https://developer.mozilla.org/en-US/docs/Web/API/fetch

9Nas listagens1-4e1-5, removi os decoradores do Angular por uma questão de brevidade.

}

Listagem 1-5

Componente Angular sem Observáveis

Observe que essas duas restrições não são ruins por si só; TypeScript e RxJs são ferramentas fantásticas. Mas as consequências do uso dessas ferramentas (forçadas pelo Angular) devem ficar claras para toda a equipe.

O caminho da estrutura

Nestas poucas páginas não mencionei o elefante na sala, a ferramenta mais famosa do ecossistema front-end: React. Esta seção tem como objetivo explicar se React é um framework ou uma biblioteca. A definição de React do site oficial10é o seguinte: Uma biblioteca JavaScript para construir interfaces de usuário

Parece bastante fácil então - React é uma biblioteca. Mas a realidade é muito mais complexa do que isso. A principal restrição do React é o uso do paradigma declarativo.

Você não manipula o DOM, mas modifica o estado de um componente e, em seguida, o React modifica o DOM para você. Essa forma de programação também está presente na maioria das bibliotecas do ecossistema React. O objetivo do snippet na listagem1-

6é ocultar/mostrar um quadrado com uma animação. Cada vez que o usuário pressiona o botão Toggle, usando framer-motion,11ativa uma biblioteca de animação para React. O resultado é visível na Figura1-2.

importar {useCallback, useState} de 'react';

importar {movimento} de framer-motion

const MotionExemplo = () => {

const [isVisible, setIsVisible] = useState(false);

const toggle = useCallback(() => setIsVisible(!isVisible), [isVisible]);

const opacidade = isVisible? 1: 0;

retornar (

className='caixa'

10 https://reactjs.org/

11 www.framer.com/docs/introduction/

animar={{ opacidade }}

transição={{

facilidade: 'linear',

duração: 0,5

}}

/>

Alternar

)

}

exportar MotionExample padrão

Listagem 1-6

Exemplo de animação framer-motion

Uma captura de tela da página do React. A página