O que é Ember.js

Ember.js é um framework Javascript (sim, mais um) para construir aplicações web ambiciosas. O objetivo dele é aumentar a produtividade de desenvolvimento de aplicações web, mas focado no paradigma de que é melhor gastar um pouco mais de tempo no desenvolvimento porém facilitar a manutenção.

Antes de detalhar mais o framework eu gostaria de

deixar bem claro duas coisas.

1 – Não existe bala de prata

Eu não sei se você tem acompanhado o tanto de frameworks/bibliotecas Javascript que tem surgido nos últimos anos. Mas isso aqui não é um post, pra dizer que agora você tem que desenvolver em Ember.js, e que Ember vai resolver todos os problemas de todas as aplicações web atuais. Assim como isso também não é verdade nem pro Angular 1, nem pro Angular 2, nem pro React ou qualquer outro framework/biblioteca.

2 – Esquece a padaria do seu Zé

Esse monte de framework/biblioteca Javascript foram criados com o intuito de resolver algum problema ao desenvolver grandes aplicações web. Eles não são pra desenvolver sites básicos ou sites estáticos. Você pode usar se quiser, mesmo pra sites pequenos? Pode, mas é como atirar com um canhão em uma mosca.

Tudo as claras, bora entender o que é Ember e como começamos a utilizá-lo.

• Quem está usando Ember.js?
• História do Ember.js
• Conceitos
• Stack de Desenvolvimento
• Hello World – Aplicação Prática

Quem está usando Ember.js?

Como eu quero te convencer a ler até o fim, eu já vou esfregar na sua cara agora quais são os projetos que usam Ember.js

Os sites mais notáveis que usam Ember.js atualmente são:

• Discourse
• Groupon
• Vine
• Twitch.tv
• LinkedIn

Uma ressalva aqui no LinkedIn, é que o Web App recente do LinkedIn usa Ember e isso nos mostra até onde o framework pode chegar. Vários membros do core team do Ember são funcionários do LinkedIn.

Apesar de ser um framework focado pra web, também temos case (um baita case) de Ember.js em aplicações desktop que é o Apple Music.

História do Ember.js

O Ember.js foi criado em 2011, pelo Yehuda Katz a partir do projeto SproutCore (na verdade o SproutCore 2.0 foi renomeado para Ember.js). Até aquele momento, a maior contribuição que Yehuda Katz tinha dado pra comunidade de desenvolvimento de software tinha sido como participante do core team do Ruby on Rails.

Portanto, Ember tem muitas similaridades com Rails.

Por ser um framework das antigas, durante um tempo o Ember ficou muito pra trás em relação a outros que vinham surgindo – e eu acredito que esse seja o motivo pra o framework ser pouco utilizado no Brasil – e então em agosto de 2015, saiu a versão 2.0, com várias melhorias  principalmente no ciclo de vida dos componentes e no fluxo de dados padrão.

Também foi adotado um virtual DOM de forma bem similar ao React. Foi cogitado inclusive na época, a possibilidade do Ember usar o React pra renderizar seus componentes.

Só pra ficar bem claro. Se você conheceu o Ember, antes de 2015, ou por algum motivo usou alguma versão anterior a 2.0, esquece. A versão atual é muito melhor, mais robusta, mais performance (mas ainda tem a melhorar), e muito mais simples do que as versões anteriores.

Conceitos

Ember.js é baseado no padrão MVVM (Model-view-viewModel) que é um padrão focado no desenvolvimento de interfaces gráficas (ponto pro Ember).

O framework adota boas práticas de desenvolvimento segundo o paradigma Convention Over Configuration que podemos traduzir como Programação Por Convenção ou ainda Convenção mais que Configuração. Esse paradigma tem como objetivo diminuir o número de decisões que temos que tomar a todo momento ao desenvolver software, mas sem perder flexibilidade.

Estabilidade

A equipe do Ember.js se esforça para manter o framework estável, mas isso não quer dizer que ele não evolua. Apenas você consegue ter um controle muito bom da evolução do framework, e vai ser mais difícil sua aplicação quebrar porque sofreu uma atualização do framework.

Tecnologias

Ember.js foi um dos primeiros frameworks a adotar Promises do Javascript, Web Components, e ES6. O Yehuda Katz também é participante da equipe que está desenvolvendo as novas versões do Javascript (TC39), ou seja, o cara tá por dentro, e traz a nata pro desenvolvimento do Ember.js

Stack de Desenvolvimento

Ember-cli

Caso você tenha usado a CLI do Angular, saiba que ela foi feita com base na do Ember. Ember-cli é o utilitário de linha de comando do Ember que facilita a criação de componentes Ember, utilizando as convenções (como testes de aceitação e outros) e também a instalação de Addons para ajudar no desenvolvimento.

Addons / Ember Observer

O site Ember Observer é o repositório de Addons que são possíveis de instalar através da ember-cli. Esses Addons ajudam no desenvolvimento, e o repositório é bem extenso. Atualmente tem mais de 4000 addons no observer.

Ember Data

Não é obrigatório desenvolver usando Ember Data, mas a maioria das aplicações Ember a utilizam. Ember Data é uma biblioteca de persistência de dados que facilita manipular objetos não-relacionais (ORM). É possível usar RESTful JSON (só isso já bastava né?) e JSON API, por exemplo.

Como começar a desenvolver? – Hello World

Passo 1

Você tem que ter o Node.js instalado. Se quer entender sobre o Node.js clica aqui, se só quiser baixar a versão atual do Node, clica aqui.

Passo 2

Com o Node instalado, vamos partir pra instalação do Ember-cli. Abra o prompt de comando, ou terminal e digite:

npm install -g ember-cli

Como você deve ter imaginado, nós na verdade instalamos a ember-cli que é uma linha de comandos que facilita – e muito – o desenvolvimento com o Ember.

Conselho, sempre que for criar um projeto, crie antes uma pasta, ou pelo menos coloque dentro da pasta Documents, do seu computador. Digite cd Documents e aperte Enter para criar seu primeiro projeto Ember dentro da pasta Documents.

Com ela instalada, vamos criar nosso primeiro projeto com o comando:

ember new helloWorld

Agora você vai ver que sua linha de comando está baixando alguns pacotes para a criação de um projeto Ember.

Similar ao Angular, Ember é uma solução pronta, ao criar um projeto Ember, você já tem tudo que é necessário para o desenvolvimento de aplicações. Diferente de bibliotecas como React ou Vue.js que você precisa usar outras ferramentas junto para desenvolver uma aplicação realmente robusta.

Passo 3

Depois de alguns instantes – espero que sua internet esteja ok – a ember-cli baixou todas as dependências necessárias para o nosso projeto. Se você quiser ver a estrutura de diretórios do Ember, vai na pasta onde você criou o projeto, vai ter uma estrutura como essa:

A pasta app é onde ficarão 99% dos arquivos de desenvolvimento de uma aplicação.

Então agora, basta rodar o projeto, para isso, volte ao prompt de comando e digite:

cd helloWorld (para abrir a pasta do projeto)
ember server (para simular um servidor para o projeto)

Depois abra o Chrome seu navegador favorito, e digite a seguinte URL: http://localhost:4200

Pronto, sua aplicação está rodando! Linda não?

___________________________________________________________

Se você consegue ler em inglês e quer começar a se aprofundar mais no Ember.js, dá uma olhada na documentação oficial, tem um tutorial bem legal lá.

Qualquer dúvida, deixa aqui embaixo, e fica de olho que vai ter mais conteúdo sobre o Ember.js logo logo!