introdução ao desenvolvimento front end usando bootstrap e angular js
TRANSCRIPT
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/