Mais produtividade com
Dicas de ferramentas e plugins modernos
Jullierme Barros
Sistemas de informação - UEG - 2007
Java - 2005
Prodata Informática - 2008 - atual
Angular - 2014
Sublime Text
Editor de Texto
Leve
Teclas de atalho intuitivas
Multiplataforma
Um dos mais utilizados por programadores AngularJs
$70
Su...
Webstorm
Webstorm
Uma IDE pra chamar de sua :)
Considerada a melhor IDE para desenv. Javascript e AngularJS
Refactory de código int...
Github
GitHub é basicamente um serviço de compartilhamento de projetos/códigos que
usam o controle de versionamento Git
Pl...
Github - Atom
Editor de texto, leve, moderno e free
Desenvolvido pelo Github e open-source o/
https://atom.io/
http://tabl...
Nodejs
Motor V8 JavaScript do Chrome
Objetivo: Construir aplicações escaláveis, não bloqueante
NPM - Node Package Manager ...
Bower
Gerenciamento de dependências Client-side
Necessário Nodejs e Git
bower install angular --save
Bower
bower.json
estrutura
Grunt
Automatizador de tarefas
Por que você deve aprender o Grunt?
Gruntfile.js
package.json
Grunt
Ferramenta de análise de código javascript
Auxilia na validação de código
Objetivo: Evitar/Corrigir erros
Produtividade?
M...
JSHint - plugin grunt-contrib-jshint
Less
A linguagem dinâmica de estilos
LESS estende CSS com comportamento dinâmico como variáveis, mixins,
operações e funçõ...
Less - Variáveis
http://blog.caelum.com.br/css-facil-flexivel-e-dinamico-com-less/
Less - Funções de cores
http://blog.caelum.com.br/css-facil-flexivel-e-dinamico-com-less/
Less - Mixins
http://blog.caelum.com.br/css-facil-flexivel-e-dinamico-com-less/
Less - plugin grunt-contrib-less
Sass
Uglify - plugin grunt-contrib-uglify
remover espaços, comentários, renomear variáveis etc
ng-annotation - plugin grunt-ng-annotate
Preparar para minificar
Minificar CSS - plugin grunt-contrib-cssmin
Minificar CSS
Por que?
291 + 154 = 445
92 + 199 = 291
445 - 291 = 154Kb a menos
Minificar HTML - plugin grunt-contrib-htmlmim
Minificar html
Por que?
Ngdocs - plugin grunt-ngdocs
/**
* @ngdoc directive
* @name prodata-arquitetura-directive.directive:pdStatsCard
* @element...
Ngdocs - plugin grunt-ngdocs
Ngdocs - plugin grunt-ngdocs
Gulp
Ferramenta de automatização de tarefas
Mesmas funcionalidades do Grunt
Forma diferente de definir/escrever as tarefas...
Yeoman
Ferramenta SCAFFOLDING para desenvolvimento web
Automatiza tarefas - Utiliza grunt e bower
Criar um projeto
Boas pr...
google design
http://www.google.com/design/
material design
http://www.google.com/inbox/
material design
Angular Material
https://material.angularjs.org/
Boas práticas by John Papa
https://github.com/johnpapa/angular-styleguide/
Fonte Awesome
● 585 ícones na versão 4.4.0
● Sem javascript
● Tamanhos infinitos: como os ícones estão em um arquivo
fonte...
Fonte Awesome
Testando aplicações Angularjs
Jasmine é um framework de desenvolvimento orientado a comportamento para testes de
códigos em javascript.
Não depende de n...
by Angularjs
Test runner (rodador de testes)
Rodar em diferentes browsers
Abrirá o browser por debaixo dos panos e fará a ...
PhantomJS
Para usar somente o terminal, e não precisar ter uma
janela do navegador aberta
Testando aplicações Angularjs
by Angularjs
Um framework de teste end-to-end para aplicações AngularJS
Ele executa testes direto no seu aplicativo em um ...
Curso de Angularjs
Curso de AngularJs in Company - 24h
Próximo curso - Senai Fatest - 03/11 à 20/11
Nova turma em dezembro...
julliermebarros@gmail.com
julliermebarros.com
plus.google.com/+JulliermeBarros
PERGUNTAS?
Próximos SlideShares
Carregando em…5
×

Join Community 2015 - Mais produtividade com Angularjs - Dicas de ferramentas e plugins modernos.

296 visualizações

Publicada em

Palestra: Mais produtividade com Angularjs - Dicas de ferramentas e plugins modernos.

Palestrante: Jullierme Barros

Evento: Join Community 2015 - Goiânia - GO - 17/10/2015

0 comentários
6 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
296
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
15
Comentários
0
Gostaram
6
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Join Community 2015 - Mais produtividade com Angularjs - Dicas de ferramentas e plugins modernos.

  1. 1. Mais produtividade com Dicas de ferramentas e plugins modernos Jullierme Barros
  2. 2. Sistemas de informação - UEG - 2007 Java - 2005 Prodata Informática - 2008 - atual Angular - 2014
  3. 3. Sublime Text
  4. 4. Editor de Texto Leve Teclas de atalho intuitivas Multiplataforma Um dos mais utilizados por programadores AngularJs $70 Sublime Text
  5. 5. Webstorm
  6. 6. Webstorm Uma IDE pra chamar de sua :) Considerada a melhor IDE para desenv. Javascript e AngularJS Refactory de código inteligente Depuração avançada no Google Chrome Live Edit sem Live Reload Verificação de erros em tempo de desenvolvimento $49 para pessoa física - (Grátis para estudantes) $99 comercial
  7. 7. Github GitHub é basicamente um serviço de compartilhamento de projetos/códigos que usam o controle de versionamento Git Planos comerciais (privados) e gratuitos (open-source) Uma rede social para programadores :)
  8. 8. Github - Atom Editor de texto, leve, moderno e free Desenvolvido pelo Github e open-source o/ https://atom.io/ http://tableless.com.br/atom-o-novo-editor-github/
  9. 9. Nodejs Motor V8 JavaScript do Chrome Objetivo: Construir aplicações escaláveis, não bloqueante NPM - Node Package Manager (Gerenciador de Pacotes do Node). Repositório online para publicação de projetos Utilitário de linha de comando que interage com este repositório online https://nodejs.org/dist/v4.2.1/node-v4.2.1-x64.msi
  10. 10. Bower Gerenciamento de dependências Client-side Necessário Nodejs e Git bower install angular --save
  11. 11. Bower bower.json estrutura
  12. 12. Grunt Automatizador de tarefas Por que você deve aprender o Grunt? Gruntfile.js package.json
  13. 13. Grunt
  14. 14. Ferramenta de análise de código javascript Auxilia na validação de código Objetivo: Evitar/Corrigir erros Produtividade? Menos erros, mais estável, menos tempo com correções JSHint - plugin grunt-contrib-jshint
  15. 15. JSHint - plugin grunt-contrib-jshint
  16. 16. Less A linguagem dinâmica de estilos LESS estende CSS com comportamento dinâmico como variáveis, mixins, operações e funções. Resumindo: Um pré-processador css
  17. 17. Less - Variáveis http://blog.caelum.com.br/css-facil-flexivel-e-dinamico-com-less/
  18. 18. Less - Funções de cores http://blog.caelum.com.br/css-facil-flexivel-e-dinamico-com-less/
  19. 19. Less - Mixins http://blog.caelum.com.br/css-facil-flexivel-e-dinamico-com-less/
  20. 20. Less - plugin grunt-contrib-less
  21. 21. Sass
  22. 22. Uglify - plugin grunt-contrib-uglify remover espaços, comentários, renomear variáveis etc
  23. 23. ng-annotation - plugin grunt-ng-annotate Preparar para minificar
  24. 24. Minificar CSS - plugin grunt-contrib-cssmin Minificar CSS Por que? 291 + 154 = 445 92 + 199 = 291 445 - 291 = 154Kb a menos
  25. 25. Minificar HTML - plugin grunt-contrib-htmlmim Minificar html Por que?
  26. 26. Ngdocs - plugin grunt-ngdocs /** * @ngdoc directive * @name prodata-arquitetura-directive.directive:pdStatsCard * @element pd-stats-card * @scope * @restrict E * * @description * Cria um card de dashboard estilizado com informações em valores * * @param {string} label Texto a ser exibido na parte superior do card * @param {string} valor Texto a ser exibido na parte inferior do card * @param {string} cor Cores pré-definidas **/
  27. 27. Ngdocs - plugin grunt-ngdocs
  28. 28. Ngdocs - plugin grunt-ngdocs
  29. 29. Gulp Ferramenta de automatização de tarefas Mesmas funcionalidades do Grunt Forma diferente de definir/escrever as tarefas Mais rápido que o Grunt ?! Você escolhe :)
  30. 30. Yeoman Ferramenta SCAFFOLDING para desenvolvimento web Automatiza tarefas - Utiliza grunt e bower Criar um projeto Boas práticas Tudo configurado Inicio rápido Criar um Controller Criar um Service Criar uma directive
  31. 31. google design http://www.google.com/design/
  32. 32. material design http://www.google.com/inbox/
  33. 33. material design
  34. 34. Angular Material https://material.angularjs.org/
  35. 35. Boas práticas by John Papa https://github.com/johnpapa/angular-styleguide/
  36. 36. Fonte Awesome ● 585 ícones na versão 4.4.0 ● Sem javascript ● Tamanhos infinitos: como os ícones estão em um arquivo fonte (vetor), você pode aumentar e diminuir sem perda de qualidade ● Todas as cores: use qualquer cor para o seu ícone
  37. 37. Fonte Awesome
  38. 38. Testando aplicações Angularjs
  39. 39. Jasmine é um framework de desenvolvimento orientado a comportamento para testes de códigos em javascript. Não depende de nenhum outro framework de javascript. Possuí uma sintaxe limpa e óbvia Testes unitários e de funcionalidades Mais utilizado pela comunidade javascript Testando aplicações Angularjs
  40. 40. by Angularjs Test runner (rodador de testes) Rodar em diferentes browsers Abrirá o browser por debaixo dos panos e fará a ponte entre o browser e os testes. NodeJS Testando aplicações Angularjs
  41. 41. PhantomJS Para usar somente o terminal, e não precisar ter uma janela do navegador aberta Testando aplicações Angularjs
  42. 42. by Angularjs Um framework de teste end-to-end para aplicações AngularJS Ele executa testes direto no seu aplicativo em um navegador real, interagindo com ele como se fosse um usuário Roda em cima do Selenium NodeJS Testando aplicações Angularjs
  43. 43. Curso de Angularjs Curso de AngularJs in Company - 24h Próximo curso - Senai Fatest - 03/11 à 20/11 Nova turma em dezembro http://goo.gl/forms/fFWvxAwknR https://plus.google.com/+JulliermeBarros
  44. 44. julliermebarros@gmail.com julliermebarros.com plus.google.com/+JulliermeBarros PERGUNTAS?

×