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

Transcript

1. View Slide

2. View Slide

3. View Slide

4. View Slide

5. @slobodan_
   

   View Slide

6. @slobodan_
   

   View Slide

7. @slobodan_
   

   View Slide

8. @slobodan_
   

   View Slide

9. @slobodan_
   

   View Slide

10. @slobodan_
    

    View Slide

11. @slobodan_
    

    View Slide

12. @slobodan_
    

    View Slide

13. @slobodan_
    

    View Slide

14. @slobodan_
    

    View Slide

15. @slobodan_
    How simple static website
    hosting should work?
    

    View Slide

16. @slobodan_
    You should focus on your app only!
    And deployment should be simple.
    

    View Slide

17. @slobodan_
    • Fast one command deployment
    • Cheap
    • Free if (almost) no one is using it
    • Scalable and cached
    

    View Slide

18. @slobodan_
    That feature list sounds familiar!
    

    View Slide

19. @slobodan_
    

    View Slide

20. @slobodan_
    But it also sounds like a feature list of…
    

    View Slide

21. @slobodan_
    Serverless
    

    View Slide

22. @slobodan_
    Serverless
    a backend thing
    that gives
    superpowers
    to frontend developers
    

    View Slide

23. @slobodan_
    Before we continue…
    

    View Slide

24. Slobodan Stojanovic
    CTO @ Cloud Horizon & Vacation Tracker
    co-author of Serverless Applications with Node.js book
    AWS Serverless Hero
    @slobodan_
    

    View Slide

25. @slobodan_
    So, serverless…
    

    View Slide

26. @slobodan_
    So, serverless…
    Less servers?
    

    View Slide

27. @slobodan_
    So, serverless…
    Less servers?
    No servers?
    

    View Slide

28. @slobodan_
    So, serverless…
    Less servers?
    No servers?
    Or even more servers?
    

    View Slide

29. @slobodan_
    So, serverless…
    No one cares about servers anymore!
    (except service providers, hopefully)
    

    View Slide

30. @slobodan_
    To, understand serverless,
    let's go a step back…
    What do you need to do to make your app function properly?
    

    View Slide

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)
    

    View Slide

32. @slobodan_
    What's important for your users/customers?
    

    View Slide

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)
    

    View Slide

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…
    

    View Slide

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!
    

    View Slide

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

    View Slide

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

    View Slide

38. @slobodan_
    Again, what's important for your business?
    

    View Slide

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)
    

    View Slide

40. @slobodan_
    And, what do you need to take care about
    with serverless?
    

    View Slide

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)
    

    View Slide

42. @slobodan_
    

    View Slide

43. @slobodan_
    But, you need
    servers
    to serve the app!
    

    View Slide

44. @slobodan_
    "It is serverless the same way WIFI is wireless"
    Gojko Adzic (@gojkoadzic)
    

    View Slide

45. @slobodan_
    What are the benefits of serverless?
    

    View Slide

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)
    

    View Slide

47. @slobodan_
    But the most important one is…
    

    View Slide

48. @slobodan_
    Pricing model of serverless
    

    View Slide

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
    

    View Slide

50. @slobodan_
    

    View Slide

51. @slobodan_
    But pricing model doesn't give superpowers
    at least not to frontend developers
    

    View Slide

52. @slobodan_
    But pricing model doesn't give superpowers
    at least not to frontend developers
    

    View Slide

53. @slobodan_
    What is the frontend developer
    kryptonite?
    The Myth of the Fullstack Developer?
    

    View Slide

54. @slobodan_
    What are some frontend developers with
    superpowers?
    Is anyone using serverless at all?
    

    View Slide

55. @slobodan_
    Story time!
    

    View Slide

56. @slobodan_
    

    View Slide

57. @slobodan_
    

    View Slide

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)
    

    View Slide

59. @slobodan_
    0
    

    View Slide

60. @slobodan_
    0
    Yes, zero/null/nulla/nula…
    

    View Slide

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)
    

    View Slide

62. @slobodan_
    

    View Slide

63. @slobodan_
    

    View Slide

64. @slobodan_
    

    View Slide

65. @slobodan_
    

    View Slide

66. @slobodan_
    • Lack of resources
    • DevOps engineer recommended serverless
    • Frontend dev wrote a SASS converter
    • Everything worked, so frontend team
    migrates other preprocessors
    

    View Slide

67. @slobodan_
    

    View Slide

68. @slobodan_
    Results?
    

    View Slide

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
    

    View Slide

70. @slobodan_
    

    View Slide

71. @slobodan_
    Vacation Tracker
    vacationtracker.io
    

    View Slide

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

    View Slide

73. @slobodan_
    To minimize initial cost and to speed up
    development, we used serverless from the
    beginning
    

    View Slide

74. @slobodan_
    Current state of the system
    

    View Slide

75. @slobodan_
    

    View Slide

76. @slobodan_
    Ok, that's not true,
    it's more like this:
    

    View Slide

77. @slobodan_
    

    View Slide

78. @slobodan_
    Results?
    

    View Slide

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
    

    View Slide

80. @slobodan_
    vacationtracker.io
    

    View Slide

81. @slobodan_
    Btw, do you know
    the cost of your latest bug?
    

    View Slide

82. @slobodan_
    We know the exact cost of our!
    

    View Slide

83. @slobodan_
    $2.37
    per week
    

    View Slide

84. @slobodan_
    $2.37
    Free tier
    got us covered :)
    per week
    

    View Slide

85. @slobodan_
    Should you even fix a bug
    that costs you less than $20/month?
    

    View Slide

86. @slobodan_
    No*
    * unless it affects user experience
    or it creates a larger damage
    

    View Slide

87. @slobodan_
    

    View Slide

88. @slobodan_
    

    View Slide

89. @slobodan_
    Nice, people are using serverless.
    But, where do I start?
    

    View Slide

90. @slobodan_
    

    View Slide

91. @slobodan_
    

    View Slide

92. @slobodan_
    A Single Page App or a static website
    

    View Slide

93. @slobodan_
    https://console.aws.amazon.com/amplify
    

    View Slide

94. @slobodan_
    An Express.js application or API
    

    View Slide

95. @slobodan_
    What are the benefits?
    

    View Slide

96. @slobodan_
    

    View Slide

97. @slobodan_
    bit.ly/serverless-expressjs
    

    View Slide

98. @slobodan_
    Not the best solution
    HTTP request
    Another HTTP request
    

    View Slide

99. @slobodan_
    A better API
    

    View Slide

100. @slobodan_
     Claudia.js + Claudia API Builder
     claudiajs.com
     

     View Slide

101. @slobodan_
     Looks the same, but it's not!
     

     View Slide

102. @slobodan_
     Faster means cheaper!
     You pay per execution time, milliseconds matter
     

     View Slide

103. @slobodan_
     P.S. You can do server-side rendering
     using similar approach!
     There are also Lambda@Edge and Cloudflare workers
     

     View Slide

104. @slobodan_
     APIs are boring, GraphQL FTW!
     

     View Slide

105. @slobodan_
     AWS AppSync
     aws.amazon.com/appsync
     

     View Slide

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
     

     View Slide

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)
     

     View Slide

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)
     

     View Slide

109. @slobodan_
     A file converter
     

     View Slide

110. @slobodan_
     Claudia.js
     or
     AWS Serverless Application Repository
     serverlessrepo.aws.amazon.com/applications
     

     View Slide

111. @slobodan_
     

     View Slide

112. @slobodan_
     ERR_TOO_MANY_TOOLS
     

     View Slide

113. @slobodan_
     One tool to rule them all
     

     View Slide

114. @slobodan_
     AWS Amplify
     aws-amplify.github.io
     

     View Slide

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…
     

     View Slide

116. @slobodan_
     

     View Slide

117. @slobodan_
     Do we have time (and internet)
     for a short live demo?
     

     View Slide

118. @slobodan_
     

     View Slide

119. @slobodan_
     Links to mentioned things
     

     View Slide

120. @slobodan_
     • AWS Amplify - https://aws-amplify.github.io
     • Claudia.js - https://claudiajs.com
     • Vacation Tracker - https://vacationtracker.io
     

     View Slide

121. @slobodan_
     Summary
     

     View Slide

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!
     

     View Slide

123. @slobodan_
     One more thing!
     

     View Slide

124. @slobodan_
     

     View Slide

125. @slobodan_
     Serverless Applications with Node.js
     Use claudia40 promo code
     for 40% off
     serverless.pub/book
     @slobodan_
     

     View Slide