Javascript: No Navegador e Além

1.293 visualizações

Publicada em

Boas Práticas para o desenvolvimento de aplicações com JavaScript. O Uso dessas práticas podem ser aplicadas não necessariamente só a aplicações web, mas em uma gama impressionante de outras plataformas.

Publicada em: Tecnologia
0 comentários
4 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

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

Nenhuma nota no slide

Javascript: No Navegador e Além

  1. 1. Javascript : no navegador e alémJavascript : no navegador e além PHP Conference 2010PHP Conference 2010
  2. 2. PHPConference Brasil 2010 - Duodraco Duodraco...Duodraco... ● Desenvolvimento web desde 2002 ● Análise, desenvolvimento, arquitetura ● Zend Certified Engineer '07 ● Certified Scrum Master ● Analista no TiqueImóveis ● Evangelista PHP
  3. 3. PHPConference Brasil 2010 - Duodraco ObjetivosObjetivos
  4. 4. PHPConference Brasil 2010 - Duodraco Falaremos hoje sobreFalaremos hoje sobre ● Javascript ● História ● Boas práticas ● Importantes Desconhecidos ● JS sem navegador ● PHP
  5. 5. PHPConference Brasil 2010 - Duodraco HistóriaHistória ● Criado para a Netscape em 1995 ● LiveScript ● Colaboração da Sun ● Java: nome e sintaxe parecidos ● Gerou o ECMAScript ● Tornando-se um padrão ● Este é base do ActionScript
  6. 6. PHPConference Brasil 2010 - Duodraco VersõesVersões ● 1.0 – Março de 1996 ● 1.1 – Agosto de 1996 ● 1.2 – Junho de 1997 ● 1.3 – Outubro de 1998 ● Ecma-262 – 1ª e 2ª edições ● 1.5 – Novembro/2000 – ECMA-262 3ªed. ● Subset da linguagem futuramente torna-se JSON
  7. 7. PHPConference Brasil 2010 - Duodraco VersõesVersões ● 1.6 – Nov/05 – 1.5 + Array Extras + E4X … ● 1.7 – Out/06 – 1.6 + Generators + Iterators … ● 1.8 – Jun/08 – 1.7+Gen. Expressions/Closures … ● 1.8+(1.9) ● Firefox4 ● JSON encode/decode nativo ● Function bind ● ...
  8. 8. PHPConference Brasil 2010 - Duodraco DHTMLDHTML ● Dynamic HTML ● HTML + CSS + Javascript ● Ações e eventos JS ● HTML não “estático” ● Animações ● Elementos GUI ● … muito besteirol
  9. 9. PHPConference Brasil 2010 - Duodraco AjaxAjax ● Asynchronous Javascript And XML ● XMLHttpRequest assíncrono ● ActiveX no Internet Explorer ● Requisição HTTP ● Processamento de XML – DOM ● Processamento de XSL ● Deveria ser usado com Webservices
  10. 10. PHPConference Brasil 2010 - Duodraco FrameworksFrameworks
  11. 11. PHPConference Brasil 2010 - Duodraco FrameworksFrameworks ● Simplifica o desenvolvimento ● Implementam funcionalidades complexas ● Com interfaces simples ● Introduzem facilitadores na sintaxe ● Interface com o Usuário ● Gráficos ● HTML5
  12. 12. PHPConference Brasil 2010 - Duodraco FrameworksFrameworks ● jQuery ● Prototype ● ExtJS ● Dojo ● GWT ● Mootools ● RaphaëlJS (SVG) ● jQueryUI ● jQueryMobile ● script.aculo.us ● YUI ● moo.fx ● qooxdoo
  13. 13. PHPConference Brasil 2010 - Duodraco Estilo de CodificaçãoEstilo de Codificação ● Organização ● Legibilidade ● Manutenabilidade ● Evita erros por má codificação ● Sintaxe principalmente
  14. 14. PHPConference Brasil 2010 - Duodraco Estilo de CodificaçãoEstilo de Codificação ● Endentação - tabulação com espaços (quatro) ● Limite de 80 caracteres ● Chaves de blocos lógicos ● Quebra de linha após abertura ● Nomenclatura compreensível ● Variáveis, atributos, métodos, funções ● Utilizar formatação uniforme nas declarações ● OFormatoCamelizadoÉMuitoBom
  15. 15. PHPConference Brasil 2010 - Duodraco Estilo de CodificaçãoEstilo de Codificação ● Terminar os comando com ; ● Codificar de maneira autodescritiva ● Evitar eval e with ● Utilizar-se de JSON
  16. 16. PHPConference Brasil 2010 - Duodraco Estilo de CodificaçãoEstilo de Codificação
  17. 17. PHPConference Brasil 2010 - Duodraco OOPOOP ● Javascript é uma linguagem oo ● Baseado em prototipação ● Classes com visibilidade ● Public ● Private ● Privileged – WTF?
  18. 18. PHPConference Brasil 2010 - Duodraco Atributos PrivadosAtributos Privados ● Não têm acesso externo diretamente ● Declarados como parâmetro ou ● Com var dentro da “Classe”
  19. 19. PHPConference Brasil 2010 - Duodraco Métodos privadosMétodos privados ● Não têm acesso direto externamente ● Declarados como function dentro da “Classe”
  20. 20. PHPConference Brasil 2010 - Duodraco Atributos PúblicosAtributos Públicos ● Acesso externo e interno ● Criado com ● this.atributo ● Classe.prototype.atributo – Pode ser um Function (Método Público)
  21. 21. PHPConference Brasil 2010 - Duodraco Métodos PrevilegiadosMétodos Previlegiados ● Métodos Públicos com acesso a itens privados ● this.metodo = function(){...}
  22. 22. PHPConference Brasil 2010 - Duodraco Um ExemploUm Exemplo
  23. 23. PHPConference Brasil 2010 - Duodraco HerançaHerança ● Sim, existe ● prototype ● apply|call
  24. 24. PHPConference Brasil 2010 - Duodraco E4XE4X ● EcmaScript for (4) Xml ● Interpretação de XML nativa ao Javascript ● Atualmente só funciona com Firefox
  25. 25. PHPConference Brasil 2010 - Duodraco JSONJSON ● Javascript Object Notation ● Objetivo: legível para humanos ● Douglas Crockford ● Baseado em um Subset do JS – 1999 ● Adoção do Yahoo e Google em 2005~06
  26. 26. PHPConference Brasil 2010 - Duodraco JSON NativoJSON Nativo ● Encode e decode ● Firefox 3.5+, Webkit, Opera 10.5+, Webkit ● JSON.stringify({name:”Duodraco”,year:1981}) ● JSON.parse('{teste:”Uma string JSON”}')
  27. 27. PHPConference Brasil 2010 - Duodraco JSON-RPCJSON-RPC ● Remote Procedure Call ● HTTP ou Sockets ● Bidirecional ● Request: ● { "method": "helloWord", "params": ["PHPConf"], "id": 1} ● Response: ● { "result": "Olá PHPConf", "error": null, "id": 1}
  28. 28. PHPConference Brasil 2010 - Duodraco XULXUL ● Xml UserInterface Language ● Mozilla ● Firefox,Thunderbird,Seabird,Flock, etc ● XML+JS
  29. 29. PHPConference Brasil 2010 - Duodraco NoSQLNoSQL ● Trabalham com documentos JSON ● Internamente com Javascript ● MongoDB ● MapReduce ● CouchDB ● MapReduce, Validações, transformações internas
  30. 30. PHPConference Brasil 2010 - Duodraco NoSQLNoSQL ● Requisição: ● localhost/php_conf/palestrantes/?limit=1 ● Resposta: {“ok”:1,”results”:[ {“name”:”Duodraco”,”_id”:“$oid”:”4b7ee0731d41c8137e000002”}} ],”id”:1}
  31. 31. PHPConference Brasil 2010 - Duodraco Embedded - WidgetsEmbedded - Widgets ● Apple ● Dashboard Widgets ● Extensões Safari5 ● Microsoft Gadgets ● Yahoo Widgets ● Google Desktop
  32. 32. PHPConference Brasil 2010 - Duodraco EmbeddedEmbedded ● Adobe ● PDF com suporte a Javascript ● Photoshop, Illustrator, InDesign, Dreamweaver ● OpenOffice ● Google Docs - Spreadsheets ● Phillips – Pronto Script ● Sphere
  33. 33. PHPConference Brasil 2010 - Duodraco ServerSideServerSide JavaScriptJavaScript ● Netscape – 1996 - LiveWire ● Como nosso PHP: script no servidor ● Aptana Jaxer ● Opera – Unite ● IIS+ASP ● JScript
  34. 34. PHPConference Brasil 2010 - Duodraco ScriptingScripting ● Java 1.6 ● javax.script ● Qt ● QtScript
  35. 35. PHPConference Brasil 2010 - Duodraco LinguagensLinguagens ● Objective-J ● CoffeeScript ● JSON
  36. 36. PHPConference Brasil 2010 - Duodraco AplicaçãoAplicação ● Flash ● ActionScript ● AIR – Adobe Integrated Runtime ● XUL ● GJS ● GnomeShell ● Kjsembed | Kross ● plasmoid
  37. 37. PHPConference Brasil 2010 - Duodraco PlasmoidPlasmoid ● “Widgets” para a plataforma desktop KDE ● Podem ser escritos em diversas linguagens ● Python, C++, Ruby, Java … e Javascript ● Tem uma estrutura simples ● Podem acessar dados do sistema
  38. 38. PHPConference Brasil 2010 - Duodraco PHPPHP ● JSON ● Arquivos de Configuração ● XML, INI, YAML,etc... ● Transporte de Informação ● Leve e simples
  39. 39. PHPConference Brasil 2010 - Duodraco PHP – Parsers JSONPHP – Parsers JSON ● Zend_JSON ● PEARJson ● XmlRpc Json ● PHP
  40. 40. PHPConference Brasil 2010 - Duodraco json_encodejson_encode json_decodejson_decode ● json_encode($valorPHP,$options = 0); ● json_decode(“String JSON”); ● http://php.net/json_encode ● http://php.net/json_decode
  41. 41. ConclusãoConclusão
  42. 42. Dúvidas???Dúvidas???
  43. 43. PHPConference Brasil 2010 - Duodraco ● http://duodra.co ● o@duodra.co ● @duodraco [twitter e identi.ca] ● facebook.com/duodraco ● linkedin.com/in/andersoncasimiro ● slideshare.net/duodraco ContatoContato

×