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