Workshop ExtJS4

Embed Size (px)

DESCRIPTION

Slides do Workshop de ExtJS4 ministrado na School of Net por Zaedy Sayão

Text of Workshop ExtJS4

  • 1. Workshop de ExtJS 4 + PHP pela School of Net Javascript Zaedy Sayo

2. Agenda Debugando Voltando ao bsico de JS 3. Problemas comuns Inclui todos os arquivos? Inclui na ordem correta? Inclui os arquivos corretos? Todos os arquivos esto sendo carregados e excutados? Erros bsicos de escrita If (num = 10) Case SensiBve Null !== undened 0 falso 4. Debugando Firebug Developer Tools Javascript on the y Auto complete Line ediBng Breakpoints Inspect Elements Table Navegao 5. Debugando IlluminaBons for Developers JSLint 6. Back to basics! Tipos Operadores Variables x References Objects 7. Tipos bsicos String Integer Float Object Array Boolean Date FuncBon 8. Operadores aritmLcos + - * / % ++ -- 9. Operadores lgicos e relacionais ! || >= == != === !== < 10. References A referncia para uma varivel um ponteiro para uma rea de memria onde um valor ou objeto est guardado. Exemplo: Criar uma func=on, referenci-la e pass-la 11. References PARE de usar a palavra varivel!!!! Use o termo referncia Lembre-se que na verdade um ponteiro Usaremos referncia daqui em diante 12. Referncias Globais Se no usarmos a palavra var, so tratadas como globais SO PERIGOSAS === EVIL === DEMO!!! NO USEM!!!! nicas que so permiBdas so Namespaces Sempre usem var 13. Convenes (JS) === OBRIGAO References devem comear com letra minscula Exceto quando aponta para uma Classe (construtor ou singleton) 14. Por que se usa varivel? Javascript tem Bpagem dinmica 15. References Memria 3 var a var b 3 3 16. References Memria Memria 9 3 var a var b 9 3 No h encadeamento de valor 17. References 18. References e Objects 19. References e Objects 20. Passando objetos como referncias 21. Passando objetos como referncias String, boolean, integer, null === override, sobrescreve-se o valor Objetos SO DIFERENTES! 22. FuncLons So class objects Possuem propriedades e mtodos Extend de Object Herdam de FuncBon.prototype call e apply so herdados 23. this uma referncia mgica Extremamente importante que se entenda o que e como usar Dene o escopo de execuo 24. Escopo 1. Quando uma funo executada via uma referncia var, o contexto padro de execuo (this) window 2. Quando uma funo executada via um key de um objeto, o contexto de execuo (this) o objeto ao qual o key pertence 25. Execuo padro para funes com var 26. Execuo padro para objetos func/on based 27. Qual o escopo de execuo de getNome()? 28. Qual o escopo de execuo de getNome()? 29. Forando escopo de execuo call e apply podem ser usados para forar o escopo de execuo Logo, voc tem TOTAL controle sob o escopo de execuo de qualquer funo em Javascript 30. call 31. O Problema do call Voc tem que denir todos os argumentos Ruim para refactoring 32. apply 33. HoisLng Javascript muda todas as variveis declaradas para o topo do escopo da funo 34. Objects Classe base de tudo que est dentro do Javascript Basicamente, tudo extends de Object String, Array, FuncBons, etc 35. Construtores Inicializa os objetos So nada mais do que funes que so executadas no escopo de um novo Object Apenas isso, nada mais 36. Prototype 37. Namespace Container que prov um agrupamento lgico Exemplo: diretrio Cada nome dentro de um diretrio idenBca unicamente um arquivo, mas o mesmo nome pode ser usado em diretrios diferentes 38. Namespace Exemplo: Ext.grid.Panel Ext.form.Panel MinhaApp.usuario.Panel 39. Namespace Por que usar? 40. Namespace GLOBAL === EVIL 41. Namespace O root de todos os namespaces o window object do browser Root do Ext: window.Ext ou simplesmente Ext 42. Package Namespace Package Class Ext grid Panel Namespace Package Sub-package Class Ext form eld Text 43. ExtJS Histria Extenso YUI (Yahoo! User Interface) yui-ext YUI era base Jack Slocum Virou Ext na sua verso 1.0 Na verso 1.1.1 passou a ser suportado por diversos browsers IE 6, Firefox 1.5, Safari 2, Opera 9 e outros 44. ExtJS Licena Open Source GPL v3 Comercial $329 $299 suporte H pacotes de licena 45. ExtJS Vantagens Cross-browser OO based alta reuBlizao de cdigo e alta produBvidade Tecnologia no proprietria no depende de plugins Sencha Plataform reusabilidade para uso do Sencha Touch 46. ExtJS Vantagens Deploy fcil Muito bem organizado Fcil de manter Extensvel Fcil de aprender (espero que concordem ao nal do Workshop ) 47. Sencha Produtos ExtJS 4 Sencha Touch Sencha.io Sencha Animator Ext GWT Ext Designer 48. ExtJS Baixando e Instalando 49. ExtJS API Navegao Search Vdeos Guides USE!!!!! 50. ExtJS Examples Alto nmero de exemplos Mostram o uso geral dos componentes Cdigo acessvel Devem ser SEMPRE usados!! 51. ExtJS Regras sobre o que NO fazer 1. Nunca altere os arquivos do framework 2. NUNCA 3. NEVER 4. JAMAIS 5. EM NENHUMA HIPTESE 6. Mas... EU DISSE NUNCA! 52. ExtJS Regras sobre o que NO fazer 1. No mude de uma verso para outra sem testar 2. No use mais a palavra new Ext.create 3. No programe sem ferramenta de debug 4. No programe fora das convenes 5. No misture cdigo PHP (ou outra linguagem) com seu cdigo JS 1. Mantenha seu cdigo limpo e independente de plataforma 53. ExtJS Regras sobre o que fazer 1. Abuse e use do OO 2. Use classes abstratas 3. Documente seu cdigo 1. Existem ferramentas que geram documentao para JS 4. Abuse e use de: 1. Extends 2. Override 54. ExtJS Regras sobre o que fazer 1. Use as convenes 1. Use nomes condizentes 2. Use sempre arquivo de debug em desenvolvimento 3. Use Loader em desenvolvimento 1. Jamais use em produo! 4. Tenha sempre a API a mo 5. Google sempre seu pastor! 6. Lembre-se, no nal, tudo JS! 55. ExtJS Arquivos do framework Arquivo bootstrap.js x app.js ext-debug.js Core, apenas para desenvolvimento Usar com Loader ext.js igual o ext-debug, porm minied ext-all-debug.js Todo o framework ext-all.js ext-all-debug.js minied 56. ExtJS Arquivos do framework Locale /locale/ext-lang-*.js * = pt_BR * = es ... 57. ExtJS Estrutura de pastas Do framework 58. ExtJS Estrutura de pastas Da nossa aplicao 59. Convenes === OBRIGAO Classes Deve conter apenas nmeros e letras Nmeros no so indicados Aceitos quando se referem a termos tcnicos No use underscore, hfen e outros Bpos de caracteres que no sejam alfa-numricos MinhaApp.admin_area.Login - NO FAA MinhaApp.admin.Login MinhaApp.uBl.Base64 60. Convenes === OBRIGAO Classes Devem ser agrupadas em PACKAGES, com seus respecBvos NAMESPACES, usando notao por . Devem ter ao menos 2 nveis, um do Namespace e outro do nome da classe MinhaClasse MinhaApp.MinhaClasse MinhaApp.data.MeuProxy 61. Convenes === OBRIGAO Classes O Namespace e o nome da classe devem ser usados em CamelCased. Todo o resto deve estar em minsculo MinhaApp.Admin.MinhaClasse MinhaApp.admin.MinhaClasse 62. Convenes === OBRIGAO Classes Classes que no so do framework nem fornecidas pela Sencha no podem usar o namespace Ext NUNCA Acrnimos devem ser CamelCased MinhaApp.server.HTTP MinhaApp.server.Hp 63. Convenes === OBRIGAO Arquivos Os nomes dos arquivos devem ser mapeados diretamente para o caminho onde esto. S deve haver uma classe por arquivo Ext.uBl.Observable caminhoApp/src/Ext/uBl/Observable.js MinhaApp.server.Hp caminhoApp/src/MinhaApp/server/Hp.js 64. Convenes === OBRIGAO Mtodos e variveis Deve conter apenas nmeros e letras Nmeros no so indicados Aceitos quando se referem a termos tcnicos No use underscore, hfen e outros Bpos de caracteres que no sejam alfa-numricos Devem sempre ser camelCased. Essa regra tambm se aplica a acrnimos 65. Convenes === OBRIGAO Mtodos e variveis Mtodos: base64Encode() getHtml() x getHTML() Variveis: var base64Encoder var xmlReader 66. Convenes === OBRIGAO Propriedades Mesmas regras de mtodos e variveis, exceto no caso staBc StaBc properBes devem ser sempre upper-cased (maiscula) Ext.MessageBox.YES = SIM MinhaApp.math.MinhaClasse.PI = 3.14 67. Ext.dene e Ext.create 68. Gefers e Sefers 69. Extends 70. Mixins Herana MlBpla Bastante usados no framework Observable State Draggable ..... 71. Ext.Loader Prov carregamento de classes sob demanda Sncrono e assncrono Baseado em controle de dependncia Pode ser usado para praBcamente toda a aplicao Muito fcil de usar Menos HTML que se escreve Alguns tricks 72. Ext.Loader Sncrono Carrega usando XHR Vrias desvantagens (mais do que o assncrono) Limitado ao mesmo domnio de origem Requer um web server Horrvel para debugar! 73. Ext.Loader Assncrono Soluo: use Ext.require() Antes do Ext.onReady() Usar carregamento assncrono Adiciona script tags no HEAD Muito melhor para debugar Cross-domain No precisa de web server Problema: deve-se especicar todas as dependncias antes da classe ser instanciada 74. Ext.Loader Problemas gerais Muito custoso Gera vrias requisies ao servidor Problemas com cache Lento No carrega os arquivos minied Carrega classes desnecessrias Ext.require(Ext.Component) carrega items de Sprite do pacote draw 75. Ext.Loader Problemas gerais Muito custoso Gera vrias requisies ao servidor Problemas com cache Lento No carrega os arquivos minied Carrega classes desnecessrias Ext.require(Ext.Component) carrega items de Sprite do pacote draw 76. Extensions Ext foi desenvolvido para ser extendido Tire proveito disso Cuidado para no extender o component/class errado Pode causar problema de performance 77. Extensions Extendendo Panel Preciso de Docked? Title Bar? Sim? Ento extenda Panel Caso contrrio,