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.
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
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