INTRODUÇÃO AO

DESENVOLVIMEN

TO FR

ONT-END

USANDO BOOTSTRAP E ANGULARJS

P O R : CL O V E S M

O R E I RA J U

N I OR

O QUE É FRONT-END?• Diferença entre Front-End e Back-End.• Exemplo de desenvolvimento Front-End e Back-End.

PADRÕES ARQUITETU

RAIS

MVC• Model – View – Controller• MVC foi descrito pela primeira vez por Trygve Reenskaug em

1979 para interagir com uma maquina da XEROX que tinha um mouse, o controller era o responsável por interagir com os dispositivos externos, fazendo assim a view e o model ficarem sincronizados.

• MVC (Front-End)

MVP• MVP é uma arquitetura que apareceu pela primeira vez na

IBM e mais visivelmente no Taligent durante a década de 1990. É mais comumente referido através da Potel Paper. A idéia foi ainda mais popularizado e descrita pelos desenvolvedores do Dolphin Smalltalk.

• Model – View – Presenter• Derivação do MVC para construção de interfaces para os

usuários.• O Padrão foi projetado para facilitar o teste automatizado e

melhorar a separação de conceitos na camada de apresentação.

• M -> Model ou Modelo é a parte que representa a definição de dados à serem retornados ou manipulação de

• V -> View ou Visão é a interface passiva que exibe os dados (Modelo) e os comandos de comandos (eventos) de usuários para a camada de apresentação (Presenter) agir sobre estes dados.

• P -> Presenter ou Apresentação age sobre o modelo e a visão. Ele recupera os dados do repositório (Modelo) e formata-o para a camada de visão.

v

MVVM• Model-View-View Model (MVVM)• Uma variação do Padrão Presentation Model descrito pelo

grande Martin Fowler.• É derivado do MVC.• Foi desenvolvido em 2005 por John Gossman para simplificar

a programação orientada à eventos de interfaces de usuários usando recursos WPF e Silverlight.

• Model-View-View Model (MVVM) é um padrão de projeto para a construção de interfaces de usuário.Ele descreve como você pode manter um simples UI potencialmente sofisticada dividindo-a em três partes:

• Model (O Modelo): São os dados armazenados do seu aplicativo. Estes dados representam objetos e operações no seu domínio de negócios (por exemplo, contas bancárias que podem realizar transferências de dinheiro) e é independente de qualquer interface do usuário. Em UI, normalmente você vai fazer chamadas Ajax para algum código do lado do servidor para ler e escrever esses dados armazenados modelo.

• View Model (Modelo de exibição): É uma representação pura do código dos dados e operações em uma interface do usuário. Por exemplo, se você está implementando um editor de lista, o seu modelo de visualização seria um objeto segurando uma lista de itens, e expondo métodos para adicionar e remover itens. Note que esta não é a própria interface do usuário: ele não tem qualquer conceito de botões ou estilos de exibição. Não é o modelo de dados persistente ou - que detém os dados não salvos que o usuário está trabalhando. Em JS seus modelos de exibição são objetos JavaScript puros que possuem nenhum conhecimento de HTML. Mantendo a visão do modelo abstrato, desta forma permite que ele fique simples, assim você pode gerenciar comportamentos mais sofisticados, sem se perder.

• View (Visão): É uma interface do usuário interativa visível representando o estado do modelo de exibição. Ele exibe informações do modelo de exibição, envia comandos para o modelo de exibição (por exemplo, quando o usuário clica em botões), e as atualizações serão sempre que o estado do ViewModel muda. Em JS, a sua visão é simplesmente seu documento HTML com ligações declarativas para vinculá-lo ao modelo de exibição. Alternativamente, você pode usar modelos que geram HTML usando os dados de seu modelo de exibição.

NPM• É o nome reduzido de Node Package Manager (Gerenciador

de Pacotes do Node).• O NPM é duas coisas: Primeiro, e mais importante, é um

repositório online para publicação de projetos de código aberto para o Node.js; segundo, ele é um utilitário de linha de comando que interage com este repositório online, que ajuda na instalação de pacotes, gerenciamento de versão e gerenciamento de dependências.

GRUNT• Ferramenta para execução de tarefas.• Usado para automação de tarefas repetitivas, como por

exemplo minificar arquivos JavaScript, compilação, testes unitários, entre outros.

• Pode-se criar plugins Grunt se não houver algum disponível.• O arquivo de configuração é o Gruntfile, que contém todas

as definições das tarefas necessárias para a automação solicitada.

• Executa a partir do npm.

BOWER• O Bower é direcionado para buscar, baixar e salvar todo o

material necessário para a construção da sua aplicação.• O Bower mantém o controle destes pacotes em um arquivo

chamado de bower.json.• É uma ferramenta otimizada para o desenvolvimento front-

end.• A instalação para uso pelo npm é:

USANDO O BOWERInstalando Pacotes (Dependências):

Exemplo:

Usando Pacotes

O QUE É ANGULARJS?• AngularJS é uma framework estrutural para apps web

dinâmicas.

MVW• O padrão MVW na verdade não é um padrão, MVW, significa

Model-View-Whatever, ou seja, tanto faz qual padrão você acha que vai programar em AngularJS, não perca tempo, apenas faça.

ENTENDENDO COMO FUNCIONA O ANGULARJS1. Criação de um projeto usando AngularJS:

• Primeiro, nós precisamos de fato configurar o essencial para um projeto Angular. Há certas coisas para se observar antes de começarmos, que geralmente consiste em uma declaração ng-app para definir sua aplicação, um Controller para conversar com sua ‘View’, e alguma ligação DOM e inclusão do Angular. Aqui temos o mínimo essencial:

Um pouco de HTML com declarações ng-*:

<div ng-app=“exemploApp"><div ng-controller=“ExemploController"> <!-- controlador lógico --></div></div>

Um módulo Angular e um Controlador:

var myApp = angular.module('exemploApp', []);

myApp.controller('ExemploController', ['$scope', function ($scope) {// Controller mágico }]);

VISÃO GERAL CONCEITUALConceito DescriçãoTemplate HTML com marcação adicionalDirectives Estender HTML com atributos personalizados e elementos

Model Os dados mostrados para o usuário na visão e com os quais interage usuário

Scope Contexto em que o modelo é armazenado para que os controladores, diretivas e expressões possam acessá-los.

Expressions Variáveis de acesso e funções para o “scope”

Compiler Analisa o template e instancia diretivas e expressões

Filter formats the value of an expression for display to the user

View O que o usuário vê (DOM)Data Binding Dados de sincronização entre o modelo e a visão

Controller A lógica de negócios por trás da camada de visão.Dependency Injection Cria e gerencia objetos e funçõesInjector Container de injeção de dependênciaModule Um contâiner para as diferentes partes de um aplicativo, incluindo os controladores, serviços, filtros,

diretivas que configura o “Injector”.

Service Lógica de negócios reutilizável independente das Views.

VAMOS FAZER UM EXERCÍCIO EXPLICATIVO?• Primeiramente, abra a máquina virtual definida para o

minicurso.• Execute o aplicativo Sublime Text 3• Após, vá na barra de menus, escolha a opção “Open Folder”• Escolha o diretório C:\Minicurso\exercicio\exercicio1• Clique no botão direito e adicione um arquivo escolhendo a

opção “New File” e após salve com o nome de “index.html”.• Na barra esquerda, abra o arquivo README.md para

visualizar os passos que iremos utilizar neste exercício.

BORA TRABALHAR!!!

E O QUE É BOOTSTRAP?• Bootstrap é um framework front-end que facilita a vida dos

desenvolvedores web a criar sites com tecnologia mobile (responsivo) sem ter que digitar uma linha de CSS para “fazer e acontecer”. Não é à toa que o termo “Bootstrap” em inglês significa “inicialização”, algo que possui um ponto de partida. Além disso, o Bootstrap possui uma diversidade de componentes (plugins) em JavaScript que auxiliam o designer a implementar: tootlip, menu-dropdown, modal, carousel, slideshow, entre outros sem a menor dificuldade, apenas crescentando algumas configurações no código, sem a necessidade de criar scripts e mais scripts.

• A definição dos componentes que se pode utilizar está no GetBootstrap: http://getbootstrap.com/components/

BORA UNIR OS MUNDOS?

PRÁTICA• Na pasta do exercício 2, abra o arquivo README.md com o Sublime

Text 3 e siga os passos conforme solicitar.• Após terminar os passos, faça o desafio em questão de adicionar o

Google Maps ao app.

REFERÊNCIAS BIBLIOGRÁFICAShttp://martinfowler.com/eaaDev/ModelViewPresenter.htmlhttp://martinfowler.com/eaaDev/uiArchs.htmlhttp://www.wildcrest.com/Potel/Portfolio/mvp.pdfhttp://martinfowler.com/eaaDev/PresentationModel.htmlhttp://knockoutjs.com/documentation/observables.htmlhttps://www.npmjs.com/http://nodebr.com/o-que-e-a-npm-do-nodejs/http://www.tutorialwebdesign.com.br/o-que-e-bootstrap/