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.

Transcript

1. Do the right thing. next
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
15. Change the content without reloading the page
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
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