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

The Frontend is a Fullstack

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. Do the right thing. next

  2. None
  3. The Frontend is a Fullstack ! @xbill82

  4. WHAT PROBLEM ARE WE TRYING TO SOLVE?

  5. Since the ‘90s Native Applications Web Pages Web Applications Snappy,

    interactive UI Ease of distribution
  6. Native Application vs Web Page View Logic Business Logic ORM

    (or kind of) Persistence UI (interactive, dynamic)
  7. Native Application vs Web Page View Logic Business Logic ORM

    (or kind of) Persistence UI (static)
  8. Native Application vs Web Page View Logic Business Logic ORM

    (or kind of) Persistence UI (static) "
  9. INTERACTIVE ALL THE PAGES!

  10. Change the appearance without reloading the page

  11. None
  12. 1995

  13. None
  14. None
  15. Change the content without reloading the page

  16. 1995

  17. 1995 2005

  18. We’re done!!1!

  19. We’re done!!1!

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

    of) Persistence UI (dynamic) " HTTP calls (ajax) HTML CSS JS
  21. 1995 2005

  22. 1995 2005 2010

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

    of) Persistence UI (dynamic) " HTTP calls (ajax) HTML CSS JS View Logic
  24. UI libs to the rescue! Business Logic ORM (or kind

    of) Persistence UI (dynamic) " HTTP calls (ajax) HTML CSS JS View Logic
  25. UI libs to the rescue! Business Logic ORM (or kind

    of) Persistence UI (dynamic) " HTTP calls (ajax) View Logic REST API JSON
  26. YEEEEEEAH!

  27. YEEEEEEAH!

  28. How others were building UIs…

  29. How we were building UIs

  30. None
  31. We needed to get more productive

  32. 2005 2010

  33. 2005 2010 2013

  34. Say hello to the components

  35. Polymer Designer

  36. What do we still need?

  37. Offline Experience

  38. Let’s kill the dinosaur

  39. Let’s kill the dinosaur

  40. Application Icon We make first class applications

  41. Push Notifications We want to bother the user!

  42. 2010 2013

  43. 2010 2013 ?? Progressive Web Applications

  44. Data. Let’s talk about it.

  45. What if data changes? The UI The Data

  46. Where’s the state? $(‘#button’).click(function(e) { if (!$(‘#menu’).hasClass(‘open’)) { $(‘#menu’).addClass(‘open’) }

    else { $(‘#menu’).removeClass(‘open’) } })
  47. The state has always been there. The question is: «

    How do you want to describe it? »
  48. Externalizing the state var menuOpen = false $(‘#button’).click(function(e) { if

    (menuOpen) { menuOpen = true $(‘#menu’).addClass(‘open’) } else { menuOpen = false $(‘#menu’).removeClass(‘open’) } })
  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
  50. Manipulate the state, not the DOM. The DOM is abstracted.

    You shouldn’t bother about it.
  51. Where should the state live?

  52. The State can be scattered across components… like getInitialState()

  53. …or, live within a store. (like in Redux)

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

    calls (ajax) JSON Business Logic ORM (or kind of) Persistence REST API
  55. Look Ma! The store! View Logic UI (dynamic) " HTTP

    calls (ajax) JSON Business Logic ORM (or kind of) REST API The Store
  56. The store is actually a local cache. Of the data

    coming from the server.
  57. IF THE STORE IS A LOCAL CACHE AND THE CACHE

    IS MEANT TO BE IN SYNC…
  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!
  59. REST API Calls Might mean trouble

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

    "firstName": "Anthony", "lastName": "Sendra" }, { "firstName": "Melanie", "lastName": "Olivier" } // . . . ] } } My UI needs this
  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
  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
  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
  64. REST API Calls Underfetching / Overfetching Specific API endpoints

  65. TIGHT COUPLING AGAIN

  66. How do they do on the backend?

  67. They query.

  68. 2010 2013

  69. 2010 2013 2015

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

    friends: { firstName, lastName } } }
  71. Look Ma! Single Endpoint! View Logic UI (dynamic) " Query

    JSON Business Logic ORM (or kind of) The Store REST API
  72. Look Ma! Single Endpoint! View Logic UI (dynamic) " Query

    JSON Business Logic ORM (or kind of) Single Endoint API The Store
  73. No clear way to leverage front-end cache for request optimization

  74. 2010 2013 2015

  75. 2010 2013 2015

  76. The DOM Say hello to Abstraction Developer

  77. The DOM Say hello to Abstraction The Network Developer

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

    " Query JSON Business Logic ORM (or kind of) Single Endoint API
  79. Look Ma! Network Abstraction! View Logic UI (dynamic) The Store

    " Query JSON Business Logic Single Endoint API OGM (Relay/Falcor)
  80. DEMO TIME

  81. Are we done or what?

  82. Are we done or what?

  83. WEB APPLICATION Y U NO GO FAST

  84. Data requests should go query Let’s go beyond the REST

    endpoints.
  85. HTTP 2 ‘nuff said.

  86. Data binding comes down to observing

  87. App State Component The DOM observes maps

  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
  89. Data-binding should go native By getting Observables, right into the

    language. https://tc39.github.io/proposal-observable/
  90. VirtualDOM is good for performances It acts as a buffer

    for DOM manipulations (avoiding relayout, restyle and redraw cycles)
  91. DOM change

  92. DOM change Restyle Relayout Repaint

  93. DOM change Restyle Relayout Repaint DOM change Restyle Relayout Repaint

    DOM change Restyle Relayout Repaint
  94. DOM change

  95. DOM change DOM change

  96. DOM change DOM change DOM change

  97. DOM change DOM change DOM change Restyle Relayout Repaint

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

    should expose some sort of low- level offline and flushable DOM
  99. WHAT WAS THE PROBLEM ANYWAY?

  100. Providing an application-like user experience

  101. In a distributed environment

  102. Instantly accessible via a single URL

  103. Available across all the existing browsers

  104. And all the existing devices and OS

  105. In all the possible network conditions

  106. In order to achieve the largest amount of users

  107. And make them happy.

  108. We keep searching and discussing new ideas because the problem

    is darn complex
  109. And our work can benefit other industries Network abstraction is

    useful for every developer that deals with network latency.
  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
  111. Today, the Front End embraces the Full Stack This is

    mostly due to the incredible evolution of Javascript.
  112. Javascript. The language of an awesome community.

  113. A community made of dreamers, not hipsters.

  114. FIN.

  115. This is Tim.

  116. HyperText Something you are meant to read Something that contains

    links
  117. The Need for Applications Being able to get something done.

  118. Say hello to Co-location component HOC (GraphQL Fragment) <span> {{model.get('user.name')}}

    </span> async fetch
  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
  120. Browsers are becoming OS They expose tons of technology.

  121. All the new frameworks/libs provide components

  122. UI composition should go native

  123. https://github.com/w3c/webcomponents/

  124. let ui$ = state$.map( (state) => { return component(state) }

    )
  125. The Front End Data Layer should go native By leveraging

    the power of in-browser DBs.
  126. is the new