The Frontend is a Fullstack

1f1c178868e9246becc58cfc6c6600bc?s=47 Luca Marchesini
September 08, 2016

The Frontend is a Fullstack

Web pages are dead, very dead: long live apps! The web is the land of the paradigm shift and Frontend Developers are mutant ninjas. Today's frontends embody the UI, the View Logic, some Business Logic and some Storage. This is a Full Stack on its own, on the client. Modern, component-oriented UI frameworks, together with state-action paradigms (like Flux and its most popular implementation, Redux) have formalized a lot of new concepts. And this radically changes the way we think our architecture. How do we distribute our business logic? How do we keep things in sync? Do we actually need a backend? How do we keep components reusable? A lot of new practices have emerged and we feel that Relay will be the next big thing. We are shifting to a development environment that will give us more and more resources to focus on what really matters: the user, the experience, the product. Let's get ready for the next leap.

1f1c178868e9246becc58cfc6c6600bc?s=128

Luca Marchesini

September 08, 2016
Tweet

Transcript

  1. 2.
  2. 6.

    Native Application vs Web Page View Logic Business Logic ORM

    (or kind of) Persistence UI (interactive, dynamic)
  3. 7.
  4. 8.

    Native Application vs Web Page View Logic Business Logic ORM

    (or kind of) Persistence UI (static) "
  5. 11.
  6. 12.
  7. 13.
  8. 14.
  9. 16.
  10. 17.
  11. 20.

    Separation of concerns? View Logic Business Logic ORM (or kind

    of) Persistence UI (dynamic) " HTTP calls (ajax) HTML CSS JS
  12. 21.
  13. 23.

    UI libs to the rescue! Business Logic ORM (or kind

    of) Persistence UI (dynamic) " HTTP calls (ajax) HTML CSS JS View Logic
  14. 24.

    UI libs to the rescue! Business Logic ORM (or kind

    of) Persistence UI (dynamic) " HTTP calls (ajax) HTML CSS JS View Logic
  15. 25.

    UI libs to the rescue! Business Logic ORM (or kind

    of) Persistence UI (dynamic) " HTTP calls (ajax) View Logic REST API JSON
  16. 30.
  17. 32.
  18. 42.
  19. 47.

    The state has always been there. The question is: «

    How do you want to describe it? »
  20. 48.

    Externalizing the state var menuOpen = false $(‘#button’).click(function(e) { if

    (menuOpen) { menuOpen = true $(‘#menu’).addClass(‘open’) } else { menuOpen = false $(‘#menu’).removeClass(‘open’) } })
  21. 49.

    Externalizing the state var menuOpen = false $(‘#button’).click(function(e) { if

    (menuOpen) { menuOpen = true $(‘#menu’).addClass(‘open’) } else { menuOpen = false $(‘#menu’).removeClass(‘open’) } }) The data
  22. 50.
  23. 54.

    Look Ma! The store! View Logic UI (dynamic) " HTTP

    calls (ajax) JSON Business Logic ORM (or kind of) Persistence REST API
  24. 55.

    Look Ma! The store! View Logic UI (dynamic) " HTTP

    calls (ajax) JSON Business Logic ORM (or kind of) REST API The Store
  25. 57.
  26. 58.

    Look Ma! Data binding! View Logic UI (dynamic) " HTTP

    calls (ajax) JSON Business Logic ORM (or kind of) REST API The Store Data Binding!
  27. 60.

    { "user": { "firstName": "Luca", "lastName": "Marchesini", "friends": [ {

    "firstName": "Anthony", "lastName": "Sendra" }, { "firstName": "Melanie", "lastName": "Olivier" } // . . . ] } } My UI needs this
  28. 61.

    { "user": { "firstName": "Luca", "lastName": "Marchesini", "city": "Montpellier", "job":

    "Fullstack Engineer", "twitter": "@xbill82", "friends": [91, 22, 73, 14, 8, 82, 37] } } My API returns this GET http://my-server.com/api/user/6
  29. 62.

    { "user": { "firstName": "Luca", "lastName": "Marchesini", "city": "Montpellier", "job":

    "Fullstack Engineer", "twitter": "@xbill82", "friends": [91, 22, 73, 14, 8, 82, 37] } } My API returns this GET http://my-server.com/api/user/6 useless
  30. 63.

    { "user": { "firstName": "Luca", "lastName": "Marchesini", "city": "Montpellier", "job":

    "Fullstack Engineer", "twitter": "@xbill82", "friends": [91, 22, 73, 14, 8, 82, 37] } } My API returns this GET http://my-server.com/api/user/6 incomplete
  31. 68.
  32. 70.

    Say hello to queries { user(id: 6) { firstName, lastName,

    friends: { firstName, lastName } } }
  33. 71.

    Look Ma! Single Endpoint! View Logic UI (dynamic) " Query

    JSON Business Logic ORM (or kind of) The Store REST API
  34. 72.

    Look Ma! Single Endpoint! View Logic UI (dynamic) " Query

    JSON Business Logic ORM (or kind of) Single Endoint API The Store
  35. 78.

    Look Ma! Network Abstraction! View Logic UI (dynamic) The Store

    " Query JSON Business Logic ORM (or kind of) Single Endoint API
  36. 79.

    Look Ma! Network Abstraction! View Logic UI (dynamic) The Store

    " Query JSON Business Logic Single Endoint API OGM (Relay/Falcor)
  37. 80.
  38. 88.

    Events (Backbone) Dirty Checking (AngularJS) Virtual DOM + Redraw Everything

    like in the ‘90s (React) Reactivity (Angular 2, Vuejs, Cycle.js) One problem, many implementations
  39. 89.

    Data-binding should go native By getting Observables, right into the

    language. https://tc39.github.io/proposal-observable/
  40. 90.

    VirtualDOM is good for performances It acts as a buffer

    for DOM manipulations (avoiding relayout, restyle and redraw cycles)
  41. 98.

    Virtual DOM should go native. Or, at least, the browser

    should expose some sort of low- level offline and flushable DOM
  42. 109.

    And our work can benefit other industries Network abstraction is

    useful for every developer that deals with network latency.
  43. 110.

    View Logic Business Logic ORM (or kind of) Persistence UI

    (interactive, dynamic) View Logic UI (dynamic) The Store " Business Logic Single Endoint API OGM (Relay/Falcor) Native Application Web Application
  44. 111.

    Today, the Front End embraces the Full Stack This is

    mostly due to the incredible evolution of Javascript.
  45. 114.
  46. 119.

    Look Ma! Co-location! UI (dynamic) Single API Endpoint Business Logic

    Network Ajax Calls (queries) JSON Data The Frontend View Logic The Store (Data Layer) ORM / OGM (Relay / Falcor) Query
  47. 126.