O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Front end architecture

1.738 visualizações

Publicada em

arquitetura front end

Publicada em: Tecnologia
  • Seja o primeiro a comentar

Front end architecture

  1. 1. Workshop: Front End Architecture e Tecnologias de Front End @salerno_rafael github.com/salerno-rafael
  2. 2. Conteúdo
  3. 3. 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
  4. 4. Relembrado SOA
  5. 5. 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
  6. 6. Separação de Conceitos
  7. 7. Poucas dependências
  8. 8. Devem mudar mas atendendo o prometido
  9. 9. Por que lembrado de SOA ???
  10. 10. Problema
  11. 11. Por que não fazer o mesmo na UI ???
  12. 12. Como podemos mudar ?
  13. 13. Estudar o passado para mudar o futuro
  14. 14. Como é Hoje?? Tipos de Arquiteturas de Web App tinhamos?
  15. 15. Tipos de Arquiteturas de Web App Utilizadas ❏ Web Templating Engines ❏ MVC Frameworks
  16. 16. 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
  17. 17. Web Templating Engines
  18. 18. 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)
  19. 19. MVC Frameworks
  20. 20. 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
  21. 21. AJAX
  22. 22. MVC = Web Templating Engines
  23. 23. Processo das Web Applications JSP/JSF/PHP/etc..
  24. 24. 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
  25. 25. 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
  26. 26. Onde queremos chegar
  27. 27. Por que não posso usar simplesmente os novos Frameworks ????
  28. 28. ❏ 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
  29. 29. 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
  30. 30. SPA
  31. 31. 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
  32. 32. Single Page Applications
  33. 33. 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
  34. 34. Lembram dos processo web???
  35. 35. 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
  36. 36. 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
  37. 37. Protótipo de implementação de SOFEA Client
  38. 38. BFF - Backends for Frontends Pattern
  39. 39. 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
  40. 40. Como é hoje outra visão
  41. 41. 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
  42. 42. Problema
  43. 43. 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
  44. 44. BFF Tempos de Release podem ser diferentes. Equipes são diferentes.
  45. 45. BFF ❏ Nasceu para cuidar dos diversos consumidores que temos hoje para um único sistema, onde cada um deles tem uma necessidade.
  46. 46. BFF - Mobile
  47. 47. Chamada de muitos Services ❏ Agregador de chamadas ❏ Paralelizar chamadas ❏ Para mobile reduz o consumo de bateria e banda
  48. 48. 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.
  49. 49. Reuso de BFF ❏ Agregando de chamadas a um mesmo serviço ❏ Mesma funcionalidade em dois BFFs diferente
  50. 50. 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
  51. 51. Evolução com BFF
  52. 52. 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
  53. 53. Single Page Applications - Tools
  54. 54. IDEs
  55. 55. 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)
  56. 56. https://github.com/salerno-rafael/angularJs
  57. 57. O que estão querendo resolver ?
  58. 58. Solução
  59. 59. ➢ 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 ?
  60. 60. ➢ 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
  61. 61. Core Features
  62. 62. 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
  63. 63. 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
  64. 64. É 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…..
  65. 65. 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
  66. 66. Expressions ➢ São utilizado para fazer o bind dos dados com o HTML ➢ Expressions são escritos com double braces {{ expression}}
  67. 67. Modules - exemplo - HTML 1
  68. 68. Modules - exemplo - JS 1
  69. 69. 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
  70. 70. 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
  71. 71. ng-controllers - exemplo JS 2
  72. 72. ng-controllers - exemplo HTML Scope
  73. 73. ng-show Será mostrado somente se o elemento da exepressao tiver valor = true 3
  74. 74. ng-show - exemplo 3
  75. 75. ng-if 3
  76. 76. ng-hide Diretiva utilizada para esconder alguma coisa de acordo com a propriedade 4
  77. 77. ng-hide - exemplo 4
  78. 78. 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
  79. 79. ng-repeat Repete a seção de acordo com o array (FOR) 5
  80. 80. ng-repeat 5
  81. 81. Filter | (PIPE) - combina a saída do primeiro elemento com o segundo 6
  82. 82. Filter 6
  83. 83. Execício 3 ➢ Adicionar mais valores dentro do JSON de produtos ➢ Utilizar a diretive ngRepeate para mostrar todos os produtos ➢ Aplicar filters
  84. 84. ng-src 7
  85. 85. ng-src como está no contexto angular sem a diretiva ng- src a imagem não é carregada 7
  86. 86. 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
  87. 87. ng-click - complete 9
  88. 88. Events
  89. 89. 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.
  90. 90. Execício 4 ➢ Adicionar images dentro do JSON ➢ Mostrar a imagem no HTML ➢ Utilizar ng-click para esconder as Tabs ➢ Utilizar ng-class
  91. 91. Organizar
  92. 92. Organizar com ng-controller 10
  93. 93. Organizar com ng-controller 10
  94. 94. Execício 5 ➢ Criar um novo controller ➢ Passar a logica de tabs para o controller
  95. 95. 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.
  96. 96. Ajustes <meta charset="UTF-8"> <div class="col-xs-6 col-xs-offset-2"> https://github.com/salerno-rafael/angularJs-exemplo.git
  97. 97. 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
  98. 98. ng-submit 11
  99. 99. ng-submit 11
  100. 100. Execício 6 ➢ Criar um novo controller para comentário ➢ Adicionar diretiva ng-submit ➢ Buscar valores de comentários do novo controller
  101. 101. Form validations 12 marcar com required campos que deseja ser validado evita que o form seja enviado sem estar válido
  102. 102. 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
  103. 103. Execício 6.1 ➢ Validar form ➢ Css para validação
  104. 104. 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
  105. 105. Execício 6.2 ➢ Criar um novo html com conteúdo de: ○ nome do produto ○ button para comprar produto
  106. 106. Custom Directive 14 ❏ Deixar mais expressivo ❏ Chamar eventos ❏ Adicionar logica ❏ Reusar componentes comuns
  107. 107. Custom Directive 14 restrict = E -> define diretiva como elemento restrict = A -> define diretiva como atributo app.directive -> define como a diretiva vai funcionar
  108. 108. ng-include vs custom
  109. 109. Execício 7 ➢ Criar uma diretiva de Elemento e Atributo com nome de produto e botão para compra
  110. 110. Organizar os Controllers
  111. 111. Custom Directive - Controllers 15
  112. 112. Custom Directive - Controllers 15
  113. 113. Cuidado com o Saco de Gato
  114. 114. Execício 8 ➢ Criar uma custom diretiva para controller
  115. 115. Dependência 16 ❏ Servem para criar modulos por funcionalidade ❏ Quem fica declarado no ng-app é o modulo de nível mais alto
  116. 116. Dependência 16
  117. 117. Dependência 16
  118. 118. Dependência 16
  119. 119. Execício 8.1 ➢ Colocar o novo controller em um arquivo js ➢ Injetar esse novo arquivo chamado panel.js
  120. 120. 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
  121. 121. 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.
  122. 122. ng-template - $routerProvider 18
  123. 123. 18 = classe java Métodos do java
  124. 124. Execício 9 ➢ Criar um novo index.html e um novo app.js ➢ Testar o ng-template comforme o exemplo anterior
  125. 125. Scope 19 Scope é um objeto do Javascript que compartilha estado os controllers e suas views.
  126. 126. Scope 19
  127. 127. 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
  128. 128. Callback
  129. 129. Services 17
  130. 130. Services exemplo 2 17
  131. 131. 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
  132. 132. Clean Code Angular https://github.com/johnpapa/angular-styleguide ❖ Nomenclatura de arquivos ❖ Estrutura de pacotes ❖ Single Responsability ❖ Tratamento de Erros ❖ Etc
  133. 133. 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.
  134. 134. Instalação ❏ npm install -g jasmine ❏ Ou donwload do pacote e adicionar os JS no projeto ❏ https://github.com/jasmine/jasmine ❏
  135. 135. Exemplo
  136. 136. Exemplo
  137. 137. Exemplo
  138. 138. Exemplo
  139. 139. Exemplo
  140. 140. Exemplo
  141. 141. Exemplo
  142. 142. Execício 11 ➢ Criar testes para a página de produtos
  143. 143. Modulo
  144. 144. Mock
  145. 145. Resultado
  146. 146. Execício 12 ➢ Criar testes para o módulo
  147. 147. https://github.com/salerno-rafael/nodejs
  148. 148. 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
  149. 149. Features ❏ Asynchronous ❏ Event Driven ❏ Single Threaded but Highly Scalable ❏ Very Fast - Google Chrome's V8 JavaScript Engine
  150. 150. Quem Usa ?
  151. 151. Quando Usar ? ❏ I/O bound Applications ❏ Data Streaming Applications ❏ Data Intensive Real time Applications (DIRT) ❏ JSON APIs based Applications ❏ Single Page Applications
  152. 152. 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
  153. 153. 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
  154. 154. Server executar o comando node main.js 1
  155. 155. Execício 1 ➢ Criar testes um server node e abrir na porta 3000
  156. 156. 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
  157. 157. 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
  158. 158. package.json
  159. 159. Execício 2 ➢ executar o comando npm init para criar um package.json
  160. 160. Callbacks ❏ Node é single threaded application, mas pode suportar concorrência via event e callbacks. 2
  161. 161. 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
  162. 162. 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
  163. 163. Events 3
  164. 164. Execício 4 ➢ Implementar o events
  165. 165. Streams ❏ Streams são objetos que permitem ler dados de uma fonte ou gravar dados para um destino em forma contínua.
  166. 166. Streams - Read 4
  167. 167. Streams - Write 4
  168. 168. Streams - Pipe 4
  169. 169. Execício 5 ➢ Implementar o stream de leitura do arquivo input. txt ➢ implementar o stream de write para o arquivo ouput.txt
  170. 170. Socket.io Exemplo https://github.com/salerno-rafael/nodejs/tree/master/chat-example
  171. 171. web server
  172. 172. web server
  173. 173. web server 5
  174. 174. web server - client 5
  175. 175. 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.
  176. 176. 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
  177. 177. Express 6
  178. 178. Express - Operações 6
  179. 179. Express - Serving Static Files 7
  180. 180. Express - Serving Static Files 7
  181. 181. Execício ➢ implementar server node com statics
  182. 182. Express - Form 8
  183. 183. Express - Form 8
  184. 184. Serviços A B C
  185. 185. 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
  186. 186. Exemplo de Operações - Base de Dados 9
  187. 187. Exemplo de Operações - Listar 9
  188. 188. Exemplo de Operaçõs - Adicionar 9
  189. 189. Exemplo de Operações - Detalhe 9
  190. 190. Exemplo de Operações - Delete 9
  191. 191. Execício ➢ implementar serviço de form
  192. 192. Estrutura de pastas 10
  193. 193. 10 Dados no Serviço
  194. 194. 10 Dados no Serviço
  195. 195. 10 Angular recebendo dados
  196. 196. Execício ➢ implementar node + angular
  197. 197. Instalação ❏ npm install -g mocha ❏ npm install mocha --save ❏ npm install chai --save
  198. 198. Unit-Test
  199. 199. Classe
  200. 200. Unit-Test
  201. 201. Resultado
  202. 202. Automate and enhance your workflow
  203. 203. 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.
  204. 204. 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
  205. 205. 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
  206. 206. gulpfile.js 11
  207. 207. 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.
  208. 208. 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
  209. 209. 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.
  210. 210. Dependências 12 ❏ npm install grunt-contrib-watch --save-dev ❏ npm install grunt-run --save-dev ❏ npm install grunt-mocha-test --save-dev
  211. 211. Gruntfile.js 12
  212. 212. 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
  213. 213. Grunt ❏ Comunidade é grande ❏ mais de 5 mil plugins ❏ está algum tempo no mercado ❏ usado por grandes sites
  214. 214. Gulp ❏ é mais rápido comparado ao grunt ❏ mais de 2 mil plugins ❏ usa mais código para gerar configuração
  215. 215. Config das mesmas Tasks
  216. 216. 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.
  217. 217. 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
  218. 218. Depenências do Bower 13 ❏ bower install bootstrap --save ❏ bower install angular --save ❏ bower install jquery --save
  219. 219. bower.js 13
  220. 220. Referências no HTML 13
  221. 221. 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
  222. 222. 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.
  223. 223. Features ❏ Dom Manipulation ❏ Event Handling ❏ Ajax support ❏ Animation ❏ Lightweight ❏ Cross Browser Support
  224. 224. 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.
  225. 225. 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
  226. 226. Boostrap Parts
  227. 227. 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
  228. 228. Grid System exemplo1
  229. 229. Grid System - columns exemplo1 12 colunas em todos os dispositivos
  230. 230. Grid System - offset exemplo2 Aumentar a margem esquerda de uma coluna onde essa coluna tem um intervalo de 1 a 11.
  231. 231. Div exemplo3
  232. 232. exemplo3 Div
  233. 233. Div
  234. 234. Componentes buttons / drop buttons tabs pagination navbar
  235. 235. Componentes labels
  236. 236. Sites que usam Boostrap
  237. 237. Boostrap + NodeJS + Angular 14
  238. 238. Boostrap + NodeJS + Angular 14
  239. 239. Boostrap + NodeJS + Angular 14
  240. 240. Boostrap + NodeJS + Angular 14
  241. 241. 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.
  242. 242. Onde ele Funciona ? Browserify traz o que funciona no NodeJs para o Browser
  243. 243. Exemplo
  244. 244. Exemplo
  245. 245. Compatibilidade
  246. 246. https://github.com/salerno-rafael/react
  247. 247. 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.
  248. 248. 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.
  249. 249. Virtual DOM (Document Object Model)
  250. 250. Instalação $ npm install --save react react-dom $ bower install --save react
  251. 251. Exemplo
  252. 252. Exemplo
  253. 253. Exemplo 1
  254. 254. Exemplo 2 - Reuso de Componentes
  255. 255. Exemplo 3 - Propriedades
  256. 256. Exemplo 4 - MarkDown
  257. 257. Exemplo 4 - MarkDown
  258. 258. O que é ?
  259. 259. "Isso vai revolucionar a Web!"
  260. 260. 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.
  261. 261. Templates - Exemplo
  262. 262. 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
  263. 263. 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.
  264. 264. Shadow DOM - Exemplo
  265. 265. 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
  266. 266. Custom Element - Exemplo
  267. 267. 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.
  268. 268. HTML Imports - Exemplo
  269. 269. Quem implementa?
  270. 270. 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
  271. 271. 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
  272. 272. Open Components Framework
  273. 273. 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.
  274. 274. 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
  275. 275. Open Components - Exemplo
  276. 276. Open Components - Exemplo
  277. 277. GraphQL
  278. 278. Pensar em dados e relaciomento com tables, joins
  279. 279. Pensar em dados como objetos, grafos, JSON
  280. 280. 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
  281. 281. Exemplo de Query
  282. 282. Exemplo de Resultado
  283. 283. Exemplo Implementação
  284. 284. 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
  285. 285. Tipos de Comunicação
  286. 286. GraphQL Server APP Exemplo
  287. 287. FastFlux
  288. 288. 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
  289. 289. 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
  290. 290. Quando Usar ?
  291. 291. Objetivo ❏ Legibilidade com estados ❏ Functional Reactive Programing core: ❏ tudo é observable ❏ functional trasformations: map,fliter reduce ❏ Incentiva o uso de ES6
  292. 292. ECMAScripts
  293. 293. 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.
  294. 294. Workshop: Front End Architecture e Tecnologias de Front End @salerno_rafael github.com/salerno-rafael

×