Backends for frontends

backends for frontends @danielepolencic

the good old days !

monolith templates cosmetic js

ajax ! revolution

api driven js widgets encapsulation

modern js era

serverless single page apps js bunsiness logic

serverless

just html, js & css

easy to deploy easy to build easy to scale

what about backend?

perfect rest api

everybody wins

how do you authenticate?

server side class UsersController < ApplicationController before_action :logged_in_user ... end

1. user requests page 2. redirected to login

client side UsersApi.isLoggedIn(cookie).then(user => { ... });

1. user requests page 2. wait for app to load
3. ajax request to /me 4. redirect

! are we there yet?

auth server api

PUBLIC FACING AUTH SERVER

rest api + auth

frontend ! architecture

tokens vs !!

CORS stateless CSRF JWT mobile

frontend ! backend apis

little secrets

no harm, but... do you have a choice?

what about bootstrapping?

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>

client side function AppController() { loadPhotos().then(photos => { ... });
}

1. user requests page 2. wait for app to load
3. ajax request to /photos 4. render page

! are we there yet?

… and this is the best case scenario

1. ajax request to /photos 2. ajax request to /posts
3. ajax request to /comments

what about aggregating calls?

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>

3 db queries

3 http requests server ✌ server

client side 3 http requests

! are we there yet?

SELECT * FROM Photos INNER JOIN Followers

cannot trust the user

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>

backend $reCaptcha = new ReCaptcha($secret); if ($_POST["g-recaptcha-response"]) { $response =
$reCaptcha->verifyResponse( $_SERVER["REMOTE_ADDR"], $_POST["g-recaptcha-response"] ); }

sadly, no client side only captcha

! solution !

REST SERVER

CAPTCHA API REST SERVER

client specific code in the rest api !

cross-origin resource sharing

fe: www.mysite.com be: api.mysite.com

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'; } # ... }

front-end specific code in the web server

whatch out for glitches1

cookies are not included with preflight requests

PUBLIC FACING AUTH SERVER

PUBLIC FACING AUTH SERVER IF PREFLIGHT

in the auth server unless is_preflight_request? do authorise_request end

client specific code in the rest api !

ie9 doesn't send cookies at all

client specific code in nginx !

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

CORS REDIRECT Y U NO WORK???

!"#$...

websockets, sse, long polling batch api calls api data filter/enhance
validation

but...

just html, js & css

meanwhile your app...

it's fast !

it's easy to develop !

it's secure !

meanwhile your architecture...

AUTH SERVER REST API #2 REST API #1

AUTH SERVER REST API #2 REST API #1 FRONT-END CODE

AUTH SERVER REST API #2 REST API #1 CAPTCHA

AUTH SERVER REST API #2 REST API #1 CAPTCHA PREFLIGHT
PREFLIGHT

CORS PREFLIGHT

CORS PREFLIGHT BOOTSTRAPPING

CORS PREFLIGHT BOOTSTRAPPING FRONT-END CODE

CORS PREFLIGHT BOOTSTRAPPING infrastructure coupling

CORS PREFLIGHT BOOTSTRAPPING no separation of concerns

CORS PREFLIGHT BOOTSTRAPPING hidden dependencies

just html, js & css

so what shall you do?

going back to server side rendering?

ignore and move on?

good artists copy, great artists steal — Pablo Picasso

! presentation layer !

FRONT-END CODE

does it help?

PRESENTATION LAYER

PRESENTATION LAYER same domain

!! issues no more

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'); });

user authentication const express = require('express'); const passport = require('passport');
const app = express(); app.post('/login', passport.authenticate('local'), (req, res) => { res.redirect('/'); });

bootstrapping1 const express = require('express'); const app = express(); app.get('/dashboard',
(req, res) => { res.render('homepage.html', { googleAnalyticsId: '123', locale: 'en_GB' }); });

bootstrapping2 <body> ... <script> angular .module('myApp', []) .constant('GA', '{{ googleAnalyticsId
}}') .constant('locale', '{{ locale }}') </script> </body>

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!')); });

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 })) });

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');

all requests are routed through the presentation layer

API {aggregation, filtering, enhancing}, data validation, encapsulation, state, cors, credentials,
caching, bootstrapping

this is not front-end

PRESENTATION LAYER

this is the new front-end

freedom to create api, architecture visibility, better ux, SRP and
SOC, clearer responsabilities in the team

great power great responsability

static html vs real server

deployment

CORS PREFLIGHT BOOTSTRAPPING FRONT-END CODE PRESENTATION LAYER

scalability

performance

security and testing

point of failure

no, it doesn't make sense if you're building todo apps

nothing new adapter pattern

netflix

soundcloud

spotify

paypal

what about you?

thanks

Backends for frontends

Backends for frontends

More Decks by Daniele Polencic

Other Decks in Technology

Featured

Transcript