jQuery: biblioteca ou framework?

Esta discussão não é recente. Na verdade, é um assunto muito polêmico, e não são os tão conhecidos mamilos. Até algum tempo atrás, no próprio site oficial, o jQuery se definia como um framework, e atualmente, deixam bastante explícito que é uma biblioteca. Mas por que tanta dúvida da comunidade e dos próprios desenvolvedores? Vamos tentar entender um pouco mais cada coisa, analisando diversas fontes do nosso universo online (não, não é um jabá!). Vejamos os conceitos…

Biblioteca (or Library)

“In computer science, a library is a collection of resources used to develop software. These may include pre-written code and subroutines, preses, values or type specifications.” Wikipedia/EN

“Na ciência da computação, biblioteca é uma coleção de subprogramas utilizados no desenvolvimento de software. Bibliotecas contém código e dados auxiliares, que provém serviços a programas independentes, o que permite o compartilhamento e a alteração de código e dados de forma modular.” Wikipedia/BR

Framework (or that even)

“A software framework is a universal, reusable software platform used to develop applications, products and solutions. Software Frameworks include support programs, compilers, code libraries, an application programming interface (API) and tool sets that bring together all the different components to enable development of a project or solution.” Wikipedia/EN

“Um framework, em desenvolvimento de software, é uma abstração que une códigos comuns entre vários projetos de software provendo uma funcionalidade genérica. Um framework pode atingir uma funcionalidade específica, por configuração, durante a programação de uma aplicação. Ao contrário das bibliotecas, é o framework quem dita o fluxo de controle da aplicação, chamado de Inversão de Controle.” Wikipedia/BR

jQuery

“jQuery is a new kind of JavaScript Library. jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.” Site oficial do jQuery

Ou seja, o jQuery simplifica diversas coisas para um desenvolvimento mais rápido. jQuery é projetado para mudar a maneira que você escreve JavaScript. Mas ele não dita qual a estrutura nem qual o fluxo em que sua aplicação deve ser montada, consequentemente, por esses e outros motivos, não deve ser considerado um framework.

jQuery Mobile

“jQuery’s mobile strategy can be summarized simply: A unified user interface system that works seamlessly across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation.” Site oficial do jQuery Mobile

Quem conhece o jQuery Mobile, em seu Getting Started, já ditam qual o modelo em que sua aplicação deve seguir para poder utilizá-lo. Todas as seções, listas, navegação, campos de formulário, devem seguir à risca o modelo, a menos que seja configurado diferentemente. Com isso, todo o Javascript, CSS e imagens do framework serão utilizados para facilitar o trabalho do desenvolvedor.

And now?

Pois é, terminologia sempre geram dúvidas. Mas analisando as fontes diferenciadas, conseguimos ter uma ideia mais aprofundada. Em suma, um framework é algo que normalmente obriga uma certa forma de implementação da solução. A biblioteca, como seu próprio nome diz, é um acervo, que contém funções/métodos/padrões que irão facilitar o trabalho do desenvolvedor.

Caçando bugs na jQuery

Dan Heberden publicou no GitHub um pequeno script denominado jquery-include destinado a carregar qualquer versão da biblioteca jQuery em sua página web. Ora bolas! Por que alguém iria se importar com mais uma forma de carregamento da biblioteca jQuery se tantas e já consagradas formas existem?

O diferencial do script de Dan é a possibilidade de carregamento de qualquer versão da biblioteca com o simples acréscimo de uma query string no URL da página na qual pretendemos carregar a biblioteca. Suponha a página de um site, que usa a biblioteca jQuery versão 1.6.4, cujo URL é: http://site.com.br/exemplo.html.

O site em questão foi projetado há algum tempo, e, naquela ocasião a versão mais recente da biblioteca era a 1.6.4. Além disso o desenvolvedor usou o script de Dan para fazer a chamada da biblioteca jQuery em suas páginas.

Hoje (dia em que esta matéria foi escrita a versão da biblioteca é a 1.7.1 e já existe um versão beta, de testes, da 1.7.2 denominada 1.7.2b1. Pois bem! Quer testar o funcionamento do site com uso das versões 1.7.1 ou da 1.7.2b1? É muito provável que com a versão 1.7.1 tudo funcione normalmente, a menos que alguma funcionalidade prevista na versão 1.6.4 tenha sido tornado obsoleta e retirada da versão 1.7.1. Contudo se ao carregar a versão 1.7.2b1 algo sair errado é muito provável que você tenha encontrado um bug, e, mais, se o que saiu errado estiver certo quando for carregada a versão estável mais recente então: BINGO! você encontrou um bug e poderá contribuir com o time de desenvolvimento da jQuery reportando o bug encontrado preenchendo um formulário apropriado. E, o interessante disso é que não foi você quem desenvolveu o site e nem mesmo tem acesso FTP a ele. Você simplesmente abre a página do site no navegador, adiciona uma query string no URL e recerrega a página para chamar uma nova versão da biblioteca, como mostrado a seguir considerendo nossa página exemplo anterior:

http://site.com.br/exemplo.html?jqversion=1.7.2b1

O script de Dan

  (function(){
    // Verifica se existe uma query string jqversion no URL e armazena na variável verMatch.
    // Busca uma query string constituída somente de números, letras e ponto com a finalidade de impedir ataque XSS
    var verMatch = /jqversion=([\d\w\.]+)/.exec( location.search ),
        // versão encontrada, por exemplo: 1.6.4 or 1.7rc1
        version = verMatch && verMatch[1],
        src;
    if ( version ) {
      // A verificação da query string resultou em uma verão válida. Use o CDN da jQuery para lincar a versão (não comprimida, beta ou RC) encontrada
      src = 'code.jquery.com/jquery-' + version;
    } else {
      // A verificação da query string não resultou em uma versão válida. Use o CDN do Google (ou da jQuery ou da Microsoft) para lincar a versão comprimida
      src = 'ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min';
    }
    // cria uma tag script lincando para a versão
    document.write( '<script src="//' + src + '.js"><\/script>' );
  })();

  // Usa uma cópia local, como backup caso falhe o carregamento a partir do CDN. Nesse exemplo não usamos essa opção.
  if ( !window.jQuery ) {
    document.write( '<script src="/scripts/jquery-1.7.1.min.js"><\/script>' );
  }

O script foi comentado para facilitar seu entendimento, mas se você tem alguma dúvida, fique à vontade para perguntar na área de comentários.

Além disso você poderá comprovar o funcionamento do script na prática visitando essa página exemplo que desenvolvemos para essa finalidade específica.

Gostou? Use e o time da jQuery agradece

Que tal, a partir de agora, usar o script de Dan para “fazer a chamada” da biblioteca jQuery para as páginas que você desenvolver? O máximo que poderá acontecer é um site funcionando normalmente usando a versão da biblioteca que você escolheu. Contudo o máximo dos máximos é que você estará proporcionando aos desenvolvedores do mundo inteiro a oportunidade de caçar bugs nas versões de testes futuras usando seu site como suite de testes. E, é claro, o time de desenvolvimento da jQuery agradece.

Esta matéria foi transcrita do blog do Maujor, com prévia autorização.

Sorteio do livro: jQuery Mobile

Estamos divulgando mais uma ação em parceria com a novatec.

Trata-se de DOIS sorteios do livro jQuery Mobile lançado nesta semana. Para quem não conhece, o livro foi escrito por Maurício Samy Silva, mais conhecido como Maujor.

Site oficial do livro: http://www.jqmovel.com.br/

Como participar no Twitter?

O participante deverá seguir o @jquerybr e dar um RT na mensagem abaixo:

Estou participando do sorteio do livro jQuery Mobile escrito pelo @maujor e organizado pelo @jquerybr e @novateceditora http://kingo.to/YKg

Os comentários só serão aceitos até o dia 05/02/2012 às 23:59. O sorteio acontecerá no dia 06/02/2012. Boa sorte!

Como participar no Facebook?

O participante deverá:

• curtir a página do jQuery Brasil.
• compartilhar esta postagem.
• clicar na aba de Promoções e solicitar a participação

As participações só serão aceitas até o dia 05/02/2012 às 23:59. O sorteio acontecerá no dia 06/02/2012. Boa sorte!

Resultado

Promoção Twitter: @AlineFernandes1

Promoção Facebook: /flavioricardo91

Resenha do livro

jQuery Mobile é um framework para o desenvolvimento de aplicações web para dispositivos móveis. Adota um sistema unificado de interface de usuário, com base em HTML5 e CSS3 e, com uso de JavaScript de alto nível, gera um código compatível com uma ampla variedade de plataformas. Tem como base de construção as bibliotecas jQuery e jQuery UI, o que garante uma curva de aprendizado rápido, possibilitando desenvolver com facilidade interfaces de usuário de alta qualidade e com código extremamente otimizado para os principais navegadores desktop, smartphones e tablets, como iPad, iPhone, Android, Blackberry, Windows Phone e Nokia.

Utiliza um sistema de navegação entre as páginas da aplicação, baseado em AJAX, que proporciona o carregamento rápido das páginas, com economia de banda, além de oferecer várias opções de animação na transição entre páginas. Fornece widgets pré-configurados e estilizados, prontos para uso, que atendem à maioria das necessidades do layout de uma aplicação web, tais como barras de navegação, páginas, janelas modais, botões e listas, entre outros, todos criados por mecanismos internos do framework, a partir de marcação HTML5 simples. Além de disponibilizar uma folha de estilos CSS padrão, com cinco paletas de cores, também permite a criação de paletas personalizadas, a partir da folha de estilo padrão ou com o uso da ferramenta ThemeRoller.

Maujor, em mais um livro pioneiro em língua portuguesa, se propõe a difundir o uso desse fantástico framework, abordando as funcionalidades do jQuery Mobile de forma clara, em linguagem didática, com muitos exemplos práticos. No site do livro (http://jqmovel.com.br) você poderá ver esses exemplos em funcionamento.

O livro tem os seguintes objetivos:

• Apresentar o framework jQuery Mobile relatando as motivações e o histórico de seu desenvolvimento.
• Estudar a aplicação de barras de ferramentas e botões nativos do framework.
• Explicar os fundamentos da navegação AJAX do framework.
• Demonstrar os mecanismos para formatação de conteúdos a serem apresentados em dispositivos móveis.
• Detalhar as técnicas de construção de listas ordenadas e não ordenadas, simples e aninhadas para apresentação de conteúdos.
• Entender a criação de formulários com seus diferentes controles.
• Aplicar temas e paletas, bem como criar paletas personalizadas com uso da ferramenta ThemeRoller.
• Estudar as propriedades, os eventos e métodos da API da jQuery Mobile.

Ajax não obstrutivo com preventDefault

Olá pessoal,

Antes de tudo, peço desculpas pelo tempo em que passei um pouco afastado. Projetos pessoais, trabalho, mudanças, enfim, vamos dar início e perder menos tempo com xurumelas =P

Todos nós já sabemos que 99,9% dos browsers possuem suporte ao bom e velho Javascript. Mas o que custa trabalharmos um pouco melhor e ter um código bem feito e dando suporte a todos? Até porque o mundo mobile cresce cada vez mais e, infelizmente, ainda existem alguns aparelhos que não dão todo o suporte.

Outro motivo que precisamos nos preocupar é que se tiver algum erro de execução no seu Javascript, por um simples erro de sintaxe, o seu código pode não ser todo interpretado e, por exemplo, estourar um JSON sem CSS na tela do usuário não é nada agradável.

E como evitar esse tipo de coisa?

Imagine que você tem um form que vai ser enviado assíncronamente. Como poderíamos fazer da melhor forma?

Existe um método que não é tão conhecido chamado preventDefault(). Ele vai nos ajudar bastante nos nossos exemplos. Ele previne a execução padrão do evento. No caso de um formulário, ele não vai submetê-lo, nem levar o usuário para a action do form. Se fosse um link, ele não levaria o usuário para a página do link, e assim sucessivamente.
Vamos pôr a mão na massa!

<form action="/users/" method="post" id="newUser">
	<input type="text" name="title" />
	<input type="submit" value="Enviar" />
</form>

$('form#newUser').submit(function(event){
	event.preventDefault(); //Este é o cara!
	var actionUrl = $(this).attr('action'),
		params = $(this).serializeArray();
	$.post(
		actionUrl,
		params,
		function(){
			alert('Formulário enviado com sucesso!');
		}
	);
 });
 

Algumas boas práticas podem ser vistas nesse código.

• A url que é enviada via ajax é igual a do html;
• Os parâmetros são carregados pelo serialize(), ou seja, se incluir novos parâmetros no form, estes também serão enviados na requisição ajax;
• Se o JavaScript estiver desabilitado, o envio será feito da mesma forma. O ideal é ter um tratamento no back-end para fazer retornos agradáveis ao usuário.

Para completar, tente desabilitar o javascript do browser e fazer um teste no seu formulário.

preventDefault() vs return false

Alguns desenvolvedores preferem utilizar o return false; no corpo do método. Pode ser utilizado também. A diferença é que o return false executa o preventDefault() e o stopPropagation(), não permitindo que nenhum outro manipulador seja notificado do evento.

ajaxSetup | Configuração padrão para Ajax

Após o nosso podcast sobre Ajax, surgiram algumas dúvidas de como fazer um arquivo de configuração para o Ajax.
Explico, não necessariamente seria um arquivo de configuração e sim códigos de configuração, os mesmos não precisariam estar em um arquivo separado, eu mesmo, quando utilizo, coloco no arquivo de jQuery (não sou de utilizar CDN, por mais que eu recomende o uso).

Configurações padrões para o Ajax

O jQuery nos provê de várias propriedades para configuração do Ajax, essas podem se repetir por várias requisições diferentes. Devido a essa repetição podemos utilizar a função jQuery.ajaxSetup() para que a mesma configuração seja usada por todas as requisições.

Então vamos criar uma configuração para que todas as requisições sejam para apenas uma url.

//pode ser $.ajaxSetup
jQuery.ajaxSetup({
  url: 'uma_url_qualquer.php'
});

Quando usarmos $.get(), $.post(), entre outros, não precisamos mais passar a URL pois já temos na nossa configuração. Usamos dessa forma então:

$.ajax({
  data: {'nome': 'Ruan'}
});
$.get({
  data: {'nome-do-meio': 'Carlos'}
});
$.post({
  data: {'sobrenome': 'Kovalczyk'}
});
//sei que Kovalczyk pode soar como um palavrão para muitos =)

Agora vamos setar configurações diferentes

jQuery.ajaxSetup({
   global: false,
   type: "POST",
   cache: false,
   //ate mesmo callbacks
   error: function(error) {
      alert(error);
   }
});

Te vejo na próxima

Uso dos métodos .parent(), .parents() ou .closest()

Bem pessoal, nunca é demais falar de coisas simples, mas que ajudam muito a manutenção do código desenvolvido. Algumas vezes que acessei o código escrito por terceiros, me deparei com algumas coisas que são bastante utilizadas, porém não é nem de longe a melhor forma de trabalhar. Irei citar alguns exemplos agora:

<ul id="one" class="level-1">
  <li class="item-i">I</li>
  <li id="ii" class="item-ii">II
  <ul class="level-2">
    <li class="item-a">A</li>
    <li class="item-b">B
      <ul class="level-3">
        <li class="item-1">1</li>
        <li class="item-2">2</li>
        <li class="item-3">3</li>
      </ul>
    </li>
    <li class="item-c">C</li>
  </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

Se você estiver com o objeto $('li.item-1') e quiser ir para a primeira ul da árvore, neste caso $('ul#one'), quais as formas que podemos chegar até ela se esse conteúdo não é estático e este id é flexível?

Primeira opção – uso do parent()

Essa é a opção que utiliza o método parent() infinitamente. Por incrível que pareça, é a que eu mais vejo.

var item1 = $('li.item-1'),
    primeira_ul = item1.parent().parent().parent().parent();

O maior problema desta opção, além do código repetido que está meio óbvio, é que se o código html for modificado acrescentando ou removendo algum elemento, este javascript precisará ser alterado também.

Segunda opção – uso do parents()

Essa é a opção que utiliza o método parents(). É uma solução válida, porém o código não fica muito elegante.

var item1 = $('li.item-1'),
    primeira_ul = item1.parents('ul.level-1:eq(0)');

Por que utilizar o eq(0)?

Desta forma ele irá retornar o objeto da primeiro ul pai com a classe .level-1 que ele encontrar.

Terceira – uso do closest()

Essa é a opção que utiliza o método closest(). Na minha opinião é a opção mais elegante.

var item1 = $('li.item-1'),
    primeira_ul = item1.closest('ul.level-1');

Esta forma é idêntica a segunda opção, porém acho que o código fica mais elegante.

E o que isso tem haver com flexibilidade no código?

Imagine que você precisa incluir outros elementos dentro desses nós, como um link ou um span. Da primeira forma você precisará dar manutenção no JS, acrescentando ou retirando a quantidade de métodos parent() que existir. Utilizando o parents() ou o closest(), não precisa se preocupar com isso. Ele se preocupa por você!

AJAX com jQuery – Método $.ajax()

Hoje falarei sobre a função $.ajax onde podemos requisitar informações via GET ou POST assíncronamente. Creio que o AJAX deva ser mundialmente conhecido, por isso não entrarei nos detalhes, apenas mostrarei as formas que podemos utilizá-lo.
(mais…)

Manipulando Checkbox e Radio Button com jQuery

Muitas pessoas tem problemas em manipular checkbox e radio button. Irei mostrar como trabalhar com eles.

Os checkbox e os radio button são um pouco diferente dos outros elementos no html. Eles têm uma propriedade booleana chamada checked, mas diferente das outras propriedades ela pode ser declarada sem um valor (isso pode dar um erro na validação do seu html). Ex:
(mais…)

Lançado jQuery 1.6.1

Pois é, acabou de ser lançado o jQuery 1.6.1. No prazo previsto, como havíamos falado no lançamento do 1.6.1 RC. O objetivo desta versão é barrar os principais problemas que estavam acontecendo, principalmente em relação a migração do “novo” $.attr(), onde podemos ver mais detalhes no post sobre o lançamento do 1.6.1 RC.

Link do CDN jQuery:

• http://code.jquery.com/jquery-1.6.1.js
• http://code.jquery.com/jquery-1.6.1.min.js

Changelog:

• http://blog.jquery.com/2011/05/12/jquery-1-6-1-released/

Ainda iremos fazer alguns testes, mas de acordo com o post oficial do jQuery, as mudanças foram mais em relação ao $.attr() como mencionado no post do lançamento do jQuery 1.6.1.

Cya!

Um pouco sobre $.map()

Quem já começou a testar as novas features do jQuery 1.6 levanta a mão… _o/

Venho apresentar algumas das minhas impressões do método $.map, que foi bem incrementada na nova versão. Para quem ainda não conhece, o método permite manipularmos arrays ou objetos de maneira bem prática. 

Quem já precisou manipular esse tipo de dados, sabe o trabalho que dá. Exemplificarei como a nossa vida ficou mais fácil se soubermos utilizar bem o $.map(). 

Em primeiro lugar, algo bem simples para que possamos entender bem o método: 

$.map( [0,1,2], function(n){
      return n + 10;
}); 

// Resultado:
// [10,11,12] 

A manipulação é completa, inclusive podemos também retirar algum valor da array, caso necessário. 

$.map( [0,10, 20, 30, 40, 50], function(n){
      if(n <= 30) {
            return n;
      }else{
            return null; // Não é necessário, apenas para facilitar a visualização lógica.
      }
});

// Resultado:
// [0, 10, 20, 30] 

Vamos para um exemplo prático. Estou querendo passar apenas os dados que não são vazios de um formulário.

O que precisávamos fazer, sem utilizar o jQuery.map():

var params = form.serializeArray()
      checkedParams = new Array(); 
for(var x = 0; x < params.length; x++) {
      var index = params[x];
      if(index) {
            checkedParams.push(index);
      }
} 

Agora ao exemplo bem mais elegante: 

var params = form.serializeArray(); 
params = jQuery.map(params, function(value, index){
      return (value) ? value : null;
}); 

Sim, mas qual a diferença entre o $.map() e o $.each() ? 

O each() serve apenas para varrer o objeto ou array, enquanto o map permite um retorno e manipulação do que foi varrido. 

$.map()

$.map([1,2,3,4,5], function(value, index){
      return false;
}); 

// Resultado:
// [false, false, false, false, false] 

$.each()

$.each([1,2,3,4,5], function(index, value){
      console.log(index);
      return false;
}); 

// Resultado:
// 1

// Ele irá imprimir apenas o primeiro valor e irá encerrar
// o laço por causa do return false. 

Espero que tenham entendido mais um pouco sobre o novo método. Caso ainda tenha alguma dúvida, pergunta aí embaixo