No back-end da conta pública do front-end do Daquan WeChat, recebi muitos comentários como o seguinte
-
Como posso aprender e melhorar o nível de desenvolvimento de front-end?
-
Quais pontos de habilidade estão envolvidos no desenvolvimento de front-end?
-
Você pode recomendar livros clássicos de tecnologia de desenvolvimento de front-end?
- ……
Se você tiver confusões semelhantes, esta pilha de habilidades de desenvolvimento de front-end da web é para você. Seu objetivo é fazer um guia de referência para começar e avançar no desenvolvimento front-end. No momento, a parte de visão geral foi lançada e uma lista de habilidades de desenvolvimento de front-end e vários materiais de leitura estendidos serão adicionados no futuro. Se você tiver algum comentário sobre este guia de referência, informe-nos nos comentários. Obrigado!
O seguinte é o texto
Este artigo não apenas lista as pilhas de tecnologia envolvidas no desenvolvimento front-end, mas também explora os "segredos" por trás dessas pilhas de tecnologia, adequadas para iniciantes e leitores que desejam entender esses "segredos". Se você deseja apenas saber a pilha de tecnologia de desenvolvimento de front-end, continue prestando atenção à pilha de habilidades de front-end https://github.com/jobbole/web-skill-set
Abertura:
工欲善其事，必先利其器。
出自：《论语·卫灵公》
Prefácio:
Como a sintaxe do JavaScript é muito simples, é fácil começar.Basicamente, você pode desenvolver um projeto em algumas semanas, mas isso é tudo do JavaScript? Obviamente não! Muitos programadores que são novos no desenvolvimento de JavaScript continuarão mais ou menos a aprender outras pilhas de tecnologia, como: grunt / gulp, npm, requre.js / seajs e outras tecnologias auxiliares; protótipo de aprendizagem / proto e outras tecnologias mais obscuras Conhecimento de gramática; padrões de design mestre como MVC / MVP / MVVM; frameworks como Backbone.js / Vue.js / React / AngularJS; bibliotecas como jQuery / Protorype / lodash.
dúvida:
A maioria dos iniciantes tem esta ideia: eu posso escrever programas em JavaScript agora, e ele está online normalmente e funciona bem. Por que eu deveria gastar mais tempo aprendendo essas pilhas de tecnologia?
responda:
A pilha de tecnologia mencionada acima é para compensar as deficiências do JavaScript ao desenvolver grandes projetos.
dúvida:
Como a linguagem mais importante no campo de desenvolvimento front-end, o JavaScript não pode ser competente para o desenvolvimento de projetos de grande escala hoje? Se quisermos encontrar essa resposta, precisamos compreender novamente o passado e o presente do JavaScript.
Vida passada:
JavaScript foi usado (em forma de script) para compensar as deficiências do desenvolvimento da web nos primeiros dias da criação. Naquela época, o JavaScript existia como uma função auxiliar das linguagens de desenvolvimento, como ASP / JSP, e o cenário frequentemente usado (um deles) era a "validação de formulário". Embora o criador do JavaScript, Brendan Eich, já tenha "conhecido" o futuro, ele não pode impedir o fato de que o JavaScript levou apenas 10 dias para ser criado. (Primeira edição) Naquela época, não havia uma posição especializada em desenvolvimento de JavaScript. Os pioneiros do desenvolvimento de front-end colocaram mais energia nas questões de compatibilidade após as "Guerras dos Navegadores".
desenvolvimento de:
Outro impacto após a guerra dos navegadores é promover o JavaScript para se tornar um padrão internacional, a saber: ECMAScript (European Computer Manufacturers Association), que é usado para descrever a estrutura gramatical do JavaScript e promover o seu desenvolvimento. O primeiro é apenas a realização do último. (Observação: outro esquema de implementação ECMAScript é o ActionScript 3.0)
essa vida:
Com o surgimento de navegadores modernos como o Chrome, o analisador JavaScript (V8) por trás dele melhorou muito a velocidade / eficiência de execução do JavaScript. (Com base no V8, outro grande deus, Ryan Dahl, inventou o Node.js e desenvolveu uma linguagem que originalmente só rodava no lado do navegador para desenvolvimento de back-end.) O nascimento de jQuery permitiu que os pioneiros do desenvolvimento de front-end deixassem o "navegador O atoleiro dos problemas de compatibilidade ", tenho mais energia para pensar no futuro do JavaScript. O aumento na largura de banda da rede e o surgimento da tecnologia Ajax permitiram a atualização assíncrona de páginas da web, o que acelerou muito a exploração da arquitetura tradicional B / S para a arquitetura C / S. O sucesso do Google Gmail promoveu ainda mais essa tecnologia para se tornar um grande projeto possibilidade. Eventualmente, o SPA (Single Page Application) apareceu, e o uso de JavaScript para desenvolver grandes projetos se tornou uma tendência e um padrão.
Fraquezas:
Como o ECMAScript promove o desenvolvimento de JavaScript, embora o JavaScript seja um produto do século passado, não é difícil desenvolver um pequeno projeto de front-end usando-o. No entanto, um projeto de SPA em grande escala frequentemente tem n bibliotecas de referência externa, dezenas (ou até mais) js / html / css / pictures e outros recursos; participação de várias pessoas / manutenção de longo prazo, milhares de linhas de código especialidade. Obviamente, essas são situações que o JavaScript não considerou no início.
Recursos de projetos front-end:
Conforme descrito acima, a pilha de tecnologia compensa as deficiências do JavaScript no desenvolvimento de projetos de grande escala, portanto, para analisar as características da pilha de tecnologia com mais clareza, comece com o problema:
一个大型的 JavaScript 项目通常需要解决哪些问题？
-
Gestão de pacotes de referência externa;
-
Atualizações de projeto, iterações e problemas de refatoração causados por muito código;
-
Muitas pessoas participam e é difícil distinguir responsabilidades de desenvolvimento;
-
Embora a largura de banda da rede tenha sido muito melhorada, a velocidade de carregamento da página ainda é um problema;
- Recursos estáticos excessivos (html / js / css / recursos de imagem, etc.) levam ao aumento da carga de trabalho repetitiva ao ficar online;
Gestão de pacotes de referência externa:
JavaScript não possui inerentemente funções de gerenciamento de pacotes em outras linguagens, mas isso não impediu a exploração de nossos grandes pioneiros no desenvolvimento de front-end. Pilhas de tecnologia como npm e bower resolveram o problema de gerenciamento de pacotes para nós.
Problemas de atualização, iteração e refatoração do projeto causados por muito código:
Como há muito código, é necessário usar métodos de programação orientados a objetos, como encapsulamento, herança e outras linguagens de programação modernas. Embora o JavaScript não tenha sido projetado para resolver esses problemas nos primeiros dias de sua criação, Brendan Eich obviamente previu o futuro, ou seja, a linguagem JavaScript original incluía ideias OO. Em outras palavras, JavaScript é uma linguagem de desenvolvimento baseada em objetos.
Embora ambos sejam orientados a objetos, JavaScript não é o mesmo que orientado a objetos tradicional. Ele usa um método de cadeia de herança mais avançado, mas obscuro. É por isso que precisamos entender a pilha de protótipo / prototecnologia .
Muitas pessoas participam, e as responsabilidades de desenvolvimento são difíceis de distinguir:
Devido ao surgimento de projetos de SPA em grande escala, a página não apenas carrega o comportamento do usuário, mas também traz o desenvolvimento lógico conduzido pelo back-end para o front-end. Originalmente, "M" em MVC era "mais pesado" do que nunca, de modo que na camada "M", uma nova teoria da estrutura foi formada. Portanto, compreender e dominar os padrões de design, como MVC / MVP / MVVM, tornou-se um meio necessário e a estrutura de front-end tornou-se popular. Como outras linguagens, a escolha de frameworks front-end prontos para uso naturalmente se tornou uma tendência. As "ideias de design" desses frameworks modernos incluem novos conceitos para o desenvolvimento front-end, como: React operacional DOM virtual (Virtual DOM); simplesmente praticando a teoria MVC Backbone.js; estilo MVM AngularJS, etc. Aprender e dominar a estrutura de front-end pode distinguir melhor as responsabilidades, e a API unificada da estrutura percebe a possibilidade de desenvolvimento / manutenção de longo prazo por várias pessoas.
Embora a largura de banda da rede tenha melhorado muito, a velocidade de carregamento da página ainda é um problema:
Como o SPA é um aplicativo de página única, quase todas as funções são incluídas quando a página é carregada, mas os usuários geralmente usam apenas parte delas, portanto, a limitação da velocidade da rede, o desperdício de largura de banda e a espera dos usuários são outro problema. "Desenvolvimento modular" é uma solução mágica para resolver esses problemas, e as teorias da AMD / CMD naturalmente se tornaram o conhecimento necessário para desenvolvedores front-end, e requre.js / seajs é a implementação específica dessas teorias. Devido às características do Http (dispersos, pequenos recursos estáticos são mais lentos para carregar), a fusão / compressão é outra solução e surge um novo problema, nomeadamente o quarto problema.
Recursos estáticos excessivos (html / js / css / pictures e outros recursos) levam a um aumento da carga de trabalho repetitiva ao ficar online:
Quando existem poucos desses recursos estáticos, a mesclagem / compressão manual não é um problema, pelo contrário, quando esses recursos estão aumentando exponencialmente, a solução manual mostra que não é um bom caminho. A introdução de soluções de automação é imperativa e os profissionais: grunt / gulp / webpack precisam ser dominados.
Pensando:
A maioria dos itens acima são pilhas de tecnologia criadas por "organizações não oficiais / comunidades de desenvolvedores". O que a organização oficial ECMAScript que promove o desenvolvimento de JavaScript está fazendo? O atual "mais em" JavaScript é realmente um produto desatualizado?
A resposta, obviamente, está errada. ECMAScript já anunciou sua sexta versão: ECMAScript 6 (lançado oficialmente em junho de 2015)
ECMAScript 6:
Seu recurso mais importante (um dos) é incluir: Soluções de classe (Native OOP) e módulo (Native Modular).
Em conclusão:
O desenvolvimento de JavaScript pode ser alcançado sem o domínio dessas tecnologias, mas o domínio dessas pilhas de tecnologia pode nos separar dos assuntos "pesados / complicados" e mais "foco na lógica de negócios".
O domínio das tecnologias acima pode nos permitir uma melhor integração no desenvolvimento de front-end moderno.
Conclusão:
Se você vir aqui, parabéns e seja bem-vindo ao novo mundo! ! !
Ovo de Páscoa 1:
Os pontos de conhecimento listados acima são apenas parte da pilha de tecnologia front-end, além de: depuração / teste, otimização de desempenho, métodos de pré-compilação CSS, regras de codificação, SEO, desenvolvimento da Web móvel, etc.
Ovo de Páscoa 2:
Tudo ficará livre de preocupações depois de dominar essas tecnologias? Claro que não. Com o desenvolvimento do desenvolvimento front-end, um dia essas tecnologias ainda não serão capazes de satisfazer o desenvolvimento. Portanto, é necessário entender a lógica teórica por trás dessas pilhas de tecnologia.
Ovo de Páscoa 3:
-
Como escolher uma pilha de tecnologia semelhante?
-
Você precisa dessas pilhas de tecnologia para grandes projetos?
-
Por que você ainda acha que o desenvolvimento é lento depois de usar o framework?
- Depois de usar xxx, realmente não resolveu meu problema?
Quer entendê-los? , Siga a pilha de habilidades de front-end https://github.com/jobbole/web-skill-set
referências:
-
ECMAScript é um orientado a objetos
-
Descrição da linguagem ECMAScript 6
-
Tabela de compatibilidade do navegador ECMAScript 6
-
Problemas de compatibilidade de navegador e guerras de navegador
- Analisador Chrome V8