Serverless for Frontend Developers - ArmadaJS

What does serverless have to do with frontend development? You might have heard or even experienced many of its benefits such as autoscaling and its pricing model. But no one told you the most important one: “Even though serverless is a backend thing, it gives superpowers to the front end developers”. It puts deployment in the hands of frontend developers, without the traditional complexity of backend systems. You can now deploy a simple production-ready API, a server side rendering tool or even the whole Google Chrome browser and do amazing things with just a few lines of code. This talk is about serverless, and about the ways you can benefit from it as a frontend developer.

Transcript

1. Warning! Upozorenje! Serverless => AWS-filled talk. sli.do #armadajs
2. Hello Meet Slobodan Your home-grown
 frontend developer
3. Let’s talk about CSS
4. CSS?
5. We, frontend developers, 
 to watch the magic other frontend engineers have created
6. https://codepen.io/agathaco/full/NyQgQX
7. https://codepen.io/ainalem/full/EQXjOR
8. https://codepen.io/miocene/pen/mjLPVp
9. https://codepen.io/jcoulterdesign/full/ZxXbeP
10. https://codepen.io/jcoulterdesign/full/NOMeEb
11. And we love to “copy” from each other Good artists copy; Great artists steal.
12. Have you heard of CodePen?
15. CodePen’s problems (2016)
16. • 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)
18. How would you solve these problems? 
 (without me as a speaker here)
20. • 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!
21. But in reality, 
 we, the frontend engineers, often just stand there, 
 waiting in our domain.
23. 
 Being a Frontend (JavaScript) Developer 
 is not easy.
24. The traditional way of building full stack applications is difficult and annoying.
25. 1. You mock the frontend and wait. 
 (because the backend is late)
 2. Backend comes in.
 3. Now, do it again.
26. Provisioning multiple environments
 prod, staging, sandbox (dev), demo
27. Performance refactoring
28. “Whoops!
 We changed the backend response…”
29. And on the other hand,
 we are recently,
 starting to see more of…
30. "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
31. What’s the difference?
32. 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…
33. Serverless omg, what a cheap salesman!
34. simalexan Serverless A backend thing that gives superpowers to frontend developers
35. 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
36. Alright, but how does not having servers…? It is serverless, 
 the same way WIFI is wireless. Gojko Adzic
37. No server management / ops Scales per use Autofailover Don’t pay 
 for idle Easy to start with What are the benefits
 of serverless?
38. But the best one? Pricing model
39. • You are paying for used, not reserved capacity
 • Pay-per-execution model
 • If no one is using your app, it costs you $0
40. • 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
41. Ok, what does it change for me, a frontend developer?
42. Let’s Start from the problems Deployment
43. Not like this…
44. Deploying a simple 
 SPA
45. https://console.aws.amazon.com/amplify
46. Static / SPA Deployment
48. #2 Problem Multiple environments
50. AWS Amplify - Multiple Environments
51. #3 Problem Simple APIs
52. Simple API
53. Simple API
55. #4 Problem Authorization
56. Authorization
57. Authorization
58. #5 Problem Image Upload / File Storage
59. Image Upload
60. Image Upload 
 with React Native
61. Can we do something crazier?
62. Not a #6 Problem Machine Learning / AI You gotta be kidding me?!
63. Add Predictions
64. Identify {Whatever} From a photo
65. Identify {Whatever} From a photo • Converting text to speech
 • Text recognition from image
 • Entities recognition
 
 and much more!
66. You, as a JavaScript developer,
 can build a complete product,
 
 front to infrastracture,
 
 without anyone else.
67. Can we do something faster?
68. How many times have you implemented authorization from scratch?
69. Undifferentiated business logic.
70. To build something new, 
 we have to repetitively build 80% of what we did 7 times already.
71. But its all slightly different! Really?!
72. “Repetitive logic" repository
73. One Click Deploy
74. Success Stories Blah, blah… share what you’ve been involved or know of, in person
75. Success Stories •Science Exchange •Desole •Vacation Tracker •Mind Mup •CodePen
76. Science Exchange
77. Time Spent:
 3 months > 2 weeks => Going serverless Cost: $40,000 > $10 / year Science Exchange
78. @simalexan desole.io
79. @simalexan vacationtracker.io
80. @simalexan
81. @simalexan @slobodan_ “To minimize initial cost and to speed up development, we used serverless from the beginning”
82. @simalexan • In-company hackathon idea • Small startup with one full time developer 
 (+ small help) • One mostly frontend developer • Slack chatbot + API + SPA dashboard
83. @simalexan
84. @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
85. @simalexan MindMup
86. @simalexan • More than 750,000 users per month • Around $120 / month. • Company size of two people • Migration took around a month MindMup
87. And to repeat for CodePen…
88. • Easily handling more than 
 250 million requests / month • $1180/month • A dozen people company, most frontend • All of processors are serverless
89. Most of these businesses
 have been transformed with frontend developers They became their companies’ superheroes
90. Key takeaways!
91. • 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!
93. serverless.pub/book “Serverless Applications with Node.js" @simalexan claudia40 40% off Hvala