Ir para o conteúdo
  • Revista PROGRAMAR: Já está disponível a edição #60 da revista programar. Faz já o download aqui!

taviroquai

Gerar javascript consuante o browser

Mensagens Recomendadas

taviroquai

Let’s use our Gmail mobile app as an example: it comes in various forms, including the smartphone user interface (UI), the tablet UI, and the offline UI. All these UIs are slightly different. We don’t want to download the Javascript code for all different UIs to the browser. Instead, our server inspects which browser or device you are using and creates the exact Javascript that you need. The selection of mods can be triggered by browsers, devices and even “conditional features”.

Fonte: http://gmailblog.blogspot.com/2011/12/developing-gmails-new-look.html

Alguém que desenvolva desta forma poderia colocar aqui um exemplo básico do uso desta técnica?

Obrigado.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
taviroquai

[...]and creates the exact Javascript that you need.[...]

É esta parte que me intriga... sei que o Gmail foi desenvolvido com base no GWT... será mais por ser o GWT que esta técnica é mais facil de ser usada? Apenas com javascript... não me parece ser fácil, por isso pedi um exemplo...

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
HappyHippyHippo

Podes ter um ficheiro PHP em que o seu output é javascript, com o header("Content-type: text/javascript") para ser interpretador correctamente pelo browser ...

Tenho isso nos meus projectos para esconder o javascript de pessoas não autenticadas.

Será só aplicar a mesma filosofia para fazer output de javascript para um browser/tipo de browser especifico.


IRC : sim, é algo que ainda existe >> #p@p

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
bruno1234

Uma forma de gerares o script que necessitas de acordo com o browser, é verificares se o browser tem determinada funcionalidade e através disso carregares um script ou a alternativa.

É uma das formas que tem sido usada para integrar funcionalidades HTML5 em browsers novos e manter á mesma compatibilidade com os antigos que não suportam total ou parcialmente HTML5.

Para isso, podes recorrer a duas bibliotecas:

- Modernizr: http://www.modernizr.com/

e

- YepNope: http://yepnopejs.com/


Matraquilhos para Android.

Gratuito na Play Store.

https://play.google.com/store/apps/details?id=pt.bca.matraquilhos

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
mjamado

Repara (do meu site pessoal):

<script type="text/javascript" charset="utf-8" src="http://www.dreamsincode.com/_include/min/index.php?g=js_20110326050000"></script>

Lá dentro, posso fazer o que me apetece - incluindo distinção de browsers.

No caso concreto, não o faço, mas faço outras coisas: junto todo o JS que é necessário a uma página (em vez de incluir uma coisa de cada vez), faço distinção entre várias zonas do site, minifico o JS (retirar comentários, quebras de linha desnecessárias e por aí fora) e ainda faço o output comprimido (em gzip).

Passar o JS (e, já agora, também o CSS) por um componente server-side só tem vantagens.


"Para desenhar um website, não tenho que saber distinguir server-side de client-side" - um membro do fórum que se auto-intitula webdesigner. Temo pelo futuro da web.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
taviroquai

@Happy e @mjamado

Sim... já faço isso de alguma forma, mas nunca elevei a tanta complexidade como disseste mjamado... a desvantagem é mesmo a velocidade no 1º pedido (suponho que depois coloques em alguma cache e não tenhas que repetir esses procedimentos todos no server para cada pedido). Pode ser bom mas acho estupido esse trabalho no lado do server...  :cheesygrin:

@bruno1234

Desconhecia essas libs... e gostei do que vi... vou ler!  ;)

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
HappyHippyHippo

Pode ser bom mas acho estupido esse trabalho no lado do server

Pensa desta forma :

o servidor demora 10 vezes mais a enviar um ficheiro do que a fazer o trabalho todo.

se tens de enviar 3 ficheiro, faz as contas


IRC : sim, é algo que ainda existe >> #p@p

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
mjamado

@Happy e @mjamado

Sim... já faço isso de alguma forma, mas nunca elevei a tanta complexidade como disseste mjamado... a desvantagem é mesmo a velocidade no 1º pedido (suponho que depois coloques em alguma cache e não tenhas que repetir esses procedimentos todos no server para cada pedido). Pode ser bom mas acho estupido esse trabalho no lado do server...  :cheesygrin:

É um balanço...

1. Na realidade, o pedido fica em duas caches: existe uma no servidor (isto é, depois de minificado e comprimido), e existe, claro, outra no browser do utilizador - se o utilizador não for um webdev ou um maluquinho da privacidade, a maioria das vezes o pedido nem vai ao servidor.

2. Fazer vários requests é mau de duas maneiras:

2.1. Mesmo assumindo que os scripts já estão minificados e comprimidos, cada request tem um overhead associado aos cabeçalhos, tanto do pedido como da resposta, e sempre são alguns bytes que rapas;

2.2. Por outro lado, não te esqueças que os pedidos JS (e CSS) são dom blocking e, ainda por cima, os browsers têm limites quanto à quantidade de pedidos paralelos ao mesmo domain name. No caso do JS, ainda é mais grave, porque o download é feito em série, independentemente do domain (existem truques para evitar isso, mas, guess what, também são dom blocking).


"Para desenhar um website, não tenho que saber distinguir server-side de client-side" - um membro do fórum que se auto-intitula webdesigner. Temo pelo futuro da web.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
taviroquai

Obrigado pessoal. Vou considerar as vossas sugestões.

Já agora destas 10 frameworks javascript para web mobile, quais são as que vocês conhecem/recomendam?

http://sixrevisions.com/javascript/mobile%C2%A0web-development-frameworks/

Como já devem ter percebido, preciso de uma plataforma consistente e activa que possa usar tanto para browsers desktop como para browsers mobile... algo que baste trocar 2 ou 3 linhas e funciona em nas duas versões. :cheesygrin:

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
bruno1234

Dessas só usei jQuery Mobile e gostei. Integra muito bem com o asp.net mvc (que é o que costumo usar).

Mas antes de usares uma biblioteca dessas, vê as necessidades que tens, se conseguires o que precisas com CSS (vê as novidades do CSS3) facilita-te o trabalho.


Matraquilhos para Android.

Gratuito na Play Store.

https://play.google.com/store/apps/details?id=pt.bca.matraquilhos

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
mjamado
Já agora destas 10 frameworks javascript para web mobile, quais são as que vocês conhecem/recomendam?

http://sixrevisions.com/javascript/mobile%C2%A0web-development-frameworks/

Esse artigo foi escrito à sapateiro: A Appcelerator Titanium não é uma web development framework: é uma framework para desenvolvimento de aplicações nativas para Android, iOS e Blackberry, em que a linguagem da abstracção, por acaso, é JavaScript. Precisas de ter os três SDK (e, consequentemente, um Windows - para Blackberry - e um Mac OS - para iOS) para poderes compilar as aplicações (os comandos da framework são convertidos para o respectivo código nativo).

As outras, à excepção do jQuery Mobile, não conheço, mas se tem um erro de palmatória numa, cuidado com as outras.

Mas antes de usares uma biblioteca dessas, vê as necessidades que tens, se conseguires o que precisas com CSS (vê as novidades do CSS3) facilita-te o trabalho.

Tal e qual.


"Para desenhar um website, não tenho que saber distinguir server-side de client-side" - um membro do fórum que se auto-intitula webdesigner. Temo pelo futuro da web.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
taviroquai

Porra... estou maravilhado com o jQuery Mobile... ainda não escrevi uma linha de js e já tenho todas as páginas a funcionar por ajax, inclusivé com formulários e redirects... AWESOME! :cheesygrin:

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
falco

Não façam browser detection... Há n browsers diferentes e podem aparecer mais, sem contar que diferentes versões do mesmo browser podem-se dar bem, ou mal com o mesmo código de Javascript. Em pouco tempo acabam com demasiado código para gerir. Façam feature detection! Como aliás o Bruno1234 já tinha recomendado.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
brunoais

2.2. Por outro lado, não te esqueças que os pedidos JS (e CSS) são dom blocking e, ainda por cima, os browsers têm limites quanto à quantidade de pedidos paralelos ao mesmo domain name. No caso do JS, ainda é mais grave, porque o download é feito em série, independentemente do domain (existem truques para evitar isso, mas, guess what, também são dom blocking).

Bem... not really. Devo dizer que estás enganado.

O HTML4 já tinha uma solução para isso:

http://www.w3.org/TR/html4/interact/scripts.html#adef-defer

Ou indicas que isto não funciona? Comigo funciona:

Firefox 3.6.25 e FF 8.0.1

Chrome 16.0.912.63

Opera 11.

Não façam browser detection... Há n browsers diferentes e podem aparecer mais, sem contar que diferentes versões do mesmo browser podem-se dar bem, ou mal com o mesmo código de Javascript. Em pouco tempo acabam com demasiado código para gerir. Façam feature detection! Como aliás o Bruno1234 já tinha recomendado.

+1


"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
mjamado

Bem... not really. Devo dizer que estás enganado.

O HTML4 já tinha uma solução para isso:

http://www.w3.org/TR/html4/interact/scripts.html#adef-defer

Isso só serve para deferir a execução do script, não o seu download, que era ao que me estava a referir. Da última vez que verifiquei, o Firefox só paralelizava dois downloads de CSS ou JS por defeito (ao mesmo domínio).

E não, não é suportado de forma consistente em todos os browsers. Tens os teus testes engatados, o Opera não suporta, e só é suportado no Safari há muito pouco tempo.


"Para desenhar um website, não tenho que saber distinguir server-side de client-side" - um membro do fórum que se auto-intitula webdesigner. Temo pelo futuro da web.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
brunoais

Isso só serve para deferir a execução do script, não o seu download, que era ao que me estava a referir. Da última vez que verifiquei, o Firefox só paralelizava dois downloads de CSS ou JS por defeito (ao mesmo domínio).

E não, não é suportado de forma consistente em todos os browsers. Tens os teus testes engatados, o Opera não suporta, e só é suportado no Safari há muito pouco tempo.

Comigo funciona para o download do script.

Usei um script serverside em php para gerar o js (um simples alert). Nesse script usei o sleep() com 7 segundos. A página demora mais 7 segundos a ficar considerada completa mas o resto do HTML após essa tag script é todo interpretado e executado (no meu teste). Há alguma coisa em falta no meu teste? Preciso mesmo de usar um ficheiro de tamanho exorbitante e o sleep() n chega?


"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
mjamado

Qual é a parte de "não é suportado de forma consistente em todos os browsers" e "paralelizava" que não entendes?


"Para desenhar um website, não tenho que saber distinguir server-side de client-side" - um membro do fórum que se auto-intitula webdesigner. Temo pelo futuro da web.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
brunoais

Qual é a parte de "não é suportado de forma consistente em todos os browsers" e "paralelizava" que não entendes?

"não é suportado de forma consistente em todos os browsers"


"[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31

Life is a genetically transmitted disease, induced by sex, with death rate of 100%.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
mjamado

"não é suportado de forma consistente em todos os browsers"

Isto é, o suporte dado pelos vários browsers não é do mesmo nível e não tem o mesmo comportamento. Como não podemos adivinhar como cada browser se vai comportar (acho que já está assente que não se faz distinção de browser mas sim de features), diz-se que o suporte não é consistente. E, quando assim é, não se deve usar.

isto.

Finalmente, para ver se entendes qual é o problema duma vez por todas, o problema neste tópico em concreto nem é o bloqueamento da DOM, é o (não) paralelismo dos downloads, que podem levar, ou não, ao bloqueamento da DOM. Apenas um request é apenas um potencial bloqueio, em vez de quatro ou cinco.


"Para desenhar um website, não tenho que saber distinguir server-side de client-side" - um membro do fórum que se auto-intitula webdesigner. Temo pelo futuro da web.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
taviroquai

2.2. Por outro lado, não te esqueças que os pedidos JS (e CSS) são dom blocking e, ainda por cima, os browsers têm limites quanto à quantidade de pedidos paralelos ao mesmo domain name. No caso do JS, ainda é mais grave, porque o download é feito em série, independentemente do domain (existem truques para evitar isso, mas, guess what, também são dom blocking).

Hmm... então considerando que se deve fazer feature detection que só é possivel no lado do cliente, como seria o flow mais correcto usando menos pedidos?

Isto considerando um 1º pedido a uma página principal ex. index:

1. Pedido ao endereço;

2. Devolve a página com JS inline (apenas JS necessário para fazer feature detection);

3. Carregamento da DOM; Renderizar página (com css);

4. execução do JS necessário para realizar a deteção de features

5. Pedido de JS extra (conforme as features do browser) - Apenas 1 ficheiro (aqui entendo porque comprimes tudo num só ficheiro)

6. Execução de JS extra

Se isto estiver correcto? Se sim, são feitos apenas 2 pedidos (sem contar com css).

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites
mjamado
Hmm... então considerando que se deve fazer feature detection que só é possivel no lado do cliente, como seria o flow mais correcto usando menos pedidos?

Isto considerando um 1º pedido a uma página principal ex. index:

1. Pedido ao endereço;

2. Devolve a página com JS inline (apenas JS necessário para fazer feature detection);

3. Carregamento da DOM; Renderizar página (com css);

4. execução do JS necessário para realizar a deteção de features

5. Pedido de JS extra (conforme as features do browser) - Apenas 1 ficheiro (aqui entendo porque comprimes tudo num só ficheiro)

6. Execução de JS extra

Se isto estiver correcto? Se sim, são feitos apenas 2 pedidos (sem contar com css).

Se quiseres mesmo, mesmo, mesmo distinguir JS dependendo das features do browser, sim, será mais ou menos isso.

O que eu não entendo é porque é que queres distinguir... Vem tudo de uma vez só (incluindo uma potencial biblioteca de feature detection) e depois só usas o que podes. O peso (em bytes) de mais uma ou duas classes que acabam por não ser usadas, depois de minificado e comprimido, é negligenciável, quando comparado com o tamanho da(s) biblioteca(s) principal(ais), tipo Prototype ou jQuery.


"Para desenhar um website, não tenho que saber distinguir server-side de client-side" - um membro do fórum que se auto-intitula webdesigner. Temo pelo futuro da web.

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!

Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.

Entrar Agora

×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade. Este site usa cookies para disponibilizar funcionalidades personalizadas. Para mais informações visite esta página.