Web Notes
1.0.0
Leia online >>
Casos de código · Materiais de referência
O desenvolvimento da Web é fácil de começar, mas difícil de conhecer. É dividido em palcos como o primeiro olhar na porta, entrando na sala e integrando todo o processo. Se você está lendo a série de artigos do autor pela primeira vez, é recomendável seguir o caminho técnico de um certo urso para um entendimento abrangente. Nesta série, o autor está comprometido em explorar como melhorar efetivamente a eficiência de P&D da equipe e a entrega completa em tempo hábil e confiável ao longo do ciclo de vida da iteração do produto; Ao mesmo tempo, pode controlar a complexidade geral do sistema e otimizar continuamente o desempenho e a experiência do sistema.
Olhando para as brilhantes mudanças na tecnologia e ecologia da Web nas últimas décadas, experimentamos mudanças emocionantes e geralmente nos perdemos na confusão de escolha. Com a inovação das versões do navegador e a melhoria do desempenho do hardware, o desenvolvimento do front-end da Web entrou em uma era rápida e em constante mudança. Inúmeros estruturas de desenvolvimento de front-end e sistemas técnicos estão competindo pela beleza, o que deixou os desenvolvedores confusos e até perdidos. Especially with the emergence of modern web front-end frameworks (Angular, React, Vue.js), the improvement of language features such as JavaScript, CSS, HTML, etc., and the proposed theoretical concepts such as engineering, cross-platform, micro front-end, large front-end, and BFF, the technology stack and community for web front-end development are also constantly enriched and improved. status. Quanto aos chamados engenheiros modernos de front-end, eles geralmente precisam usar muito conhecimento profissional para resolver problemas de engenharia, incluindo como modularizar o projeto, como projetar interações entre componentes, como melhorar a reutilização, como melhorar a eficiência da embalagem, otimizar o desempenho da renderização do navegador, etc.; Não mais como antes, eles precisam apenas de rotina HTML/CSS/JS para desenvolver páginas estáticas.
No geral, qualquer ecossistema de programação passará por três estágios, antes de tudo, o período original. Como é necessário expandir o idioma e as APIs básicas, esse estágio dará à luz um grande número de ferramentas auxiliares. No segundo estágio, à medida que as coisas que são feitas se tornam mais complexas, são necessárias mais organizações e um grande número de padrões de design e padrões arquitetônicos serão introduzidos. Este estágio dará à luz um grande número de estruturas. Na terceira etapa, com a complexidade adicional da demanda e a expansão da equipe, entrou no estágio de engenharia e vários MVC hierárquicos, MVP, MVVM, etc., desenvolvimento visual, testes automatizados e sistemas de colaboração de equipe.
Curiosamente, quando estamos em diferentes momentos, a divisão desses três estágios também é inconsistente. De acordo com o entendimento atual do autor, ele é dividido em três estágios diferentes: renderização de modelos, separação front-end e aplicação de uma página única, engenharia e micro front-end, grande front-end e sem servidor.
Obviamente, todo palco pequeno será acompanhado pelo surgimento de novas estruturas e novas ferramentas:
O desenvolvimento do front-end da Web pode ser rastreado até a menção pública de Tim Berners-Lee à descrição do HTML em 1991 e, em seguida, o W3C lançou o padrão HTML4 em 1999. Esse estágio era principalmente a arquitetura B/s e não havia o chamado conceito de desenvolvimento front-end. Nesse momento, eram principalmente páginas estáticas baseadas na renderização de modelos. O principal é escrever alguns modelos dinâmicos através do JSP, PHP e outras tecnologias e analisar os modelos em arquivos HTML através do servidor da Web. O navegador é responsável apenas por renderizar esses arquivos HTML. Não há divisão de trabalho entre as extremidades da frente e de trás nesta fase, e geralmente o engenheiro de back -end escreve a página do front -end.
Nos anos seguintes, com a introdução de padrões arquitetônicos como a tecnologia Ajax e o REST, os conceitos de separação de front-end e rico cliente estão se tornando cada vez mais reconhecidos. Precisamos expandir o idioma e as APIs básicas. Nesta fase, surgiu uma série de ferramentas auxiliares de front-end representadas pelo JQuery. Com base no Ajax, as extremidades dianteiras e traseiras também abriram a estrada da separação, e a arquitetura de separação frontal e traseira se tornou gradualmente popular. O front-end é responsável pela interface e interação, e o back-end é responsável pelo processamento da lógica de negócios. As extremidades frontal e traseira interagem através da interface. Não precisamos mais escrever HTML difícil de manutenção em cada idioma de back-end. A complexidade das páginas da web também mudou do servidor web de back-end para o JavaScript do lado do navegador.
Desde 2009, o desenvolvimento de smartphones se tornou popular e a onda de terminais móveis tem sido imparável. O conceito de design de aplicação de uma página de spa também se tornou popular. A modularidade do front-end relacionada, componente, desenvolvimento responsivo, desenvolvimento híbrido e outras tecnologias são urgentes. Especialmente o surgimento do Node.js em 2009, bem como as especificações do CommonJS que acompanham e o mecanismo de gerenciamento de pacotes NPM, deu origem a uma série de excelentes estruturas como Angular 1 e Ionic, além de padrões de módulos como AMD, CMD, UMD, requerjs, marítimos, e ferramentas como grama e giro. Os engenheiros de front-end também se tornaram um campo de desenvolvimento especial, com um sistema técnico e um modelo de arquitetura, independentemente do back-end.
No passado, precisávamos apenas de HTML e JS simples. Agora, tivemos que usar o gerenciador de pacotes para baixar automaticamente pacotes de terceiros, usar o Module Manager para criar um único arquivo de script, usar o compilador de tradução para aplicar novas funções JavaScript e usar o corredor de tarefas para executar automaticamente cada etapa de construção.
Nos últimos dois anos, com o aumento da complexidade dos aplicativos da Web, da expansão do pessoal da equipe e da demanda do usuário por facilidade de interação e otimização de desempenho, precisamos de uma estrutura de desenvolvimento mais excelente e flexível para nos ajudar a completar melhor o desenvolvimento de front-end. Este estágio surgiu muitas estruturas com preocupações relativamente concentradas e melhores conceitos de design. Por exemplo, estruturas de componentes como React, Vue.js e Angular 2 nos permitem substituir a programação imperativa pelas operações DOM como o núcleo pela programação declarativa, que acelera o desenvolvimento de componentes e aprimora a reutilização e a composição dos componentes. O Redux, que segue a programação funcional, e o MOBX, que empresta o conceito de programação responsiva, são muito boas estruturas auxiliares de gerenciamento de estado, ajudando os desenvolvedores a separar a lógica de negócios da renderização e dividir a estrutura do projeto de maneira mais razoável, a implementar melhor o princípio da responsabilidade única e a melhorar a manutenção do código. Nas ferramentas de construção de projetos, o gerenciamento de operações de tarefas representado pelas ferramentas de embalagem Grunt e Gulp e Project representadas por Webpack, Rollup e JSPM estão liderando o caminho, ajudando os desenvolvedores a construir melhor os processos de construção de front-end e a executar pré-processamento, carregamento assíncrono, poli-preenchimento, compressão e outras operações de maneira automatizada.
A maturidade da cadeia de ferramentas também provocou demanda de engenharia, com a tecnologia líder de negócios e os negócios de condução de tecnologia. A engenharia front-end é padronizar e padronizar o processo de desenvolvimento, tecnologia, ferramentas, experiência, etc., com base em características comerciais específicas. Seu objetivo é permitir o desenvolvimento do front-end para formar seu próprio sistema, maximizar a eficiência do desenvolvimento dos engenheiros de front-end e reduzir os custos de coordenação e comunicação causados pela seleção de tecnologia, comissionamento conjunto do front-end e back-end etc.
A própria complexidade lógica do aplicativo, carga de engenharia e melhorias de complexidade de combinação também trazem certos desafios para o desempenho do front-end. Por exemplo, estruturas de componentes como o React terão tempo de tela branca quando a inicialização da página, o que não é amigável com o SEO; O front-end começou a tentar resolver esse problema através da renderização do servidor e substituir os modelos de linguagens de servidores, como JSP e PHP, com base em aplicativos isomórficos implementados por reação, vue etc. ou devolvê-los ao navegador na forma de um documento HTML completo.
Com foco na pilha completa, após anos de desenvolvimento, o Node.js possui totalmente a capacidade de apoiar aplicativos em nível corporativo e possui um grande número de práticas em muitas empresas nacionais e estrangeiras, como Lowe, Netflix e Alibaba. Além disso, o Node.js tem uma afinidade de linguagem natural, facilitando os desenvolvedores a assumir as responsabilidades da pilha completa. Com o aumento de conceitos como a arquitetura de microsserviços e a nuvem nativa e sem servidor, as interfaces de back-end se tornam atômicas e as interfaces de microsserviço não estão mais voltadas diretamente na página e as chamadas front-end se tornaram complicadas. Portanto, surgiu o conceito de BFF (back -end para front -end) representado pelo GraphQL. Uma camada de BFF foi adicionada entre o microsserviço e o front-end, e a interface foi agregada e cortada por BFF e depois em saída para o front-end.
Ao resolver os problemas de coordenação e agregação da interface, a BFF também possui a pressão simultânea original no back-end, o que também traz muito desenvolvimento e pressão de operação e manutenção aos engenheiros de front-end. O servidor sem servidor pode aliviar esse problema. Podemos usar funções para implementar agregação e corte de interfaces; A solicitação front-end para a BFF é convertida em um gatilho para os gatilhos do FAAS HTTP. Essa função implementa a lógica de negócios da solicitação, como chamar vários microsserviços para obter dados e retornar os resultados do processamento ao front-end. Dessa forma, a pressão de operação e manutenção mudou do servidor BFF anterior para os serviços da FAAS, e o front-end não precisa mais se preocupar com o servidor. O servidor sem servidor também pode ser aplicado à renderização do lado do servidor, dividindo cada rota anterior em funções e implantando as funções correspondentes no FAAS. Dessa forma, o caminho solicitado pelo usuário corresponde a cada função individual. Dessa forma, as operações de operação e manutenção são transferidas para a plataforma FAAS. Quando o front-end renderiza o lado do servidor, não há necessidade de se preocupar com a operação e a implantação de manutenção do programa do servidor. Além disso, mini programas como WeChat e Alipay também fornecem plataformas de desenvolvimento em nuvem que estão em conformidade com os conceitos sem servidor, capacitando a rápida iteração dos front-ends de negócios.
Para mais informações e guias, consulte Introdução.
Versão chinesa | Versão em inglês
Se você é um desenvolvedor muito experiente e deseja saber sobre engenharia e arquitetura de front-end, é recomendável ler o artigo de front-end evolução.
Se você não tiver uma compreensão completa da sintaxe básica do JavaScript, é recomendável que você navegue primeiro "prática moderna de sintaxe javascript e engenharia" para entender a sintaxe JavaScript básica e as aplicações práticas.
Se você deseja entender o desenvolvimento node.js de pilha completa, pode consultar para notas de nó.
Depois de entender o conhecimento teórico, é recomendável ir ao WX-FE para verificar todos os projetos de código aberto relacionados ao front-end do autor.
Todos os artigos do autor estão sujeitos à Licença Creative Commons Attribution-Non-Commercial-Use-Proiby Explication 4.0 International International. A reimpressão é bem -vinda e os direitos autorais são respeitados. Você também pode acessar a página inicial da NGTE Books para navegar em uma lista de livros para várias categorias, incluindo sistema de conhecimento, linguagem de programação, engenharia de software, modelo e arquitetura, web e grande front-end, prática de desenvolvimento do servidor e arquitetura de engenharia, infraestrutura distribuída, inteligência artificial e aprendizado profundo, operações de produtos e enterrografia e outras:
