Serverless: a backend thing that gives superpowers to frontend developers @ <React.NotAConf />

Transcript

5. @slobodan_
6. @slobodan_
7. @slobodan_
8. @slobodan_
9. @slobodan_
10. @slobodan_
11. @slobodan_
12. @slobodan_
13. @slobodan_
14. @slobodan_
15. @slobodan_ How simple static website hosting should work?
16. @slobodan_ You should focus on your app only! And deployment should be simple.
17. @slobodan_ • Fast one command deployment • Cheap • Free if (almost) no one is using it • Scalable and cached
18. @slobodan_ That feature list sounds familiar!
19. @slobodan_
20. @slobodan_ But it also sounds like a feature list of…
21. @slobodan_ Serverless
22. @slobodan_ Serverless a backend thing that gives superpowers to frontend developers
23. @slobodan_ Before we continue…
24. Slobodan Stojanovic CTO @ Cloud Horizon & Vacation Tracker co-author of Serverless Applications with Node.js book AWS Serverless Hero @slobodan_
25. @slobodan_ So, serverless…
26. @slobodan_ So, serverless… Less servers?
27. @slobodan_ So, serverless… Less servers? No servers?
28. @slobodan_ So, serverless… Less servers? No servers? Or even more servers?
29. @slobodan_ So, serverless… No one cares about servers anymore! (except service providers, hopefully)
30. @slobodan_ To, understand serverless, let's go a step back… What do you need to do to make your app function properly?
31. @slobodan_ • Buy or rent a server • Install Operating System • Setup the server (libs, framework, etc.) • Write your code (business logic, etc.) • Make your app available (deploy it) • Make sure your app works (monitoring) • Manage server and software updates • Manage your app code (fixes + features)
32. @slobodan_ What's important for your users/customers?
33. @slobodan_ • Buy or rent a server • Install Operating System • Setup the server (libs, framework, etc.) • Write your code (business logic, etc.) • Deploy your code to the server • Make sure your app works (monitoring) • Manage server and software updates • Manage your app code (fixes + features)
34. @slobodan_ • Buy or rent a server • Install Operating System • Setup the server (libs, framework, etc.) • Write your code (business logic, etc.) • Deploy your code to the server • Make sure your app works (monitoring) • Manage server and software updates • Manage your app code (fixes + features) ✔ ✔ Isn't cloud helping? Yes, with some things…
35. @slobodan_ • Buy or rent a server • Install Operating System • Setup the server (libs, framework, etc.) • Write your code (business logic, etc.) • Deploy your code to the server • Make sure your app works (monitoring) • Manage server and software updates • Manage your app code (fixes + features) Serverless is simply the next step!
36. @slobodan_ • Buy or rent a server • Install Operating System • Setup the server (libs, framework, etc.) • Write your code (business logic, etc.) • Deploy your code to the server • Make sure your app works (monitoring) • Manage server and software updates • Manage your app code (fixes + features) Serverless is simply the next step! ✔ ✔
37. @slobodan_ • Buy or rent a server • Install Operating System • Setup the server (libs, framework, etc.) • Write your code (business logic, etc.) • Deploy your code to the server • Make sure your app works (monitoring) • Manage server and software updates • Manage your app code (fixes + features) Serverless is simply the next step! ✔ ✔ ✔ ✔
38. @slobodan_ Again, what's important for your business?
39. @slobodan_ • Buy or rent a server • Install Operating System • Setup the server (libs, framework, etc.) • Write your code (business logic, etc.) • Deploy your code to the server • Make sure your app works (monitoring) • Manage server and software updates • Manage your app code (fixes + features)
40. @slobodan_ And, what do you need to take care about with serverless?
41. @slobodan_ • Buy or rent a server • Install Operating System • Setup the server (libs, framework, etc.) • Write your code (business logic, etc.) • Deploy your code to the server • Make sure your app works (monitoring) • Manage server and software updates • Manage your app code (fixes + features)
42. @slobodan_
43. @slobodan_ But, you need servers to serve the app!
44. @slobodan_ "It is serverless the same way WIFI is wireless" Gojko Adzic (@gojkoadzic)
45. @slobodan_ What are the benefits of serverless?
46. @slobodan_ • Managed infrastructure, so you can focus on the business logic • Auto-scaling and auto-failover • Per function isolation • Easy to start with (beginner friendly)
47. @slobodan_ But the most important one is…
48. @slobodan_ Pricing model of serverless
49. @slobodan_ • You are paying for used, not reserved capacity • Pay-per-execution model • If no one is using your app, it costs you $0 + there are generous free tiers
50. @slobodan_
51. @slobodan_ But pricing model doesn't give superpowers at least not to frontend developers
52. @slobodan_ But pricing model doesn't give superpowers at least not to frontend developers
53. @slobodan_ What is the frontend developer kryptonite? The Myth of the Fullstack Developer?
54. @slobodan_ What are some frontend developers with superpowers? Is anyone using serverless at all?
55. @slobodan_ Story time!
56. @slobodan_
57. @slobodan_
58. @slobodan_ How many DevOps team members you need to be able to handle 250 million preprocessor API requests per month? in your team (or to pay directly)
59. @slobodan_ 0
60. @slobodan_ 0 Yes, zero/null/nulla/nula…
61. @slobodan_ • 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)
62. @slobodan_
63. @slobodan_
64. @slobodan_
65. @slobodan_
66. @slobodan_ • Lack of resources • DevOps engineer recommended serverless • Frontend dev wrote a SASS converter • Everything worked, so frontend team migrates other preprocessors
67. @slobodan_
68. @slobodan_ Results?
69. @slobodan_ • 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
70. @slobodan_
71. @slobodan_ Vacation Tracker vacationtracker.io
72. @slobodan_ • In-company hackathon idea • Small startup with one full time developer (+ small help) • One mostly frontend developer • Slack chatbot + API + SPA dashboard
73. @slobodan_ To minimize initial cost and to speed up development, we used serverless from the beginning
74. @slobodan_ Current state of the system
75. @slobodan_
76. @slobodan_ Ok, that's not true, it's more like this:
77. @slobodan_
78. @slobodan_ Results?
79. @slobodan_ • Almost 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
80. @slobodan_ vacationtracker.io
81. @slobodan_ Btw, do you know the cost of your latest bug?
82. @slobodan_ We know the exact cost of our!
83. @slobodan_ $2.37 per week
84. @slobodan_ $2.37 Free tier got us covered :) per week
85. @slobodan_ Should you even fix a bug that costs you less than $20/month?
86. @slobodan_ No* * unless it affects user experience or it creates a larger damage
87. @slobodan_
88. @slobodan_
89. @slobodan_ Nice, people are using serverless. But, where do I start?
90. @slobodan_
91. @slobodan_
92. @slobodan_ A Single Page App or a static website
93. @slobodan_ https://console.aws.amazon.com/amplify
94. @slobodan_ An Express.js application or API
95. @slobodan_ What are the benefits?
96. @slobodan_
97. @slobodan_ bit.ly/serverless-expressjs
98. @slobodan_ Not the best solution HTTP request Another HTTP request
99. @slobodan_ A better API
100. @slobodan_ Claudia.js + Claudia API Builder claudiajs.com
101. @slobodan_ Looks the same, but it's not!
102. @slobodan_ Faster means cheaper! You pay per execution time, milliseconds matter
103. @slobodan_ P.S. You can do server-side rendering using similar approach! There are also Lambda@Edge and Cloudflare workers
104. @slobodan_ APIs are boring, GraphQL FTW!
105. @slobodan_ AWS AppSync aws.amazon.com/appsync
106. @slobodan_ • Serverless GraphQL • Preconfigured access to AWS data sources
 (DynamoDB, Lambda or Elastic Search) • Real-time data access and updates • Offline data synchronization • Authorizers • Minimize backend development
107. @slobodan_ "Oh, and I only hire front-end developers at this point. I have been the sole DevOps/backend/ middle-tier developer in the last two companies I started, and it’s been fine." Joe Emison (@JoeEmison)
108. @slobodan_ "With AppSync 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)
109. @slobodan_ A file converter
110. @slobodan_ Claudia.js or AWS Serverless Application Repository serverlessrepo.aws.amazon.com/applications
111. @slobodan_
112. @slobodan_ ERR_TOO_MANY_TOOLS
113. @slobodan_ One tool to rule them all
114. @slobodan_ AWS Amplify aws-amplify.github.io
115. @slobodan_ • Deployment (with and without CDN and HTTPS) • Auth using Amazon Cognito (+ social signins) • GraphQL backend using AppSync + real-time • Media storage using S3 • Nice client-side libraries for React and others • And much more…
116. @slobodan_
117. @slobodan_ Do we have time (and internet) for a short live demo?
118. @slobodan_
119. @slobodan_ Links to mentioned things
120. @slobodan_ • AWS Amplify - https://aws-amplify.github.io • Claudia.js - https://claudiajs.com • Vacation Tracker - https://vacationtracker.io
121. @slobodan_ Summary
122. @slobodan_ • 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!
123. @slobodan_ One more thing!
124. @slobodan_
125. @slobodan_ Serverless Applications with Node.js Use claudia40 promo code for 40% off serverless.pub/book @slobodan_