Tagon8 Blog

Entendendo a estrutura do Ember.js

Entendendo a estrutura do Ember.js

Ember.js é um framework open-source javaScript para aplicação Web do lado do cliente. Ele foi baseado no padrão de arquitetura de software MVC(Model,View and Controller) e permite que os desenvolvedores possam criar uma única pagina escalonável.

Possui 3 dependências mínimas, node.js, NPM e o Bower.

Node.js – Plataforma construída em tempo de execução do JavaScript para a construção de aplicações de rede, facilmente escaláveis e rápidos. Ele é leve e eficiente, perfeito para aplicações em tempo real de dados intensivos.

Baixe a ultima versão do node.js no link https://nodejs.org/download.

 

NPM – Gerenciador de pacotes que torna mais fácil o compartilhamento e a reutilização do código JavaScript para desenvolvedores.

Para instalá-lo basta digitar em seu terminal.

sudo npm install npm -g

 

Bower – Busca e instala pacotes, mantendo o controle destes pacotes em um arquivo de manifesto. Ele fornece ganchos para facilitar o uso de pacotes em suas ferramentas e fluxos de trabalho.

 

Ember-CLI – Interface de linha de comando para o ember.js. Ele é instalado através do NPM(Gerenciador de pacotes) com o comando:

npm install -g ember-cli

 


Para gerar a estrutura básica de sua aplicação Ember. Execute em seu terminal o comando:

 

ember new my-app

 

Sua estrutura divide-se basicamente em templates (standardengine handlebars), view, controller,  component e model.

Template:

Responsável por estruturar o HTMLBars da página, é um roteador para gerenciar o estado da aplicação. Usando handlebars todas as alterações feitas pelo controller e as view serão automaticamente reproduzidas no Front-End.

Os templates são gerados através do código:

ember generate template user

 

View:

Faz qualquer alteração no Front-end, como validar as  mascaras dos campos, gerenciar as ações de algum componente (Banner, menu) e controlar as ações do cliente como alteração de cores, fonte, entre outras.

Views são gerados através do código:

ember generate view user

 

Model:

Recebe dados de uma API externa e/ou interna, para que possa ser processado e consumido no Front-End. Que é o responsável por identificar o  formato do dado a ser  recebido e trabalhar neste dado para que ele seja mostrado da melhor forma possível, para facilitar o uso da mesma em cálculos ou simplesmente mostrar este dado trabalhado na tela .

Os model são gerados através do código:

ember generate model user

 

Controller:

É o responsável por fazer todo processamento dos dados no navegador do cliente, como validações de um cadastro, fazer um upload de arquivo e por processar informações.

Os controlador são gerados através do código:

ember generate controller user

 

Component:

Cria trechos de html e códigos para serem reutilizados. Assim será evitado a repetição de códigos  desnecessário, deixando sua a aplicação menor e mais organizada.

Os componentes devem possuir seu nome composto e separado por um traço para formular um nome valido para o component, por exemplo application-head. O nome composto é para evitar confrontos com nomes atuais e/ou futuros elemento HTML e garante que o  Ember encontre os componentes automaticamente.

Os componentes são gerados através do código:

ember generate component list-user

 

Então como você pôde perceber, o Ember é um Framework que irá facilitar o desenvolvimento do seu projeto, ajudando na organização do seu código.

Agora, você já está apto a reconhecer uma estrutura Ember.