Algumas observações sobre o desenvolvimento em HTML+JS+CSS
Depois de várias semanas a trabalhar em dois projectos básicos mas sérios com HTML (5, inclusivé), Javascript (jQuery) e CSS, deixo aqui os comentários das conclusões que retirei enquanto responsável pela equipa – do ponto de vista do desenvolvimento e tendo o desenvolvimento em Flex como base de comparação. De notar que este é um post de opinião pessoal na base da minha recente experiência, pelo que algumas observações poderão mesmo estar erradas.
- IDE/apoio ao developer: A maturidade das ferramentas de desenvolvimento (Aptana+Dreamweaver+Firebug) está uns bons pontos abaixo da maturidade dos IDEs de desenvolvimento em Flex (e naturalmente JAVA).
- Frameworks: Existem “n” frameworks de desenvolvimento em JS, que puxam o JS para um patamar muito interessante, mas ainda assim correspondem a menos de 1/10 das bibliotecas disponíveis no Flex SDK. Sobra (demasiado) trabalho para os developers no desenvolvimento de componentes, ferramentas e bibliotecas utilitárias.
- Práticas:
- Copy paste: Ainda impera muito a prática do copy-paste no mundo HTML, não sendo fácil encontrar recursos bem documentados. Por outras palavras, é normal encontrar-se no site de qualquer componente Javascript o código “copy paste” simples, directo e intuitivo para colocar a coisa a funcionar; porém nem sempre disponibilizam directamente a API/documentação que é essencial para quando queremos fazer “algo mais” (exemplo: http://videojs.com ).
- OOP não é fantástico: Frameworks JS conhecidas estão relativamente bem documentadas. Porém, em vários casos a qualidade do código surpreende-me pela negativa – ainda se usa pouca composição/heranças no mundo JS. Não é que a qualidade habitual do código seja má; simplesmente não é fantástica…
- Dores de cabeça:
- Compatibilidades entre diferentes browsers e diferentes dispositivos: *Ainda* é terrível. Mesmo tendo cuidado e fazendo código “by-the-book”, há sempre um browser que estraga tudo. Ou um browser de dispositivo onde a coisa aparece de forma diferente. E mesmo depois das coisas estarem no ar, supostamente estáveis, por vezes ainda aparece a pessoa x ou y a dizer que aparece não sei quê desformatado… E há o medo do futuro: ” e se sai um browser/dispositivo novo que me lixa tudo?”
- Magia negra: Há alguns comportamentos que parecem inexplicáveis, e muitos “brick-walls” que vão surgindo pelo caminho e que só desaparecem com a experiência de quem já os enfrentou, ou com muitas pesquisas no Google.
- Video: O suporte de vídeo no HTML5 está muito abaixo da minha expectativa. Foi o meu maior “letdown”. Basicamente, algo que normalmente nos retira cerca de 20 minutos, retirou-nos cerca de 2 a 3 dias:
- O rendering de vídeo HTML5 de cada browser é ainda muito susceptível aos parâmetros de encoding. Tivemos que testar vários cenários para obter uma boa relação qualidade/bitrate/compatibilidade com browser(s). Um mesmo vídeo MP4 que corre bem no Chrome nem sempre corre bem no iPhone. Já agora, recomendo vivamente: http://diveintohtml5.org/video.html .
- Para um vídeo correr em vários/todos os browsers, é preciso colocar no servidor uma diferente cópia desse vídeo com um encoding diferente para quase cada browser: Mp4, OGV e/ou WebM. Um vídeo de 20 MB, necessitará de pelo menos 60 MB no servidor para as cópias restantes. Agora imagine-se que queremos ainda diferentes 3 bitrates para o vídeo. Multiplicando por “n” vídeos… conseguimos facilmente entupir um servidor.
- O vídeo em HTML5 nos dispositivos móveis só corre em Full Screen, mediante um “click”. Aparentemente não dá para colocar um pequeno vídeo a passar embebido num canto. Porém, no meu Droid 2 com Froyo (suporte a Flash Player 10.1) o vídeo aparece nos websites embebido nos locais correctos, sem qualquer problema.
- O vídeo em HTML5 nos dispositivos móveis não faz autoplay. Isto é propositado para gerir melhor a largura de banda (e bateria), mas devia ser opcional (não sei se é, mas por defeito o autoplay vem desligado).
- A performance está uns furos abaixo do Flash Player. O mesmo vídeo HD, em MP4 corre com fluídez no Flash Player 10.1, mas com menor fluídez em HTML5 no mesmo browser. Dá-me a impressão que se perdem cerca de 4 ou 5 frames por segundo, pois parece haver um género de “stutter”.
- Text layouting: De longe, e naturalmente, a *MELHOR* característica do mundo HTML. Isto não é novidade para ninguém, mas ainda assim é sempre importante realçar que o text layouting de HTML é centenas de vezes superior ao text layouting do Flash/Flex.
- Separacão de “contextos”: Neste aspecto, o desenvolvimento em HTML+JS+CSS é até bastante confortável e elegante.
- Performance: A performance do JS, para uma linguagem não previamente compilada, é bastante interessante, andando possivelmente a par e par com a performance do Flash Player dentro do browser SEM aceleracão por hardware, e sem recurso a PixelBender/outros. Porém, notam-se demasiado as diferenças de performance entre diferentes browsers, que têm um impacto variável na experiência do utilizador.
- Ubiquidade: No que toca a penetração, apesar dos impressionantes 98% do Flash Player (no desktop), o conjunto HTML+JS+CSS é de longe aquele que dá mais garantias que irá correr em mais browsers e, principalmente, dispositivos. *Porém* é também o mais fragmentado e problemático: tem comportamentos diferentes em diferentes browsers e dispositivos, o que em certos tipos de aplicação é assustador e completamente impensável. O Flash Player continua a ser superior no que toca a garantir o mesmo em resultado em qualquer sítio que corra – desde que corra.
Disclaimer:
Isto não é um “rant” nem serve para iniciar um “HTML vs Flash”, ou um debate daqueles acesos, mas sim um conjunto de conclusões que retirei (que podem estar erradas) e que considerei importantes para partilhar aqui. Tirei mais conclusões, mas estas são as mais relevantes. Só queria deixar três pontos explícitos de claros pontos fortes da combinação HTML+CSS+JS:
1. Se o que se pretende é uma aplicação web a correr no browser e que também abra em dispositivos móveis, HTML+CSS+JS é combinação correcta, desde que haja a consciência de que o resultado final pode variar de browser para browser (i.e. aplicações não críticas). Esqueçam (por agora) o Flash Player para este efeito, pois em telemóveis corre relativamente bem mas não é fantástico. Mas no que toca a criar aplicações instaláveis, então o Adobe Air é de longe a solução correcta, a seguir, naturalmente, às aplicações nativas.
2. Se o que se pretende é mostrar texto, formatar texto, gerir texto, saltar entre documentos, nem pensar em usar a plataforma Flash. Este é o território demarcado do HTML.
3. É uma lufada de ar fresco não termos que esperar 30 segundos em compilações sempre que se faz uma alteração ao código.
——-
João Saleiro (Webfuel)
This entry was written by and posted on December 1, 2010 at 12:29 am and filed under AJAX, Javascript. Bookmark the permalink. Follow any comments here with the RSS feed for this post.
Post a comment or leave a trackback: Trackback URL. 
This entry was written by 
This entry was written by 
This entry was written by