1. Boas Práticas em Aplicações Silverlight 2.0 (baseado na sessão DevDays WUX301 por Pedro Fortes) 28MAI09 - ViaTecla Software Sérgio Agostinho (sagostinho@viatecla.com) Gustavo Arranhado (garranhado@viatecla.com) www.viatecla.com

2. Agenda Contexto/motivação Tópicos Experiência de Instalação Carregamento Carregamento assíncrono Search Engine Optimization Isolated Storage Design Time Experiences Parâmetros de Inicialização Conclusão Mais informações Brevemente Discussão Utilização de Media Animação do tamanho de caracteres Visibility vs Opacity XPerf Memória & Garbage Collector Localização Compressão XAP (extra)

3. CarregamentoAssíncrono (1) O XAP não deve conter ficheiros grandes Vídeos e imagens devem ser carregados assíncronamente. O site é aberto mais rapidamente. É possível tirar melhor partido da cache do browser.

4. CarregamentoAssíncrono (2) Versus

5. Search Engine Optimization (1) Como tornar uma RIA indexável? Começar com tudo o que se aplica a uma página “normal”!

6. Search Engine Optimization (2) Como tornar uma RIA indexável? Ter um conteúdo alternativo numa DIV escondida

7. Isolated Storage (1) O que é isto? “Super Cookies”  File system virtual dentro da sandbox do plug-in Silverlight Escopo por aplicação vs site Acesso via ficheiro (FileStream) vs via dicionário (objecto) Quota de 1 MiBpor omissão (pode crescer a pedido)

8. Isolated Storage (2) Acesso via ficheiro Semelhante ao System.IO.File do .NET + quotas

9. Isolated Storage (3) Acesso via dicionário Semelhante àConfigurationManager.AppSettings do .NET

10. Isolated Storage (4) Do lado do cliente Clique direito Silverlight Application Storage

11. Parâmetros de Inicialização (1) O controlo Silverlighttêm diversos parâmetros Sintaxe à láSilverlight 1.0

12. Parâmetros de Inicialização (2) O controlo Silverlighttêm diversos parâmetros Sintaxe à láSilverlight 2.0

13. Parâmetros de Inicialização (3) O InitParameters é um campo aberto Trata-se de uma lista de pares chave/valor separados por ‘;’ Como usar no código:

14. Memória & Garbage Collection (1) Como saber que memória é que o plug-in usa? O Chrome até diz, mas nem todos os browsers são assim…

15. Memória & Garbage Collection (2) Como saber que memória é que o plug-in usa? Perguntamos ao Almeida!

16. Memória & Garbage Collection (3) Por omissão não queremos ver esta informação Usamos a query string para entrar em modo debug

17. Memória & Garbage Collection (4) Resultado: maior controlo sobre a memória (Se ignorarmos o princípio da incerteza…)

18. Localização (1) Como fazer sites multicultura? Com controlos nativos isso é “dado”: Datas, separadores, moeda… Como fazer sites multilingue? Não é óbvio, mas é só seguir a “receita”

19. Localização (2) Criar resources com as strings Um por omissão e um para cada língua

20. Localização (3) Os resources têm de ser public É preciso mudar o Access Modifier, mas não chega… É preciso mudar o código fonte automaticamente gerado sempre que se modifica o resource

21. Localização (4) Fazer o binding no componente Pode ser feito em código XAML ou .NET

22. Localização (5) Definir as culturas suportadas no .csproj Este passo tem de ser feito num editor de XML externo:

23. Localização (6) Escolher a cultura Por omissão é usada a cultura do sistema operativo. Em ASP.NET pode-se usar a cultura do browser. Para uma página HTML fica hard-coded.

24. Localização (7)

25. Extra: Compressão do XAP Um ficheiro XAP é um ZIP Nada nos impede de alterar a compressão  Redução típica de ~25 % na VT

26. Experiência de Instalação Apresente Valor Crie expectativas, desvendando o que tem para oferecer Apresente uma UX consistente Reduza a resistência e o “medo” Aborde o processo de instalação numa linguagem acessível Torne o processo o mais transparente possível Simplicidade, atenção e interacção Remova distracções e ajude o utilizador a tomar a decisão certa Recompensa Entregue o que prometeu!

27. Carregamento Evite apresentar a animação de carregamento standard Crie uma animação de carregamento coerente com a estética da aplicação

28. Design Time Experiences Crie dados de teste em designer modepara que assim seja possível apresentar com maior fidelidade o que em runtime será visualizado

29. Utilização de Media Não apresente video numa resolução diferente da origem Não especifique Width e Height diferentes da source O resize “tem um preço” Se precisar de alterar a resolução de um elemento, opte por efectuar um re-encode para as dimensões desejadas (use por exemplo o Expression Encoder) Render O Silverlight tira partido de arquitecturas multi-core na renderização e apresentação de media, nestes sistemas o desempenho das suas aplicações será superior

30. Animação do tamanho de caracteres O Silverlight procura “suavizar” o rendering dos text glyphs o que pode levar à utilização extensiva de recursos e consequentemente reduzir o número dos FPS Se for imprescindível pode ser preferível a utilização de vector graphics

31. Visibility vs Opacity Se desejar colocar um objecto invisível modifique a propriedade Visibility para Collapsed em vez de colocar a Opacity a 0 Opacity tem “custos” mais elevados uma vez que o objecto ainda é hit tested e tecnicamente rendered Não esquecer os StoryBoards que fazem fade in/out animando a Opacity

32. Maisinformações DevDays 09 – Apresentação Original do Pedro Fortes http://www.devdays09.com/Pesquisa/wux301 Blog de Pedro Fortes http://blogs.msdn.com/deviations Comunidade XAML-PT http://xamlpt.com DevDays 09 – “Optimização de Performance de Web Sites” (Tiago Andrade e Silva) http://www.devdays09.com/Pesquisa/wux303 MSDN – SilverlightProperties http://msdn.microsoft.com/en-us/library/system.web.ui.silverlightcontrols.silverlight_properties(VS.95).aspx SearchEngineOptimization – Sessão Interna do Pedro Lameiras http://sharepoint.viatecla.pt/devvt/Lists/Sessoes/DispForm.aspx?ID=12

33. Brevemente num cinema perto de si Desenvolvimento Web com Silverlight e WCF Silverlight3.0 …

34. Obrigado pela vossa atenção!