Pro Yearly is on sale from $80 to $50! »

Arquitetura de duas camadas no front end - Rafael Mariano

B2519015997dff04abe2568ebb2cf729?s=47 opensanca
October 24, 2018

Arquitetura de duas camadas no front end - Rafael Mariano

A arquitetura de duas camadas separa logicamente tudo o que é visualização de tudo o que é controle de estados (dados). Com essa arquitetura a equipe de frontend consegue ter uma flexibilidade incrível no contrato com o backend e na validação de protótipos com a equipe de produto e design. A minha proposta é conseguir aprofundar sobre essa arquitetura com a galera do OpenSanca, mostrando suas limitações e seus benefícios.

B2519015997dff04abe2568ebb2cf729?s=128

opensanca

October 24, 2018
Tweet

Transcript

  1. Rafael Mariano (Olinda)

  2. Rafael Mariano (Olinda) ➢ My childhood dream was to be

    a writer; ➢ G-Basic (Magic Computer) ➢ Vila Bol (CS and ancient Egypt); ➢ Joined the university (USP); ➢ Freelas (jQuery e AngularJS) ➢ Give up computer engineering ➢ UnderGraduated in Information System ➢ Starting at Arquivei ➢ React + Isomorphic Architecture ➢ Palmeiras <3
  3. Two Layers Architecture

  4. Inspirations

  5. None
  6. Browser DOM Virtual DOM State Change Computed Diff Re-render Virtual

    DOM
  7. getDefaultProps getInitialState componentWillMount render componentWillReceiveProps componentShouldUpdate componentWillUpdate render componentDidUpdate componentWillUnmount

    First render Props change Unmount State change true false Life Cycle
  8. None
  9. ➢ Use "component-based" pattern (software engineering) top World Wide Web

    ➢ Code reuse ➢ Encapsulation ➢ Interoperability Web Components
  10. None
  11. A pure function is: ➢ The same input X will

    always throw the same output Y ➢ NO COLLATERAL EFFECTS Pure Functions
  12. Stateless Components f(x) props content content = component(x)

  13. None
  14. Isomorphic Javascript

  15. get html post (json) html assets backend frontend user Front-End

    Topology (arquivei)
  16. None
  17. Imperative Programming

  18. Reactive Programming

  19. Data Binding

  20. None
  21. Data Binding (implementations)

  22. Simple flow A bit more complex MVC

  23. Simple flow A bit more complex Flux Architecture

  24. Flux Architecture

  25. None
  26. None
  27. SHUT UP! … and show me the code

  28. That's All Folks! linkedin.com/in/toruticas github.com/toruticas https://medium.com/@toruticas rafael.silva@arquivei.com.br toruticas@gmail.com openSanca @rafael