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.

Transcript

1. Rafael Mariano (Olinda)
   

   View Slide

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
   

   View Slide

3. Two Layers Architecture
   

   View Slide

4. Inspirations
   

   View Slide

5. View Slide

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

   View Slide

7. getDefaultProps
   getInitialState
   componentWillMount
   render
   componentWillReceiveProps
   componentShouldUpdate
   componentWillUpdate
   render
   componentDidUpdate
   componentWillUnmount
   First render
   Props change
   Unmount
   State change
   true
   false
   Life Cycle
   

   View Slide

8. View Slide

9. ➢ Use "component-based" pattern (software
   engineering) top World Wide Web
   ➢ Code reuse
   ➢ Encapsulation
   ➢ Interoperability
   Web Components
   

   View Slide

10. View Slide

11. A pure function is:
    ➢ The same input X will always throw the same output Y
    ➢ NO COLLATERAL EFFECTS
    Pure Functions
    

    View Slide

12. Stateless Components
    f(x)
    props content
    content = component(x)
    

    View Slide

13. View Slide

14. Isomorphic Javascript
    

    View Slide

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

    View Slide

16. View Slide

17. Imperative Programming
    

    View Slide

18. Reactive Programming
    

    View Slide

19. Data Binding
    

    View Slide

20. View Slide

21. Data Binding
    (implementations)
    

    View Slide

22. Simple flow A bit more complex
    MVC
    

    View Slide

23. Simple flow A bit more complex
    Flux Architecture
    

    View Slide

24. Flux Architecture
    

    View Slide

25. View Slide

26. View Slide

27. SHUT UP!
    … and show me the code
    

    View Slide

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
    

    View Slide