Traduzido do 日本語 • Ver original Me tornei funcionária em 1º de fevereiro. Este é meu primeiro blog. Este é meu primeiro emprego. Este é meu primeiro emprego porque sou funcionária a partir de hoje.
Aliás, sou designer. Mas estou virando engenheiro front-end. Mas sou designer.
Sim, vamos parar de fazer preâmbulos sem sentido e ir direto ao ponto. Hoje gostaria de dar uma visão geral das ferramentas de desenvolvimento front-end. Não diga: "Afinal, não sou engenheiro front-end!"
HTML/CSS/JavaScript.
Falando no que desenvolvedores front-end lidam, a percepção básica é HTML/CSS/JavaScript. Quanto a outras ferramentas, desde que você tenha um navegador e um editor, pode desenvolver imediatamente, embora de forma extrema. É fácil, não é? Não está mais ou menos errado. Assim.
Acho que a percepção de quem não está envolvido no desenvolvimento front-end é mais ou menos assim. Não está errada. (2ª vez)
Tentei seguir as melhores práticas.
Agora, o que acontece quando buscamos as melhores práticas para desenvolvimento? Pensei em fazer uma lista de tantas quantas consegui pensar.
Assim
Hã?
**É mentira・・・・・・ é um sonho・・・・・・ isso ・・・・・・ um sonho・・・・・・・・・ **
Mas não é um sonho ・・・・・・ ・・・・・・! É a realidade・・・・・・! Isso é a realidade...!
A demanda por engenheiros front-end continua aumentando. Claro, o salário certamente permanecerá inalterado. O mundo é insensível.
Nem é preciso dizer que cabe ao indivíduo decidir se continua seguindo a tecnologia ou não.
Por que isso está acontecendo?
/)() ◕ ‿‿ ◕ )(\ Eu não entendo por quê.
Fator 1 - Riqueza Web & Mobile
Ajax
Tecnologia de construção de interface usando comunicação assíncrona. Dados podem ser trazidos sem transição de página. Não consigo deixar de ser grato quando penso que o Google Maps pode ser usado graças a isso. Hoje em dia, é normal a sensação de que você pode fazer várias coisas sem transições de página, mas é uma tecnologia que se beneficia disso naturalmente.
Há muitas outras coisas que aumentaram.
- Scripting cross-site
- Falsificação por solicitação entre locais
- Injeção SQL
Parece uma doença de cozinha. Isso faz cócegas no meu coração! É tudo uma questão de segurança. Estatisticamente, parece que há cerca de 1.000 casos por ano no total de três. Quase não havia casos até então. Quis citar um gráfico de dados estatísticos ou algo assim, mas não consegui encontrar porque estava muito bagunçado ( ◠‿◠ ) Hmm Se quiser saber mais, por favor acesse o link abaixo. Está muito bem elaborado.
Entendendo vulnerabilidades do Ajax - IBM developerWorks
O Surgimento do HTML5/CSS3
O HTML5 estabelece novas diretrizes em comparação com versões anteriores. Está prestes a se tornar uma plataforma para aplicações web. Como exemplo recente, ontem finalmente foi anunciado que os vídeos do YouTube passarão de Flash para HTML5. E com o advento do CSS3, estamos fazendo cada vez mais no front-end.
Quanto mais você puder fazer, mais será solicitado. Se você tiver mais coisas para fazer, ficará insatisfeito com o jeito que sempre foi. Então, naturalmente, terá uma ferramenta para resolver isso.
Boom Móvel
Nem preciso dizer. É comum tentar ser responsivo, dizer algo primeiro para o celular, e simplesmente as palavras avançam mesmo que você não entenda bem (não explica nada). jQuery Mobile? Não sei.
- Mais coisas que você pode fazer
- **Também são necessárias medidas de segurança. **
Fator 2 - Especificações CSS e JavaScript
Frouxa CSS
Eu sei escrever CSS! Mesmo que haja muitas pessoas, consigo projetar um CSS sólido. Estou confiante! Não acho que muitas pessoas digam isso.
CSS é barato de aprender, mas qualquer um pode escrevê-lo, então o design costuma ser bagunçado e difícil de manter. Houve um tempo em que pensei que fosse um problema pessoal, mas não parece ser o caso, então vou postar um link de referência.
Por que o CSS morre tão rápido?
Então, quais são as medidas para evitar se preocupar com a manutenção do CSS? Essa é a história.
Contramedidas 1. Vamos projetar direito
- OOCSS - Vamos escrever CSS orientado a objetos. Separação de estrutura e aparência. Separação de containers e conteúdo.
- SMACSS - Classificados como módulos. Base, Disposição, Módulo, Estado, Tema, etc.
- BEM - Dividido em Bloqueio, Elemento e Modificador, é difícil e difícil.
Essas não são ferramentas. Em termos de design, vamos fazer algo sobre outras convenções de nomes e operações. Espero conseguir escrever um blog algum dia, mas por enquanto, se quiser saber mais, por favor, vá por aí. (Diversos)
Contramedida 2. Use pré-processadores CSS
Também há desenvolvimentos em grande escala que são difíceis de gerenciar apenas pela operação. Além disso, você poderá usar funções que não estão em CSS, mas que querem usar. Variáveis, operações, nests, mixins, etc. Também sinto que consigo escrever facilmente (importante)
No final, é importante notar que, como compila e gera CSS, não está completamente livre de design.
- Sass - Feito por Ruby. Graças à Bússola (descrito depois), ele sente que está bem à frente.
- LESS - Fabricado em Node.js. É usado no Bootstrap e garantiu uma boa posição.
- Stylus - Feito em Node.js. Um cara bom e bom que é comum entre os atrasados.
Bússola é uma estrutura para o Sass. Não sei o que é ( ◠‿◠ )
Ambiente de Execução JavaScript
JavaScript do lado do servidor
Houve um tempo em que eu achava que o JavaScript rodaria no navegador e não havia problema. Agora, graças ao crescimento do Node.js, o JavaScript do lado do servidor não pode ser ignorado. Aliás, o que mais estou prestando atenção agora é na io.js. Eu sei o que é Node.js JavaScript do lado do servidor, mas o que é io.js? Para explicar resumidamente, é io.js que ele foi bifurcado (gerando uma cópia de um ponto no tempo e derivando-a como outro) a partir do Node.js. Vou deixar a explicação do porquê foi derivado dessa forma para o blog que escreve em detalhes, mas o que gostaria de observar é a diferença no número de commits no GitHub. Há uma diferença clara na empolgação após o fork em meados de 2014. Estou preocupado com o destino do Node.js.
JavaScript do lado do cliente
JavaScript roda no navegador. O que você quer dizer é implementado para cada navegador, então há uma diferença. Resumindo, é problemático. Nasceu como um prototype.js para tentar fazer algo, e bibliotecas e outras coisas foram criadas, e antes que eu percebesse, o jQuery estava na moda. É mais ou menos assim.
O jQuery é muito fácil de usar, mas como mencionado acima, há muitos desenvolvimentos em grande escala nos últimos anos em que há muitas coisas que podem ser feitas com expressões de front-end, e as fraquezas do jQuery foram expostas.
A manutenção é difícil. É um estado medapani chamado grande quantidade de manipulação do DOM. Muitos frameworks e bibliotecas apareceram para resolver isso. Desta vez não há fim para os detalhes, então é só uma lista.
- Backbone.js - Traz o conceito de MVC para JS e é caracterizado por uma estrutura simples.
- Angular.js - Um framework MVW que incorpora especificações únicas, como vinculação bidirecional de dados. É caracterizado por uma sensação full-stack.
- Knockout.js - Framework MVVW. Falando em frameworks populares, você pode dizer Angular, Backbone, Knockout, etc., certo?
- Vue.js - É uma estrutura para quem chega tarde, então é uma boa opção.
- Ember.js - Estrutura MVC. Personagem fofo.
- React.js - Adota um conceito maravilhoso, como um DOM virtual. Recentemente, vocês também lançaram uma linguagem para desenvolvimento móvel chamada ReactNative.
Resumindo, há muitas coisas organizadas no MVx. UI de jQuery? Não sei.
Fator 3 - Humano
Existem ferramentas que nasceram como uma reação em cadeia para responder à evolução.
Os humanos estão dispostos a poupar qualquer esforço para facilitar
Eu (1989~)
Em resumo, quero ser fácil. Se você consegue fazer algo bom fazendo de forma brusca, não vai querer trabalhar.
Para quem não quer trabalhar porque acha complicado escrever HTML
Emmet Uma ferramenta para quem quer escrever HTML com mais facilidade. No passado, chamava-se Zen-Coding. Fácil. Para começar com o Emmet, lembre-se disso por enquanto.
Se você usar o motor de templates HTML Express (Node.js) da Jade Node.js, pode usá-lo sem nenhuma configuração especial. Aprendi a notação, mas preciso configurá-la, então se eu não usar em uma combinação que combine bem, Emmet é uma boa sensação. Sobre Jade. - Resumos - GitHub
Motor Template Haml / Slim Ruby: Escolha entre Rails se for usá-lo. Comparação de Engine Template Rails: erb vs slim vs haml
Para quem não quer trabalhar porque achou incômodo apertar o botão de atualização (toque no atalho)
- Não quero apertar o botão de atualização Live Reload. Se eu tento apertar Command+R, aperto Command+T para abrir uma nova aba e apagá-la. Não quero mover minhas mãos para F5← Uma ferramenta que recarrega o arquivo depois de salvar. LiveReload é muito conveniente
- Sincronização do Navegador Um exemplo típico de tentar facilitar. Eu escrevo um arquivo gruntfile ou gulpfile, mas o retorno é grande demais. Então, se alguém escreve, é uma loucura. A confirmação do navegador é instantânea! Começando com Grunt e Gulp Introdução ao BrowserSync
Para quem se candidata a ambos os itens acima, também existe uma ferramenta chamada Emmet LiveStyle.
Para quem não quer trabalhar porque achou problemático escrever JS
Existe algo chamado AltJS. Eventualmente vou compilar isso em JS.
CoffeeScript é fácil. A redução na quantidade de código que realmente precisa ser escrito não é um obstáculo.
Existem pessoas no mundo que querem ser precisas, mesmo sendo TypeScript, e essa é a ferramenta para essas pessoas.
Yeoman
Grunt
Glup
Aquele que depois percebeu que eu estava perdendo a explicação.
Esses caras também querem ficar relaxados, afinal.
Fator 4. O cara que deveria usar testes quando virou em grande escala
Quero escrever um teste. (Diversos)
Ferramentas de Teste Unitário
Ferramentas de Teste Abrangentes
Selênio e Phantom.js (diversos)
Para Colocar Informações em Dia
O que devo fazer com tanta informação? O que eu faço para evitar problemas
- Crie um sistema que permita incluir informações que lhe interessam. Você também pode resumir blogs que possam te interessar usando RSS. Você pode se inscrever no site de resumo do grupo de estudo para verificar cada uma das coisas que te interessam.
- Não peça tudo: Se você acha que virou tio, pense nas informações que não precisa.
- Encontre um influenciador para você Tem gente que acredita na palavra dessa pessoa até certo ponto. Se você não consegue um tempo para si, é só uma questão de incorporar a sabedoria dos seus antecessores.
- A continuação não para.
Então, o que devo escolher? Gostaria de escrever sobre essa questão na próxima vez.