Front end architecture
-
Upload
rafael-salerno-de-oliveira -
Category
Technology
-
view
726 -
download
0
Transcript of Front end architecture
Workshop: Front End Architecture e Tecnologias de Front End
@salerno_rafael github.com/salerno-rafael
Conteúdo
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
Relembrado SOA
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árioEvoluir aos poucos não precisa chegar na perfeição na versão 1
Serviços compartilhados
Objetivos estratégicospriorizar a realização de longo prazo e os objetivos estratégicos de negócios
Valor de NegócioNã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
Separação de Conceitos
Poucas dependências
Devem mudar mas atendendo o prometido
Por que lembrado de SOA ???
Problema
Por que não fazer o mesmo na UI ???
Como podemos mudar ?
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
Web Templating Engines
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)
MVC Frameworks
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
AJAX
MVC = Web Templating Engines
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
Onde queremos chegar
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
SPA
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
Single Page Applications
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
Lembram dos processo web???
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
Como é hoje outra visão
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
Problema
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.
BFF - Mobile
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
Evolução com BFF
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
IDEs
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 ?
Solução
➢ 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
Core Features
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}}
Modules - exemplo - HTML
1
Modules - exemplo - JS
1
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 JS
2
ng-controllers - exemplo HTML
Scope
ng-show
Será mostrado somente se o elemento da exepressao tiver valor = true
3
ng-show - exemplo
3
ng-if
3
ng-hide
Diretiva utilizada para esconder alguma coisa de acordo com a propriedade
4
ng-hide - exemplo
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
ng-repeat
5
Filter
| (PIPE) - combina a saída do primeiro elemento com o segundo
6
Filter
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
7
ng-srccomo 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-click - complete
9
Events
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
Organizar com ng-controller
10
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.jsUm controller para toda a funcionalidade
Permite chamar uma função do controller quando é submetido
ng-submit
11
ng-submit
11
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 digitarng-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-name\AppData\Local\Google\Chrome\Application- 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
ng-include vs custom
Execício 7
➢ Criar uma diretiva de Elemento e Atributo com nome de produto e botão para compra
Organizar os Controllers
Custom Directive - Controllers
15
Custom Directive - Controllers
15
Cuidado com o Saco de Gato
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
Dependência
16
Dependência
16
Dependência
16
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.
Scope
19
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
Callback
Services
17
Services exemplo 2
17
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❏
Exemplo
Exemplo
Exemplo
Exemplo
Exemplo
Exemplo
Exemplo
Execício 11
➢ Criar testes para a página de produtos
Modulo
Mock
Resultado
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
Quem Usa ?
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.6npm -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
package.json
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
Events
3
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.
Streams - Read
4
Streams - Write
4
Streams - Pipe
4
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
web server
web server
web server
5
web server - client
5
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
6
Express - Operações
6
Express - Serving Static Files
7
Express - Serving Static Files
7
Execício
➢ implementar server node com statics
Express - Form
8
Express - Form
8
Serviços
A
B
C
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
Estrutura de pastas
10
10
Dados no Serviço
10
Dados no Serviço
10
Angular recebendo dados
Execício
➢ implementar node + angular
Instalação
❏ npm install -g mocha
❏ npm install mocha --save
❏ npm install chai --save
Unit-Test
Classe
Unit-Test
Resultado
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
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
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
Config das mesmas Tasks
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
bower.js
13
Referências no HTML
13
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
Boostrap Parts
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
exemplo1
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.
Div
exemplo3
exemplo3
Div
Div
Componentes
buttons / drop buttons
tabs
pagination
navbar
Componentes
labels
Sites que usam Boostrap
Boostrap + NodeJS + Angular
14
Boostrap + NodeJS + Angular
14
Boostrap + NodeJS + Angular
14
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
Exemplo
Exemplo
Compatibilidade
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
Exemplo
Exemplo 1
Exemplo 2 - Reuso de Componentes
Exemplo 3 - Propriedades
Exemplo 4 - MarkDown
Exemplo 4 - MarkDown
O que é ?
"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.
Templates - Exemplo
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.
Shadow DOM - Exemplo
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
Custom Element - Exemplo
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.
HTML Imports - Exemplo
Quem implementa?
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
Open Components Framework
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
Open Components - Exemplo
Open Components - Exemplo
GraphQL
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
Exemplo de Query
Exemplo de Resultado
Exemplo Implementação
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
Tipos de Comunicação
GraphQL Server APP
Exemplo
FastFlux
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
Quando Usar ?
Objetivo
❏ Legibilidade com estados
❏ Functional Reactive Programing core:❏ tudo é observable❏ functional trasformations: map,fliter reduce
❏ Incentiva o uso de ES6
ECMAScripts
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.
Workshop: Front End Architecture e Tecnologias de Front End
@salerno_rafael github.com/salerno-rafael