Este documento fornece uma introdução sobre o desenvolvimento de aplicações web front-end com JavaScript. Discute tópicos como pré-processadores de CSS, ferramentas de automação como Webpack, frameworks como Angular e React, e enfatiza a importância de escolher as ferramentas com as quais você se sente mais confortável.

1. JavaScript Web Apps

2. William de Oliveira
Front-End Developer
@w_oliveiras
github.com/woliveiras
woliveiras.com.br

3. vivadecora.com.br

4. Disclaimer

5. Desenvolvedor Front End !== Designer
1.

6. Toda vez que alguém me pede para
desenhar um Layout, um Bebe
Panda morre.

7. 2.

8. O que são Web Apps?

9. Responsive Web Design é Web App?

10. Motivação
Fonte: https://npmjs.com/

11. O cenário Front End está mais ou menos assim
Fonte: https://medium.com/@withinsight1/the-front-end-spectrum-c0f30998c9f0#.4d0orpr8o

12. Você não precisa dessa
sopa de letrinhas para
criar seu Web App

13. NodeJS e NVM
- Nodejs
- github.com/creationix/nvm
http://woliveiras.com.br/posts/utilizando-versoes-antigas-do-nodejs/

14. Começando um projeto
Scaffolding & Gerenciamento de dependências

15. Caiu em desuso
Eu gosto do Bower… http://woliveiras.com.br/posts/olha-o-passarinho-falando-sobre-o-bower/

16. Exemplo de uso do NPM (criando a pasta e iniciando o Projeto)

17. Configurações do Projeto

18. Exemplo de uso do Yeoman
Onde encontrar Generators? yeoman.io/generators/

19. Desenvolvendo
Automatizadores & Build tools

20. Qual pré processador de CSS usar?
Mais informações em:
- http://tableless.com.br/sass-vs-less-vs-stylus-batalha-dos-pre-processadores/
- https://csspre.com/compare/

21. Sass
nav
ul
margin: 0
padding: 0
list-style: none
li
display: inline-block
a
display: block
padding: 6px 12px
text-decoration: none
Stylus
nav
ul
margin: 0
padding: 0
list-style: none
li
display: inline-block
a
display: block
padding: 6px 12px
text-decoration: none

22. webpack
Comparação: https://webpack.github.io/docs/comparison.html

23. Template Engines
EJS

24. Jade e HTML

25. Vocês querem...

26. Eu sei que vocês estavam
esperando por isso...

28. You’re Comparing Apples and Orangutans!
Sigh. Yes, Angular is a framework, React is a library. Some say this difference makes
comparing them illogical. Not at all!
- Cory House
Fonte: https://medium.freecodecamp.com/angular-2-versus-react-there-will-be-blood-66595faafd51#.wp2v6mjk1

29. Qual FRAMEWORK JS usar?

30. Qual LIB JS usar?
Fonte: https://www.codementor.io/reactjs/tutorial/reactjs-vs-angular-js-performance-comparison-knockout

31. E qual a melhor stack, então?
Ninguém sabe ainda!

32. Mas eu indico...

33. OPS, quase esqueci...
O que você mais vai usar!!!!
JS
http://jargon.js.org/

34. Duvidas?