Serverless for frontend developers

Serverless for frontend developers ChernivitsiJS 2018 Ukraine Aleksandar Simovic

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

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

A real-life story

• 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…)

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

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

Problem: Lots of idle servers

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

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

Their frontend developers Who?

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! $$$

Old architecture

New architecture

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

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

Ok, but does serverless matter for you?

You already are serverless

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

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

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

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

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!

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

But what about   my frontend?

Even your SPA apps can be serverless

S3, yet again?

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!

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

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$?

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

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

Summary - Frameworks mean nothing, if you’re unable to scale.
- Serverless enables frontend developers to provide service-level value too. - Serverless saves time, reduces complexity and also the cost. - You already are serverless. S3.

Learn more? Use code claudia40

Thank you! Q&A? @simalexan

Serverless for frontend developers

Serverless for frontend developers

More Decks by Aleksandar Simovic

Other Decks in Programming

Featured

Transcript