About meYoav Abrahami
Head of Wix Code, Wix.com
https://www.linkedin.com/in/yoavabrahami/
https://www.slideshare.net/yoavaa/
@yoavabrahami
What we will be talking about?● What is Serverless
● What we at Wix learned by building a serverless platform
● The potential
● The Technology Challenges
● Disruption
2013, The Cloud Space
2013, The Cloud Space
We have identified a gap in the cloud platforms space.
No platform aimed at Web AppsNo platform aimed at Websites
Mobile
2013, The Cloud Space
We set out to build Wix Code
A Serverless Platform for Web Apps and Websites
Mobile
So...What is Serverless?
Amazon Lambdavar AWS = require('aws-sdk');
exports.handler = function(event, context) {
handleEvent(event, context);
};
function handleEvent(event, context) {
var cloudSearchDomain = new AWS.CloudSearchDomain({endpoint: config.SearchEndpoint});
var params = {query: event.searchTerm, size: 10, start: 0 };
cloudSearchDomain.search(params, function(err, data) {
if (err) {
context.fail(new Error('Error'));
} else {
context.succeed(processSearchResults(data));
}
});
}
Triggered by:● S3 upload event● Kinesis stream● DynamoDB data change● API Gateway for Mobile● API Gateway for Web Apps
Amazon Lambdavar AWS = require('aws-sdk');
exports.handler = function(event, context) {
handleEvent(event, context);
};
function handleEvent(event, context) {
var cloudSearchDomain = new AWS.CloudSearchDomain({endpoint: config.SearchEndpoint});
var params = {query: event.searchTerm, size: 10, start: 0 };
cloudSearchDomain.search(params, function(err, data) {
if (err) {
context.fail(new Error('Error'));
} else {
context.succeed(processSearchResults(data));
}
});
}
Amazon Specific APIs
Triggered by:● S3 upload event● Kinesis stream● DynamoDB data change● API Gateway for Mobile● API Gateway for Web Apps
Google Functions// HTTP functions
exports.helloHttp = function helloHttp (req, res) {
res.send(`Hello ${req.body.name || 'World'}!`);
};
// background functions
exports.helloBackground = function helloBackground (event, callback) {
callback(null, `Hello ${event.data.name || 'World'}!`);
};
Triggered by:● HTTP triggers● Cloud Pub/Sub● Cloud Storage Triggers
Google Functions// HTTP functions
exports.helloHttp = function helloHttp (req, res) {
res.send(`Hello ${req.body.name || 'World'}!`);
};
// background functions
exports.helloBackground = function helloBackground (event, callback) {
callback(null, `Hello ${event.data.name || 'World'}!`);
}; Google Specific APIs
Triggered by:● HTTP triggers● Cloud Pub/Sub● Cloud Storage Triggers
Microsoft Azure Functionsmodule.exports.hello = (context, req) => {
const res = {};
if (req.query.name || (req.body && req.body.name)) {
const name = req.query.name || req.body.name;
res.body = `Hello ${name}`;
} else {
res.status = 400;
res.body = 'Please pass a name on the query string or in the request body';
}
context.done(null, res);
};
// another examplemodule.exports.hello = function(context, item) {
context.log("Received item: ${item}");
context.done();
};
Triggered by:● Data Processing● Schedule● Web Hook
Microsoft Azure Functionsmodule.exports.hello = (context, req) => {
const res = {};
if (req.query.name || (req.body && req.body.name)) {
const name = req.query.name || req.body.name;
res.body = `Hello ${name}`;
} else {
res.status = 400;
res.body = 'Please pass a name on the query string or in the request body';
}
context.done(null, res);
};
// another examplemodule.exports.hello = function(context, item) {
context.log("Received item: ${item}");
context.done();
};
Azure Specific APIs
Triggered by:● Data Processing● Schedule● Web Hook
Twilio Functionsexports.handler = function(context, event, callback) {
const response = new Twilio.Response();
response.setBody({
hello: 'world'
});
response.appendHeader('Content-Type', 'application/json');
response.appendHeader('MyHeader', 'MyContent');
callback(null, response);
};
Triggered by:● Incoming Voice calls● Incoming Messages
Twilio Functionsexports.handler = function(context, event, callback) {
const response = new Twilio.Response();
response.setBody({
hello: 'world'
});
response.appendHeader('Content-Type', 'application/json');
response.appendHeader('MyHeader', 'MyContent');
callback(null, response);
};
Twilio Specific APIs
Triggered by:● Incoming Voice calls● Incoming Messages
Wix Code - Web Modules// server code - calculator.jsw
export function calculateLoad(latency, concurrency, traffic) {
let opsPerMinite = 60000 / latency;
return {
idle: Math.max((1 - traffic / opsPerMinite), 0),
utilization: traffic / opsPerMinite / concurrency
};
}
// client code
import {calculateLoad} from 'backend/calculator';
function doLoadCalculation() {
calculateLoad($w('#latency').value, $w('#concurrency').value, $w('#traffic').value)
.then(res => {
$w('#utilized').text = `${toPercent(res.utilization)} Utilized`;
$w('#idle').text = `${toPercent(res.idle)} Idle`;
});
}
Wix Code - HTTP Functions// server code
import {ok} from 'wix-functions';
export function get_calculateLoad(request) {
let latency = request.query.latency;
let concurrency = request.query.concurrency;
let traffic = request.query.traffic;
let opsPerMinite = 60000 / latency;
return ok({
body: {
idle: Math.max((1 - traffic / opsPerMinite), 0),
utilization: traffic / opsPerMinite / concurrency
}
});
}
// a call from a client
curl https://yoav68.wixsite.com/load-calculator/_functions-dev/calculateLoad\?latency\=10\& concurrency\=20\&traffic\=1000
… Server-Side logic ... … written by the application developer …... run in stateless compute containers ...
... event-triggered, ephemeral (...), and fully managed by a 3rd party
-- Martin Fowler quoting ThoughtWorks
The Magic Pitch● No Servers to Manage● Magic Scaling● Pay only for what you use● Just throw your code
Almost sounds like:
Serverless is the DevOps holy grail - Just throw your code over the wall...
The TradeGoing Serverless means a trade:
You trade your Freedom for a Managed Service
Sign here to use my Serverless
The TradeYou trade your Freedom for a Managed Service
Select web framework
Websockets
HTTP streaming / chunked
TCP / IP / UDP
Select programming Language
The Future of Serverless
History of ServerlessM
anag
ed S
olut
ion
1995 1999 2006 2008 2012 2014 2017
Hosted PHP
Ease of useFreedom
History of ServerlessM
anag
ed S
olut
ion
1995 1999 2006 2008 2012 2014 2017
Hosted PHP
J2EE
Ease of useFreedom
History of ServerlessM
anag
ed S
olut
ion
1995 1999 2006 2008 2012 2014 2017
Hosted PHP
J2EEEC2
Ease of useFreedom
History of ServerlessM
anag
ed S
olut
ion
1995 1999 2006 2008 2012 2014 2017
Hosted PHP
J2EEEC2
AppEngine
Ease of useFreedom
History of ServerlessM
anag
ed S
olut
ion
1995 1999 2006 2008 2012 2014 2017
Hosted PHP
J2EEEC2
AppEngine
Parse.com
Ease of useFreedom
History of ServerlessM
anag
ed S
olut
ion
1995 1999 2006 2008 2012 2014 2017
Hosted PHP
J2EEEC2
AppEngine
Parse.com
Managed Containers
Amazon Lambda
Ease of useFreedom
History of ServerlessM
anag
ed S
olut
ion
1995 1999 2006 2008 2012 2014 2017
Hosted PHP
J2EEEC2
AppEngine
Parse.com
Managed Containers
Amazon Lambda
Wix CodeEase of useFreedom
Predictions
More Serverless Freedom ● Expanding for full support of HTTP, including
● WebSockets
● Streaming / chunked
● Additional protocols - TCP, UDP
● Memoise as a Service - For stateless, side-effect-free functions
● Native serverless options - Go, Rust, C, etc.
Consolidation● Vendors will start to offer similar offerings
● Cross-vendor libraries to ease vendor lockPartial adoption, vendor ‘added value’ features.import futureLibrary from 'FUTURE_LIBRARY';
futureLibrary.initMagic(exports, 'AWS');
futureLibrary.eventFunction = function handleEvent(event) {
event.respond(...);
}
● Standards will ariseAll vendors will join, never to fully support. ‘added value’ extras
Containers
Future of ContainersContainers and Kubernetes have a hard choice to make
● Serverless over Kubernetes - Kubernetes will evolve into runtime for serverlessMove to deploy functions directly, not containers
● Kubernetes and Containers will be abstracted outBecome less and less relevant over time
Containers vs Serverless● Containers and Kubernetes are a system product built by developers
○ Building Docker images
○ Managing running instances
● Serverless are developer facing products
○ Trivial packaging
○ Instances are no longer a concern
● Serverless is a higher level of abstraction
Serverless Orchestration● A serverless runtime will emerge for serverless application Orchestration
● Will run on premise or on cloud
● Based on containers or not
Photo: https://www.secsign.com/cloud-vs-premise-file-sharing-business-4-practical-issues-consider/
The Cold Start Problem
What is Cold Start?Have you ever seen this message?
Solving the Cold Start ProblemNew technology will emerge, taking Cold Start time to under 100 mSec
● Start a VM / Container / Unikernels / Sandbox in under 100 mSec.
If your applications starts in 10 mSec
● Do you need an application instance running 24x7?● Do you need a fallback instance running 24x7?● Do you need your database running 24x7?
Solving the Cold Start ProblemSolving cold start Changes Cloud Economy
● Imaging a server
0.8% Utilized
84% Idle
Latency: 10 ms / request
Can handle 20 concurrent requests
Traffic: 1000 RPM
Solving the Cold Start ProblemSolving cold start Changes Cloud Economy
● Imaging a server
0.8% Utilized
84% Idle
Latency: 10 ms / request
Can handle 20 concurrent requests
Traffic: 1000 RPMIt takes 150,000 daily users, 10 requests each, to generate 1000 RPM
Solving the Cold Start ProblemSolving cold start Changes Cloud Economy
● Imaging a server
0.8% Utilized
84% Idle
Latency: 10 ms / request
Can handle 20 concurrent requests
Traffic: 1000 RPMIt takes 150,000 daily users, 10 requests each, to generate 1000 RPM
At Wix - with over 100,000,000 users...of 2,500 running processesOnly 10% are over 1000 RPM
Pay only for what you use● Functions - You only pay when your function is running
● Interesting fact - the marketing pitch of VMs 10 years ago was “only pay for what you use”
● Interesting fact - the marketing pitch of App Engine 8 years ago was “only pay for what you use”
● What went wrong?
Cold Start Latency
Cold Start Latency ExplainedThe time it takes for a process that is not running to respond to the first user
Functions Cold Start time - about 600ms - 2 seconds
~10 mSec
Request Handler
~100-1000 mSec
Start process
First Browser HTTP request
First response
Scheduler Overhead
2-120 Sec
Start instance
● VMs - about 2 minutes● Containers - about 2 seconds
Cold Start LatencyWhat it means?
● Functions are great for offline events
● Functions are ok for web apps APIs / REST / AJAX
● Functions are fine for high traffic websites - HTML
● Functions are not usable for websites - HTML
Website Latency requirementFunctions are not usable for websites - HTML
● Must meet a strict SLA - time to first byte
● Fast websites aim for under 100 mSec (measured on server)
● 200-500 mSec is standard
● Over 2 Sec is considered slow and can harm a website ranking
Cold Start LatencyWhat it means?
● Functions are great for offline events
● Functions are ok for web apps APIs / REST / AJAX
● Functions are fine for high traffic websites - HTML
● Functions are not usable for websites - HTMLNote: In terms of latency, VMs and Containers are just as good for offline events, web apps and high traffic websites.
How we Solved Cold Start
<100 mSec Minutes to hours
Cold start time
Working process
Start process
First Browser HTTP request
stopping process
Inject & Load user code
Tailored Serverless
Tailored ServerlessSolves a specific business problem
● Twilio - serverless reaction to phone or SMS events
● CloudFlare - serverless proxy logic
● Wix Code - serverless platform for the frontend
● We will see more examples like Data Processing, Edge logic or Real-time Video processing
Serverless replacing Configuration● Fact - the #1 configuration representation is Javascript
● Fact - the #2 configuration representation is JVM Bytecode
export function newEmailHook(email) {
If (email.from ===
email.labels.push('J2XB');
}
Let’s take Serverless for Frontend as another example(Wix Code is such a platform)
Why Serverless for the Frontend?
What it means, Serverless for Web Apps?Websites?
What is the difference between Web Apps and Websites?
SEO
Let’s see this in actionExample
● An image gallery - lightGallery ● How browseo bot sees lightGallery● How evolvedwebsites bot sees lightGallery
Tools to visualize how a bot sees your site
● Google Search Console● http://www.browseo.net/● http://www.evolvedwebsites.com.au/googlebot/view.php
Web Apps ↔ Websites?Actually, it is Search Engine Compatibility
Website Search Engines
Social Networks Bots
Server Side Rendering
Found By
Found By Indexed by
read by
expects
Web Apps ↔ Websites?Actually, it is Search Engine Compatibility
Website Search Engines
Social Networks Bots
Server Side Rendering
Found By
Found By Indexed by
read by
expects
Challenging
Traditional model - server side language (Ruby, PHP, Java) client built with React, Angular, Vue, etc.
● Double development, traditionally done by different people
Emerging model - server and client side using javascriptrendering using React, Angular, Meteor, etc.
● Challenging as server rendering time is easily in the 200-600 mSec for a simple website
● Challenging to setup and configure
Server Side Rendering - Challenging to Develop
Lets to the trade againGoing Serverless for frontend
You trade your Freedom for a Managed Service
Sign here to use my Serverless
Solving Server Side RenderingServer Side Rendering with time to first byte under 100 mSec
~10 mSec 200-600 mSec
Router Function
Rendering Function
100-1000 mSec
Headreceived
Browser Loading Scripts
DOMContentLoaded
Rendering Function on client
<100 mSec
Cold Start Time
Browser makes HTTP request
Rethink the Web Server● Controller Functions
Server functions, handle HTTP request and render HTML, Json, etc.
● Router FunctionsServer function, handles HTTP request and selects a page
● Rendering FunctionsIsomorphic function that renders the page HTML / DOM.
Serverless for FrontendWhat you gain
● Cold Start Solution
● Server side rendering
● HTTP Streaming
● Router & Rendering functions
● REST / AJAX functions
● CDN, Domain, Assets, etc.
What you lose
● Choice of a frontend framework
● Choice of a server framework
● Choice of FE build processMinification, Aggregation, ES6 compile, etc.
Takeaway
Serverless
Serverless Orchestration
Disrupts Containers
Cold Start
Disrupt Clouds
Tailored Serverless
Disrupt Frontend Dev
Disrupt Configuration
Stickers