Aplicações de Alto Desempenho com JHipster Full Stack
1 gostou990 visualizações
Uma apresentação sobre o framework JHipster para construção de aplicações full stack Java. O framework fornece generators, scaffolding e estruturas para criar aplicações web e APIs escaláveis com Spring Boot e Angular/React. O documento discute a arquitetura, geração de projetos, estrutura de pastas, depuração, produção e dicas de uso do JHipster.
![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]](https://image.slidesharecdn.com/soujavametupcampinastalkjhipster-171025001953/85/Aplicacoes-de-Alto-Desempenho-com-JHipster-Full-Stack-33-320.jpg)
Aplicações de Alto Desempenho com JHipster Full Stack
- 1. APLICAÇÕES DE ALTO DESEMPENHO COM JHIPSTER FULL STACK João Gabriel Lima linkedin/in/joaogabriellima
- 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. HOJE VAMOS COMEÇAR FALANDO DE UM PROBLEMA RECORRENTE EM QUALQUER PROJETO JAVA: A ARQUITETURA!
- 4. PRECISAMOS PENSAR MUITO ALÉM DOS REQUISITOS FUNCIONAIS E NÃO-FUNCIONAIS.
- 5. ESCALÁVEL EXTENSÍVEL PERFORMÁTICA FÁCIL DE MANTER INTEROPERÁVEL RESILIENTE UMA BOA ARQUITETURA JAVA PRECISA SER:
- 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. 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 …
- 9. ESTRATÉGIAS PARA QUE VOCÊ INICIE UM PROJETO COM UM PASSO À FRENTE. UMA ARQUITETURA BEM DEFINIDA, PRONTA PARA EVOLUIR
- 10. E EU AINDA NEM COMECEI A FALAR DA CONSTRUÇÃO DE MICRO-SERVIÇOS!
- 11. TUDO ISSO E MUITO MAIS… JHIPSTER
- 12. http://www.jhipster.tech/ +300 colaboradores + 7.000 estrelas no GitHub + 500.000 instalações E crescendo…
- 17. https://traefik.io/ "Proxy reverso e balanceador de carga para implantar microservices com facilidade”
- 21. SHOW ME THE CODE
- 22. +
- 23. 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/
- 24. 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.
- 27. 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
- 28. 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
- 29. 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
- 30. 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
- 33. 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]
- 34. 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
- 35. SOU PROJETO EM PRODUÇÃO
- 36. PRODUCTION-READY
- 37. ➤ ./mvnw -Pprod ➤ Gerando um .war ➤ ./mvnw -Pprod package ➤ Executando ➤ ./jhipster-0.0.1-SNAPSHOT.war ➤ java -jar jhipster-0.0.1-SNAPSHOT.war
- 38. 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/
- 39. DICAS FINAIS
- 40. 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
- 41. 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
- 42. APLICAÇÕES DE ALTO DESEMPENHO COM JHIPSTER FULL STACK João Gabriel Lima linkedin/in/joaogabriellima