O celular nunca mudou tanto desde sua invenção quanto mudou com a chegada da banda larga. Com sua história recente mais relacionada com Internet as coisas acontecem mais ou menos da mesma maneira: o custo de desenvolvimento, promoção e distribuição fica cada vez mais barato, permitindo a criação de aplicativos por mais pessoas.
Como vemos atualmente, 3 novas “grandes” plataformas estão sendo construídas: iPhone OS, Android, webOS. Todas são plataformas já consideradas sucedidas e apesar de dizerem que já fechou a conta e o futuro é iPhone, Android e WebOS eu acho que em breve outras também adotarão uma interface boa o suficiente combinada com o WebKit (touch é o grande trunfo do iPhone, Androids e webOS).
Então o mercado está aquecido. Isso é verdade?
As empresas que se arriscaram a construir essas plataformas conseguiram uma base instalada absurda em pouco tempo.
Em novos mercados a concorrência é baixa e a audiência de cada “player” é alta. Por isso muitos estão ganhando com publicidade em apps com baixa qualidade no iPhone. Também por isso outros estão ganhando com apps de boa qualidade em plataformas mais novas…
No último ano coloquei aplicações na iTunes Store e na Palm Pre Store e venho tentando tanto o modelo de publicidade quanto apps pagas.
Eu não ganho muito. Principalmente devido ao fato do AdMob ser um sistema quebrado. Mas pretendo ganhar um pouco e por isso acho interessante tornar a brincadeira um pouco mais seria: criei a página da doin apps. Não é nada muito serio (por enquanto fazemos somente nossas apps), mas também sem deixar o profissionalismo de lado.
Logo mais o Mikael faz uma logo E a gente coloca um site no ar…
Algumas dicas de jQuery eu passava para amigos, mas agora encontrei uma coleção de Excelentes truques e dicas para jQuery que traduzi, adicionei comentários, retirei o que não acho legal e agora compartilho aqui:
Se você utiliza sempre o jQuery em seus sites, uma excelente maneira de acelerar o carregamento é usar o arquivo jquery-1.2.6.pack.js diretamente do Google Code. Além de diminuir o gasto com banda, o navegador do usuário faz cache do arquivo entre os vários sites que usam essa técnica o que dará uma experiencia de navegação melhor para o visitante.
O Google tem uma infra-estrutura de espelhamento ao redor do mundo, sendo o mais rápido e melhor serviço de distribuição de conteúdo (ou CDN para os íntimos).
Aproveite os milhões de computadores do Google e faça com que o jQuery seja carregado de lá.
Existem várias ferramentas para isso, mas ao invés de combinar eu ainda prefiro minimizar separadamente os scripts e CSSs. Uso para isso o YUI Compressor do Yahoo!
Combinar acho que vale mais para o Apache ou outros WebServers, onde a quantidade de requisições no servidor importava. Hoje com Nginx e outras soluções para o problema de escalabilidade a quantidade de conexões HTTP com o servidor não é um problema tão critico.
Já vi casos que um arquivo não compactado foi a diferença entre manter 1 servidor dedicado ou precisar “comprar” um novo. Fikdik de como escalar WowWowWow.
Em um computador atual isso não demora nada, mas lembre-se que o usuário utiliza equipamentos muito piores que seu Macbook Pro. Imagine eles em seus fracos iPhones, ou pior ainda, em um Opera Mobile.
Então mantenha o seletor fora do loop:
6 – Use o minimo possivel de manipulação com o DOM
Funções como .append(), .prepend(), .after(), .before() são relativamente custosas e podem deixar as coisas lentas.
É consideravelmente lenta perto de:
Escrever no DOM somente uma vez é um pouco mais rápido. Já que aqui estamos mesmo lutando por optimizações (lembrem-se dos mobiles), vale né?
7 – Coloque tudo dentro de um elemento antes de fazer uma inserção ao DOM
8 – Use IDs em vez de classes sempre que possivel
A função de busca por com CSS3 Selector é muito legal de se usar, mas o jQuery implementa ela em JavaScript, e usando o máximo que a API do DOM deixa. Isso as vezes não é o ideal para performance, acredite.
Navegadores como o WebKit já possuem implementação nativa dessa função, indo de acordo com o que foi pensado no framework Prototype, mas lembre-se, em desktop/notebook a hegemonia é de quem não IEmplementa novidades tão cedo.
No mercado de mobile, WebKit e Opera lutam para ver quem tem o maior numero de especificações da W3C implementadas.
Uma busca por ID no DOM quase sempre é mais eficiente que a busca por classe, prefira sempre usar ID.
9 – Dê um contexto para seus seletores
Eu tenho dúvidas quanto a eficácia de contextualizar os seletores via Javascript, comparada ao uso de contexto no CSS3. De qualquer forma as seguintes formas de uso são mais rápidas do que buscar um elemento no documento inteiro.
10 – Use encadeamento de funções
Uma das características mais legais do jQuery é a possibilidade de encadear métodos. Então, por exemplo, se você deseja alterar a classe de um elemento:
Provavelmente você aprendeu isso em seus primeiros 5 minutos de leitura sobre jQuery.
Note que continua funcionando mesmo com quebras de linhas (jQuery == JavaScript), o que significa que você pode escrever código assim:
Usar encadeamento também ajuda a diminuir a quantidade de seletores.
Mas ainda é possivel ir além. Digamos que você deseja executar várias funções em um elemento mas uma das primeiras funções muda o elemento selecionado de alguma maneira:
Nós selecionamos uma tabela, descemos para buscar celulas com a classe “primeiraColuna” e então a pintamos de vermelho.
Digamos agora que queremos colorir todas celulas com a classe “ultimaColuna” de azul. Já que usamos o método find(), filtramos todas as células que não tinham a classe “primeiraColuna”, assim seria necessario o uso de um seletor novamente ou então não poderiamos continuar encadeando, certo? Nah! O jQuery possui o metodo end() que reverte a última seleção, então você pode continuar encadeando tipo:
É também mais fácil do que você imagina escrever suas funções de forma que elas possam usar encadeamento.
Tudo que você precisa é fazer que suas funções modifiquem e retornem o mesmo elemento.
Bem legal!
11 – Saiba como usar a propriedade de animação
Quando eu comecei usar o jQuery eu adorei o fato de que é fácil usar animações pré-definidas como slideDown() e fadeIn() para conseguir alguns efeitos com incrível facilidade.
É também fácil ir ainda além por causa da facilidade que é usar o poderoso método animate().
Se você olhar os metodos slideDown() e fadeIn() dentro do framework verá que são apenas atalhos para o metodo animate().
O método animate() simplesmente pega qualquer estilo de CSS e aplica transições de um valor a outro. Então as mudanças nas propriedades width, height, opacity, background-color, top, left, margin, color, font-size e qualquer outra que você quiser podem ter animações!
É muito fácil animar todos itens do seu menu para 100 pixels usando isso.
Diferentemente de outras funções do jQuery, as animações são colocadas em fila de execução automaticamente. Se você quiser rodar uma segunda animação somente quando a primeira terminar, então é só chamar o método novamente sem precisar usar um callback.
Porém, se você você desejar que as animações ocorram no mesmo tempo, então insira ambas na mesma chamada assim:
O jQuery torna fácil adicionar eventos em elementos do DOM de forma inobstrusiva, o que é muito bom, mas adicionar muitos eventos é ineficiente. A delegação de eventos permite que você adicione em muitas situações menos eventos e atinja o mesmo resultado:
Vamos fazer uma função simples para tornar uma celula da tabela vermelha quando você clicar nela. Digamos que você tenha uma tabela com 10 colunas e 50 linhas, então são 500 delegações de eventos.
Não seria melhor se fosse possivel agregar o evento somente uma vez e então quando a tabela fosse clicada, chegar ao elemento que realmente foi clicado antes desse se tornar vermelho?
Para isso é que serve a delegação de eventos e isso é simples de implementar…
13 – Use classes (ou atributos) para armazenar estado
Essa é a maneira mais básica de guardar informação sobre um bloco de HTML. O jQuery facilita a manipulação de elementos utilizando classes, então se você precisa armazenar informações sobre o estado de um elemento, por que não adicionar uma classe extra nele?
Aqui vai um exemplo. Nós queremos criar um menu que expande. Quando você clica no botão nós queremos que o painel desça – slideDown() – quando ele tiver fechado, e que suba – slideUp() – quando estiver aberto.
Vamos começar com o HTML
Simples
Nós adicionamos uma classe extra na div de fora, que não possui outro proposito a não ser armazenar o estado do item. Então, tudo que precisamos é um evento de clique – click – para chamar o slideUp() ou o slideDown() no painel correspondente quando o botão é clicado.
if (menu_item.hasClass("expandido")) {
menu_item.removeClass('expandido').addClass('colapsado');
painel.slideUp();
} else if (menu_item.hasClass("colapsado")) {
menu_item.removeClass('colapsado').addClass('expandido');
painel.slideDown();
}
});
Esse é um exemplo bem simples, mas você pode adicionar classes extras para armazenar todos tipos de informações sobre um elemento DOM (pedaço de HTML).
De qualquer forma, melhor ainda é a próxima dica.
14 – Melhor ainda, use o método data() que é interno do jQuery para armazenar estados
O jQuery possui um metodo interno chamado data() que pode ser usado para armazenar informações de chave/valor sobre qualquer elemento DOM. Armazenar um pouco de informação é simples assim:
Nós podemos usar o exemplo da dica anterior. Vamos utilizar o mesmo HTML, porém ao invéz da classe “expandido” usamos o metodo data().
var item_menu = $(this).parent();
var painel = item_menu.find('.painel');
Para mais informações sobre os metodos data() e removeData() veja a documentação.
15 – Escreva seu proprio seletor
O jQuery possui vários seletores prontos para ajudar na seleção de elementos pelo ID, class, tag, atributo e muito mais. Mas o que fazemos quando é preciso usar seletores que vão além do que o jQuery deixa?
Bom, uma possivel solução seria adicionar classes nos elementos e usa-las para seleciona-los. Uma outra maneira é extender os seletores assim:
$('.box:mais100px').click(function() {
alert('O elemento que você clicou possui mais de 100 pixels de altura');
});
Primeiro criamos um seletor que acha qualquer elemento que é maior que 100 pixels. Depois usamos isso para adicionar uma ação de clique – click – em todos esses elementos.
O jQuery já quebra um galho ao facilitar a manipulação de elementos DOM, mas também adiciona metodos uteis para iterar, filtrar, clonar, juntar arrays ou remover elementos duplicados.
17 – Use a função “noconflict” para evitar conflitos com outros frameworks
A maioria dos frameworks para JavaScript usam o simbolo $ como atalho. Para evitar problemas existe uma solução simples, a função .noconflict() que permite definir outro atalho para o framework:
18 – Use função anonima para evitar conflitos com outros frameworks
Uma boa maneira de evitar conflitos no JavaScript (não somente com jQuery) é o uso de uma função anonima.
O que for executado dentro do bloco não muda com o escopo global, evitando problemas com nomes duplicados de variaveis e funções.
19 – Saiba quando uma imagem terminar de carregar
Use o método .load() em um elemento de imagem (IMG) com um callback. Simples assim:
É importante que o elemento já esteja no HTML.
20 – Sempre use a última versão
O framework está sendo constantemente melhorado por John Resig, seu criador. Sempre que uma versão nova sai ela possui melhoras na performance e se mantem atualizada com o que existe de novo nos navegadores.
A próxima versão do jQuery (1.3) virá com uma nova engine chamada Sizzle que além de mais rápida vai utilizar as funções querySelectorAll e getElementsByClassName já disponiveis nos navegadores mais modernos.
Então, utilize sempre a última versão.
21 – Como saber se um elemento existe?
Você não precisa checar se um elemento existe antes de manipular ele por que o jQuery simplesmente não faz nada caso o elemento não estiver no DOM. Mas as vezes você pode precisar executar algum pedaço de código que depende da existência de um elemento, para isso use:
22 – Adicione uma classe no HTML para saber que o JavaScript está disponivel
Logo que o jQuery carregar use ele para adicionar uma classe chamada “JS” na tag HTML:
Como isso só acontece quando o JavaScript (e o jQuery) estiverem prontos, você pode usar CSS para controlar quando um elemento deve aparecer somente quando o usuário estiver com JavaScript habilitado.
23 – Return ‘false’ para evitar a continuação de um evento
Quando você tem:
E adiciona um evento tipo assim:
Vai perceber que o bloco de código vai ser executado, porem o navegador irá para o endereço do link. Você pode usar “href=’#'” para evitar isso, mas assim a página irá voltar para o topo quando a ação de click for executada.
Para evitar isso, adicione um “return false;” ao fim do bloco de código:
24 – Atalho para a função “ready”
Você já deve estar acostumado a usar
Pois saiba que pode economizar um pouco de código simplesmente usando:
25 – Identifique váriaveis do tipo jQuery
Se você começar usar as dicas para evitar chamadas desnecessarias as funções do jQuery vai perceber que no seu código o número de variaveis carregando objetos jQuery irá aumentar bastante.
Para evitar que você se confunda e chame a função de seleção – $() – em um elemento que já é jQuery, identifique variaveis que carregam objetos do jQuery com um $ antes do nome.
Ufa! 25 praticas ninja para ajudar sua produtividade com jQuery. Se você tiver mais alguma boa pratica e quer compartilhar, por favor comente aqui
E se você gostou do artigo, por favor espalhe pelo mundo.
Comecei a estudar desenvolvimento para mobile recentemente. O iPhone me abriu os olhos para o que vai acontecer na industria nos próximos anos.
O jornal só morreu de verdade nesse ano. Mesmo com aumento de banda na Internet (muitas vezes gratuito por parte da operadora), no Brasil (onde não temos o Hulu) não pode se dizer que a TV está morta. Assim sendo, eu não vou dizer que a industria mobile matou toda industria de computadores pessoais. Mesmo a última sendo, tecnicamente, do século passado, ela definitivamente ainda não morreu.
Espero poder falar mais sobre o mercado na ressaca desse natal, onde tem netbook sendo vendido por 800 reais e onde todo mundo vai sair com um celular mais avançado.
Sobre desenvolvimento, tenho ouvido muitas pessoas falarem do PhoneGap. Ele é um framework para desenvolvimento no iPhone escrito em Objective-C e que usa o engine WebKit (o mesmo que o navegador Safari usa).
Toda conversa que rolou em volta da velocidade do JavaScript nos navegadores agora parece fazer bastante sentido.
O iPhone não é um aparelho esbanjando capacidade como um computador normal. A diferença em capacidade de processamento entre ele e os computadores atuais é abismal.
Não seria possível rodar JavaScript em um equipamento como o iPhone se não fossem feitas melhorias nos interpretadores de JavaScript. Assim como a Mozilla o pessoal responsável pelo WebKit também apresentaram um navegador de primeira.
Nos próximos dias vou brincar bastante com as possibilidades. Uma linguagem script como JavaScript, um framework como o jQuery, um acelerômetro, tela multi touch, câmera e GPS: diversão.
Sabe como é. Sou solteiro, moro em São Paulo e trabalho em uma startup. O que eu iria fazer depois de um dia puxado no trabalho?
Comecei a trabalhar em cima de uma versão enxuta do jQuery para rodar somente no Safari (focando o iPhone) as 10 da noite. O checkout no repositório do jQuery demorou um pouco, mas logo eu já estava com a versão mais atual e com o mais importante: os testes.
A missão era retirar toda e qualquer gambiarra do código do framework responsáveis por faze-lo passar nos testes em todos navegadores, deixando somente o que seria executado no Safari (WebKit).
Eu nunca havia trabalhado em um ambiente 100% coberto por testes. Foi bem mais fácil cumprir a missão coberto por testes. Enquanto fui retirando os browsers sniffings rodava os testes para saber se estava no caminho certo.
No final não sobrou nenhum browser sniffing no jQuery (mas eu deixei o objeto $.browser lá para quem precisar).
Aproveitei e alterei para as buscas por $(’#id’) usarem a função “document.querySelector” que é uma implementação do CSS3 Selectors da W3C. De qualquer forma isso foi mais uma brincadeira do que algo para aumentar a performance.
Antes de substituir o mecanismo de busca do jQuery para usar as funções de busca que WebKit e Firefox agora implementam, perguntei ao John Resig sobre. Segundo ele a próxima versão do jQuery vai contar com um novo seletor que saberá quando usar os métodos nativos.
Agora eu tenho essa versão do jQuery sob medida para o Safari. A diminuição no tamanho do arquivo foi minima e quem usar essa versão deve ter ganho em processamento muito pequeno (sim, estou desmotivando as pessoas a usarem). O que valeu foi o aprendizado, e agora eu sei alguns dos planos do John.
Quando o novo jQuery sair a intenção vai ser deixar somente a parte que utiliza esses métodos, esquecendo os navegadores que não implementam. Como o alvo é o Safari do iPhone, nenhum problema
O que torna ruim o desenvolvimento para mobiles hoje é a falta de padrões existentes nos navegadores.
O uso de técnicas avançadas que poderiam permitir uma melhor utilização da plataforma, da momentaneidade e da mobilidade é praticamente impossível uma vez que o acesso aos recursos do aparelho variam dependendo do fabricante e nem todos navegadores seguem padrões da industria.
Provavelmente a maior dificuldade na área é a existência de arquiteturas de hardware diferentes e também o problema de consumo de bateria.
Isso faz com que existam barreiras no desenvolvimento de navegadores que impedem a implementação de certas normas da W3C por exemplo. As grandes lutam próximos da W3C para definirem da melhor forma possivel esses padrões, mas mesmo assim, nem tudo sai como deveria.
As mentes que trabalham em empresas como Google e Mozilla não conseguem esperar que tal tecnologia seja debatida para se tornar um padrão. Eles simplesmente vão lá e implementam.
Os navegadores para Web atuais possuem centenas de características que para serem exploradas estão somente esperando a definição como padrão.
Firefox 3.0, Safari, Chrome e todos que utilizam das mais atuais ferramentas disponiveis, incluem mais ou menos a seguinte lista de “inovações” esperando para virarem tecnologias de larga adoção:
A maioria dos itens estão nas especificações do HTML 5.
iPhone
Para felicidade de todos, o WebKit (motor de renderização do Safari) já possui a maioria deles e até vai além em alguns itens, permitindo por exemplo o uso de animações com CSS.
Ok, mas se eu disse que o problema para se desenvolver em mobile é justamente a falta de padrões. Por que o suporte a um monte de coisa que ninguém mais suporta como existe no iPhone não é problema?
A plataforma do iPhone é muito melhor que a plataforma oferecida pelos outros celulares. O maior problema da entrada do iPhone em um mercado como o brasileiro é o preço, que fica elevado até para parte da classe média.
Lá fora, pela quantidade de vendas e tendencia em continuar vendendo milhões de unidades, a Apple sabe que a briga por enquanto não tem a ver com o navegador. A briga que a Apple quer travar é para ver quem vai ter a plataforma mobile com maior mercado. E para isso ela vai usar manhãs como por exemplo permitir uma experiência mais ricas nos sites e aplicações desenvolvidos para iPhone implementando inovações no WebKit.
Se a maçã ganhar, teremos algo parecido com o que ocorre com o Windows e Internet Explorer: a grande adoção do Windows é responsável pela distribuição do Internet Explorer.
Pelo menos ao contrario do que acontece com o caso do Windows, temos agora um excelente navegador que pode se tornar o líder na plataforma mobile.
Enquanto ela sai na frente podemos desenvolver nossos sites somente para iPhone, utilizando a mesma característica de cobrir os custos entregando uma experiência mais rica a cada usuário.
RSS
E a gente coloca um site no ar…
