O documento discute conceitos de front-end como MVC, MVP, MVVM e AngularJS. Explica que MVC separa a interface do usuário em Model, View e Controller, enquanto MVP usa Presenter no lugar de Controller. MVVM usa ViewModel para manter a View e Model sincronizados. AngularJS usa MVW, onde qualquer padrão pode ser usado.

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

4. 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)

5. 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.

6. • 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.

7. v

8. 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.

9. • 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:

10. • 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.

11. • 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.

15. 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.

17. 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.

19. 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 é:

20. USANDO O BOWER
Instalando Pacotes (Dependências):
Exemplo:
Usando Pacotes

22. O QUE É ANGULARJS?
• AngularJS é uma framework estrutural para apps web dinâmicas.

23. 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.

24. ENTENDENDO COMO FUNCIONA O ANGULARJS
1. 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
}]);

25. VISÃO GERAL CONCEITUAL
Conceito Descrição
Template HTML com marcação adicional
Directives 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ções
Injector Container de injeção de dependência
Module 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.

26. 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:Minicursoexercicioexercicio1
• 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.

27. BORA TRABALHAR!!!

29. 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/

30. BORA UNIR OS MUNDOS?

31. 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.

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