Backends for frontends

Transcript

1. backends for frontends @danielepolencic
2. the good old days !
4. monolith templates cosmetic js
5. ajax ! revolution
7. api driven js widgets encapsulation
8. modern js era
10. serverless single page apps js bunsiness logic
11. serverless
12. just html, js & css
13. easy to deploy easy to build easy to scale
14. what about backend?
15. perfect rest api
17. everybody wins
19. !
20. how do you authenticate?
21. server side class UsersController < ApplicationController before_action :logged_in_user ... end
22. 1. user requests page 2. redirected to login
23. client side UsersApi.isLoggedIn(cookie).then(user => { ... });
24. 1. user requests page 2. wait for app to load 3. ajax request to /me 4. redirect
25. ! are we there yet?
26. also1
27. auth server api
28. PUBLIC FACING AUTH SERVER
29. PUBLIC FACING AUTH SERVER
30. rest api + auth
31. frontend ! architecture
32. also2
33. tokens vs !!
34. CORS stateless CSRF JWT mobile
35. frontend ! backend apis
36. also3
37. little secrets
40. no harm, but... do you have a choice?
41. !
42. !
43. what about bootstrapping?
44. server side <body> ... <script> App.photos = new Photos([ { id: 2, name: "My dog", filename: "IMG_0392.jpg" }, { id: 3, name: "Our house", filename: "IMG_0393.jpg" }, { id: 4, name: "My favorite food", filename: "IMG_0394.jpg" }, { id: 5, name: "His bag", filename: "IMG_0394.jpg" }, ... ]); </script> </body>
45. client side function AppController() { loadPhotos().then(photos => { ... }); }
46. 1. user requests page 2. wait for app to load 3. ajax request to /photos 4. render page
47. ! are we there yet?
48. … and this is the best case scenario
49. 1. ajax request to /photos 2. ajax request to /posts 3. ajax request to /comments
50. !
51. what about aggregating calls?
52. server side class ClientsController < ApplicationController def fetch posts_response = conn.get '/posts' followers_response = conn.get '/followers' ... end end <body> ... <script> App.photos = new Photos([ { id: 2, name: "My dog", filename: "IMG_0392.jpg" }, { id: 3, name: "Our house", filename: "IMG_0393.jpg" }, { id: 4, name: "My favorite food", filename: "IMG_0394.jpg" }, { id: 5, name: "His bag", filename: "IMG_0394.jpg" }, ... ]); </script> </body>
53. 3 db queries
54. 3 http requests server ✌ server
55. client side 3 http requests
56. ! are we there yet?
57. SELECT * FROM Photos INNER JOIN Followers
58. !
59. !
60. cannot trust the user
62. client side <body> <form action="" method="post"> <div class="g-recaptcha" data-sitekey="site_key_here"></div> <input type="submit" value="Submit" /> </form> <script src='https://www.google.com/recaptcha/api.js'></script> </body>
63. backend $reCaptcha = new ReCaptcha($secret); if ($_POST["g-recaptcha-response"]) { $response = $reCaptcha->verifyResponse( $_SERVER["REMOTE_ADDR"], $_POST["g-recaptcha-response"] ); }
64. sadly, no client side only captcha
66. ! solution !
67. REST SERVER
68. CAPTCHA API REST SERVER
69. client specific code in the rest api !
70. !
71. cross-origin resource sharing
72. fe: www.mysite.com be: api.mysite.com
73. nginx config # # Wide-open CORS config for nginx # location / { if ($request_method = 'GET') { add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept'; } # ... }
74. front-end specific code in the web server
75. whatch out for glitches1
76. cookies are not included with preflight requests
78. PUBLIC FACING AUTH SERVER
79. PUBLIC FACING AUTH SERVER IF PREFLIGHT
80. in the auth server unless is_preflight_request? do authorise_request end
81. client specific code in the rest api !
82. whatch out for glitches2
83. ie9 doesn't send cookies at all
86. client specific code in nginx !
87. whatch out for glitches3
89. If the 302 status code is received in response to a request other than GET or HEAD, the user agent MUST NOT automatically redirect the request unless it can be confirmed by the user, since this might change the conditions under which the request was issued - w3
90. CORS REDIRECT Y U NO WORK???
91. !"#$...
92. websockets, sse, long polling batch api calls api data filter/enhance validation
93. but...
94. just html, js & css
95. meanwhile your app...
96. it's fast !
97. it's easy to develop !
98. it's secure !
99. meanwhile your architecture...
100. AUTH SERVER REST API #2 REST API #1
101. AUTH SERVER REST API #2 REST API #1 FRONT-END CODE
102. AUTH SERVER REST API #2 REST API #1 CAPTCHA
103. AUTH SERVER REST API #2 REST API #1 CAPTCHA PREFLIGHT PREFLIGHT
104. AUTH SERVER REST API #2 REST API #1 CAPTCHA PREFLIGHT CORS PREFLIGHT
105. AUTH SERVER REST API #2 REST API #1 CAPTCHA PREFLIGHT CORS PREFLIGHT BOOTSTRAPPING
106. AUTH SERVER REST API #2 REST API #1 CAPTCHA PREFLIGHT CORS PREFLIGHT BOOTSTRAPPING FRONT-END CODE
107. AUTH SERVER REST API #2 REST API #1 CAPTCHA PREFLIGHT CORS PREFLIGHT BOOTSTRAPPING FRONT-END CODE
108. AUTH SERVER REST API #2 REST API #1 CAPTCHA PREFLIGHT CORS PREFLIGHT BOOTSTRAPPING infrastructure coupling
109. AUTH SERVER REST API #2 REST API #1 CAPTCHA PREFLIGHT CORS PREFLIGHT BOOTSTRAPPING no separation of concerns
110. AUTH SERVER REST API #2 REST API #1 CAPTCHA PREFLIGHT CORS PREFLIGHT BOOTSTRAPPING hidden dependencies
111. just html, js & css
112. so what shall you do?
113. going back to server side rendering?
114. nope.
115. ignore and move on?
116. nope.
117. good artists copy, great artists steal — Pablo Picasso
118. ! presentation layer !
121. FRONT-END CODE
122. does it help?
123. PRESENTATION LAYER
124. PRESENTATION LAYER same domain
125. !! issues no more
126. cors & preflight request const express = require('express'); const cors = require('cors'); const app = express(); app.options('/products/:id', cors()); app.del('/products/:id', cors(), (req, res) => { res.json({msg: 'CORS-enabled for all origins!'}); }); app.listen(3000, () => { console.log('web server listening on port 80'); });
127. user authentication const express = require('express'); const passport = require('passport'); const app = express(); app.post('/login', passport.authenticate('local'), (req, res) => { res.redirect('/'); });
128. bootstrapping1 const express = require('express'); const app = express(); app.get('/dashboard', (req, res) => { res.render('homepage.html', { googleAnalyticsId: '123', locale: 'en_GB' }); });
129. bootstrapping2 <body> ... <script> angular .module('myApp', []) .constant('GA', '{{ googleAnalyticsId }}') .constant('locale', '{{ locale }}') </script> </body>
130. captcha const express = require('express'); const app = express(); const Captcha = require('./captcha'); const captcha = new Captcha(PUBLIC_KEY, PRIVATE_KEY); app.post('/comment', (req, res) => { captcha .verify(req.body['g-recaptcha-response']) .then(() => res.send('success!')); });
131. api aggregation const express = require('express'); const app = express(); app.post('/posts-and-flower', (req, res) => { Promise.all([ request.get('http://service1.com/posts'), request.get('http://service2.com/flowers') ]).spread((posts, flowers) => res.json({ posts, flowers })) });
132. websockets const http = require('http'); const sockjs = require('sockjs'); var echo = sockjs.createServer({...}); echo.on('connection', (conn) => { conn.on('data', (message) => { request.get(`http://service1.com/${message}`) .then(response => conn.write(response)); }); conn.on('close', () => {}); }); const server = http.createServer(); echo.installHandlers(server, {prefix:'/echo'}); server.listen(9999, '0.0.0.0');
133. all requests are routed through the presentation layer
134. API {aggregation, filtering, enhancing}, data validation, encapsulation, state, cors, credentials, caching, bootstrapping
135. wait
136. this is not front-end
137. PRESENTATION LAYER
138. this is the new front-end
140. freedom to create api, architecture visibility, better ux, SRP and SOC, clearer responsabilities in the team
141. great power great responsability
142. static html vs real server
143. deployment
144. AUTH SERVER REST API #2 REST API #1 CAPTCHA PREFLIGHT CORS PREFLIGHT BOOTSTRAPPING FRONT-END CODE PRESENTATION LAYER
145. scalability
146. performance
147. security and testing
148. point of failure
149. no, it doesn't make sense if you're building todo apps
150. nothing new adapter pattern
151. netflix
154. soundcloud
157. spotify
159. paypal
161. uber
163. what about you?
164. thanks