Live Coding - spring boot + angular

Transcript

1. Java + Angular Como dominar essa stack?
2. Kamila Santos Dev Backend
3. Entre em contato :)
4. O que vamos ter na Live Coding?
5. Spring <3
6. Spring Framework 20+ Spring Framework 20+
7. Spring Framework 20+ Spring Boot
8. Spring Framework 20+ Spring Data JPA
9. Spring Framework 20+ Spring Security
10. Spring Framework 20+ Spring Cloud
11. Spring Framework 20+ Spring Batch
12. Spring Framework 20+ Spring WebFlux
13. Angular <3
14. Spring Framework 20+ Framework para construção da interface de aplicações usando HTML, CSS e, principalmente, JavaScript, criada pelos desenvolvedores da Google.
15. Spring Framework 20+ Baseado em componentes
16. Spring Framework 20+ Desenvolver SPAs: uma aplicação web que roda em uma única página e atualiza só o que voce desejar
17. Spring Framework 20+
18. RXJS
19. Spring Framework 20+ Biblioteca para desenvolver aplicações assíncronas baseadas em eventos usando sequências de observables.
20. Spring Framework 20+ Tem um tipo "core" que é o Observable e os chamados tipos "secundários" ( Schedulers, Subscriptions,Subjects)
21. Spring Framework 20+
22. Spring Framework 20+ RESPONSIVO O sistema responde em tempo hábil, se possível
23. Spring Framework 20+ RESILIENTE O sistema permanece responsivo diante de falhas
24. Spring Framework 20+ ELÁSTICO O sistema permanece responsivo diante de uma carga de trabalho variável.
25. Spring Framework 20+ MESSAGE DRIVEN Aplicações reativas dependem da passagem de mensagens assíncronas para estabelecer um limite entre os componentes, garantindo um acoplamento flexível , isolamento e transparência
26. LIFECYCLE HOOKS?
27. Spring Framework 20+ O QUE SÃO LIFECYCLE HOOKS? Todo componente angular tem um ciclo de vida: passa pelo processo de criação, execução e possível destruição.
28. Spring Framework 20+ O QUE SÃO LIFECYCLE HOOKS? Isso é realizado pelo Angular criando o componente, renderizando, criando e renderizando seus filhos, verificando modificações nas propriedades e no DOM, realizando alterações, destruindo e removendo do DOM.
29. Spring Framework 20+ ngOnChanges() É o primeiro lifeCycle Hook é chamado logo após a inicialização da classe e o componente é criado
30. Spring Framework 20+ ngOnChanges() Também é chamado quando há alteração de propriedade dentro do seu componente.
31. Spring Framework 20+ ngOnInit() Este é chamado depois do ngOnChanges(), só é chamado uma única vez, inicializa o componente, define e exibe suas propriedades de entrada.
32. Spring Framework 20+ ngOnInit() É o lifeCycle mais importante do Angular, pois "alerta" que um componente foi criado.
33. Spring Framework 20+ ngDoCheck() É chamado durante todas verificações de mudança durante a execução, geralmente depois que o NgOnInit é chamado
34. Spring Framework 20+ ngAfterContentInit() Só é executado uma vez depois que o primeiro ngDoCheck é chamado, semelhando ao ngDoCheck, mas projetado para visualização do componente.
35. Spring Framework 20+ ngAfterContentChecked() Este hook é chamado depois que o conteúdo projetado para a visualização do componente é inicializado, após o ngAfterContentInit e ngDoCheck forem chamados.
36. Spring Framework 20+ ngAfterViewInit() Chamado após as visualizações dos componentes e seus subsequentes filhos, após a execução do hook ngAfterContentChecked
37. Spring Framework 20+ ngAfterViewChecked() Nosso penúltimo lifecycle hook, executados após todos os demais.
38. Spring Framework 20+ ngOnDestroy() O último lifeCycle , é chamado antes do componente ser ser removido do DOM
39. Spring Framework 20+ ngOnDestroy() É feita a limpeza do componente, desde a desanexação de event handlers até a desinscrição de observables.
40. Event Binding
41. Spring Framework 20+ Event Binding Utilizamos o eventBinding para vincular um código da aplicação a um determinado evento do disparado pelo navegador.
42. Spring Framework 20+ O que precisamos saber? 1-Qual elemento emitirá o evento? 2- Qual o nome do evento que será emitido? 3- Qual o nome do método do componente que será executado em resposta ao evento?
43. Spring Framework 20+ (click) Quando o mouse clica algum elemento ele é disparado.
44. Spring Framework 20+
45. Spring Framework 20+
46. Spring Framework 20+ Keyup.enter Ouve o pressionamento da tecla Enter, pois sinaliza que o usuário terminou de digitar.
47. Spring Framework 20+
48. Spring Framework 20+
49. Spring Framework 20+ Temos vários outros eventos:
50. Spring Framework 20+
51. Spring Framework 20+
52. Spring Framework 20+
53. Spring Framework 20+
54. Spring Framework 20+
55. MINHA DIFICULDADE?
56. Spring Framework 20+
57. E qual será a nossa Demo?
58. Estrutura Back End
59. Spring Framework 20+
60. Estrutura Front End
61. Spring Framework 20+
62. Telas Desenvolvidas
63. Spring Framework 20+
64. Spring Framework 20+
65. Spring Framework 20+
66. Spring Framework 20+
67. Spring Framework 20+
68. Spring Framework 20+
69. Obrigada <3