O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
Javascript: A linguagem do futuro Ramon Felipe de Oliveira Analista de Sistema Softplan SCJA  -  SCJP  -  SCWCD
Agenda <ul><li>História Linguagens </li></ul><ul><li>Scripting X Não Scripting </li></ul><ul><li>Javascript </li></ul><ul>...
No começo...  assembly   <ul><li>Baixo Nível </li></ul><ul><li>1 linha código = 1 instrução de máquina </li></ul><ul><li>D...
Depois...  <ul><li>Linguagens de maior nível </li></ul><ul><li>Abstraem detalhes de máquina </li></ul><ul><li>Forte tipage...
Depois...  <ul><li>Um pouco menos eficientes </li></ul><ul><li>1 linha código = 5 instrução de máquina </li></ul><ul><li>1...
Um pouco depois...  <ul><li>Scripting </li></ul><ul><li>Fraca tipagem </li></ul><ul><li>Interpretada </li></ul><ul><li>1 l...
Forte tipagem é bom?  <ul><li>Tipos ajudam a gerenciar complexidade </li></ul><ul><li>Permite otimização pela dimuição de ...
Scripting  <ul><li>Maior flexibilidade </li></ul><ul><li>Maior velocidade de desenvolvimento </li></ul><ul><li>Um pouco ma...
Cada macaco no seu ganho <ul><li>SPL </li></ul><ul><ul><li>Criacão de componentes </li></ul></ul><ul><li>Scripting  </li><...
Scriptings em ascensão? <ul><li>Aumento da importância de GUI </li></ul><ul><li>Aumento da aplicabilidade </li></ul><ul><l...
Caixa de Skinner Skinner “ O problema com falsos padrões”
Comparativo desenvolvimento
 
Origens <ul><li>Javascript surgiu em 1995 e  quando lançado se chamava LiveScript </li></ul>Brendan Eich Brendan Eich
Características <ul><li>Pequena </li></ul><ul><li>Interpretada (compilada) </li></ul><ul><li>Sofisticada </li></ul><ul><li...
Objeto em JS
Sintaxe Literal <ul><li>var obj = {  </li></ul><ul><li>nome: “Fusca&quot;,  </li></ul><ul><li>detalhes: {  </li></ul><ul><...
Functions
Functions
Função add <ul><li>function add(x, y) {  </li></ul><ul><ul><li>var total = x + y;  </li></ul></ul><ul><ul><li>return total...
Função add <ul><li>var add = function(x, y) {  </li></ul><ul><ul><li>var total = x + y;  </li></ul></ul><ul><ul><li>return...
 
<ul><li>function add() {  </li></ul><ul><ul><li>  var soma = 0;  </li></ul></ul><ul><ul><li>  for (var i = 0, j = argument...
Herança por Protótipo
Herança por Protótipo
Problema
<ul><li>function criarPessoa(nome, sobrenome) { </li></ul><ul><li>return { </li></ul><ul><li>nome: nome, </li></ul><ul><li...
> p = criarPessoa(“João&quot;, “Silva&quot;);  > nomeCompleto(p)  João Silva > nomeCompletoInvertido(p)  Silva, João Apesa...
<ul><li>function criarPessoa(nome, sobrenome) { </li></ul><ul><li>return { </li></ul><ul><li>nome: nome, </li></ul><ul><li...
> s = criarPessoa(“João&quot;, “Silva&quot;) > s. nomeCompleto()  João Silva   > s. nomeCompletoInvertido()  Silva, João
Solução 3 <ul><li>function Pessoa(nome, sobrenome) { </li></ul><ul><li>this.nome = nome; </li></ul><ul><li>this.sobrenome ...
Prototype
Closures <ul><li>function realizaSoma(a) {  </li></ul><ul><li>  return function(b) {  </li></ul><ul><li>return a + b;  </l...
Patterns <ul><li>Old school </li></ul><ul><li>Revealing Pattern </li></ul><ul><li>Custom Objects </li></ul><ul><li>Module ...
Revealing Pattern <ul><ul><li>Ver Exemplo </li></ul></ul>
TDD e javascript <ul><li>JsUnit, um framework para teste de unidade  </li></ul><ul><ul><li>JsUnit é um open source framewo...
ECMAScript 5 <ul><li>Strict Mode </li></ul><ul><li>Extensibilidade de objetos configuráveis </li></ul><ul><li>Suporte JSON...
<ul><li>Perguntas? </li></ul>
<ul><li>`  Obrigado! </li></ul>
Referências <ul><li>http://docs.jquery.com </li></ul><ul><li>http://www.json.org/ </li></ul><ul><li>http://developer.yahoo...
Próximos SlideShares
Carregando em…5
×

Tdc2010 web

919 visualizações

Publicada em

Apresentação sobre javascript, uma comparação geral das suas qualidades e do seu posicionamento no futuro. Apresentado no TDC 2010

  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Tdc2010 web

  1. 1. Javascript: A linguagem do futuro Ramon Felipe de Oliveira Analista de Sistema Softplan SCJA - SCJP - SCWCD
  2. 2. Agenda <ul><li>História Linguagens </li></ul><ul><li>Scripting X Não Scripting </li></ul><ul><li>Javascript </li></ul><ul><li>Patterns </li></ul><ul><li>Testes </li></ul><ul><li>ECMAScript 5 </li></ul>
  3. 3. No começo... assembly <ul><li>Baixo Nível </li></ul><ul><li>1 linha código = 1 instrução de máquina </li></ul><ul><li>Detalhes de máquina </li></ul>
  4. 4. Depois... <ul><li>Linguagens de maior nível </li></ul><ul><li>Abstraem detalhes de máquina </li></ul><ul><li>Forte tipagem </li></ul><ul><li>Fortan, Algol e depois C, C++, java </li></ul>
  5. 5. Depois... <ul><li>Um pouco menos eficientes </li></ul><ul><li>1 linha código = 5 instrução de máquina </li></ul><ul><li>1000 X 5000 </li></ul>
  6. 6. Um pouco depois... <ul><li>Scripting </li></ul><ul><li>Fraca tipagem </li></ul><ul><li>Interpretada </li></ul><ul><li>1 linha código = 20 instrução de máquina </li></ul>
  7. 7. Forte tipagem é bom? <ul><li>Tipos ajudam a gerenciar complexidade </li></ul><ul><li>Permite otimização pela dimuição de verificação runtime </li></ul><ul><li>Importante com estruturas e algoritmos complexos </li></ul>
  8. 8. Scripting <ul><li>Maior flexibilidade </li></ul><ul><li>Maior velocidade de desenvolvimento </li></ul><ul><li>Um pouco mais lentas </li></ul>
  9. 9. Cada macaco no seu ganho <ul><li>SPL </li></ul><ul><ul><li>Criacão de componentes </li></ul></ul><ul><li>Scripting </li></ul><ul><ul><li>União de componentes </li></ul></ul>
  10. 10. Scriptings em ascensão? <ul><li>Aumento da importância de GUI </li></ul><ul><li>Aumento da aplicabilidade </li></ul><ul><li>Internet </li></ul><ul><li>Linguagens scripting melhores </li></ul>
  11. 11. Caixa de Skinner Skinner “ O problema com falsos padrões”
  12. 12. Comparativo desenvolvimento
  13. 14. Origens <ul><li>Javascript surgiu em 1995 e quando lançado se chamava LiveScript </li></ul>Brendan Eich Brendan Eich
  14. 15. Características <ul><li>Pequena </li></ul><ul><li>Interpretada (compilada) </li></ul><ul><li>Sofisticada </li></ul><ul><li>Linguagem cliente </li></ul><ul><li>Baixa tipagem </li></ul><ul><li>Objetos são “containers” </li></ul><ul><li>Herança por protótipos </li></ul>
  15. 16. Objeto em JS
  16. 17. Sintaxe Literal <ul><li>var obj = { </li></ul><ul><li>nome: “Fusca&quot;, </li></ul><ul><li>detalhes: { </li></ul><ul><li> cor: “vermelho&quot;, </li></ul><ul><li> ano: 1988 </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  17. 18. Functions
  18. 19. Functions
  19. 20. Função add <ul><li>function add(x, y) { </li></ul><ul><ul><li>var total = x + y; </li></ul></ul><ul><ul><li>return total; </li></ul></ul><ul><li>} </li></ul>
  20. 21. Função add <ul><li>var add = function(x, y) { </li></ul><ul><ul><li>var total = x + y; </li></ul></ul><ul><ul><li>return total; </li></ul></ul><ul><li>} </li></ul>
  21. 23. <ul><li>function add() { </li></ul><ul><ul><li> var soma = 0; </li></ul></ul><ul><ul><li> for (var i = 0, j = arguments.length; i < j; i++) { </li></ul></ul><ul><ul><ul><li> soma += arguments[i]; </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><ul><ul><li>return soma; </li></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul>
  22. 24. Herança por Protótipo
  23. 25. Herança por Protótipo
  24. 26. Problema
  25. 27. <ul><li>function criarPessoa(nome, sobrenome) { </li></ul><ul><li>return { </li></ul><ul><li>nome: nome, </li></ul><ul><li>sobrenome: sobrenome </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>function nomeCompleto(pessoa) { </li></ul><ul><li>return pessoa.nome + ‘ ‘ + pessoa.sobrenome; </li></ul><ul><li>} </li></ul><ul><li>function nomeCompletoInvertido(pessoa) { </li></ul><ul><li>return pessoa.sobrenome + ', ' + pessoa.nome; </li></ul><ul><li>} </li></ul>Solução 1
  26. 28. > p = criarPessoa(“João&quot;, “Silva&quot;); > nomeCompleto(p) João Silva > nomeCompletoInvertido(p) Silva, João Apesar de funcionar, não é uma solução interessante . Provavelmente, logo existirá dezenas de funções no global namespace.
  27. 29. <ul><li>function criarPessoa(nome, sobrenome) { </li></ul><ul><li>return { </li></ul><ul><li>nome: nome, </li></ul><ul><li> sobrenome : sobrenome, </li></ul><ul><li>nomeCompleto: function() { </li></ul><ul><li> return this.nome + ‘ ‘ + this.sobrenome; </li></ul><ul><li>}, </li></ul><ul><li>nomeCompletoInvertido: function() { </li></ul><ul><li>return this.sobrenome + ', ' + this.nome; </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>Solução 2
  28. 30. > s = criarPessoa(“João&quot;, “Silva&quot;) > s. nomeCompleto() João Silva > s. nomeCompletoInvertido() Silva, João
  29. 31. Solução 3 <ul><li>function Pessoa(nome, sobrenome) { </li></ul><ul><li>this.nome = nome; </li></ul><ul><li>this.sobrenome = sobrenome; </li></ul><ul><li>} </li></ul><ul><li>Pessoa.prototype.nomeCompleto = function() { </li></ul><ul><li>return this.nome+ ' ' + this.sobrenome; </li></ul><ul><li>} </li></ul><ul><li>Pessoa.prototype.nomeCompletoInverso = function() { </li></ul><ul><li>return this.sobrenome + ', ' + this.nome; </li></ul><ul><li>} </li></ul>
  30. 32. Prototype
  31. 33. Closures <ul><li>function realizaSoma(a) { </li></ul><ul><li> return function(b) { </li></ul><ul><li>return a + b; </li></ul><ul><li> } </li></ul><ul><li>} </li></ul><ul><li>x = realizaSoma(5 ); </li></ul><ul><li>y = realizaSoma(20 ); </li></ul><ul><li>x(6) ? y(7) ? </li></ul>
  32. 34. Patterns <ul><li>Old school </li></ul><ul><li>Revealing Pattern </li></ul><ul><li>Custom Objects </li></ul><ul><li>Module Pattern </li></ul><ul><li>Lazy Function Definition </li></ul>
  33. 35. Revealing Pattern <ul><ul><li>Ver Exemplo </li></ul></ul>
  34. 36. TDD e javascript <ul><li>JsUnit, um framework para teste de unidade </li></ul><ul><ul><li>JsUnit é um open source framework, inspirado no jUnit e escrito inteiramente em javascript </li></ul></ul><ul><li>JsMock, um Mock Object Library para JavaScript </li></ul><ul><ul><li>JSMock é um Mock Object library para JavaScript que fornece ferramentas necessárias para efetivos testes interativos. </li></ul></ul>
  35. 37. ECMAScript 5 <ul><li>Strict Mode </li></ul><ul><li>Extensibilidade de objetos configuráveis </li></ul><ul><li>Suporte JSON </li></ul><ul><li>Principais browsers vão dar suporte integral </li></ul>
  36. 38. <ul><li>Perguntas? </li></ul>
  37. 39. <ul><li>` Obrigado! </li></ul>
  38. 40. Referências <ul><li>http://docs.jquery.com </li></ul><ul><li>http://www.json.org/ </li></ul><ul><li>http://developer.yahoo.com/yui/theater/ </li></ul><ul><li>https :// developer .mozilla.org/ en / javascript </li></ul><ul><li>http://javascript.crockford.com/ </li></ul><ul><li>High Performance Web Sites :: Browser Performance Wishlist </li></ul><ul><li>Best Practices for Speeding Up Your Web Site </li></ul><ul><li>http://blog.dynatrace.com/2009/11/09/101-on-jquery-selector-performance/ </li></ul><ul><li>http://www.artzstudio.com/2009/04/jquery-performance-rules/ </li></ul><ul><li>http://www.tcl.tk/doc/scripting.html </li></ul>

×