O desenvolvimento da Web é divertido ~ mas o Javascript é ... assustador.
Todo o resto no desenvolvimento web é muito simples para você, mas quando você se aprofunda em Javascript, você sentirá "todos estão acordados e você está sozinho", como se não soubesse algumas coisas importantes que todos sabem. O conteúdo de conhecimento básico, e esse conteúdo pode ajudá-lo a entender todo o conhecimento.
O fato é que você perdeu algumas partes importantes da solução do problema.
Além disso, o desenvolvimento front-end realmente entrou em um estado louco.
Não é só você.
Puxou uma cadeira e se sentou. É hora de começar a escrever aplicativos Javascript.
A primeira etapa é configurar um ambiente de desenvolvimento local e executá-lo. Então use o Gulp? Ou Grunt? Espere, ok ... parece haver um script NPM!
WebPACK? Ou Browserify? (Tímido) Require.js? Atualizar para ES6? Ou adicionar suporte Babel ao seu projeto?
BDD ou teste de unidade regular? Qual estrutura de asserção deve ser usada? Executar testes na linha de comando é obviamente ótimo, então o PhantomJS também é uma boa escolha?
Angular ou reagir? Ou Ember? Backbone novamente?
Você leu alguma documentação do React, "Redux é um contêiner de estado previsível para aplicativos Javascript." Legal! Você definitivamente precisa de um deles.
Por que construir aplicativos Javascript é tão louco? ! ?
Deixe-me dizer por que isso é tão louco. Vamos começar com um exemplo, e mais tarde teremos lindas fotos.
Este é o aplicativo "Olá, mundo!" Do React.
// main.js
var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
Mais do que isso.
$ npm install --save react react-dom babelify babel-preset-react
$ browserify -t [ babelify --presets [ react ] ] main.js -o bundle.js
Na verdade, ainda faltam algumas etapas, como instalar o browserify e permitir que ele seja executado na página da web após terminar, porque isso não irá gerar diretamente uma página da web com nenhum conteúdo.
Depois de concluir isso, você finalmente precisa de um arquivo chamado bundle.js, que contém o novo aplicativo React Hello World, que tem 19374 linhas de código. E você só precisa instalar o browserify, babelify e react-dom, eles vão te ajudar a gerar milhares de linhas de código que você não entende, pense bem.
Então, basicamente se parece com isto:
Marc was almost ready to implement his "hello world" React app pic.twitter.com/ptdg4yteF1
— Thomas Fuchs (@thomasfuchs) March 12, 2016Bem, vamos escrever um aplicativo Hello World com código Javascipt simples.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Hello World</title>
</head>
<body>
<div id="container"></div>
<script>
document.body.onload = function(){
var container = document.getElementById("container");
container.innerHTML = '<h1>"Hello, world!"</h1>';
}
</script>
</body>
</html>
É isso aí. Um total de 18 linhas de código. Você pode copiar / colar no arquivo index.html e clicar duas vezes para carregá-lo no navegador. Faça.
Nesse ponto, você certamente dirá: "Espere, o React pode fazer mais coisas do que o gadget que você acabou de escrever, e você não pode escrever um aplicativo Javascript dessa maneira!" (Na maioria dos casos) você está certo Sim, mas você ainda precisa dar um pequeno passo para entender por que tudo está louco.
Abaixo está a foto que prometi.
A maioria dos aplicativos da web Javascript que você desenvolve ficará em algum lugar no meio da curva do sino. Definitivamente, ele estará na parte do meio. Se você começar com uma pilha React completa, terá feito um over-Engineering de seu aplicativo desde o início.
É por isso que tudo está ficando louco. A maioria das ferramentas que você acha que são necessárias para resolver o problema, mas você não encontrou esse problema e nunca o encontrará no futuro.
A mesma imagem:
Porque, por padrão, todos superdimensionam seus aplicativos, mas não percebem isso, tornando o estado de desenvolvimento de Javascript muito complicado.
Como você deve iniciar um aplicativo Javascript? Devo usar ferramentas como React ou Angular? Devo usar um gerenciador de pacotes? Se não, o que deve fazer? O teste é necessário? O Javascript deve ser usado para gerar o logotipo? Todas essas são perguntas que você deve se perguntar, antes de lançar a enorme pilha de tecnologia por padrão.
Quando você inicia um aplicativo Javascript, a chave é escolher um ponto na curva do sino que esteja logo à frente do nível de complexidade que você acha que o aplicativo pode eventualmente atingir.
Não vou mentir, é preciso experiência para verificar tudo isso. Mas aqui está um ponto interessante que permite que você inicie a maioria dos aplicativos Javascript: jQuery mais modelos do lado do cliente e uma ferramenta de construção super simples para conectar e reduzir arquivos de produto (se sua arquitetura de back-end ainda não tiver feito isso) )
Se você souber como construir aplicativos Javascript corretamente, começará a entender como, quando e por que usar frameworks ou npm / requer / webPack ou ES6, quando escrever testes e quando se preocupar em fazer seus testes rodarem localmente, Ao rodar no navegador, todos esses problemas serão resolvidos.
Interessado em preencher essas lacunas com seu conhecimento de desenvolvimento Javascript? Quer evitar se sentir sobrecarregado? Deseja evitar o design excessivo de seu aplicativo Javascript durante o processo de desenvolvimento? Isso é o que vou focar no próximo mês, então fique ligado, haverá mais produtos secos chegando em uma ou duas semanas!