Front-end: O que é necessário saber?

As principais técnicas utilizadas no front-end, como técnicas de clean code, boas práticas, frameworks, devtools e assim por diante.

Transcript

1. O que é preciso saber? Front-end
2. @RafaelPazini
3. Front-end O que é realmente?
4. Definição simples É o programador que lidará com as linguagens client-side, ou seja, as linguagens que são interpretadas pelo browser. • HTML (xHTML, HTML5...) • CSS (CSS2.1, CSS3...) • JavaScript
5. Os conceitos que importam
6. IDE / Code Editor A primeira dúvida que surge
7. Escolha, é seu GOSTO As opções são várias, mas o que realmente vai importar é qual se adequa mais ao seu workflow
8. Terminal Comandos básicos que podem facilitar sua vida
9. Saber para o que serve Com o terminal podemos: • Controlar o versionamento • Utilizar package managers • Criar builds com task runners...
11. Semântica Amigável, bonito e limpo
12. A semântica define claramente o que cada elemento é...
13. HTML Não-Sem <div class="nav"> ... </div> <div class="section"> <div class="article"> <div class="header">...</div> <p>...</p> </div> </div> HTML Semântico <nav> ... </nav> <section> <article> <header>...</header> <p>...</p> </article> </section> Fácil para humanos e robôs
14. Estruturas com significado
16. Pré-processadores CSS SASS/STYLUS/ LESS...
17. Imagine um mundo onde o CSS tem super poderes?!
18. Os responsáveis Pré-processadores permitem a criação de variáveis, funções, importação de outros arquivos css e assim por diante..
19. Utilização do SASS SASS .main { $width: 5em !global; width: $width; } .sidebar { width: $width; } CSS .main { width: 5em; } .sidebar { width: 5em; }
20. Agilidade, facilidade e documentado Frameworks Css
21. Algumas vezes achamos coisas prontas bem feitas...
22. O que são? Um conjunto de elementos front-end com estilos e funções definidos.
24. Bootstrap em ação HTML <div class="input-group"> <span class="input-group-addon" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"> </div>
26. Foundation em ação HTML <div class="input-group"> <span class="input-group-label">$</span> <input class="input-group-field" type="number"> <div class="input-group-button"> <input type="submit" class="button" value="Submit"> </div> </div>
27. Pelo menos uma é necessário conhecer!
28. Frameworks JS A moda do momento e o futuro da web
29. Por que tão usadas? Elas agilizam o desenvolvimento de novas aplicações web, evitam carregamentos desnecessários de página, facilitam o data binding e organizam nossa arquitetura de desenvolvimento
33. Qual escolher ???
34. Task Runners Um comando, muitos processos em execução
35. Que tal fazer tudo de uma vez? Essa é a tarefa do task runner. Você codifica as tarefas umas vez e ele executa quando você quer… • Minificar CSS • Compactar todos os arquivos em um • Converter SASS para CSS • Etc...
37. Package Managers Um jeito de baixar e atualizar arquivos sem ter que ficar copiando e colando em pastas
38. O que eles fazem? Quando criamos um projeto Web, usamos muitas coisas: frameworks, libraries, assets... Deixe que o package manager controle isso pra você.
41. Devo sair usando todas as ferramentas no projeto?
42. Browsers As estrelas que irão interpretar nosso código
43. Onde a mágica acontece!
44. Qual usar? TODOS :D
46. goo.gl/fO14Cj
47. Versionamento Além de Deus, ele pode salvar sua vida também
48. A plataforma mais usada Com a febre do Github na atualidade. O versionamento mais comum hoje em dia é feito através do Git.
49. Git != Github
50. O que vem por aí
51. Progressive Web Apps Sites que se comportam como um app
52. Um mundo onde aplicativos que usamos uma só vez são escassos!
55. Web APIs Controlando ações do smartphone
56. Vibration API Faz com que você controle a vibração do dispositivo. goo.gl/UEiFTr
57. </obrigado> @RafaelPazini | rflpazini.com