Serverless for Frontend Developers - ArmadaJS

Slide 1

Slide 1 text

Warning! Upozorenje! Serverless => AWS-filled talk. sli.do #armadajs

Slide 2

Slide 2 text

Hello Meet Slobodan Your home-grown  frontend developer

Slide 3

Slide 3 text

Let’s talk about CSS

Slide 4

Slide 4 text

CSS?

Slide 5

Slide 5 text

We, frontend developers,   to watch the magic other frontend engineers have created

Slide 6

Slide 6 text

https://codepen.io/agathaco/full/NyQgQX

Slide 7

Slide 7 text

https://codepen.io/ainalem/full/EQXjOR

Slide 8

Slide 8 text

https://codepen.io/miocene/pen/mjLPVp

Slide 9

Slide 9 text

https://codepen.io/jcoulterdesign/full/ZxXbeP

Slide 10

Slide 10 text

https://codepen.io/jcoulterdesign/full/NOMeEb

Slide 11

Slide 11 text

And we love to “copy” from each other Good artists copy; Great artists steal.

Slide 12

Slide 12 text

Have you heard of CodePen?

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

CodePen’s problems (2016)

Slide 16

Slide 16 text

• Team of mostly frontend devs + one DevOps • Ruby on Rails backend • Many preprocessors that needs full isolation • > 200k requests/hour in peak • Unexpected peaks   (you never know when some pen will become popular)

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

How would you solve these problems?   (without me as a speaker here)

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

• Full isolation between services  • Auto-scaling (up to 5000 parallel requests)  • Decreased infrastructure cost   (250 million requests costs $1180/month)  • More DevOps time for RoR part of the app  • Frontend developers with superpowers?! Even though frontend, they solved it!

Slide 21

Slide 21 text

But in reality,   we, the frontend engineers, often just stand there,   waiting in our domain.

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

  Being a Frontend (JavaScript) Developer   is not easy.

Slide 24

Slide 24 text

The traditional way of building full stack applications is difficult and annoying.

Slide 25

Slide 25 text

1. You mock the frontend and wait.   (because the backend is late)  2. Backend comes in.  3. Now, do it again.

Slide 26

Slide 26 text

Provisioning multiple environments  prod, staging, sandbox (dev), demo

Slide 27

Slide 27 text

Performance refactoring

Slide 28

Slide 28 text

“Whoops!  We changed the backend response…”

Slide 29

Slide 29 text

And on the other hand,  we are recently,  starting to see more of…

Slide 30

Slide 30 text

"I could continue to be the CTO, do all the backend and middle-tier code, and support up to probably about a hundred front-end developers before I would need a dedicated backend developer." Joe Emison (@JoeEmison) CTO @ Branch Insurance,   former CTO @ BuildFax

Slide 31

Slide 31 text

What’s the difference?

Slide 32

Slide 32 text

The magic that helped   CodePen & Joe Emison,   their frontend developers,  resolve all of their backend problems is Oh no, please don’t say it like that…

Slide 33

Slide 33 text

Serverless omg, what a cheap salesman!

Slide 34

Slide 34 text

simalexan Serverless A backend thing that gives superpowers to frontend developers

Slide 35

Slide 35 text

simalexan Aleksandar Simovic Senior Software Engineer @ ScienceExchange AWS Serverless Hero coauthor of “Serverless Applications with Node.js” book AWS SAM, CDK & Lambda   Builders Contributor co-organizer of JS Belgrade, a friendly community of over 2000 members and 5 years

Slide 36

Slide 36 text

Alright, but how does not having servers…? It is serverless,   the same way WIFI is wireless. Gojko Adzic

Slide 37

Slide 37 text

No server management / ops Scales per use Autofailover Don’t pay   for idle Easy to start with What are the benefits  of serverless?

Slide 38

Slide 38 text

But the best one? Pricing model

Slide 39

Slide 39 text

• You are paying for used, not reserved capacity  • Pay-per-execution model  • If no one is using your app, it costs you $0

Slide 40

Slide 40 text

• A single JavaScript function  -> $0.20 per million requests   • Add S3   -> $0.023 per GB / month of stored  • GraphQL (AppSync)   -> $4 per million queries and data modifications

Slide 41

Slide 41 text

Ok, what does it change for me, a frontend developer?

Slide 42

Slide 42 text

Let’s Start from the problems Deployment

Slide 43

Slide 43 text

Not like this…

Slide 44

Slide 44 text

Deploying a simple   SPA

Slide 45

Slide 45 text

https://console.aws.amazon.com/amplify

Slide 46

Slide 46 text

Static / SPA Deployment

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

#2 Problem Multiple environments

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

AWS Amplify - Multiple Environments

Slide 51

Slide 51 text

#3 Problem Simple APIs

Slide 52

Slide 52 text

Simple API

Slide 53

Slide 53 text

Simple API

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

#4 Problem Authorization

Slide 56

Slide 56 text

Authorization

Slide 57

Slide 57 text

Authorization

Slide 58

Slide 58 text

#5 Problem Image Upload / File Storage

Slide 59

Slide 59 text

Image Upload

Slide 60

Slide 60 text

Image Upload   with React Native

Slide 61

Slide 61 text

Can we do something crazier?

Slide 62

Slide 62 text

Not a #6 Problem Machine Learning / AI You gotta be kidding me?!

Slide 63

Slide 63 text

Add Predictions

Slide 64

Slide 64 text

Identify {Whatever} From a photo

Slide 65

Slide 65 text

Identify {Whatever} From a photo • Converting text to speech  • Text recognition from image  • Entities recognition    and much more!

Slide 66

Slide 66 text

You, as a JavaScript developer,  can build a complete product,    front to infrastracture,    without anyone else.

Slide 67

Slide 67 text

Can we do something faster?

Slide 68

Slide 68 text

How many times have you implemented authorization from scratch?

Slide 69

Slide 69 text

Undifferentiated business logic.

Slide 70

Slide 70 text

To build something new,   we have to repetitively build 80% of what we did 7 times already.

Slide 71

Slide 71 text

But its all slightly different! Really?!

Slide 72

Slide 72 text

“Repetitive logic" repository

Slide 73

Slide 73 text

One Click Deploy

Slide 74

Slide 74 text

Success Stories Blah, blah… share what you’ve been involved or know of, in person

Slide 75

Slide 75 text

Success Stories •Science Exchange •Desole •Vacation Tracker •Mind Mup •CodePen

Slide 76

Slide 76 text

Science Exchange

Slide 77

Slide 77 text

Time Spent:  3 months > 2 weeks => Going serverless Cost: $40,000 > $10 / year Science Exchange

Slide 78

Slide 78 text

@simalexan desole.io

Slide 79

Slide 79 text

@simalexan vacationtracker.io

Slide 80

Slide 80 text

@simalexan

Slide 81

Slide 81 text

@simalexan @slobodan_ “To minimize initial cost and to speed up development, we used serverless from the beginning”

Slide 82

Slide 82 text

@simalexan • In-company hackathon idea • Small startup with one full time developer   (+ small help) • One mostly frontend developer • Slack chatbot + API + SPA dashboard

Slide 83

Slide 83 text

@simalexan

Slide 84

Slide 84 text

@simalexan • More than 200 teams using the product • Current infrastructure cost is $0 • Fast development cycles • Easy refactoring, because of micro services • Reusable parts for our next products

Slide 85

Slide 85 text

@simalexan MindMup

Slide 86

Slide 86 text

@simalexan • More than 750,000 users per month • Around $120 / month. • Company size of two people • Migration took around a month MindMup

Slide 87

Slide 87 text

And to repeat for CodePen…

Slide 88

Slide 88 text

• Easily handling more than   250 million requests / month • $1180/month • A dozen people company, most frontend • All of processors are serverless

Slide 89

Slide 89 text

Most of these businesses  have been transformed with frontend developers They became their companies’ superheroes

Slide 90

Slide 90 text

Key takeaways!

Slide 91

Slide 91 text

• Serverless is easy to start with (beginner friendly) • No server maintenance and other boring things • Pay-per-usage model + it's cheap • You can deploy SPAs, APIs or GraphQL in minutes • It gives you superpowers!

Slide 92

Slide 92 text

No content

Slide 93

Slide 93 text

serverless.pub/book “Serverless Applications with Node.js" @simalexan claudia40 40% off Hvala