Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

The Frontend is a Fullstack

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.

Luca Marchesini

September 08, 2016
Tweet

Other Decks in Programming

Transcript

  1. Native Application vs Web Page View Logic Business Logic ORM

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

    (or kind of) Persistence UI (static) "
  3. Separation of concerns? View Logic Business Logic ORM (or kind

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

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

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

    of) Persistence UI (dynamic) " HTTP calls (ajax) View Logic REST API JSON
  7. The state has always been there. The question is: «

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

    (menuOpen) { menuOpen = true $(‘#menu’).addClass(‘open’) } else { menuOpen = false $(‘#menu’).removeClass(‘open’) } })
  9. 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
  10. Look Ma! The store! View Logic UI (dynamic) " HTTP

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

    calls (ajax) JSON Business Logic ORM (or kind of) REST API The Store
  12. Look Ma! Data binding! View Logic UI (dynamic) " HTTP

    calls (ajax) JSON Business Logic ORM (or kind of) REST API The Store Data Binding!
  13. { "user": { "firstName": "Luca", "lastName": "Marchesini", "friends": [ {

    "firstName": "Anthony", "lastName": "Sendra" }, { "firstName": "Melanie", "lastName": "Olivier" } // . . . ] } } My UI needs this
  14. { "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
  15. { "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
  16. { "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
  17. Say hello to queries { user(id: 6) { firstName, lastName,

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

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

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

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

    " Query JSON Business Logic Single Endoint API OGM (Relay/Falcor)
  22. Events (Backbone) Dirty Checking (AngularJS) Virtual DOM + Redraw Everything

    like in the ‘90s (React) Reactivity (Angular 2, Vuejs, Cycle.js) One problem, many implementations
  23. Data-binding should go native By getting Observables, right into the

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

    for DOM manipulations (avoiding relayout, restyle and redraw cycles)
  25. Virtual DOM should go native. Or, at least, the browser

    should expose some sort of low- level offline and flushable DOM
  26. And our work can benefit other industries Network abstraction is

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

    mostly due to the incredible evolution of Javascript.
  29. 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