Ember JS … Do Zero!

Não é novidade que os frameworks Javascript tem evoluído muito nos últimos anos. Minha intenção nessa pequena série de posts é simples, porém ambiciosa! É trazer pra você um pouco do que o Ember JS tem a oferecer.

Lembro que no mercado há muitos frameworks, e não irei me preocupar em realizar comparações neste momento. Acima de tudo, o objetivo é que você aprenda especificamente Ember JS! Vamos lá?!

O primeiro passo para você, iniciante (iniciante mesmo :p ) é ir até o site www.emberjs.com e buscar pelo download do framework. Nessa fase, você pode baixar o “Starter Kit” ou os arquivos de modo separado. Sugiro que baixe o zipado (Starter Kit) já com os arquivos necessários. É bem rápido!

ALERTA: Importante dizer que, nesse momento, a versão do Ember JS é a 1.7.0

Em seguida, descompacte o arquivo baixado em algum local de seu computador. Caso queira renomear sua pasta para um nome mais sugestivo, fique a vontade!

A partir daí, você verá a seguinte estrutura de arquivos:

Na pasta “CSS”, temos os arquivos “normalize.css” e “style.css”. Você pode editar a formatação da interface da sua aplicação a partir deste último.

Na pasta “JS”, temos o arquivo “app.js” que é o responsável por fazer a aplicação funcionar. Temos ainda a pasta “LIBS”, contendo 3 arquivos: “ember-1.7.0.js”, “handlebars-1.1.2.js” e “jquery-1.10.2.js” (atente à versão). Estes arquivos se tratamdo framework em si e suas dependências diretas. O Jquery é necessário para que o EmberJS funcione bem. O Handlebars é o esquema de templates que o Ember JS assume em suas aplicações.

Na pasta “TESTS”, temos arquivos relativos ao funcionamento dos testes. Por hora não avançaremos nisso.

Fechando essa parte, temos o arquivo “index.html”. É neste arquivo que será concentrada a nossa aplicação (quando falamos de interface). É onde nossos templates ficarão, e de acordo com as ações e interações com o “app.js” virão a entregar conteúdo para o usuário.

Agora que já temos uma pequena noção do que faz cada arquivo, vamos avançar e dar o start!

Primeiro, fique a vontade para usar o editor que achar mais cômodo. Eu utilizo o Sublime Text e como navegador principal, o Google Chrome. Iremos nos ater em usar 2 arquivos: o “index.html” e o “app.js”. Portanto, abra-os em seu editor.

O arquivo “index.html” apresenta o seguinte código inicial:

Perceba que não há nada de muito diferente do que você está acostumado a fazer costumeiramente. Não é?!

Atente somente para a inclusão dos arquivos javascript ao final. O Jquery é o primeiro a ser incluido. Em seguida, você precisa adicionar o Handlebars antes da chamada ao Ember JS. Ok?! Por fim, o “app.js”, onde vamos mexer daqui a pouco.

Agora que analisou a estrutura básica do arquivo principal, abra em seu navegador de preferência o index.html. Possivelmente irá ver essa tela:

Isso é sinal de que tudo está certo! Vamos prosseguir.

A pergunta que pode se fazer é: de onde vem este conteúdo? A resposta é simples. A frase “Welcome to Ember.js” está em um dos templates do arquivo “index.html”. Pra ser mais preciso, está no template principal, chamado “application”. Os templates são distribuídos entre tags “<script>” e cada um tem um nome. Como o “application” é o template principal, seu nome é suprimido. Porém, todos os demais necessitam ter um nome para ser identificados e funcionar corretamente na interação com a aplicação.

Outra dúvida sua poderia ser: e essa lista de cores (red, green…)? Bom, esta lista vem de outro template, neste caso chamado “index”, dentro do mesmo arquivo “index.html”. Perceba que temos um “{{each}}”, que se trata de um laço de repetição, e ele itera com o elemento “item”. Este array vem do arquivo “app.js” e é distribuído aqui no template. Bacana, não?! Parece que tudo está clareando um pouco, certo?

Agora, preciso que entenda um elemento (na verdade é algo que chamamos de helper) chamado {{outlet}}. Ele tem o papel de reservar um espaço dentro do template em questão, para que outro template possa ser embutido dentro dele. Se você se lembrou de algo parecido com um iframe, pode talvez ser válida sua analogia. Mas só pra entendimento mesmo! Esse comportamento é algo bastante usado nas aplicações SPA, e Ember JS faz isso muito bem.

Bom, é interessante que você faça alguns testes iniciais com esses valores. Indico que adicione valores ao array no “app.js”, ou crie novos templates e faça eles interagirem entre si. Esse foi um panorâma bem geral sobre como começar e pôr uma aplicação rodando em seu computador. Em próximos posts, tratarei de coisas mais técnicas.

Grande abraço, e bons estudos!