Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Live Coding - spring boot + angular

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