[Unicamp] Front-end - Onde estamos e o que você deveria saber

Descubra à quantas anda o desenvolvimento front-end atualmente e um caminho a seguir para se tornar um desenvolvedor deste tipo, bem como informações sobre o que evitar para se tornar um bom front-end.

Transcript

1. Front-end Onde estamos hoje e o que você deveria saber
2. Talysson / @talyssonoc talyssonoc.github.io Front-end / Codeminer42
3. O passado e onde estamos hoje
4. O passado • Poucas ferramentas • Ausência de testes • Flash (argh!) • Código espaguete • CSS precário • Pouca manutenibilidade • Baixíssima barreira de entrada
5. Onde estamos hoje • Muitas ferramentas • Cultura de testes • Transpiladores • Pré-compiladores • Várias possibilidades de workflow • Muitas ferramentas = (aparente) alta barreira de entrada
6. O que você deveria saber
7. O básico • HTML • CSS • JavaScript
8. Manipular o DOM Document Object Model • Estrutura de árvore dos elementos HTML • Manipulação com JavaScript • jQuery var $el = $('.my-element'); var html = '<div>Hello, <b>' + name + '</b></div>'; $el.on('click', function() { $el.html(html); });
9. Linguages de template • Padronização • Syntax highlight • Modularização • Evita repetição var $el = $('.my-element'); var html = render({ name: 'Talysson' }); $el.html(html); <%= EJS %> <div> Hello, <b>{{name}}</b> </div>
10. Responsividade e adaptatividade • Qual a diferença? ?
11. Responsividade e adaptatividade • Trabalham juntos • Experiência do usuário • Graceful degradation Responsivo vs. Adaptativo
12. Gerenciamento de dependências • Facilita atualização • Melhor modularização • Instalação de ferramentas • Node + NPM > npm install --save jquery > npm install --global mocha > npm install --save-dev chai
13. Testes automatizados • Aplicações mais confiáveis • Maior manutenibilidade • Todo código é culpado até provado o contrário • Mocha + Chai it('should be awesome', function() { expect(obj.method()).to.equal('awesome'); });
14. Comunicação com o back-end e APIs • AJAX • Não usar jQuery só por causa do $.ajax • Axios, fetch • Padrão REST • Autenticação
15. Metodologias e ferramentas CSS • BEM • Modularização • Reaproveitamento • SASS, PostCSS, Stylus .list .list__item .item .item__content .list { color: #fff; &__item { border-color: #000; } } .list { color: #fff; } .list__item { border-color: #000; } SASS CSS .list__item .item .item__content
16. Aprofundando: Layouts com grid • 12, 16 e 24 colunas • Frameworks de grid • Bootstrap, Foundation, 960gs
17. Aprofundando: Frameworks • Ajudam na estruturação • Mais difíceis de se configurar • Podem implicar em aplicações melhores • Aprender o jeito do framework • Não misturar
18. Aprofundando: Tooling • Melhor workflow • Melhor qualidade de código • Automatização de tarefas • Transpilers • Compilers (já citados) • Bundlers • Task runners • Linters
19. Links importantes • Evite o W3Schools. Ele não é da W3C. • MDN: https://developer.mozilla.org/ • MarkSheet: http://marksheet.io/ • JavaScript Path: https://github.com/javascript-society/javascript-path • CSS Dinner: http://flukeout.github.io/ • Can I Use: http://caniuse.com/
20. O que você não deveria fazer
21. Ignorar o básico • Fundamentos não se tornam obsoletos • Entender o código • Não avance sem saber o básico • Não use o jQuery como a solução padrão dos seus problemas
22. • Posts sensacionalistas • Morte de ferramentas • A melhor opção é a que resolve o seu problema Escolher por hypes ou popularidade
23. Se frustrar com CSS • CSS é uma linguagem poderosa • Mas compatibilidade é importante • Nem sempre podemos usar coisas novas • O Can I Use é seu amigo • Declarativo = diferente do que estamos acostumados
24. Achar que CSS é desnecessário • Front-ends não devem saber só JavaScript • Usar só Bootstrap te deixa dependente • Depender de CTRL + C/ CTRL +V é ainda pior • Escrever CSS é fácil. Mas escrever CSS bom requer prática
25. Não saber um pouco de back-end • Um bom desenvolvedor sabe um pouco de tudo • Conhecer o back-end te torna um front melhor • Você dificilmente fará só código front-end • Um bom desenvolvedor nunca para de aprender
26. Você become@codeminer42.com
27. Perguntas?