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