Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Aplicações de Alto Desempenho com JHipster Full Stack

432 vues

Publié le

Palestra apresentada no Meetup da comunidade Sou Java Campinas sobre o JHipster, desmistificando muitas premissas e validando aquilo que temos de melhor no mercado de tecnologias Java.

Publié dans : Technologie
  • Soyez le premier à commenter

Aplicações de Alto Desempenho com JHipster Full Stack

  1. 1. APLICAÇÕES DE ALTO DESEMPENHO COM JHIPSTER FULL STACK João Gabriel Lima linkedin/in/joaogabriellima
  2. 2. CTO na Epitrack Professor Pesquisador em Inteligência Artificial e Big Data Entusiasta de novas tecnologias! QUEM SOU E O QUE FAÇO epitrack.tech
  3. 3. HOJE VAMOS COMEÇAR FALANDO DE UM PROBLEMA RECORRENTE EM QUALQUER PROJETO JAVA: A ARQUITETURA!
  4. 4. PRECISAMOS PENSAR MUITO ALÉM DOS REQUISITOS FUNCIONAIS E NÃO-FUNCIONAIS.
  5. 5. ESCALÁVEL EXTENSÍVEL PERFORMÁTICA FÁCIL DE MANTER INTEROPERÁVEL RESILIENTE UMA BOA ARQUITETURA JAVA PRECISA SER:
  6. 6. E UM NOVO PROJETO? NÃO IMPORTA O QUÃO EXPERIENTE VOCÊ É, SEMPRE TEM ALGO QUE VAI TE SURPREENDER EM UM NOVO PROJETO JAVA!
  7. 7. FULLSTACK Front-end: adaptativo, desacoplado, otimizável Back-end: regras de negócio, controladores, API`s Banco de dados: funções, backups, migração, versionamento …
  8. 8. GENERATORS SCAFFOLDING BOILERPLATES ETC…
  9. 9. ESTRATÉGIAS PARA QUE VOCÊ INICIE UM PROJETO COM UM PASSO À FRENTE. UMA ARQUITETURA BEM DEFINIDA, PRONTA PARA EVOLUIR
  10. 10. E EU AINDA NEM COMECEI A FALAR DA CONSTRUÇÃO DE MICRO-SERVIÇOS!
  11. 11. TUDO ISSO E MUITO MAIS… JHIPSTER
  12. 12. http://www.jhipster.tech/ +300 colaboradores + 7.000 estrelas no GitHub + 500.000 instalações E crescendo…
  13. 13. https://github.com/jhipster/generator-jhipster
  14. 14. E PARA MICROSSERVIÇOS…
  15. 15. https://traefik.io/ "Proxy reverso e balanceador de carga para implantar microservices com facilidade”
  16. 16. QUICK START DEPENDÊNCIAS
  17. 17. https://start.jhipster.tech
  18. 18. https://start.jhipster.tech
  19. 19. SHOW ME THE CODE
  20. 20. +
  21. 21. SUA PRIMEIRA APLICAÇÃO JHIPSTER - PASSO A PASSO ➤ yarn global add yo ➤ yarn global add generator-jhipster ➤ mkdir soujava ➤ cd soujava ➤ jhipster http://www.jhipster.tech/creating-an-app/
  22. 22. THE JHIPSTER REGISTRY ➤ É um servidor Eureka, que serve como um servidor de descoberta para aplicativos. É assim que o JHipster lida com roteamento, balanceamento de carga e escalabilidade para todas as aplicações. ➤ É um servidor Spring Cloud Config, que fornece configuração de tempo de execução para todos os aplicativos. ➤ É um servidor de administração, com painéis para monitorar e gerenciar aplicativos.
  23. 23. http://www.jhipster.tech/modules/marketplace/#/list MARKETPLACE
  24. 24. PRONTO! VAMOS RODAR NOSSO PROJETO Para executar nosso projeto Java ./mvnw Para executar nosso front com o transpire para Typescript e Live Reload yarn start yarn lint verifique se há problemas de estilo de código no código TypeScript yarn lint:fix corrigir automaticamente problemas de fiabilidade de TypeScript yarn tsc compile o código TypeScript yarn test execute testes de unidade com Karma yarn test:watch mantenha os testes da unidade de karma em execução, para receber feedback em tempo real quando o código for alterado
  25. 25. RODANDO CLIENT E SERVER-SIDE COM LIVE RELOAD Se você começar a fazer alterações no código do lado do cliente sem que o Yarn comece a ser executado, nada será refletido pois as mudanças não são compiladas, então você precisa executar: yarn webpack:build:dev manualmente após as mudanças ou começar a execução do yarn (RECOMENDADO). Você também pode forçar o maven a executar a task do webpack como: ./mvnw -Pdev, webpack
  26. 26. webapp !"" app - Your application # !"" account - User account management UI # !"" admin - Administration UI # !"" blocks - Common building blocks like configuration and interceptors # !"" entities - Generated entities (more information below) # !"" home - Home page # !"" layouts - Common page layouts like navigation bar and error pages # !"" shared - Common services like authentication and internationalization # !"" app.main.ts - Main application class # !"" app.module.js - Application modules configuration # !"" app.route.js - Main application router !"" content - Static content # !"" css - CSS stylesheets # !"" images - Images !"" i18n - Translation files !"" scss - Sass style sheet files will be here if you choose the option !"" swagger-ui - Swagger UI front-end !"" 404.html - 404 page !"" favicon.ico - Fav icon !"" index.html - Index page !"" robots.txt - Configuration for bots and Web crawlers ESTRUTURA DO PROJETO
  27. 27. webapp !"" app # !"" entities # !"" foo - CRUD front-end for the Foo entity # !"" foo.component.html - HTML view for the list page # !"" foo.component.ts - Controller for the list page # !"" foo.model.ts - Model representing the Foo entity # !"" foo.module.ts - Angular module for the Foo entity # !"" foo.route.ts - Angular Router configuration # !"" foo.service.ts - Service which access the Foo REST resource # !"" foo-delete-dialog.component.html - HTML view for deleting a Foo # !"" foo-delete-dialog.component.ts - Controller for deleting a Foo # !"" foo-detail.component.html - HTML view for displaying a Foo # !"" foo-detail.component.ts - Controller or displaying a Foo # !"" foo-dialog.component.html - HTML view for editing a Foo # !"" foo-dialog.component.ts - Controller for editing a Foo # !"" foo-popup.service.ts - Service for handling the create/update dialog pop-up # !"" index.ts - Barrel for exporting everything !"" i18n - Translation files # !"" en - English translations # # !"" foo.json - English translation of Foo name, fields, ... # !"" fr - French translations # # !"" foo.json - French translation of Foo name, fields, ... ESTRUTURA DO PROJETO
  28. 28. https://augury.angular.io/
  29. 29. http://www.jhipster.tech/jdl-studio/
  30. 30. ALTERANDO O MODELO DE DADOS Umas das principais dúvidas dos desenvolvedores recém chegados ao JHipster é na alteração do modelo de dados. Temos diversas formas de fazer. Seguem as principais: 1) jhipster import-jdl <arquivo> -- force 2) ./mvnw liquidasse:diff Você pode gerar novas entidades, services e controllers jhipster entity <entityName> --[options]
  31. 31. SEPARANDO FRONT-END E API DE SERVIÇOS Para gerar apenas o front-end ou uma API de serviços basta executar os comandos: $ jhipster --skip-client $ jhipster --skip-server
  32. 32. SOU PROJETO EM PRODUÇÃO
  33. 33. PRODUCTION-READY
  34. 34. ➤ ./mvnw -Pprod ➤ Gerando um .war ➤ ./mvnw -Pprod package ➤ Executando ➤ ./jhipster-0.0.1-SNAPSHOT.war ➤ java -jar jhipster-0.0.1-SNAPSHOT.war
  35. 35. DEPLOY NO HEROIC heroku login jhipster heroku Atualizando sua aplicação ./mvnw package -Pprod -DskipTests heroku deploy:jar --jar target/*.war http://www.jhipster.tech/heroku/
  36. 36. DICAS FINAIS
  37. 37. 1. Se não for um MVP, valide se os componentes da arquitetura resolvem o seu problema 2. Em produção, mantenha as dependências do projeto sempre atualizadas 3. use apenas o essencial 4. mantenha os testes atualizados
  38. 38. ONDE EU NÃO RECOMENDO O USO: 1. Projetos legados em manutenção evolutiva 2. Tentativa de arquitetura híbrida 3. Pouco conhecimento nas tecnologias que compõe a stack
  39. 39. APLICAÇÕES DE ALTO DESEMPENHO COM JHIPSTER FULL STACK João Gabriel Lima linkedin/in/joaogabriellima

×