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

900 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

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

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
900
No SlideShare
0
A partir de incorporações
0
Número de incorporações
4
Ações
Compartilhamentos
0
Downloads
11
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide
  • Assembler é uma línguagem de baixo nível, aonde o programador é obrigado a lidar com detalhes de máquina. Cada linha programada geralmente corresponde a uma linha de máquina register allocation and procedure calling sequences
  • Lidar com detalhes de máquina deixava a programação mais complexa e lenta. Sugiram linguagens que abstraiam este problema do programador. Estas linguagens geralmente tinham forte tipagem, e delas derivaram linguagens tais como C, C++ e java
  • Estas linguagens são um pouco mais lenta quando comparada a linguagem Assembler, mas ofereciam um velocidade de desenvolvimento melhor. Cada linha de çódigo fonte geralmente geravam cinco linhas de máquinas. Geralmente cada programador programa uma mesma quantidade de linhas de código, independente da linguagem. Então para cada linha de máquina programada em Assembler, uma linguagem de alto nível geraria 5 linhas.
  • Um pouco depois do surgimento de linguagem para programar sistemas, surge a linguagens scripting. Eles geralmente tinha fraca tipagem, eram interpretadas
  • Tipos ajudam a gerenciar complexidade, possuem um melhor desempenho pela ausência de necessidade de verificação runtime e lidam melhor com estruturas e algoritimos complexos.
  • Linguagem de scripting possuem maior flexibilidade, menor complexidade e maior velocidade de desenvolvimento. São perfeitas para unir dois componentes. Porém, são um pouco mais lentas…
  • faster machines, better scripting languages, the increasing importance of graphical user interfaces and component architectures, and the growth of the Internet, have greatly increased the applicability of scripting languages GUIs now account for half or more of the total effort in many programming projects. GUIs are fundamentally gluing applications: the goal is not to create new functionality, but to make connections between a collection of graphical controls and the internal functions of the application. I am not aware of any rapid-development environments for GUIs based on a system programming language.
  • Para o usuário, javascript já ajudava muito ao evitar chamadas desnecessários ao servidor, numa época de conexões discadas
  • 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>

    ×