Front end architecture

Workshop: Front End Architecture e Tecnologias de Front End
@salerno_rafael
github.com/salerno-rafael

Agenda
❖ SOA
❖ Tipos de Arquiteturas de Web App
❖ SOFEA
❖ Sigle Page Application
❖ Backends for Frontends Pattern - BFF
❖ Angular
❖ Angular Testes
❖ Angular Mock
❖ NodeJs
❖ NodeJs + Angular
❖ NodeJs Teste
❖ Gulp
❖ Grunt
❖ Grunt vs Gulp
❖ Bower
❖ JQuery
❖ Boostrap
❖ Boostrap + NodeJs + Angular
❖ Browserify
❖ React
❖ Web components
❖ Isomorphic JavaScript
❖ Open Components
❖ FastFlux
❖ GraphQL
❖ Redux
❖ Relay

Interoperabilidade
Intrínseca
Se os programas de
software não são
projetados para serem
compatíveis, eles
provavelmente não
serão interoperáveisFlexibilidade
a característica de
flexibilidade vai além da
capacidade dos serviços
para efetivamente
compartilhar dados. Os
serviços devem ser
flexíveis e podem ser
combinados e
agregados em soluções
compostas.
Refinamento evolucionário
Evoluir aos poucos não precisa
chegar na perfeição na versão 1
Serviços
compartilhados
Objetivos estratégicos
priorizar a realização de longo
prazo e os objetivos estratégicos
de negócios
Valor de Negócio
Não se trata de
tecnologia de
determinar a direção da
empresa, trata-se da
visão de negócios
ditando a utilização da
tecnologia.
Soa Manifesto

Devem mudar mas atendendo o prometido

Por que não fazer o mesmo na UI ???

Estudar o passado para mudar o futuro

Como é Hoje?? Tipos de Arquiteturas de Web App tinhamos?

Tipos de Arquiteturas de Web App Utilizadas
❏ Web Templating Engines
❏ MVC Frameworks

Web Templating Engines
❏ Código do framework (embedded) dentro de elementos státicos do
HTML
❏ Mix de estático e HTML dinâmico
❏ Exemplos de templates Engines:
❏ Java Server Pages
❏ PHP
❏ Active Server Pages

MVC Frameworks
❏ Model View Controller pattern
❏ Server side framework
❏ Exemplos :
❏ ASP.NET MVC Framework (.Net)
❏ Struts, Spring MVC (Java)
❏ Ruby on Rails (Ruby)
❏ Django (Python)
❏ Grails (Groovy)

AJAX
❏ Asynchronous JavaScript And XML
❏ Alterações de conteúdo dinâmico sem recarregar a página inteira
❏ Permite que as páginas da web para ser atualizado de forma
assíncrona através da troca de pequenas quantidades de dados com
o servidor em background

Processo das Web Applications
JSP/JSF/PHP/etc..

Processo das Web Applications
1. Application Download (Download da Aplicação)
a. (JavaScript, HTML, Applets, Flash)
código fica em constante download para o cliente (web browser)
2. Presentation Flow (Fluxo de Apresentação)
a. Renderização dinâmica visual da interface do usuário
(tela muda, novo telas, etc)
b. Response à cada input do usuário e estado dos dados são
alteradas
3. Data Interchange ( Troca de Dados)
a. Troca de dados entre dois componentes de software e duas
camadas
b. search, updates, retrieval, etc

Characteristicas da Web Templating Engines e MVC Frameworks
❏ Acoplamento forte entre o Presentation flow e Data interchange
❏ Inicio de um Presentation Flow em uma aplicação web sempre
inicia uma Operação de troca de dados
❏ A cada operação de Troca de dados (Data Interchange) chamada
resulta em uma operação do Presentation Flow
❏ Pesentation flow e Data interchange de dados são preocupações que
geralmente estão associados

Por que não posso usar simplesmente os novos Frameworks ????

❏ Propõe remover toda a lógica da camada de
apresentação do servidor para colocar a lógica no
JavaScript no lado do cliente
❏ Um estilo de arquitetura para aplicações web em
ambientes SOA & Cloud

SOFEA
❏ Sinônimo de “Single Page Applications”
❏ Como construir aplicações Front-ends em um ambiente Service-Oriented
❏ É Architectural Style – não uma implementação
❏ Tem o propósito de trazer a revolução de SOA no back-end para o Front-End

Single Page Applications
❏ Por que subutilizar o lado do cliente enquanto sobrecarregamos o lado do
servidor?
❏ Por que não equilibrar melhor esta carga?
❏ Melhorar a experiência ao usuário da aplicação por meio de maior ênfase
nas técnicas de front-end development.
❏ Escrever menos código server-side e mais código client-side
❏ Organizar da melhor maneira possível este código JavaScript

Por que somente agora SOFEA?
❏ Redução da complexidade para a criação de web apps
❏ Evolução do browsers(JavaScript browser engines, AJAX toolkits)
❏ Evolução do frameworks client-side
❏ Simplicidade no cliente
❏ Heterogeneidade da equipe
❏ Maturidade de SOA e de Cloud
❏ Clientes mobile crescem dominantemente

Princípios do SOFEA
❏ Download da Aplicação,Troca de Dados, e Fluxo de Apresentação devem
estar desacoplados
❏ Fluxo de Apresentação é responsabilidade do cliente
❏ Toda a comunicação com o servidor deve ser via web service (REST, SOAP)
❏ O design pattern MVC design está no cliente e não no servidor
❏ Componentes do servidor devem focar na lógica do negócio e serem expostos
em forma de serviço

Benefícios do SOFEA
❏ Scalability
❏ Servidor tem menos trabalho a fazer pois não gera mais a camada de apresentação apenas fornecer um
serviço.
❏ Better user response
❏ Baixa latencia
❏ Após o download da App, somente dados trafegam
❏ Organized programming model
❏ Desenvolvedores de UI concentram-se apenas em client-side
❏ Desenvolvedores do Server-side se concentram apenas em serviços
❏ Interoperability
❏ Integração fácil com multi plataformas
❏ Clientes não se importam se serviços são em C#, Java , Python ou qualquer outro
❏ Higher ROI
❏ Aumenta a possibilidade de Reuso

Protótipo de implementação de SOFEA Client

BFF - Backends for Frontends Pattern

Temos funcionalidades do lado do
servidor que queremos expor para as
interfaces móveis e web o que fazer ?
- Devemos adicionar mais todos os
dados necessários e criar uma
operação nessa API que podemos
utilizar nos dois clientes ?
Como é hoje

Por que não ????
❏ Experiências de usuários moveis são diferentes de usuários web
❏ Móvel tem menos espaço na tela, o que significa menos dados a serem exibidos
❏ Muitas chamadas ao servidor podem matar bateria e o plano de dados
❏ Um backend API único pode se tornar um gargalo quando lançar uma nova entrega
❏ Mudanças estão sendo feitas no mesmo artefato e podem afetar negativamente um
consumidor
❏ Muitos consumidores utilizando um único serviço com propósitos diferentes

Backends for Frontends Pattern
O aplicativo deve ser voltado para o usuário como dois
componentes diferentes
Deverá ser mantido pela mesma equipe que trabalha com a
UI, tornando assim mais fácil de adaptar para o seu tipo de
cliente

BFF
Tempos de Release podem
ser diferentes.
Equipes são diferentes.

BFF
❏ Nasceu para cuidar dos diversos
consumidores que temos hoje para
um único sistema, onde cada um
deles tem uma necessidade.

Chamada de muitos Services
❏ Agregador de chamadas
❏ Paralelizar chamadas
❏ Para mobile reduz o consumo de
bateria e banda

Trabalhando com Falhas no Serviço
❏ Se o serviço de inventory tiver
down, não é necessário interromper
as ações do usuário, quando o
serviço estiver disponível ele voltará
a ver o estoque dos produtos que
ele está selecionando.

Reuso de BFF
❏ Agregando de chamadas a um
mesmo serviço
❏ Mesma funcionalidade em dois
BFFs diferente

Autonomia dos Times
❏ Possibilidade de escalar times
❏ Times trabalham com contratos(interfaces de API)
❏ Times podem ser especializados(Android,IOS,Web)
❏ Featuring podem evoluir separadamente de acordo
com a necessidade especifica

Backends for Frontends
❏ Pode limitar o número de consumidores de acordo com seu
dispositivo
❏ Torna mais fácil de trabalhar com mudanças
❏ Ajuda equipes de desenvolvimento de UI/Mobile a ficarem
mais voltados para o cliente e os dá mais autonomia
❏ Equipes pode controlar seu próprio destino, especializando
para o seu tipo de consumidor
❏ Move o sistema para um design menos acoplado

Single Page Applications - Tools

Relembrando - SOFEA - BFF
❏ Sinônimo de “Single Page Applications”
❏ É Architectural Style – não uma implementação
❏ SPAs são aplicações completas, desenvolvidas em JavaScript, que
funcionam quase como se estivessem sendo executadas nativamente no
desktop
❏ BFF - Toda Single Page Application deve possuir um Back-end (serviço,
API)

https://github.com/salerno-rafael/angularJs

O que estão querendo resolver ?

➢ Bom para criar web-sites dinâmicos com JavaScript
➢ Ajuda a organizar o JavaScript
➢ Ajuda a criar web-sites responsivos rapidamente
➢ Trabalha bem com JQuery
➢ Fácil de testar
➢ Incentiva a testes
➢ clean code
Por que usar Angular ?

➢ Client-side JavaScript Framework para interagir com HTML
➢ Ele é usado em projetos Single Page Application (SPA)
➢ Estende o HTML DOM com atributos adicionais e torná-lo
mais responsivo às ações do usuário.
➢ Open Source
➢ Um dos frameworks mais usados no mundo
➢ Possibilita escrever aplicativos no client-side usando JS
usando MVC
➢ Cross-browser, conseguindo manipular o JS adequadamente
para cada navegador
O que é o Angular ?
by

Vantagens
➢ Facilidade para a manutenção
➢ Responsivo
➢ Possibilidade de testar unidades do código
➢ Reusabilidade de componentes
➢ Menos código e mais funcionalidades
➢ View são puramente HTML
➢ Controller são apenas JavaScript

Pontos de Atenção
➢ Devemos ter cuidado com o que está no código já que
esse código estará sendo executado no lado do
cliente
➢ O usuário pode desabilitar o JavaScript da página e
não verá nada

É composto por diretivas ➢ Diretivas são usados para estender HTML.
➢ Estes são atributos especiais que começam com
prefixo NG.
➢ ng-app : Esta diretiva define e vincula um aplicativo
angular.js para HTML
➢ ng-model : Diretiva que vincula os valores dos dados
da aplicação AngularJS para o HTML inputs controls.
➢ ng-bind : Essa diretiva vincula os dados da aplicação
AngularJS para tags HTML.
➢ ng-controller : é o JavaScript object que contém os
attributes/properties e functions
➢ Entre outras…..

Modules
➢ Nos módulos nos poderemos escrever as
partes de código que poderemos utilizar ao
logo da aplicação
➢ Isso faz com que o código seja mais testável,
legível e de fácil manutenção
➢ Podemos definir dependências da app

Expressions ➢ São utilizado para fazer o bind dos dados com o HTML
➢ Expressions são escritos com double braces {{ expression}}

Execício 1
➢ Criar um index.html e adicionar uma
expression Angular
➢ Criar um app.js com a declaração de um
modulo strore.
https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js

ng-controllers
➢ são onde definimos os comportamentos da aplicação
➢ é onde é definido funções e valores
➢ Controlles tem um scopo, lugar onde ele é conhecido
2

ng-controllers - exemplo HTML
Scope

ng-show
Será mostrado somente se o elemento da
exepressao tiver valor = true
3

ng-hide
Diretiva utilizada para esconder alguma
coisa de acordo com a propriedade
4

Execício 2
➢ 1. Criar um controller com o nome de
StroreController que retorne produtos
➢ 2. Criar um Json com que tenha valores para
name,price,description
➢ 3. Index.html deve mostrar esses valores do
produto que contem no controller
➢ 4. Utilizar a diretiva ngShow
➢ 5. Utilizar a diretiva ngHide

ng-repeat
Repete a seção
de acordo com o
array (FOR)
5

Filter
| (PIPE) - combina a saída do primeiro elemento com o segundo
6

Execício 3
➢ Adicionar mais valores dentro do JSON de
produtos
➢ Utilizar a diretive ngRepeate para mostrar todos os
produtos
➢ Aplicar filters

ng-src
como está no contexto angular sem a diretiva ng-
src a imagem não é carregada
7

ng-click
Faz um bind dos do ng-click e o variável para a
variável que foi definida.
A cada click o valor muda
8

ng-class
9
A directiva ng-class permite definir dinamicamente classes CSS em um elemento HTML por
dados de ligação uma expressão que representa todas as classes a serem adicionados.

Execício 4
➢ Adicionar images dentro do JSON
➢ Mostrar a imagem no HTML
➢ Utilizar ng-click para esconder as Tabs
➢ Utilizar ng-class

Organizar com ng-controller
10

Execício 5
➢ Criar um novo controller
➢ Passar a logica de tabs para o controller

Relembrando
➢ ng-app
➢ ng-controller
➢ ng-show
➢ ng-hide
➢ ng-repeate
➢ Filters
➢ ng-src
➢ ng-click
➢ ng-if
➢ ng-init - A directiva ng-init permite avaliar uma expressão no escopo onde autal.
➢ ng-class
➢ A directiva ng-class permite definir dinamicamente classes CSS em um elemento HTML
por databinding de uma expressão que representa as classes a serem adicionados.

Ajustes
<meta charset="UTF-8">
<div class="col-xs-6 col-xs-offset-2">
https://github.com/salerno-rafael/angularJs-exemplo.git

ng-submit
11
definição da função que é chamada no submit no app.js
Um controller para toda a funcionalidade
Permite chamar uma função do controller quando é submetido

Execício 6
➢ Criar um novo controller para comentário
➢ Adicionar diretiva ng-submit
➢ Buscar valores de comentários do novo controller

Form validations
12
marcar com required campos que deseja ser validado
evita que o form seja enviado sem estar válido

Form validations
12
Destaca o campo de formulário usando classes
depois que começar a digitar, mostrando se um
campo é válido ou inválido
ng-dirty: mostra se é valido ou invalido após digitar
ng-pristine: valida antes de digitar

Execício 6.1
➢ Validar form
➢ Css para validação

ng-include
13
Para eliminar código duplicado, podemos extrair o código para um HTML e incluir quando necessário
esse pedaço de código
workaround for chrome:
- http://www.chrome-allow-file-access-from-file.com
- http://blog.derraab.com/2013/05/30/start-google-chrome-with-local-file-access-on-mac-os-x
Windows Command Line:
- C:Users-your-user-nameAppDataLocalGoogleChromeApplication
- chrome.exe --allow-file-access-from-files

Execício 6.2
➢ Criar um novo html com conteúdo de:
○ nome do produto
○ button para comprar produto

Custom Directive
14
❏ Deixar mais expressivo
❏ Chamar eventos
❏ Adicionar logica
❏ Reusar componentes comuns

Custom Directive
14
restrict = E -> define diretiva como elemento
restrict = A -> define diretiva como atributo
app.directive -> define como a diretiva vai funcionar

Execício 7
➢ Criar uma diretiva de Elemento e Atributo com
nome de produto e botão para compra

Custom Directive - Controllers
15

Execício 8
➢ Criar uma custom diretiva para controller

Dependência
16
❏ Servem para criar modulos por funcionalidade
❏ Quem fica declarado no ng-app é o modulo de nível mais alto

Execício 8.1
➢ Colocar o novo controller em um arquivo js
➢ Injetar esse novo arquivo chamado panel.js

ng-template
18
ng-template é a diretiva usada para criar uma view html
utilizando uma tag script.
Deve ser definido o ID para referênciar o controller

routerProvider
18
$routeProvider é :
o serviço que definir a configuração de urls
mapenado eles para uma página html correspondente
ou a um ng-template onde anexa um controller.

ng-template - $routerProvider
18

18
= classe java
Métodos do java

Execício 9
➢ Criar um novo index.html e um novo app.js
➢ Testar o ng-template comforme o exemplo anterior

Scope
19
Scope é um objeto do Javascript que compartilha estado os controllers e suas views.

Services
16
❏ $http é utilizado para fazer um request async
❏ O retorno dessa chamada é um Promisse (callback) e pode
retornar .success() ou .errro()
❏ O resultado é um JSON
❏ Além de get, pode ser utilizado, post,put,delete etc.
❏ OBS: nome service dado pelo angular não é adequeado

Execício 10
➢ Criar um novo index.html e um novo app.js
➢ Chamar o serviço https://randomuser.me/api/
ou http://uinames.com/api
➢ Mostrar dados no Html

Clean Code Angular
https://github.com/johnpapa/angular-styleguide
❖ Nomenclatura de arquivos
❖ Estrutura de pacotes
❖ Single Responsability
❖ Tratamento de Erros
❖ Etc

JavaScript Testing Framework
❏ Jasmine é um framework de testes Behavior Driven
Development para JavaScript.
❏ Este é adequado para websites, projetos Node.js, ou em
qualquer lugar que o JavaScript pode ser executado.

Instalação
❏ npm install -g jasmine
❏ Ou donwload do pacote e adicionar os JS no projeto
❏ https://github.com/jasmine/jasmine
❏

Execício 11
➢ Criar testes para a página de produtos

Execício 12
➢ Criar testes para o módulo

https://github.com/salerno-rafael/nodejs

O que é o Node ?
❏ Node.js é um framework / plataforma baseada em JavaScript construído sobre Google
Chrome's JavaScript V8 Engine.
❏ Ele é usado para desenvolver aplicações com intenso I/O na web como:
❏ sites de streaming de vídeo
❏ single page application
❏ e outros tipos de aplicações web.
❏ é um Server Side plataform
❏ Node.js usa event-drive , non-blocking I /O
❏ Muito bom para aplicações em tempo real de dados intensivos que são executados através
de dispositivos distribuídos.
❏ é cross plataform
❏ Está na versão 5.5.0 as a mais estável é a 4.26 até o momento

Features
❏ Asynchronous
❏ Event Driven
❏ Single Threaded but Highly Scalable
❏ Very Fast - Google Chrome's V8 JavaScript Engine

Quando Usar ?
❏ I/O bound Applications
❏ Data Streaming Applications
❏ Data Intensive Real time Applications (DIRT)
❏ JSON APIs based Applications
❏ Single Page Applications

Checking Installation
node -v deve ser igual a v4.2.6
npm -v deve ser igual a 2.14.12
Criar um main.js
adicionar o console.log("Hello, World!")
node main.js resultado deve ser Hello, World

3 partes importantes
❏ required modules - importação de modulos são feita pelo comando required
❏ Create server − Um servidor que irá ouvir a solicitação do cliente semelhante ao Apache
HTTP Server.
❏ request / response

Server
executar o comando node main.js
1

Execício 1
➢ Criar testes um server node e abrir na porta 3000

npm - Node Package Manager
❏ Prove duas principais funcionalidades:
❏ repositorio online - https://www.npmjs.com/
❏ comand line utilits que ajuda a gerenciar os pacotes de node

npm - Node Package Manager
❏ o comando npm init inicia a estrutura de um projeto
❏ após executar esse comando será criado um arquivo package.json que é onde ficam
guradados das as infrmações sobre dependências
❏ as dependências ficarão guardadas na pasta node_modules da raiz do projeto criado
❏ para adicionar um módulo dever ser executado o comando npm install express --save
❏ uma vez a dependência salva no arquivo package.json pode ser executado o comando
npm install na raiz do projeto e todos as dependências serão instaladas

Execício 2
➢ executar o comando npm init para criar um
package.json

Callbacks
❏ Node é single threaded application, mas pode suportar concorrência via event e callbacks.
2

Execício 3
➢ fazer uma função para leitura de arquivo de forma
síncrona
➢ fazer uma função para ler de forma assíncrona

Events
❏ Eventos são listeners, e eles são acionados onde espera alguma coisa de
alguma execução
❏ EventEmitter tem tuas principais propriedades:
❏ on -> função para conectar no event
❏ emit -> função para enviar eventos

Execício 4
➢ Implementar o events

Streams
❏ Streams são objetos que permitem ler dados de uma fonte ou gravar
dados para um destino em forma contínua.

Execício 5
➢ Implementar o stream de leitura do arquivo input.
txt
➢ implementar o stream de write para o arquivo
ouput.txt

Socket.io Exemplo
https://github.com/salerno-rafael/nodejs/tree/master/chat-example

Express
6
❏ É um framework web de node que prove features robustas para
desenvolvimento web.
❏ Permite a criação de middlewares para responder às requests HTTP.
❏ Define uma tabela de roteamento que é usado para executar a ação
diferente com base no Método HTTP e URL.
❏ Permite renderizar dinamicamente páginas HTML com base na
passagem de argumentos para modelos.

Express Install
6
❏ instalação do módulo:
❏ npm install express --save
❏ Quando se trabalha com express esses três modulos são importântes:
❏ npm install body-parser --save
❏ npm install cookie-parser --save
❏ npm install multer --save
❏ abrir pasta node_modules e confirmar as instalações

Express - Serving Static Files
7

Execício
➢ implementar server node com statics

Exemplo de Operações
9
Operação Http Method Resultado
listUsers GET Mostrat todos os usuários
salvos
addUser POST adicionar novo usuário
deleteUser DELETE remover usuário
:id GET detalhes de um usuário
especifico

Exemplo de Operações - Base de Dados
9

Exemplo de Operações - Listar
9

Exemplo de Operaçõs - Adicionar
9

Exemplo de Operações - Detalhe
9

Exemplo de Operações - Delete
9

Execício
➢ implementar serviço de form

Execício
➢ implementar node + angular

Instalação
❏ npm install -g mocha
❏ npm install mocha --save
❏ npm install chai --save

Automate and enhance your workflow

O que é ?
❏ Automatizador - é uma ferramenta que ajuda a automatizar tarefas repetitivas ou demorados
em no fluxo de trabalho de desenvolvimento como:
❏ concatenação de arquivos
❏ minificação
❏ testes
❏ Independente de plataforma - integrações são feitas em todos os principais IDEs pode ser
usado com PHP, .NET, Node.js, Java e outras plataformas.

Instalação
11
❏ npm install --global gulp-cli
❏ instala de forma global o cliente do gulp
❏ npm install --save-dev gulp
❏ adiciona no projeto
❏ adicionar o arquivo gulpfile.js na raiz do projeto

Dependências
11
❏ npm install gulp-develop-server --save-dev
❏ npm install gulp-exec --save-dev
❏ npm install gulp-jshint --save-dev
❏ npm install jshint --save-dev
❏ npm install jshint-stylish --save-dev
❏ npm install gulp-util --save-dev
❏ npm install gulp-watch --save-dev

gulpfile.js
11
❏ task 'server:start' = gulp server:start
❏ inicia o node server.js
❏ task 'watch' = gulp watch
❏ verifica se a mudançar e starta o serviço novamente com as
alterações
❏ task 'hint' = gulp hint
❏ executa lint nos arquivos *.js
❏ JSHint é uma ferramenta para detectar erros e potenciais problemas
no código JavaScript e para impor convenções de codificação da sua
equipe.

O que é ?
❏ O GruntJS é um “Task Runner”.
❏ Ele roda a partir do Terminal e serve para automatizar tarefas como:
❏ concatenação de scripts
❏ compilação
❏ minificação
❏ testes unitários
❏ linting

Instalação
12
❏ npm install -g grunt-cli
❏ instala de forma global o cliente do grunt
❏ npm install grunt --save-dev
❏ adiciona no projeto
❏ adicionar o arquivo Gruntfile.js na raiz do projeto
❏ O Gruntfile.js é o arquivo de configuração do Grunt. Nele você vai
dizer tudo o que o Grunt deve fazer.

Dependências
12
❏ npm install grunt-contrib-watch --save-dev
❏ npm install grunt-run --save-dev
❏ npm install grunt-mocha-test --save-dev

Gruntfile.js
12
❏ task 'run = grunt r
❏ inicia o node server.js
❏ task 'watch' = grunt w
❏ verifica se a mudançar e starta o serviço novamente com as
alterações
❏ task 'mochaTest' = grun test
❏ executa todos os arquivos com testes de js

Grunt
❏ Comunidade é grande
❏ mais de 5 mil plugins
❏ está algum tempo no mercado
❏ usado por grandes sites

Gulp
❏ é mais rápido comparado ao grunt
❏ mais de 2 mil plugins
❏ usa mais código para gerar configuração

O que é ?
❏ O Bower é um projeto que permite gerenciar dependências client-side
❏ Em vez de ter que entrar no site de cada projeto que você quer usar e
baixar os arquivos necessários, você pode automatizar este processo
criando um arquivo de manifesto.

Instalação
13
❏ npm install -g bower
❏ instala de forma global o cliente do bower
❏ bower init
❏ configura um projeto bower
❏ após disso será gerado o arquivo bower.json

Depenências do Bower
13
❏ bower install bootstrap --save
❏ bower install angular --save
❏ bower install jquery --save

Pacotes do Bower
Pesquisa visual :
http://bower.io/search/
Pesquisa por comand line:
ex: bower search angular
Instalação de todos os pacotes no bower.js:
bower install
Atualização de pacotes :
bower update jquery
Remover pacote:
bower unistall jquery

O que é ?
❏ jQuery é uma biblioteca JavaScript rápida e concisa criado em 2006
❏ Simpifica o tratamento do HTML, manipulação de eventos, animação e
interações Ajax no desenvolvimento web
❏ Tem o lema de escrever menos para fazer mais.

Features
❏ Dom Manipulation
❏ Event Handling
❏ Ajax support
❏ Animation
❏ Lightweight
❏ Cross Browser Support

O que é ?
❏ 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”.
❏ Bootstrap possui uma diversidade de componentes (plugins) em JavaScript (jQuery) que
auxiliam o designer a implementar:
❏ tootlip
❏ menu-dropdown
❏ modal
❏ carousel
❏ slideshow
❏ entre outros
❏ Para isso é necessário apenas acrescentando algumas configurações no código, sem a
necessidade de criar scripts.

Por que usar ?
❏ Mobile first approach - Possibilitar utilizar mesmos estilos para todos os dispositivos sem
mudar arquivos
❏ Browser Support
❏ Easy to get started - Documentação muito boa
❏ Responsive design - CSS responsivo se ajusta para Desktops, Tablets and Mobiles

Bootstrap Grid System
❏ Pode ser considerado a parte mais importante do Bootstrap
❏ O grid system trabalha com até 12 colunas que se
adaptam apropriadamente ao tamanho da tela de acordo
com o dispositivo
❏ Possui classes pré definidas para opções de layouts
específicos ou para ou mix de layouts

Grid System - columns
exemplo1
12 colunas em todos os dispositivos

Grid System - offset
exemplo2
Aumentar a margem esquerda de uma coluna onde essa coluna tem
um intervalo de 1 a 11.

Componentes
buttons / drop buttons
tabs
pagination
navbar

Boostrap + NodeJS + Angular
14

O que é ?
❏ Browserify permite require ( 'modules') no navegador, através do
agrupamento de todos os seus dependências.
❏ Browsers não tem o método require como Node.js.
❏ Com Browserify você pode escrever código da mesma forma que você
iria usá-lo em Node.

Onde ele Funciona ?
Browserify traz o que
funciona no NodeJs
para o Browser

https://github.com/salerno-rafael/react

O que é ?
❏ É uma biblioteca de UI desenvolvido no Facebook para facilitar a
criação de componentes de interface do usuário interativa.
❏ Pode ser usado no client side e no server Side
❏ Usa um conceito chamado o DOM virtual
❏ Processa seletivamente partes do DOM, alterando somente
estrutura e dados necessários.

Virtual DOM (Document Object Model)
❏ Imagine que você tinha um objeto que você modelada em torno de
um Carro.
❏ O React espelha esse objeto
❏ Agora nesse objeto espelhado de carro, eu adiciono novas rodas e
um farol diferente
❏ Antes de aplicar essas alterações no carro o React realiza um diff e
muda somente o que foi alterado.

Virtual DOM (Document Object Model)

Instalação
$ npm install --save react react-dom
$ bower install --save react

Exemplo 2 - Reuso de Componentes

"Isso vai revolucionar a Web!"

Templates
❏ Os Template definem partes reutilizáveis de DOM.
❏ Não será executada até que o conteúdo do Template seja realmente
anexado ao DOM.
❏ Isso significa <img> não são baixados, os scripts não são executados até
que seja necessário - há poupança de largura de banda e processamento.
❏ Tudo o que está em um Template é escondido em um querySelector assim
os scripts em sua página não vai acidentalmente manipular o conteúdo
original de outro Template.

Shadow DOM
❏ Emcapsulate o conteúdo do DOM
❏ Deixa privado o JS/CSS para o HTML
❏ Permite criar trechos de nós de elementos de DOM que são
independentes e isolados entre si, onde o estilo de um trecho não
interfere com outro
❏ Suportado apenas por Chrome e Firefox
❏ Safari está implementando
❏ IE pra varias nem tentou implementar

Shadow DOM - Exemplo
❏ Vamos pensar em uma tag <video>.
❏ Ele consiste de controles como o botão play, barra de progresso e
os controles de volume.
❏ Cada um desses controles é implementado como um <div> dentro
da tag <video> que na verdade não é acessível para as os scripts
na página, mas é processado na tela usuários.
❏ Shadow DOM é uma ferramenta que vamos o desenvolvedor web
criar a sua própria marcação e estilos escondido encapsulado da
mesma forma em que <video> controles são feitos.

Custom Element
❏ Custom Elements = Templates + Shadow DOM
❏ Podemos criar elementos de primeira classe como <body> <input>
❏ A idéia é encapsular tudo dentro de tags simples e mais fáceis de
manusear.
❏ Reagem ao cliclo de vida do DOM

HTML Imports
❏ Importações carregar recursos externos, tais como Templates ou
Custom Elements
❏ Um Custom Elements contido em um arquivo my-gravatar.html.
❏ Arquivos HTML importados podem conter Templates, stylesheets e
scripts.
❏ Eles são executados quando a importação é carregado.

O que é ?
❏ Aplicações JavaScript que rodam tanto no client-side
quanto no server-side
❏ Pode se gerar o html tanto no lado servidor quanto
no lado do cliente
❏ Virtualmente usando exatamente o mesmo código
em ambos os ambientes

Benefício
Facilidade para manter o código, reduz a duplicação de
código
Seach engine optimization - o Google pode rastrear aplicativos
JavaScript em sites, problema criado por ter Single Page
Mais rápido para processar o conteúdo HTML, diretamente no
navegador. Melhor experiência geral do usuário.
Mesmo Framework que roda cliet-side e server-side

O que é ?
❏ OpenComponents é um framework para desenvolver e distribuídas
html components
❏ Ferramentas para facilitar o compartilhamento de código, reduzir
dependências e facilmente abordar novos recursos.
❏ Os componentes são pequenas unidades de código isomórfico,
constituídos principalmente por html, javascript, css.
❏ Podem conter logica no server-side (node.js) que pode ser usado
para compor uma funcionalidade na client-side
❏ Renderização eles são peças de html puro para ser injetado em
qualquer página html.

Objetivo
❏ Permite que seja criado e publica novos componentes
independentes
❏ Componentes de dados
❏ Que os consumidores possam ter um controle mais granular
❏ Versionamento de componentes imutáveis
❏ Otimizar a renderização do lado do cliente
❏ Performance
❏ Robustez
❏ A/B testing

Pensar em dados e
relaciomento com
tables, joins

Pensar em dados
como objetos, grafos,
JSON

O que é ?
❏ É uma linguagem de consulta de front-end para recuperar dados de
back-end.
❏ Busca de dados e Manipulação de dados
❏ GraphQL.js fornece duas importantes capacidades:
❏ construir um type schema
❏ executar consultas nesse type schema.
❏ Pode ser utilizado para fazer agregação do lado do cliente

Princípios
❏ O GraphQL não foi pensado em fornecer dados através de urls
❏ Mas sim fornecer dados em Grafos de objetos e seus modelos
❏ A ideia é que as consultas e as respostas sejam construídas e
retornadas
❏ A estrutura deve possuir uma hierarquia
❏ Impulsionada pelos requisitos da View e os engenheiros front-end
❏ GraphQL possibilita pensar nos requisitos e criar consultas em
runtime

O que é ?
❏ Simples e poderoso gerenciador de estado para
React, baseado na arquitetura Flux.
❏ Implementando com funções reativas de single-
evente steam como :
❏ Obsevable
❏ ObservableState

Por que ?
❏ React é uma biblioteca de view component, não um framework
web
❏ Ele processa o estado do aplicativo, mas não diz nada sobre
como gerenciar esse estado através de sua aplicação.
❏ O estado pode ser definida em um componente raiz e passada
para o resto da árvore por props.
❏ Quando é necessário passar estados por callback e props
começa a ficar trabalhoso e complicado
❏ O fastflux gerencia esse tipo de estado

Objetivo
❏ Legibilidade com estados
❏ Functional Reactive Programing core:
❏ tudo é observable
❏ functional trasformations: map,fliter reduce
❏ Incentiva o uso de ES6

Como usar Hoje ???
Os browsers não suportam todas as funcionalidades,
para isso podemos utilizar o babel, que transforma o
JavaScript na versão compatível com todos os browsers.

Front end architecture

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (19)

Destaque

Destaque (20)

Semelhante a Front end architecture

Semelhante a Front end architecture (20)

Mais de Rafael Salerno de Oliveira

Mais de Rafael Salerno de Oliveira (20)

Front end architecture