Eventos com React

Quando trabalhamos com JavaScript clássico temos N formas de trabalhar com eventos, adicionando atributos no nosso elemento html, definindo o atributo no JavaScript ou adicionando um listener, direto no elemento HMTL seria da seguinte forma:

Este método trás muitos problemas, por exemplo, manutenção e gerenciamento de eventos.

Outro formato adicionando um listener:

Isto funciona bem, mas você precisa ter uma organização no seu código, caso contrario ficará difícil de debugar seu código, nem todos os browser suportam este recurso sempre precisamos quer fallback para esta situação.

React tenta deixar o gerenciamento de eventos mais consistente. Todo evento retorna um SyntheticEvent, ele tem uma série de atributos:

Outra questão importante ele centralização do target, quem nunca teve problemas com targets dos eventos e precisou controlar um evento de click com stopPropagation() ou preventDefault(). O SyntheticEvent trabalha com o conceito de pooled, o objeto é limpo após o callback for invocado, por uma questão de performance.

Eventos suportados pelo React:

  • Clipboard Events
  • Composition Events
  • Keyboard Events
  • Focus Events
  • Mouse Events
  • Selection Events
  • Touch Events
  • UI Events
  • Wheel Events
  • Media Events
  • Image Events
  • Animation Events
  • Transition Events

Antes de trabalhar com Eventos e Componentes precisamos entender é a questão de Props e State, basicamente props temos os valores quando o componente é construído e state são os dados que a interface mantém durante a execução do aplicativo.

No exemplo acima crio um componente botão onde ele simplesmente faz o toggle de um atributo, poderia ser qualquer outro atributo ou interagir com outro elemento. O evento nos acionamos quando passamos o render do nosso componente neste caso onClick, poderíamos passar mais de um evento.

Lembrando todos os exemplos estão no meu github: https://github.com/fellyph/react-tutorial

Variáveis e funções com ECMAScript 2015

ECMAScript 2015 é nova especificação do JavaScript antes chamado de ECMAScript 6, por uma padrão de conversão e buscando implementações menores em pequeno prazo. Lembrando que esses recursos nem todos os browser rodam, o ideal é utilizar uma ferramenta para compilar seu código para browsers antigos, um dos mais utilizados é o Babel, ele possui um handbook em português que mostra instalação e como usar:

https://github.com/thejameskyle/babel-handbook/blob/master/translations/pt-BR/user-handbook.md

Boa parte dos exemplos eu rodei no Chrome sem precisar do babel, nesta página(ECMAScript 6 compatibility table) você tem uma tabela detalhada do suporte de cada browser. Para um projeto em produção é necessário o uso do babel. Agora voltando ao ECMAScript, ela vem com uma série de novidades, já mostrei alguns dos novos recursos nos posts sobre REACT, mas não entrei em detalhes neste post vou listar algumas das novidades.

Declarando variáveis

let

let é utilizado para declarar variáveis dentro de um escopo menor comparado ao var que tem um escopo global ou relacionado a funções, com o let o escopo pode ser limitado por blocos menores if, else, for e while.

const

const como em outras linguagens o permite nos criarmos variáveis read-only, constantes nos ajudam a criar códigos mais legíveis, exemplo quando lemos o seguinte código:

Não temos idéia o que é o número 5, apenas um fator na condicional, se mudarmos para o seguinte código:

Agora com as modificação batemos o olho sabemos que os loops estão limitados por um número máximo de produtos. Esse valor é escrito apenas uma vez, ele não pode ser alterado após ser definido. Por um padrão de escrita de código todas as constantes precisa ser escritas em uppercase.

Funções

Surgiram novas funcionalidades super úteis relacionadas a funções com ECMAScript 2015. A primeira delas, valores default na assinatura da funções. Um problema básico é acesso a variáveis undefined, temos um tratamento comum para isso da seguinte forma:

Com nova definição de EcmaScript 2015 podemos criar valores default sem precisar de um tratamento especial como a versão anterior da seguinte forma:

Nomeando parâmetros

Uma nova funcionalidade, agora é possível nomear parâmetros como isso é útil, no exemplo abaixo:

Exemplo acima contornamos o problema do parâmetro “undefined” mas se os atributos não existirem nosso código irá disparar um erro.

Nomeando parâmetros, além do código ficar mais legível, não caímos nos problemas de atributos inválidos.

Rest Params

Outro novo recurso do ECMAScript 2015 é possível passar um array de parâmetros como argumento, como isso funciona, por exemplo, temos uma função de produtos relacionados onde podemos exibir, um, dois ou três produtos:

showRelacionados(“produto-1”);

showRelacionados(“produto-1”, “produto-2”, “produto-3”);

showRelacionados(“produto-1”, “produto-2”);

Você precisa passar um número x de argumentos que sempre variam, nunca é uma quantidade exata. Com parâmetros rest, permite definir que a função espera um array de argumentos.

Além dos “…” na assinatura da função, podemos adicionar na chamada da função mas ela tem uma funcionalidade diferente quando acionamos a função, neste caso ela quebra os parâmetros do objeto em vários argumentos. Exemplo temos o objeto

produto.nome = “Prato”;
produto.preco = 20;
produto.categoria = “casa”;

adicionaProduto(…produto);

A função “adicionaProduto” irá receber 3 parâmetros(nome, preco e categoria).

Arrow function

Arrow function além de simplificar a escrita de funções ela mantém o escopo de quem invoca a função útil quando estamos tratando, também chamado de “lexical binding” ele cria um escopo de quem o define e não de onde ele roda, outro ponto a Arrow functions sempre são anônimas. Sua síntaxe é simples:

Exemplo temos um código sem arrow function:

Com arrow function ele fica da seguinte forma:

Apenas uma chamada mas imagine isso sendo repetido várias vezes no dia, mas outra vantagem é a questão do escopo um problema comum é perder o escopo quando você codando alguma funcionalidade exemplo:

Criamos um objeto tipo Clock, mas ele tem um problema quando usamos o console dentro do setInterval por exemplo o escopo do setInterval é global nesse momento o this não é o clock e sim o objeto Window. Claro que podemos resolver esse problema criando uma variável self para para o clock e guardar o this(clock) dentro dessa variável outra solução seria usar o arrow function:

Vamos ficando por aqui o próximo post sobre ECMA irei falar sobre objetos e classes.

Stateless vs Stateful

Continuando a série sobre ReactJS. Vamos falar sobre um dos princípios básicos sobre estado(state). Os dois últimos posts, por exemplos, criamos componentes estáticos(ou stateless), mas atualmente boa parte das aplicações precisam ter algum tipo de interação com o usuário.

As informações precisam ser alteradas em tempo real. Uma das base do React é um conceito de estado, cada componente utilizado tem uma estado próprio quando estado muda o React reconstrói a UI sem o dev fazer nenhuma requisição para alterar o DOM.

Tudo que precisamos fazer é especificar onde os dados terão o estado “alterável”. Para isso utilizamos uma função this.setState() para manter os dados atualizados. Quando ele é chamando, Qualquer informação alterada no componente ele chama o método render() para atualizar a tela.

Criando o primeiro componente Stateful

Até o momento temos apenas um component Stateless, precisamos transforma-lo em um elemento Stateful. Vamos dar uma olhada neste exemplo:

No exemplo acima, nosso componente possuí uma textarea e um título que mostra o tamanho do nosso texto e ele ainda está stateless. Ele precisa do método ReactDOM.render, para atualizar as informações quando o usuário edita o valor da caixa de texto. Para isso precisamos manter os dados(estado) e saber quando eles serão alterados, vamos ver o exemplo atualizado:

Primeiro passo é chamar o método getInitialState() ele é responsável por salvar o estado inicial do elemento, após adicionarmos o método getInitialState precisamos definir as ações que iremos tomar quando nosso componente sofre alguma alteração no seu estado, nesse caso adicionamos uma função “_textChange” ela simplesmente atualizar o estado do elemento com setState, quando ele for alterado.

No último bloco do nosso componente dois pontos importantes, agora no value do nosso textarea e do nosso h3 não acessamos os props do nosso componente e sim o estado “React.DOM.textarea({ value: this.state.text, …” e “React.DOM.h3(null, this.state.text.length)” outro ponto importante adicionamos um evento onChange para disparar a método _textChange.

Agora quando alteramos nosso componente ele atualiza os dados. Então o objetivo é fazer posts curtos com mais frequência, todos os tutoriais de react estão no meu git: https://github.com/fellyph/react-tutorial

Pensando em React

Um dos pontos importantes na hora de aprender React é trabalhar no modo que ele espera a “componentização” do conteúdo, esse processo inicia a partir da construção dos mocks.

Passo 1 – Iniciando como um mock

Imagine que você tem a seguinte tela:

mock-portfolio

Como criaríamos componentes com esse mock?

No caso acima temos uma coleção de portfólio, um componente job, com: foto, descrição, url, empresa, Design, e tecnologias. Vamos considerar que toda esta coleção está em um JSON:

E o nosso componente básico é o seguinte:

componente-mock

Seguindo essa estrutura inicialmente nosso componentes com suas hierarquias serão os seguintes:

  • PortifolioList
    • PortifolioItem

Por que falamos em hierarquias? No caso podemos ter componentes que carregam outros componentes, mas isso não impede de outros elementos carregarem o mesmo componente.

Passo 2 – Construindo uma versão estática com React

No post anterior, trabalhamos com “React.createClass” nesse tutorial vamos utilizar um cara chamado “React.Component” ele trabalha de uma forma diferente com ele criamos um classe que estendem de React.Component lembrando que para trabalhar com classes precisamos do babel para rodar o nosso ECMAScript 2015 e o React. Vamos começar pelo item mais básico o PortfolioItem, primeiramente considerando o mock que construímos o seguinte HTML:

Agora vamos passar o nosso HTML para o um componente:

Apenas adicionei o PortfolioItem com HTML estático só para mostrar como funciona o React.Component, notem que trocamos a propriedade class por className isso é necessário para não termos conflitos com a palavra reservada class, mas as informações estão estáticas precisamos carregar as informações dinamicamente, a cada chamada do componente ele precisa ter uma informação diferente, então vamos lá:

No código acima utilizamos o “{}” para especificar que é uma variável dinâmica this.props. acessa os parâmetros que foram passado para o componente, nesse caso chamamos o componente da seguinte forma:

Assim o atributo nome passado no componente acessamos dentro do componente {this.props.nome}, nosso exemplo completo com PortfolioItem e PortfolioList fica da seguinte forma:

No código acima adicionei o JSON como uma constante do nosso componente o ideal que essas dados venha de alguma API. Na sequência leio o JSON e crio um array com componentes PortfolioItem e no render eu apenas passo o array que montamos {jobsList}. Por fim chamamos o ReactDOM.render passando o PortfolioList como o elemento que iremos adicionar o componente.

O nosso HTML fica da seguinte forma:

Podemos organizar melhor o nosso componente PortfolioList, podemos adicionar funções para organizar o seu comportamento, como no código abaixo:

Na atualização do componente adicionamos uma função “_getJobs” responsável para carregar os trabalhos, separamos a lógica de ler os dados da lógica de renderizar os dados. Também usei alguns recursos novos do ECMAScript2015.

Podemos evoluir esse post, mas pretendo ir evoluindo estes exemplos em outros posts, por isso adicionei um repositório no git: https://github.com/fellyph/react-tutorial

Por que REACT JS?

React JS é o assunto do momento no Brasil e Europa, nos EUA já faz sucesso a mais de um ano o framework do Facebook apenas confirma sua força este ano. React é a tecnologia chave requisitadas nas principais vagas de front aqui na Europa tirando o espaço do Angular ainda bastante forte. Como parte do meus estudos vou traduzir alguns artigos e tutorias que ando lendo. O primeiro deles é uma breve introdução vou utilizar como base o “Why React?” e “Getting Started“.

Por que React ?

React é uma biblioteca javascript para criar interfaces do Facebook e Instagram. O React foi criado para resolver o problema: Criar largar aplicações com dados que mudam a cada segundo.

Simples

Simplesmente expressar como sua aplicação deve olhar para qualquer ponto no tempo, e React vai automaticamente administrar todas atualizações da sua interface quando seus dados mudam.

Declarativo

Quando os dados mudam, React conceitualmente dispara o botão “refresh” e sabe quando atualizar os dados que mudaram.

Construindo ambiente “componentizável”

React é todo construído sobre componentes reutilizáveis. Na verdade, com React a única coisa que você precisa é construir componentes. Uma vez que eles são encapsulados, componentes podem fazer seu código reutilizável, “testável” e com fácil separação de interesses.

Iniciando os trabalhos

Primeiramente vamos baixar o “Starter Pack”, nesse pacote possui as versões prebuilt do React e React DOM para o seu browser, como também uma coleção de exemplos para o seu estudo. Então depois que baixar e descompactar o zip com o starter pack, temos a seguinte estrutura:

Screen Shot 2016-06-10 at 5.54.08 PM

Vamos criar o nosso primero arquivo helloworld.html na pasta raiz.

O exemplo acima foi retirado da documentação, vamos explicar alguns pontos. para executar o React precisamos de três arquivos básicos react.js , react-dom.js e o browser.min.js(babel). Adicionamos uma div com id “example” na linha seguinte adicionamos uma tag script com o type “text/babel” esse parâmetro é utilizado pelo Babel.

Para quem não conhece ele é um compilador genérico multifuncional de JavaScript. “What?” Compliquei? na real ele compila as versões mais recentes do JavaScript(ES2015 e ES2016) e React para uma versão que rode nos browsers atuais. Se quiser saber mais dá uma conferida no link: https://github.com/thejameskyle/babel-handbook/blob/master/translations/pt-BR/user-handbook.md#toc-introduction

Dentro da tag script podemos ver uma mistura de javaScript com HTML essa syntax é conhecida como JSX, no exemplo acima utilizamos uma função que renderiza o JSX “ReactDOM.render” ela recebe dois parâmetros: o nosso código JSX e o elemento que iremos adicionar o código renderizado(O h1 com hello world).

Claro esse é um exemplo de introdução, não é obrigatório o código JSX ficar dentro do html podemos criar um arquivo js separado sem problemas.

Exibindo os dados

A utilização mais básica em uma interface é exibir algum dado. O foco do React é facilitar essa tarefa e manter as interfaces atualizadas em tempo real quando os dados mudam.

Vamos criar uma segundo exemplo com alguma interação.

No exemplo acima criamos um componente classe utilizando a função “React.createClass” temos e várias maneiras de criar componentes e cada caso tem uma particularidade, no caso do createClass passamos um objeto como parâmetro e o atributo render possui um JSX como valor. Isso não determina que o JSX será compilado nesse momento. Apenas deixa pre-definido o que será “renderizado” quando chamarmos o componente “Relogio” mais a frente dentro do nosso JSX temos um ponto importante “{this.props.date.toTimeString()}” as chaves especifica que esse item é uma variável no caso quem chamar o componente precisa passar o atributo “date”.

Após o createClass temos um setInterval que irá chamar a cada 500 milisegundos ReactDOM.render e chamamos o componente que criamos anteriormente e passamos um parâmetro date. Se tudo e correr bem teremos em nossa tela o texto:

Olá, são exatamente: XX:XX:XX(hora atual)

Se quiser saber mais sobre React da uma conferida na documentação: https://facebook.github.io/react/index.html

Próximo Post irei abordar mais esse ponto de criar componentes e o modo de pensar no conteúdo utilizando React.

Padrões de código JavaScript no WordPress

Em busca da produtividade e legibilidade do código presente nos temas a equipe do Core do WordPress escreveu uma seção para falar sobre padrões de codificação para plataforma. Esse é o segundo post da sobre o assunto no post anterior falei sobre padronização de código CSS, Nesse post vamos abordar padrões de escrita para JavaScript.

JavaScript tornou-se uma das principais linguagens da atualidade e é um item chave no desenvolvimento de temas e plugins no WordPress. Claro que padronizar seu código JavaScript é essencial para manter consistência no projeto. Todo código base deve parecer escrito por uma única pessoa.

O “WordPress JavaScript Coding Standards” foi uma adaptação do “jQuery JavaScript Style Guide”, o padrão do WordPress difere do jQuery nos seguintes pontos:

  • WordPress usa aspa simples para declaração de string.
  • Instruções de Case são indentadas para indicar as mudanças de blocos.
  • Conteúdo de funções são constantemente indentadas, incluindo os empacotadores de fechamento de todo o arquivo.
  • Algumas regras para espaço em branco são diferentes, para manter consistência com o “WordPress PHP coding standards”.
  • 100 caracteres são o limite para uma linha de código jQuery, mas no WordPress não são rigorosamente aplicadas.

Espaçamento

Uso de espaços livremente em todo seu código. “Em caso de dúvida, tire o espaço.”

Estas regras incentivam o uso de espaço para melhorar a legibilidade do código. O processo de minificação cria arquivos otimizados para os browsers lerem e processarem os arquivos, mas não para os programadores. O ideal é utilizar uma versão minificada para produção e uma versão sem minificação para desenvolvimento.

Além deste quesito temos as seguintes recomendações para espaçamento:

  • Crie indentação com tab.
  • Retire os espaços em branco no final da linha e em linhas em branco.
  • As linhas não devem ser longas, não exceder o limite já especificado de 100 caracteres(contando tabs e espaço). Esta é uma regra “soft”, mas linhas longas geralmente apontam código desorganizado.
  •  if / else / for while / try, os blocos devem sempre utilizar chaves e quebras de linhas, evite utilizar condicionais em uma única linha com chaves.
  • Os operadores de “unários”, exemplo, ++ ou — não devem ter espaço entre seu operando, exemplo “contador++”.
  • Qualquer “,” ou “;” não deve preceder de espaço
  • Qualquer “;” utilizado como sinalizador de um final de uma operação deve estar sempre  ao final da linha, ou seja evite “contador++; a = contador;” na mesma linha.
  • Qualquer “:” depois de um nome de uma propriedade em uma definição de um objeto, não deve ser precedido de espaço, exemplo “valor: 9”.
  • A “?” e “:” de uma condicional ternária deve ter espaço em ambos os lados
  • Não utilize espaço em declarações de tipos vazios, exemplo, {} [] ou fn().
  • Toda “!” utilizada como operador de negação deve conter um espaço em seguida.*
  • Indente todo conteúdo de uma função, mesmo que todo o arquivo esteja contido dentro da função.*
  • Espaços podem podem alinhar comentários ou espaços dentro de uma linha de código, mas somente o TAB pode alinhar o início de uma linha de código.*

Os itens marcados com um “*” ao final da linha fazem parte do WordPress JavaScript standards, sendo um complemento ao padrão do jQuery. Essas aplicações são recomendadas para manter coerência com os padrões de escrita do PHP.

Os espaços em branco são facilmente acumulados no final de cada linha, evite isso utilizando JSHint,  Outra maneira de evitar esses espaços é definindo cores para os espaços no estilo do seu editor.

Objetos

Declarações de objetos podem ser feitas em uma única linha, mas isso não é aconselhável lembrem das recomendações do tamanho da linha. O recomendado é deixar uma propriedade por linha. Nome de propriedades precisam somente de aspas quando possuem uma palavra reservada ou caracteres especiais:

Arrays e Chamadas de Funções

Sempre adicione espaços extras em torno dos elementos e argumentos:

Exceções

Para manter a consistência com o padrão PHP, não inclua um espaço em torno strings ou inteiros usados como keys de uma array:

Função com callback, objetos ou array como um argumento único, sem espaço em ambos os lados do argumento:

Função com callback, objeto ou array no primeiro argumento passamos sem espaço o segundo argumento seguimos o padrão:

Essa regra se aplica caso a função/array/objeto for o último argumento, ela segue sem espaços e os primeiros itens seguem o padrão.

Um bom exemplo de uso de espaçamento:

Indentação e quebra de linhas

Indentação e quebra de linhas adicionam legibilidade para declarações complexas. Tabs devem ser usados sempre para indentação do conteúdo que estiver dentro das chaves, também usamos um tab para sinalizar o nível do conteúdo.

Blocos

IF, ELSE, FOR, WHILE e TRY devem sempre utilizar chaves e estar organizado em multi-lines. A abertura da chave deve estar na mesma linha da definição da função/condicional/loop. A chave de fechamento deve estar na linha seguinte da última declaração do bloco.

Exemplo:

Operações Multi-line

Quando uma operação é muito longa para uma única linha, utilizamos uma quebra de linha e tal deve ocorrer após um operador.

Métodos encadeados

Quando é utilizado um método encadeado ele pode criar uma linha muito longa, o remendado é ter uma chamada por linha, se o método muda o contexto ele deve ser aplicado um nível extra de indentação.

Atribuições e variáveis Globais

Declarando variáveis com var

Cada variável deve começar com a declaração “var” e as variáveis separadas por virgula. Na quebra de linha utilize indentação como no exemplo a seguir:

Variáveis Globais

No passado do WordPress o seu core fazia uso pesado de variáveis globais. Algumas variáveis globais ficam disponíveis por necessidade de integração com os plugins e não devem ser removidas. Outra recomendação é que todas as variáveis globais devem ser documentadas.

Bibliotecas Comuns

Backbone, jQuery, Underscore, e o “wp global” são todos registrados como itens “globais permitidos” no root do arquivo .jshintrc.

Backbone e Underscore podem ser acessados diretamente a qualquer hora. jQuery deve ser acessado $ passando por jQuery como um objeto de uma função anônima:

Isso irá evitar a chamada do “.noConflict()”, ou definir que o $ seja usado com outra variável. Os arquivos que adicionam ou modificam, o “wp object” acessa com mais segurança os itens globais isso evita a substituição previa do set de propriedades:

Convenções de nomenclaturas

  • Variáveis e nomes de funções devem ser palavras completas, utilizando camel case com a primeira palavra em caixa baixa. Esta é uma área que difere dos padrões do PHP para WordPress.
  • Construtores que utilizam “new” devem ter a primeira letra maiúscula.
  • Os nomes das variáveis e construtores devem ser descritivos, mas não excessivamente.
  • Exceções são permitidas para “interators”, tais como o uso de “i” para indicar o indice de um loop.

Comentários

Comentários vem antes do código a qual se refere e deve sempre ser precedido de uma linha em branco. A primeira letra do comentário deve ser maiúscula e inclua frases completas que descrevam a operação, não tenha preguiça de incluir comentários, eles são importantes para manter a fluidez do desenvolvimento. Após “//” inclua um espaço.

Igualdade

As verificações de igualdades estritas(===) deve ser utilizada no lugar da verificação de igualdade abstrata(==). Use somente (==) quando realmente deseja saber se o valor é null ou undefined.

Checando tipos

Para checagem de tipos utilize esse padrão:

  • String: typeof object === ‘string’
  • Number: typeof object === ‘number’
  • Boolean: typeof object === ‘boolean’
  • Object: typeof object === ‘object’ or _.isObject( object )
  • Plain Object: jQuery.isPlainObject( object )
  • Funções: _.isFunction( object) or jQuery.isFunction( object )
  • Array: _.isArray( object ) or jQuery.isArray( object )
  • Element: object.nodeType or _.isElement( object )
  • null: object === null
  • null or undefined: object == null
  • undefined:
    • Variáveis globais: typeof variable === ‘undefined’
    • Variáveis locais: variable === undefined
    • Propriedades: object.prop === undefined
    • Qualquer um dos anteriores: _.isUndefined( object )

Strings

Use aspas simples para string literais:

Switch

O uso de switch é geralmente desencorajado, mas pode ser útil para comparação de um grande números de casos, especialmente quando realizamos uma série de tratamentos e queremos incluir um tratamento para exceções com “default”.

Como usar o switch:

  • Use um “break” para cada “case” com exceção do “default”.
  • Indente o conteúdo dentro do case com um tab

Não é recomendado utilizar o return dentro do case, defina os valores de saída e utilize o return após o switch, podemos ver uma aplicação no código abaixo:

Boas Práticas

Arrays

Crie arrays com [] no lugar de new Array().

Objetos

Existem várias formas para criar um objeto com JavaScript. Notação do objeto literal, “{}”, é considerado o mais performático e de fácil leitura.

A notação literal de um objeto deve ser usado a menos que o objeto trabalhe com prototype, neste caso utilizamos o “new”

As propriedades do objeto devem ser acessados via “.” a menos que a chave da propriedade use o nome de uma palavra reservada, uma string não válida ou venha através de uma variável.

Condicionais “Yoda”

Para manter consistência com os padrões de código do PHP sempre compare com a variável no lado direito e a constante no lado esquerdo, essa regra vale para strings, booleanos, inteiros…

Interações

Quando queremos varrer uma coleção utilizamos o “for”, é recomendado armazenar o valor máximo em uma variável em vez de recalcular o valor máximo em casa interação.

Na documentação temos duas recomendações para underscore, jQuery e uma recomendação para o uso de JSHint. Esse itens eu prefiro tratá-los e um post separado a tradução desse artigo me ajudou bastante muitas recomendações desconhecia. Algumas recomendações tratam da parte visual do seu código um código organizado para mim é igual a uma boa caligrafia. Isso ajuda na legibilidade e claro uma padronização deixa o time bem entrosado.

O artigo original você confere aqui:

http://make.wordpress.org/core/handbook/coding-standards/javascript/

Os Padrões JavaScript coding do WordPress são baseados nos padrões do jQuery você pode conferir aqui:

http://contribute.jquery.org/style-guide/js/

Realizando consultas na base de dados do Parse

Essa semana eu iniciei uma série de posts sobre o Parse, serviço de cloud do Facebook. Neste segundo post vou abordar como realizar consultas em nossa base. Caso não conheça o Parse veja o post de introdução: https://www.fellyph.com.br/blog/tutoriais/parse/.

No post anterior abordamos um pouco sobre consultas, primeiro resgatamos todos os valores de uma base com a função “find”, em seguida resgatamos um único item com a função “get”. Criei um cadastro de carros com as propriedades: modelo, ano e valor para cadastrar os dados utilizei os mesmo padrão do post anterior:

INDEX.HTML

APP.JS

Cadastrei algumas informações na minha base para realizar a consulta:

Captura de Tela 2014-01-16 às 19.53.32

Agora vamos dar uma olhada em algumas funções que podemos trabalhar com a classe Query. A primeira delas será a função equalTo:

equalTo

Na função equealTo passamos dois parâmetros, o primeiro o nome da propriedade e a segunda o valor que você deseja comparar, detalhe sobre a função que sua consulta é case sensitive.

notEqualTo

A função notEqualTo é o inverso da função equalsTo ela retorna todos os valores diferentes do valor repassado. Também é possível realizar queries compostas:

O função oposta seria lessThan ela retorna apenas os valores menores:

limit

Por padrão as consultas tem um limite 100 resultados por query, podemos modificar esse resultado de 1 até 1000. Para aplicar esse limite utilizamos a seguinte função:

first

Em nossa query podemos resgatar apenas o primeiro resultado isso é possível com a função first:

skip

Podemos definir o limite de resultados e também podemos definir o índice inicial do resultado com a função skip, com essas duas funções podemos criar um esquema de paginação.

ascending & descending

Além de criar filtros, busca por valores, limitar a busca… criar paginação… Pensa que acabou? Não ainda podemos ordenar nossa consulta(por ascendente ou descendente):

O resultado será o seguinte:

Captura de Tela 2014-01-17 às 18.08.08

Outra opção com listagem de valores maiores para menores:

containedIn & notContainedIn

Caso queiramos realizar a consulta com mais de um modelo de carro, por exemplo, podemos utilizar a função containedIn ela espera um Array como parâmetro:

O inverso da função containedIn seguindo o padrão é a função notContainedIn, ela retorna o resultado das palavras diferente das que constam no Array:

exists & doesNotExist

O Parse permite criar objetos com propriedades vazias ou modificar os objetos depois de criados adicionando novos atributos, assim os objetos antigos ficam sem a informação gravada, para isso podemos utilizar a função exists para verificar se o objeto possui informação gravada na propriedade requisitada.

Vamos a um exemplo:

No código acima verificamos os itens que tem a propriedade year cadastrada, o inverso seria:

matchesKeyInQuery & doesNotMatchKeyInQuery

A matchKeyInQuery serve para comparar dois objetos de classes diferentes que possuem duas propriedades iguais, por exemplo:

No código acima temos duas class Team e Users esta classe deriva do Parse Porque é uma classe especial, vamos falar dela em um próximo post. Mas voltando a query, comparamos duas propriedades “hometown” e “city” presentes na classe User e Team quando eles forem idênticos apareceram em nossa consulta.

select

Caso queira consultar propriedades específicas com a função select passamos as keys das propriedades que queremos:

Captura de Tela 2014-01-17 às 20.01.44

No caso da imagem acima utilizei a mesma função de exibir os resultados, por conta de utilizar o select a coluna valor veio “undefined” porque eu só escolhi duas propriedades “model” e “year”.

startsWith

Na função equalsTo ele retorna valores estritamente idênticos, com a função podemos resgatar valores que iniciam com a String repassada, ela tem um funcionamento parecido com o operador LIKE do MySQL. Esta consulta também é case sensitive.

Captura de Tela 2014-01-17 às 20.29.05

count

A função count conta “Dan”, isso mesmo ela serve para contar o número de itens do resultado ela funciona da seguinte forma:

No exemplo anterior eu realizei um filtro sobre a query e a função count tem o tratamento similar a função find, falando nela podemos aplicar as duas em conjunto sem problemas. Temos outras queries aplicadas em objetos relacionais mas isso vamos abordar em um futuro. Até o próximo post Pessoal.