Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
JavaScript Web Apps
William de Oliveira
Front-End Developer
@w_oliveiras
github.com/woliveiras
woliveiras.com.br
vivadecora.com.br
Disclaimer
Desenvolvedor Front End !== Designer
1.
Toda vez que alguém me pede para
desenhar um Layout, um Bebe
Panda morre.
2.
O que são Web Apps?
Responsive Web Design é Web App?
Motivação
Fonte: https://npmjs.com/
O cenário Front End está mais ou menos assim
Fonte: https://medium.com/@withinsight1/the-front-end-spectrum-c0f30998c9f0#....
Você não precisa dessa
sopa de letrinhas para
criar seu Web App
NodeJS e NVM
- Nodejs
- github.com/creationix/nvm
http://woliveiras.com.br/posts/utilizando-versoes-antigas-do-nodejs/
Começando um projeto
Scaffolding & Gerenciamento de dependências
Caiu em desuso
Eu gosto do Bower… http://woliveiras.com.br/posts/olha-o-passarinho-falando-sobre-o-bower/
Exemplo de uso do NPM (criando a pasta e iniciando o Projeto)
Configurações do Projeto
Exemplo de uso do Yeoman
Onde encontrar Generators? yeoman.io/generators/
Desenvolvendo
Automatizadores & Build tools
Qual pré processador de CSS usar?
Mais informações em:
- http://tableless.com.br/sass-vs-less-vs-stylus-batalha-dos-pre-pr...
Sass
nav
ul
margin: 0
padding: 0
list-style: none
li
display: inline-block
a
display: block
padding: 6px 12px
text-decorat...
webpack
Comparação: https://webpack.github.io/docs/comparison.html
Template Engines
EJS
Jade e HTML
Vocês querem...
Eu sei que vocês estavam
esperando por isso...
You’re Comparing Apples and Orangutans!
Sigh. Yes, Angular is a framework, React is a library. Some say this difference ma...
Qual FRAMEWORK JS usar?
Qual LIB JS usar?
Fonte: https://www.codementor.io/reactjs/tutorial/reactjs-vs-angular-js-performance-comparison-knockout
E qual a melhor stack, então?
Ninguém sabe ainda!
Mas eu indico...
OPS, quase esqueci...
O que você mais vai usar!!!!
JS
http://jargon.js.org/
Duvidas?
Você não precisa de uma sopa de letrinhas para criar web apps
Upcoming SlideShare
Loading in …5
×

Você não precisa de uma sopa de letrinhas para criar web apps

467 views

Published on

Palestra apresentada no GDG-ABC sobre a criação de Web Apps e um overview sobre a criação de aplicações JavaScript com Frameworks como o AngularJS, libs como ReactJS e ferramentas estilo GulpJS, GruntJS, Yeoman, NPM, Webpack, dentre outras.

Published in: Technology
  • Be the first to comment

Você não precisa de uma sopa de letrinhas para criar web apps

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

×