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#.4d0orpr8o

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-processadores/- https://csspre.com/compare/

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

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 makes

comparing them illogical. Not at all!

- Cory House

Fonte: https://medium.freecodecamp.com/angular-2-versus-react-there-will-be-blood-66595faafd51#.wp2v6mjk1

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!!!!

JShttp://jargon.js.org/

Duvidas?