Criando uma aplicação Ember.js em 2 minutos

Ultimamente eu tenho conversado com diversos desenvolvedores sobre Framework Ember.js. Na grande maioria das vezes as pessoas pensam no Ember com estranheza do tipo:

“Mas Ember parou no tempo” , “Ember está ultrapassado”, “Ember é lento” ou “Ember não é produtivo”

Felizmente eu preciso discordar. Ember tem uma release nova a cada 2 meses, estando atualmente na versão 2.15. Para você ter uma ideia Angular CLI é inspirado no Ember CLI e projetado com a ajuda do Core-Team do Ember. Deixo esse link para você conhecer um pouco mais. Ember.js roubando da comunidade.

Voltando ao assunto do post! Que é mostrar o quanto o Ember é ágil!

Para facilitar a criação de uma aplicação utilizando Ember, a equipe do Ember desenvolveu uma ferramenta chamada Ember CLI que reduz toda a complexidade envolvida para criar um projeto e configurar um ambiente de desenvolvimento.

Para exemplificar a simplicidade de criar uma aplicação Ember, usando essa ferramenta, vamos criar um projeto e gerar uma versão de produção.

Vou assumir que você já tenha instalado Node 4+, caso não tenha, instale antes de continuar.

Esses links podem ajudar você:
https://nodejs.org/en/download/package-manager/
https://tableless.com.br/como-instalar-node-js-no-linux-corretamente-ubuntu-debian-elementary-os/

Para começar, vamos instalar um pacote npm, ember-cli em sua maquina, executando esse comando:

$ npm install ember-cli -g

Feito isso, você já tem a ferramenta de desenvolvimento do Ember instalada na sua maquina. Digite no terminal para testar:

$ ember help
Usage: ember <command (Default: help)>
Available commands in ember-cli:
ember addon <addon-name> <options...>
  Generates a new folder structure for building an addon, complete with test harness.
  --dry-run (Boolean) (Default: false)
    aliases: -d
  --verbose (Boolean) (Default: false)
    aliases: -v
  --blueprint (String) (Default: addon)
    aliases: -b <value>
...

Você pode olhar com calma depois todos os comandos disponíveis.

Tendo instalado, vamos criar um projeto novo executando no terminal:

$ ember new my-app

Feito isso, você deve ter uma estrutura similar essa.

my-app/
├── app
├── config
├── ember-cli-build.js
├── node_modules
├── package.json
├── package-lock.json
├── public
├── README.md
├── testem.js
├── tests
└── vendor

Pronto! Já temos tudo para rodar nossa aplicação Ember. Para testar execute no terminal:

$ ember server
Could not start watchman
Visit https://ember-cli.com/user-guide/#watchman for more info.
Livereload server on http://localhost:49153
Build successful (6161ms) – Serving on http://localhost:4200/

Agora acesse http://localhost:4200. Vai ser apresentado uma tela similar a esta:

Tudo finalizado! Agora temos uma aplicação Ember funcionando em ambiente de desenvolvimento em apenas 3 comandos.

A medida que você vai editando os arquivos, o Ember vai compilar e atualizar automaticamente a página. Permitindo você ganhar agilidade no desenvolvimento.

Abra o arquivo: app/templates/application.hbs e substitua o conteúdo por este:

<h1>Hello World</h1>

Se você acessar o navegador novamente, você verá que o conteúdo foi alterado.

Bom, agora que temos nossa aplicação funcionando, ela precisa ser publicada em produção.

Para compilar uma versão para ir a produção vamos usar o comando ember buildque vai criar o diretório my-app/dist com nosso código pronto para produção.

$ ember build --environment production

Pronto! feito isso seu código está pronto para ser publicado em produção.

Você pode copiar os arquivos da pasta my-app/dist compilado pelo Ember CLI.

Sim! Existe outras forma de publicar uma aplicação Ember em produção, usando Ember CLI Deploy, por exemplo, mas isso é assunto para outro post.

Bom! É isso, para saber mais ou mesmo criar uma aplicação de exemplo mais complexa, você pode acessar a página oficial do Ember.

Até a próxima!