Serverless for frontend developers

Slide 1

Slide 1 text

Serverless for frontend developers ChernivitsiJS 2018 Ukraine Aleksandar Simovic

Slide 2

Slide 2 text

Who is? Aleksandar Simovic Senior software engineer  ScienceExchange JS Belgrade co-organizer Author of “Serverless Applications with Node.js” Core team member of Claudia.js

Slide 3

Slide 3 text

Warning! I’m about to talk about something that might change the path you will take in your career as a frontend developer

Slide 4

Slide 4 text

A real-life story

Slide 5

Slide 5 text

• A great and popular tool for showing oﬀ your HTML / CSS* / JavaScript masterpieces of design & engineering • Free • Easy to use, easy to share • Provides multiple preprocessors (SASS, LESS, Babel…)

Slide 6

Slide 6 text

Key goals • Being able to serve is the key business goal • Provide quality services • Make money to survive • Reduce cost (continually)

Slide 7

Slide 7 text

Problems • Unexpected spikes - scaling issues • Unable to deliver content, getting stuck • Spending lots on provisioning servers • Keeping lots of servers idle • Small team, mostly frontend developers

Slide 8

Slide 8 text

Problem: Lots of idle servers

Slide 9

Slide 9 text

Problem: Lots of idle servers

Slide 10

Slide 10 text

If your services are stuck your decisions between React, Vue or Angular don’t matter!

Slide 11

Slide 11 text

How did CodePen solve their problems?    or even better   Who?

Slide 12

Slide 12 text

Their frontend developers Who?

Slide 13

Slide 13 text

How? 1. Lack of resources 2. Their DevOps engineer recommended serverless 3. Lead frontend engineer migrated a SASS preprocessor 4. Moved even more services 5. ??? 6. Proﬁt! $$$

Slide 14

Slide 14 text

Old architecture

Slide 15

Slide 15 text

New architecture

Slide 16

Slide 16 text

• Migrated all preprocessors into serverless functions • Almost everything now is in JavaScript • Automatic scaling • > 200,000 requests / h • Signiﬁcant cost reduction

Slide 17

Slide 17 text

With serverless frontend engineers  are also capable of providing service-level value that matters!

Slide 18

Slide 18 text

Ok, but does serverless matter for you?

Slide 19

Slide 19 text

You already are serverless

Slide 20

Slide 20 text

S3? • Simple Storage Service, mostly used for ﬁles / images • No infrastructure setup / provisioning, no servers to handle • Pay-per-use per GB stored / transferred • Everyone knows & uses S3

Slide 21

Slide 21 text

What is serverless anyway… • No need to manage or conﬁgure infrastructure / servers • Pay only for used time • Automatically scaled • Auto-failover and automated high scalability

Slide 22

Slide 22 text

Serverless Functions • Simple functions - compute • No infrastructure setup / provisioning, no servers to handle • Pay-per-request (spent time ~100ms) • Writable in Node.js, Python, Go, C#, Java …  • If you know how to write a single JavaScript function,  … you’ll know how to write a Serverless one

Slide 23

Slide 23 text

Example (ES6) exports.handler = (event) => { const body = event.body; // Do some async calculation if (someError) {  return Promise.reject(someError);  }  return processData(body); };

Slide 24

Slide 24 text

Example ES6 + DynamoDB const AWS = require(‘aws-sdk’); const dynamoDB = new AWS.DynamoDB.DocumentClient();      exports.handler = (event) => { const body = event.body; return dynamoDB.put({ TableName: ‘chernivitsijs—attendees’, Item: body    }).promise() .then(response => { statusCode: 200, body: ‘success’ }); }; Thats it! This is the database part!

Slide 25

Slide 25 text

Serverless functions   enable you to    effortlessly write backend functionality    as a frontend developer!

Slide 26

Slide 26 text

But what about   my frontend?

Slide 27

Slide 27 text

Even your SPA apps can be serverless

Slide 28

Slide 28 text

S3, yet again?

Slide 29

Slide 29 text

SPAs on S3 • Out-of-the-box HTTPS • One command - CDN integration • Easy domain setup with Route53 - 2 clicks / 1 command • Automatic scaling • Pay-per-use Not only for static ﬁles and images!

Slide 30

Slide 30 text

SPAs on S3 - How? npm install scottyjs -g      scotty --spa 1. Create your React / Vue / Angular app  2. Choose either AWS CLI / console or use Scotty.js

Slide 31

Slide 31 text

SPAs on S3 - Cost? - Storage :  First 50 TB / Month - $0.023 per GB  - Requests:  GET, SELECT - $0.001 per 1,000 requests      ~100.000 user visits => costs 1$?

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

serverside rendering? …you mean server(less) side rendering?

Slide 34

Slide 34 text

exports.handler = (event) => { const yourHTML = ` Hello ChernivtsiJS ! `; return {    statusCode: 200, headers: { ‘Content-Type’: ‘text/html’ }, body: yourHTML }; }; Server(less) side rendering

Slide 35

Slide 35 text