você não precisa de uma sopa de letrinhas para criar web apps
TRANSCRIPT
![Page 1: Você não precisa de uma sopa de letrinhas para criar web apps](https://reader035.vdocuments.site/reader035/viewer/2022062316/58ef3d1e1a28ab01688b45d1/html5/thumbnails/1.jpg)
JavaScript Web Apps
![Page 2: Você não precisa de uma sopa de letrinhas para criar web apps](https://reader035.vdocuments.site/reader035/viewer/2022062316/58ef3d1e1a28ab01688b45d1/html5/thumbnails/2.jpg)
William de Oliveira
Front-End Developer
@w_oliveiras
github.com/woliveiras
woliveiras.com.br
![Page 3: Você não precisa de uma sopa de letrinhas para criar web apps](https://reader035.vdocuments.site/reader035/viewer/2022062316/58ef3d1e1a28ab01688b45d1/html5/thumbnails/3.jpg)
vivadecora.com.br
![Page 4: Você não precisa de uma sopa de letrinhas para criar web apps](https://reader035.vdocuments.site/reader035/viewer/2022062316/58ef3d1e1a28ab01688b45d1/html5/thumbnails/4.jpg)
Disclaimer
![Page 5: Você não precisa de uma sopa de letrinhas para criar web apps](https://reader035.vdocuments.site/reader035/viewer/2022062316/58ef3d1e1a28ab01688b45d1/html5/thumbnails/5.jpg)
Desenvolvedor Front End !== Designer
1.
![Page 6: Você não precisa de uma sopa de letrinhas para criar web apps](https://reader035.vdocuments.site/reader035/viewer/2022062316/58ef3d1e1a28ab01688b45d1/html5/thumbnails/6.jpg)
Toda vez que alguém me pede para desenhar um Layout, um Bebe Panda morre.
![Page 7: Você não precisa de uma sopa de letrinhas para criar web apps](https://reader035.vdocuments.site/reader035/viewer/2022062316/58ef3d1e1a28ab01688b45d1/html5/thumbnails/7.jpg)
2.
![Page 8: Você não precisa de uma sopa de letrinhas para criar web apps](https://reader035.vdocuments.site/reader035/viewer/2022062316/58ef3d1e1a28ab01688b45d1/html5/thumbnails/8.jpg)
O que são Web Apps?
![Page 9: Você não precisa de uma sopa de letrinhas para criar web apps](https://reader035.vdocuments.site/reader035/viewer/2022062316/58ef3d1e1a28ab01688b45d1/html5/thumbnails/9.jpg)
Responsive Web Design é Web App?
![Page 10: Você não precisa de uma sopa de letrinhas para criar web apps](https://reader035.vdocuments.site/reader035/viewer/2022062316/58ef3d1e1a28ab01688b45d1/html5/thumbnails/10.jpg)
Motivação
Fonte: https://npmjs.com/
![Page 11: Você não precisa de uma sopa de letrinhas para criar web apps](https://reader035.vdocuments.site/reader035/viewer/2022062316/58ef3d1e1a28ab01688b45d1/html5/thumbnails/11.jpg)
O cenário Front End está mais ou menos assim
Fonte: https://medium.com/@withinsight1/the-front-end-spectrum-c0f30998c9f0#.4d0orpr8o
![Page 12: Você não precisa de uma sopa de letrinhas para criar web apps](https://reader035.vdocuments.site/reader035/viewer/2022062316/58ef3d1e1a28ab01688b45d1/html5/thumbnails/12.jpg)
Você não precisa dessa sopa de letrinhas para
criar seu Web App
![Page 13: Você não precisa de uma sopa de letrinhas para criar web apps](https://reader035.vdocuments.site/reader035/viewer/2022062316/58ef3d1e1a28ab01688b45d1/html5/thumbnails/13.jpg)
NodeJS e NVM
- Nodejs- github.com/creationix/nvm
http://woliveiras.com.br/posts/utilizando-versoes-antigas-do-nodejs/
![Page 14: Você não precisa de uma sopa de letrinhas para criar web apps](https://reader035.vdocuments.site/reader035/viewer/2022062316/58ef3d1e1a28ab01688b45d1/html5/thumbnails/14.jpg)
Começando um projeto
Scaffolding & Gerenciamento de dependências
![Page 15: Você não precisa de uma sopa de letrinhas para criar web apps](https://reader035.vdocuments.site/reader035/viewer/2022062316/58ef3d1e1a28ab01688b45d1/html5/thumbnails/15.jpg)
Caiu em desuso
Eu gosto do Bower… http://woliveiras.com.br/posts/olha-o-passarinho-falando-sobre-o-bower/
![Page 16: Você não precisa de uma sopa de letrinhas para criar web apps](https://reader035.vdocuments.site/reader035/viewer/2022062316/58ef3d1e1a28ab01688b45d1/html5/thumbnails/16.jpg)
Exemplo de uso do NPM (criando a pasta e iniciando o Projeto)
![Page 17: Você não precisa de uma sopa de letrinhas para criar web apps](https://reader035.vdocuments.site/reader035/viewer/2022062316/58ef3d1e1a28ab01688b45d1/html5/thumbnails/17.jpg)
Configurações do Projeto
![Page 18: Você não precisa de uma sopa de letrinhas para criar web apps](https://reader035.vdocuments.site/reader035/viewer/2022062316/58ef3d1e1a28ab01688b45d1/html5/thumbnails/18.jpg)
Exemplo de uso do Yeoman
Onde encontrar Generators? yeoman.io/generators/
![Page 19: Você não precisa de uma sopa de letrinhas para criar web apps](https://reader035.vdocuments.site/reader035/viewer/2022062316/58ef3d1e1a28ab01688b45d1/html5/thumbnails/19.jpg)
Desenvolvendo
Automatizadores & Build tools
![Page 20: Você não precisa de uma sopa de letrinhas para criar web apps](https://reader035.vdocuments.site/reader035/viewer/2022062316/58ef3d1e1a28ab01688b45d1/html5/thumbnails/20.jpg)
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/
![Page 21: Você não precisa de uma sopa de letrinhas para criar web apps](https://reader035.vdocuments.site/reader035/viewer/2022062316/58ef3d1e1a28ab01688b45d1/html5/thumbnails/21.jpg)
Sassnav
ul
margin: 0
padding: 0
list-style: none
li
display: inline-block
a
display: block
padding: 6px 12px
text-decoration: none
Stylusnav
ul
margin: 0
padding: 0
list-style: none
li
display: inline-block
a
display: block
padding: 6px 12px
text-decoration: none
![Page 22: Você não precisa de uma sopa de letrinhas para criar web apps](https://reader035.vdocuments.site/reader035/viewer/2022062316/58ef3d1e1a28ab01688b45d1/html5/thumbnails/22.jpg)
webpack
Comparação: https://webpack.github.io/docs/comparison.html
![Page 23: Você não precisa de uma sopa de letrinhas para criar web apps](https://reader035.vdocuments.site/reader035/viewer/2022062316/58ef3d1e1a28ab01688b45d1/html5/thumbnails/23.jpg)
Template Engines
EJS
![Page 24: Você não precisa de uma sopa de letrinhas para criar web apps](https://reader035.vdocuments.site/reader035/viewer/2022062316/58ef3d1e1a28ab01688b45d1/html5/thumbnails/24.jpg)
Jade e HTML
![Page 25: Você não precisa de uma sopa de letrinhas para criar web apps](https://reader035.vdocuments.site/reader035/viewer/2022062316/58ef3d1e1a28ab01688b45d1/html5/thumbnails/25.jpg)
Vocês querem...
![Page 26: Você não precisa de uma sopa de letrinhas para criar web apps](https://reader035.vdocuments.site/reader035/viewer/2022062316/58ef3d1e1a28ab01688b45d1/html5/thumbnails/26.jpg)
Eu sei que vocês estavam esperando por isso...
![Page 27: Você não precisa de uma sopa de letrinhas para criar web apps](https://reader035.vdocuments.site/reader035/viewer/2022062316/58ef3d1e1a28ab01688b45d1/html5/thumbnails/27.jpg)
![Page 28: Você não precisa de uma sopa de letrinhas para criar web apps](https://reader035.vdocuments.site/reader035/viewer/2022062316/58ef3d1e1a28ab01688b45d1/html5/thumbnails/28.jpg)
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
![Page 29: Você não precisa de uma sopa de letrinhas para criar web apps](https://reader035.vdocuments.site/reader035/viewer/2022062316/58ef3d1e1a28ab01688b45d1/html5/thumbnails/29.jpg)
Qual FRAMEWORK JS usar?
![Page 30: Você não precisa de uma sopa de letrinhas para criar web apps](https://reader035.vdocuments.site/reader035/viewer/2022062316/58ef3d1e1a28ab01688b45d1/html5/thumbnails/30.jpg)
Qual LIB JS usar?
Fonte: https://www.codementor.io/reactjs/tutorial/reactjs-vs-angular-js-performance-comparison-knockout
![Page 31: Você não precisa de uma sopa de letrinhas para criar web apps](https://reader035.vdocuments.site/reader035/viewer/2022062316/58ef3d1e1a28ab01688b45d1/html5/thumbnails/31.jpg)
E qual a melhor stack, então?
Ninguém sabe ainda!
![Page 32: Você não precisa de uma sopa de letrinhas para criar web apps](https://reader035.vdocuments.site/reader035/viewer/2022062316/58ef3d1e1a28ab01688b45d1/html5/thumbnails/32.jpg)
Mas eu indico...
![Page 33: Você não precisa de uma sopa de letrinhas para criar web apps](https://reader035.vdocuments.site/reader035/viewer/2022062316/58ef3d1e1a28ab01688b45d1/html5/thumbnails/33.jpg)
OPS, quase esqueci...
O que você mais vai usar!!!!
JShttp://jargon.js.org/
![Page 34: Você não precisa de uma sopa de letrinhas para criar web apps](https://reader035.vdocuments.site/reader035/viewer/2022062316/58ef3d1e1a28ab01688b45d1/html5/thumbnails/34.jpg)
Duvidas?