6. 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
22. Como é Hoje?? Tipos de Arquiteturas de Web App tinhamos?
23. Tipos de Arquiteturas de Web App Utilizadas
❏ Web Templating Engines
❏ MVC Frameworks
24. 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
29. 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
33. 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
34. 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
38. Por que não posso usar simplesmente os novos Frameworks ????
40. ❏ 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
42. 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
44. 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
47. 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
53. 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
55. 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
58. 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
60. 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
62. 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
66. Chamada de muitos Services
❏ Agregador de chamadas
❏ Paralelizar chamadas
❏ Para mobile reduz o consumo de
bateria e banda
67. 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.
68. Reuso de BFF
❏ Agregando de chamadas a um
mesmo serviço
❏ Mesma funcionalidade em dois
BFFs diferente
69. 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
71. 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
75. 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)
80. ➢ 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 ?
81. ➢ 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
83. 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
84. 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
85. É 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…..
86. 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
87. Expressions ➢ São utilizado para fazer o bind dos dados com o HTML
➢ Expressions são escritos com double braces {{ expression}}
90. 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
91. 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
99. 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
110. 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.
111. Execício 4
➢ Adicionar images dentro do JSON
➢ Mostrar a imagem no HTML
➢ Utilizar ng-click para esconder as Tabs
➢ Utilizar ng-class
115. Execício 5
➢ Criar um novo controller
➢ Passar a logica de tabs para o controller
116. 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.
118. 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
123. 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
125. 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
126. Execício 6.2
➢ Criar um novo html com conteúdo de:
○ nome do produto
○ button para comprar produto
128. Custom Directive
14
restrict = E -> define diretiva como elemento
restrict = A -> define diretiva como atributo
app.directive -> define como a diretiva vai funcionar
142. Execício 8.1
➢ Colocar o novo controller em um arquivo js
➢ Injetar esse novo arquivo chamado panel.js
143. 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
144. 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.
150. 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
154. 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
158. 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.
159. Instalação
❏ npm install -g jasmine
❏ Ou donwload do pacote e adicionar os JS no projeto
❏ https://github.com/jasmine/jasmine
❏
175. 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
176. Features
❏ Asynchronous
❏ Event Driven
❏ Single Threaded but Highly Scalable
❏ Very Fast - Google Chrome's V8 JavaScript Engine
178. Quando Usar ?
❏ I/O bound Applications
❏ Data Streaming Applications
❏ Data Intensive Real time Applications (DIRT)
❏ JSON APIs based Applications
❏ Single Page Applications
179. 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
180. 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
183. 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
184. 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
187. Callbacks
❏ Node é single threaded application, mas pode suportar concorrência via event e callbacks.
2
188. 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
189. 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
204. 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.
205. 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
214. 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
235. 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.
236. 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
239. 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.
241. 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
242. 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.
245. 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
247. Grunt
❏ Comunidade é grande
❏ mais de 5 mil plugins
❏ está algum tempo no mercado
❏ usado por grandes sites
248. Gulp
❏ é mais rápido comparado ao grunt
❏ mais de 2 mil plugins
❏ usa mais código para gerar configuração
251. 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.
252. 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
256. 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
258. 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.
263. 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.
264. 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
266. 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
281. 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.
282. Onde ele Funciona ?
Browserify traz o que
funciona no NodeJs
para o Browser
287. 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.
288. 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.
301. 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.
303. 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
304. 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.
306. 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
308. 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.
313. 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
317. 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
320. 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.
321. 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
328. 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
335. 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
339. 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
340. 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
342. Objetivo
❏ Legibilidade com estados
❏ Functional Reactive Programing core:
❏ tudo é observable
❏ functional trasformations: map,fliter reduce
❏ Incentiva o uso de ES6
346. 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.
347. Workshop: Front End Architecture e Tecnologias de Front End
@salerno_rafael
github.com/salerno-rafael