Building React + Serverless Full Stack Apps - Portland ReactJs

hello everybody we're gonna get started here in about three minutes letting everybody join in I'm David Wells and I'm gonna be talking about surrealist stuff and react and how they're amazing together and then I think we're gonna do Q&A if you have questions throughout the presentation leave them in the Google chat or we're gonna do a Q&A after this so yeah let me just double check that everything is working and everybody hear me okay say yes in the chat if you can everything is good in Portland all right awesome cool cool alright let's go ahead and get started and in one minute let me go ahead and share my screen whoa infinite loop okay cool so yeah let's go ahead and get started Jason if there's any problems just ping me on skype and we can fix it but yeah cool so and yeah before I start I wanted to thank Jason for inviting me to do this this is awesome I love talking about this stuff and I want to thank New Relic for hosting you guys are awesome but yeah well so let's get into it so my name is David Wells I'm a software engineer over at serverless service.com previously I worked in you'll stop doing UI UX stuff and yeah so I actually decided to change my talk to how to refactor app into angular one then back in the jQuery so surprised just kidding I don't know if anyone's laughing at that anyways yeah now just kidding we're actually here we're talking about serverless right so we want to basically I'm gonna toss my video up here there we go so yeah we're talking about service today what is it and like basically how you can use it with your react applications to kind of build in my opinion the dream stack so it's it's basically and I'm gonna go through this like why I think it's a match made in heaven and why you can build pretty sophisticated applications at a way lower cost than previously was kind of possible and we'll dive into kind of why that is real quick just some housekeeping here so these slides are available at this bitly URL if you want download them reference them later etc again if you have a question leave it in the chat on youtube or you know just tell Jason we're gonna do the Q&A right after or you know feel free to tweet at me anytime at david wells or contact me on my site always happy to talk about stuff with people yeah so um basically like how I got here doing like this serverless stuff and what got me really into it was I have these life goals these life goals of basically becoming this this unicorn child this unicorn child that can do everything on the front end and do everything on the back end in a sane way that was kind of like a goal of mine when I when I set out to kind of dive into the backend world and I basically my journey kind of started way back when when I was I was building an application using a node server I started getting pretty deep into the docker world and that quickly became pretty complex basically and and here's that here's a quick example so I I don't know if you guys are familiar with West boss he's awesome you should follow him on Twitter but scaling servers is hard right when you're actually like trying to deploy a production-ready application there's quite a few things that you need to really really consider if you're gonna like basically scale with the traffic that you get you know making a kind of a demo app is pretty straightforward but at like as you start to like get more and more traffic it becomes more and more complex and there's a lot more DevOps stuff that you really need to consider but I always see West tweeting about his server going down he's running stuff on his own node server using Express and there again there's nothing wrong with Express or node servers I'm actually gonna be like showing like node code today and how it runs in lambda but yeah it every time he does this I tweet at him and say you know hey Wes when are you gonna when you get a check out serverless but anyways yeah love us not trying to call you out or anything check out West's courses he has a really awesome Redux course actually at learn read XCOM highly recommend it they so so some of those concerns that I was talking about when you're actually trying to like deploy your production-ready app and you're using let's say a docker container with you know your node setup right so you need to think about load balancing you need to think about security concerns is my server secure are all my dependencies you know basically scanned for any potential vulnerabilities how am I going to do monitoring how am I gonna do logging you know how how am I gonna set up follower database instances or like slave like replicas and then what is what is that gonna cost me right so so again when you have one server that's running your database and your app it's super easy but it's not very resilient so when you actually do starting start seeing like a production kind of load it gets it gets pretty complex pretty quickly there are and and and kind of a thing that we've been seeing in the container space is a way to manage that it would be with like docker swarm or kubernetes right so so that does alleviate a lot of these concerns but yeah so when I when I saw when I was really like diving into the stuff and trying to basically like battle-hardened my application that I was building I I look like this kid here there's like oh my gosh I just wanted to build something cool and have as many people as possible to use it like I really just care about putting awesome things into the world that people can use I don't really want to kind of dive off the deep end learning at you know every single piece of that it kind of takes me away from my my kind of goal of being that unicorn child so around this time basically I heard about AWS lambda and this is taboo can I ask the correct audio if they've heard of lambda I can't see you guys right now but I'm assuming that you have basically AWS lambda is a compute service from AWS that lets you execute your code on demand but yeah it's it kind of changed the game and I'll go into that right here so really at its core what serverless is is running your code on demand in a like in a cloud of your choice so you don't have to go data abuse there's a lot of different providers which I'll get into but these are kind of the core concepts around what a server lists like kind of model is first of all it's paper execution pricing so what that means is you only pay per milliseconds that your code actually runs so in compare in comparison you're running a docker container or something on digital ocean or in a droplet or what have you you're paying hourly for that box and even like the cheapest box kind of like around like eight dollars a month or something a lot of times maybe that might be sitting idle or there's unused kind of resources there you really that's really one of the considerations that you need to look into when going with servers where as lambda only runs the code went you only get charged win the code actually runs so if you know no one uses your application you literally pay $0 if you know a lot of people use your application it Auto scales for you so whatever the compute provider is they will manage that scaling for you you never pay for the isle servers there's this concept of basically it's more of an event-driven kind of workflow and we'll get into what that means in a little bit and then there's also this kind of concept of leveraging third-party services for things that aren't necessarily your company's core competencies so for example you know it doesn't really make sense to roll your own off service if there's something like auth0 or AWS Cognito it doesn't really make sense for you to set up your own transactional mailing service these days with things like mandrill and SendGrid and all those same with like text messages with etc so really it's it's at its core it's about focusing on like what is your app doing and what value is it like giving to the user focus on that not on the I would say you know tedious kind of busy work that stuff's important but you don't need to really worry about that today and like I mentioned so you don't have to go with AWS today I'm actually I'm focusing on AWS and lambda it's kind of my provider of choice but all of the major cloud providers Microsoft Google IBM all have functions as a service offerings as well as all Xero has one Oracle just recently announced one you can also run functions as a service instead of kubernetes just you arguably you could are you know there's there's debate on whether or not that service because you're managing that kubernetes cluster it's still cool though and it's still like carries along a lot of these concepts that I'm talking about like event during workflows and what-have-you so like real quick what can you do with it you there are like a ton a ton a ton a ton a ton of different use cases not going to go into all of these we have a repo down at the bottom there of serverless examples but you know it I would say you could pretty much do anything you do on your node server today with the caveat that you cannot run anything that is longer than five minutes so that's that's a limit right now on the providers where if your function takes more than five minutes to execute it does not belong in a service function so if you are doing any like kind of heavy machine learning stuff or what-have-you you that that's not really suited for kind of the serverless world that said there are kind of ways around that yeah there are some some ways around that you could basically have like a service function spin up an ec2 instance run your long-running job and then spin back down and respond with that so we are seeing people kind of work around this when they're building out their their servos architectures but yeah so I have I have a bunch of other talks on like these use cases I think it's called real-world serverless or something like that I'll toss a link in the meetup chat but yeah so anyways moving on today like what I want to show you guys is actually a surrealist kind of service or application that is it's open-source the the repos down there at the bottom we use this for managing all of our form submissions on our website and across our various properties so this has a service back end and a react front end that's all on that repo there so let's actually take a look at it so there is some context cool so this is our our service forms application basically it is on the front end side we're using this is just using create react app right now I can't tell you how much that changed my life when that came out I used to do workshops teaching react and the first like two days we talked about web pack config no more use create react app if you don't already and then eject when you need to this is not ejected yet so but anyways we're using reactor outer for you know routing through the application Redux for state management Axios just to make the Ajax calls to our back-end and then the user authentication we're using auth0 and then this my kind of preferred host of choice is net Liffe I super awesome and I'll get into why they're awesome in a little bit and then like the backend is basically this is the architecture let me zoom in here so we're running a number of different lambda functions and I'll show you guys what this code looks like in a little bit this is just kind of the high-level architecture so we have a number of different lambda functions in our service and we're going through AWS API gateway to actually access those functions those functions are fetching data from two DynamoDB tables and then so like there's one side where it's like here's where we're actually collecting the form submissions from different various web properties I would say there's no authentication needed there because anyone can you know contact us today etc but then on the backside and and I'll log in and show you guys what the app looks like inside but basically that data when someone actually submits a form that needs to be obviously protected so that's actually protected by a custom authorizer and I'll go into details on that as well cool so that is kind of a high-level overview of you know what the actual application is you know I didn't super style this so don't don't judge it too much but the codes all there and it's it's using you know vanilla CSS right now I'd use post CSS if I injected so I'm gonna go ahead and log in and I'm a walking via github throughout zero and now it's loading my forms cool that just made a request to our back-end that just pinged a lambda function that lambda function is the basically like pull back the form information and then if I go into an actual form it pulls back all of the different kind of submissions there so that is the like kind of what it does in a nutshell this is calling out to a couple of different REST API endpoints which I'll show you guys a little bit here as well as like simulating how so what uses J JSON tokens as the authorization mechanism so inside of my local storage here we have a JWT that JWT is right here this actually is what's being sent when I'm like jumping into like a form view that this this is being sent along it with the authorization header and that's what the custom authorizer function is actually checking is it valid is this a real user and are they an admin so if any of you are since we're broadcasting this to everyone in Portland and to the Internet you might have tried to log in and try this if you do that what it's gonna do is basically tell you you are not a auto eyes user and I'll show you guys how that works as well but I'll just dim it real quick so I'm logging in with our bot service account too and this isn't a different browser instance but if I go ahead and log in you can see you're not an admin please contact the admin to actually see stuff so we're basically protecting that data with the JWT s so that is the app and again if I if you want to like simulate this in the app you like the repo can be cloned down today and deployed and I'll show you how that works but yeah so I'm just gonna mangle my JWT and then if I go back it's saying I'm not authorized so yeah anyways so that's that's the quick demo back and do it already talked about these bits so very very very standard react application back-end are you talked about that already went through the kind of architecture so let's let's actually dive into how the authorization works so here we were in the admin UI that we just saw when an API request is made that JWT is sent along with a header and it hits that custom authorizer function there's a couple different ways that you could do authorization with AWS if you're using Amazon kognito James incognito is basically Amazon's version of auth0 basically you know user login with Facebook Twitter etc or via email it's just the managed AWS one you can you can basically use client libraries from AWS to do that that's actually what I'm gonna dive into in my next project there are there are some gotchas with auth0 and there's there's some benefits with AWS kognito but honestly getting started and getting things up and running osteo is kind of just plug and play and you're off to the races so what we're talking about today is actually like the custom identity provider so like a custom authorizer function and really what that does I already talked about this a little bit but from the UI we request with the JW token after the user is logged in the function checks if the JWT is valid and so you can write any custom logic you want in there right and by the way you don't have to use J WTS to do this you can literally you know do whatever you want in that custom authorizer function so you could call into a database and say oh is this person valid or is this the correct plain text password don't do that but you could that's that's kind of the flexibility of a custom authorized function and we'll look at the code here in a second so yeah so if they are authorized you know yeah it generates and what's called an IM policy and that's basically the access control plane of AWS and it says like hey the JWT is valid so generate and I am policy that lets them invoke the REST API function to like get form information or to get the form submissions if they're not authorized we just for you know return on the authorized and stop right there so in the client it says nope you're not allowed sorry there are a lot of benefits to using a custom authorizer you can basically set caching at this layer like technically you could have your your auth logic in each one of these functions but you don't get basically that benefit of the caching layer here so like if I don't want to do an expensive API call every single time anybody hits one of my api's and I want to cache that for let's say five minutes or something that's kind of where the custom authorizer comes in it's also kind of if you're writing your logic you know you don't want to be spreading around your auth logic across multiple functions across your system because if you need to update it then you need to update it across your entire system whereas this is kind of like a single place that you can manage that yeah cool the other the other kind of benefit there is yeah if it if it's cached your not like kind of being charged for that invocation there cool awesome so let's talk about auth0 for a little bit sauce hero super awesome like I said crazy easy to get started let me actually log in and show you guys what it looks like okay so so basically when you log in all 0 you simply like create a client and choose like a single page web app and after that you you have like a client ID that you just plug in to your front-end application and use the auth 0 client library and you're kind of off to the races from that point there's an example of that in the repository but um let me get out of busted okay I'm gonna close this window all right so with us zero yeah so like I mentioned you create a client you make a single page web app super simple that gives you a inside of austere there's there's this concept of tenants so like you have a domain so whatever your like account name is so this is our this is our server list QA account and then we have a client ID these are the values that you would take and plug into your client-side application and real quick I want to show you how so I'm an admin user on that particular application and I'm gonna show you guys how that works inside of osteo so they're like ah Sierra has a lot of kind of like plugins out-of-the-box to extend the function at the base functionality of auth0 let me go ahead and one second log in here so they have this authorization extension so after you like if you go into extensions and install it it'll have this little authorization guy after that but once you actually go into that you can see that we have we can see all of our users for this particular tenant and I can actually manage groups and roles and permissions so there's like three different layers this is this is vastly simpler than using AWS I am and kind of Cognito stuff a little there's not as much power under the hood but you can still build robust applications with it but what I have here is actually a group inside of this group I have three of our teammates here I guess everyone knows their email now as well as my own but yeah so basically everyone in this group they have the role of admin so that's actually what's controlling that and that's actually being added to the JSON web token when I log in so if we actually decoded let me go back into the application and we'll take a look at that so serverless I want to make sure you go HTTPS if you put a custom domain on on nullify everything works out that way all right so I'm gonna log in again show you that I am indeed an admin cool I'm an admin if I look at my profile this is actually the decoded JSON web token let me zoom in on that oh the sub is actually like I logged in with github so that's my github kind of user ID that's my email don't spam me and then this is actually the the roles that are included in the JSON web token that is giving me access to this particular application so if I actually came back in here and remove myself so I'm gonna remove David from the admins and then if I go ahead and log out and try to log back in with the same account it should yell at me unless I'm a different user yep I'm a different user one second so inside of users David Wells so I have I have the admin role associated with this account so I remove the wrong guy let me remove this guy so I'm removing my role so now I've revoked access to myself I'm no longer an admin it's a sad day but now if I go ahead and refresh this login again what we can see is Oh snap I was bad word um yeah so I'm not an admin anymore so I need to contact the administrator and say give me a give me access again I want to read the forms so that's that's kind of like in a nutshell how that works I'm gonna add myself back in as an admin user so it fixes everything for me but yeah so that that in a nutshell is really how the authorization works and this is this is the again you can get the slides from that link that I shared before to walk you through these steps I believe they're also in the repository yeah so you can manage roles and then the last thing kind of final step is actually the way that that token gets added to a your your your JSON web token when you log in you actually set up what's called a rule inside of all 0 we also have a new hooks functionality those similar things but you basically create a rule let me show you the actual slides so you create a rule that rule is basically just like a little tiny function that runs right when that user logs in that says okay basically attach this this to the JSON web token so you can attach any custom information you want to that JSON web token just know that there's a slight caveat with that where if your JSON web token is too large you could run into problems like performance problems in particular and depending on how you're using it it could be too large for certain requests but yeah so that that's kind of like the setup of the auth0 client super straightforward once you've done that you basically take the Oscar client ID and the osteo domain and plug it into the front end and the back end and I'll show you guys how that works so let's actually look at some code [Music] let's see okay so in the actual project I don't know if I can zoom in on this anymore let me see if I can do this there we go so so basically there's a back end and a front end folder in this project the back end is the actual service that gets deployed to AWS all the functions and what-have-you and we'll walk through that in a second and then the front end is obviously just the react app pretty straightforward but basically the way that I've set it up is you plug in your osteo client ID and domain right here and that's used in the actual like authorization the osteo client uses those values when it connects when a user clicks the login so that's how that's hooked up on the client side both of these values like there's nothing sensitive about them so you're totally cool doing this never ever ever put in a client secret into your front-end code that could be bad news bears for for your company okay so that's the that's the front end application how you hook that up and then on the backend side similarly I have an example here I don't know if that's a real key oops what I need to change that okay clicked on the wrong file but that's cool basically in the config what we have is the the only thing that sensitive ears actually sing grid key but basically the osteo domain that's used in the actual function code let's look at let's take a look at the actual like what a let's see here this is what the actual custom authorizer looks like for lambda and we'll just like walk through this code so really the only value that I actually need is my auth0 domain because there is an asura client that grabs the json web key set which if you don't know what that is don't worry it's kind of confusing but basically it will grab keys and like decode them and yeah but basically so you call into this client with this the the function is just saying like hey make sure that they have an authorization token if not call back with an error then grab the actual JWT out of the request if there's no auto can call back then let's try to actually decode the token so that if the JWT is malformed we want to exit early and not do any like you know API requests and then we if the token is empty then we'll call back then we grab the actual k ID out of the decoded token and then get the signing key from all 0 so that's that this is where like all the security stuff is happening and then we're getting back the public key from auth0 and then we are going ahead and getting and and once we have that that key we can actually verify that the auth token is signed by r0 or whatever our provider is if it's not then it will call back unauthorized if it is then it will go ahead and generate that iam policy and that's what I was talking about before you can you can add is like as much logic as you want to this function you probably want to keep it as slim as possible but for instance like here's an example of like I only want to let through people that have verified their email so in their JWT if their email is verified let them through yeah oh cool so that's like that's the authorizer function let me go back to my slides oh yeah and then there's yeah so we actually deploy this service up to the cloud you would use so juicing it's using the circles framework under the hood which if you're not familiar with the service framework that's the open source kind of deploy tool that we have highly recommend checking out the docs it has like you know whatever you're giving cloud provider of choices what you want to use in there but yeah basically with the ekend service I would just CD into the backend CD backend and let me just go ahead and once again I need to fix a key okay we'll close that actually just deploy the service all I need to do is s let's deploy I believe I need to provide it with a stage let me see no I don't so so if you don't have service installed you NPM I serve a list - gee if you have it installed you can just type in server let's deploy for SLS deployed for short but basically what that will do is it will bundle up your code and zip everything up and actually wire together all of those desperate pieces that I was talking about so you don't necessarily need to use a framework to do this you could write like raw cloud formation it's pretty intense if you do it that way though and what I mean by that is I'll show you guys the so you actually have to so like this is the cloud formation that like the front be the circles that you animal config gets compiled down to it's like pretty verbose and actually hard to kind of reason about it's probably like nine hundred or more than that lines long so what what the like cloud formation or what the the circles framework actually is doing is saying like okay take just you know I've defined some functions so I defined a custom authorizer function I've defined you know handle form entries get Form entries etc and I'm exposing these at a given endpoint and what the framework does under the hood is it will it will wire everything together and because these are attached to an HTTP event it will actually wire that up inside of API gateway for you a kay writing you know that that you know a couple thousand lion confirmation template also will set up all of the I M permissions needed for you know API gateway to talk to your lambda functions etc if you do this via the AWS UI it's not very straightforward and if you're you're building multiple services multiple micro services it gets very kind of unmaintainable very quickly so that is that's kind of why the framework exists in the first place that said there's there's a lot of different options out there you know choose what's right for you we don't make you know we don't make money off of what the open-source framework it's just a tool that we build because we needed it our kind of business model is more around auxilary tooling you might need in the service kind of ecosystem and the framework always be free people always ask like are you gonna charge me for it one day and no it's not it's open source and yeah but cool so I deployed that application and let's take a look so it ran through updated my you know confirmation I didn't change anything but it comes back and it says like all the information about my service so we can see here that there's these are the endpoints that are exposed so this these are the actual values that you plug into your front-end UI and say like ok handle forum entries get for these are the these are the admin ones that have like custom authorizers actually and the functions that are listed inside of your service so the way that the way that these these are protected the get forum entries the update forum settings and the get forms that's actually defined in the service that yeah Mille so this is the public one we're basically there's no authorizer on it but this one like we for sure want to protect so like really all we need to do is add an authorizer key here and it's it's referencing this off is referencing this function right here and that's the function that I just showed you guys previously that logic that checks the JWT etc so basically before get form entries gets run this off function gets run and if it succeeds then it'll go ahead and call this if it fails it will go ahead and exit and say you're not allowed that's really how it works in a nutshell inside of circles like amel there's some other kind of bits and pieces in here this one's a little more complex to look at but I mean let me create like a really simple one so if we go let me just make a directory I sew it with the framework I can just do server let's create and there's some pre-made templates in there I'm just gonna use the hello world one it'll go ahead and scaffold out a project for me and if we look at this code super simple like this is just node code like you can use any NPM module from the ecosystem just npm install it into your project and you know require it in and and go nuts and then the sir mostly animal this is way kind of simpler to look at as a simpler service but basically we have the name of the service we have where it actually is run and we have like what functions it actually has so this is just just as one function it runs this code so the handler file inside of the handler file there's a named export of hello world that is what this is referencing right here and then like so I could deploy that just as it is and I can invoke this lambda function with like the AWS SDK if I wanted to but what I can do is actually expose all the functions to events so this is this is just like basically putting it an HTTP endpoint on top of this function there's a there are a lot of different events that you can actually attach things to so those are those are some like the use cases I was talking about so you could set it up function to run on a cron you can set up a function to respond to new items added to Dynamo table entries you can respond to SNS cue messages you can respond to what else Kinesis you're gonna respond to alexa skills like there a huge list of the events that you can actually respond to and that's that's kind of the idea of that event driven design approach so in my actual architecture what I could do is if I wanted to expand this functionality further for example I could I could actually attach a listener to this dynamo table and say every single time that there is a new entry added into the entry stable I want you to trigger a lambda function and that's what's called a dynamo stream but basically like hey a new form has been added to the or new entry has been added to the entries database so basically trigger lambda function that notifies sales that this person just noted that this person just filled out the form so like it kind of opens the world on like what you can do where like before you you kind of need it to write that logic yourself and maybe pull a database but this is event-driven where it's like every time there's something added to the database or deleted or modified like you can listen to that and then trigger a function to handle it appropriately or trigger function to route it wherever you want and it gets really really powerful pretty quickly oh yeah so let's see I just kind of talked about this I'll just go through one more time real quickly so the service that yamo is basically saying like yeah where do I want this thing to run the provider in our case is AWS and the run time shows so AWS supports a number of different runtimes like Python nodejs they just announced go you can shim other languages that they might not support yet and they also support Java and actually support node 610 now I wouldn't be surprised if they support node 8 very soon but yeah so if I wanted to deploy this to Google for example I could just change the provider name to Google and deploy that up as long as I have my Google account credentials set up on my machine or in my CI CD system it could then deploy you know the functions to that cloud instead and then yeah like like I mentioned you know we have our functions block where it's like hey I want to save and you like trigger save user so like this code what to run Handler dot save user and I want it to run when a post request hits slash save user of whatever this endpoint actually is and you can add custom domains on top of endpoints of course yeah and like I mentioned that save user is just a name it export from the code this is this is a straight-up node code I am using the AWS SDK to connect to Dynamo via it's just putting something into my doggie dating app it's something I'm working on on the weekends I think it's gonna be big we'll see okay and then like I mentioned and and what we saw I was like yeah in the current working directory where the service that Yan will file is you just go ahead and deploy that it will then go ahead package everything up and deploy that and return any live endpoints or like service information that you might want to do something else with yeah so there are ton of things that we use it for on our site this is actually a super old picture of the site we have a new one now but we're using it for all of our web forms we're using it for custom api's you could use it for automatic thumbnail generation that's that's one of the biggest like examples out there kind of trivial you can do a lot of you know more complex things news are welcome emails so we're using that actually for new people that sign up on forums it triggers a lambda function leader revisit notifications you know showing related content on the blog if you wanted to and then yeah doc feedback is an example like was this content helpful yes or no right now we're using for 404 tracking and we actually can proxy out to a given path that this is something an Ella fight gives you that you can basically run a lambda function like on like a sub path of your site to return HTML so lambda function doesn't need to return JSON you can return any binary format you want including HTML so you can you can actually do react server-side rendering through a lambda function yeah and real quick I just mentioned that will Phi let me show you what that actually looks like what does this say yes so with nella Phi like honestly all you need to do is and this is how you deploy the front-end of this application if you sign up for a free net Lofa account these guys I don't know how it's still free for most things anyways I think they raised a bunch of money but they're killing it so if you connect to net laugh I you just a off with github choose a repo so you could choose this Forks you know Forbes repo then you just give it a build command so in our case we're changing directories into the front end one then we're running npm install' for our dependencies then we're running the build and then that outputs to a build folder this will automatically publish this is basically our cre CD CD pipeline for almost all of our applications really this demo one as well but super straightforward to do that yeah some of the benefits like you get automatic branch previews which is amazing so like if you wanted this show you know the marketing team a new feature or the product team a new feature or like actually a/b test a feature that you could do that with branches so every time you do a PR it will publish a unique URL like sub-domain and you can send that to you know whoever to go check out the new feature for example that is like hugely powerful and not trivial to do on your own that alone is like well worth using now five for static thing you can do redirects so like out of the box you get redirects by just adding a redirects file this is hugely like hard to do at least in my experience with other kind of static hosts or like using github pages you can also proxy URLs so like I mentioned like on you know my site slash directory star like that instead of hitting your static site can just ping a lambda function and return back any dynamically generated content based off the path after that so like you could literally you know expand your your site to an infinite number without it having to literally be in the static build very awesome super cheap amazing support love those guys highly recommend them if you can't tell already and they pay me to say this I'm just kidding they don't it's yeah yeah that's like nullify any ways how we Jason how we doing on time I don't know it's ping me on skype if we're going over I just want to show you guys a couple more like example architectures this one we're actually using for a product that we're building so any if there any graph QL fans in the the audience you can use craft QL and inside of a lambda function write all your resolvers those resolvers can go ahead and you know fan out to wherever the data is coming from this diagram is is simply showing you know calling into lambda functions but we do have a apollo serverless project that might interest you if you are a graph QL aficionado let me show you guys that real quick so this is using the yeah this is using the apollo client but it's like basically showing is an example like fanning out to like elasticsearch API gateway dynamodb post grass my sequel Neptune and graph cool like this thing is pretty crazy in a good way mmm yeah so I recommend checking that out if you're interested the other kind of pattern that I want to show you which this yeah we've already seen this I gotta remove this slide so again check out the real-world use case I show a lot more example diagrams in there just to just to give you kind of some context of the types of systems you can build with this and the cost savings associated with that this is a blog post it's on medium it's by Yann choy I don't know if I'm pronouncing that right it's amazing they built they built an entire social network on service architecture it looks a little crazy just to look at it first but these are all kind of built with bounded contexts and like a micro service kind of you're gonna approach and then there's like message passing with different queues and what-have-you so you can build pretty robust systems and again like these lambda functions also all the orange little boxes you're not paying for those unless they're being run so you're you are saving basically on costs there especially if your service is not being used another resource to check out just if you are curious like what maybe like how much you possibly could save it's the project by i/o pipes they do like monitoring and logging for lambdas and perhaps other providers now but its server servers lol it's a pricing calculator there is there there is a tipping point where it might actually be better to run in ec2 depending on your load and have spotty traffic is so this kind of helps dive through that but typically you know getting off the ground and running with a service project and and lambda functions super is is vastly simpler in my opinion and if you did run into the instance where you did need to switch over you know all your code and logic is you know written a note so you can port it over pretty easily cool awesome and then yeah I've already mentioned the service examples repository a ton of the different use cases that I mentioned including like using custom authorizers how to encrypt environment variables how to you know talk to DynamoDB how to set up SNS queues etc yeah tons of stuff in there and then the other the other tip if you search github globally for dot serverless that's what you get ignore because it's like your cloud formation you don't want to commit you can find a lot of different examples out in a while a lot of production kind of grade service apps out there cool so yeah that um I'm almost done there's one last thing I wanted to show you guys and that is so we've been working for for some time now on some new things to the framework if you're an existing user or you're building things in the cloud and you're interested in kind of like jumping into the server space I'm looking for beta testers for some some basically some new additions to our open source project the the framework and I hey I'll give you guys I'll give you guys a quick demo I was I was on the fence but basically what it does if you're familiar with the framework this is actually a prototype so I'm going to add this to this performs project but basically like it adds a couple features to the serverless framework or basically you can configure your service very very easily and share this so if I just ran so node index touch s is running like the actual CLI tool so this would be like serverless config but I run config I can it will read my config file for any parameters that it needs that are required and then I can go ahead and like fill those out and step through them one by one and then after that basically I can deploy that the other the other kind of added kind of feature just the preview real quick is kind of a so this I have an example service let me actually go to this repository so right now like when you deploy something with the service framework it goes into given like given the provider key that you give it it will provision the functions that you specified as well as any of the resources that you specify so down in the resources section this is like cloud formation for the actual tables that I'm using the Dynamo tables so I can provision stuff inside of AWS but kind of what I've been working on and I really want some beta testers so again that URL is sls beta test if you're interested or have ideas on this but what this kind of current limitation of the framework is is like I can only deploy resources to AWS with this kind of setup so we're working on a way to basically like let it let you be able to define any type of infrastructure as code so be it you know if you want to use terraform with server lists if you want to use you know automate setting up a net LeFay domain if you want to for example set up automates github webhook creation and configuring to your your functions etc that's actually the demo I want to show you guys me go into your repo and then this is the last thing at all well open up for questions I feel like there's a lot of questions okay so this is a this is an open source workshop this actually has like a ton of different use cases and kind of the core concepts of the framework so if you are interested I highly recommend checking it out or you know if you want me to come teach let me know but as well as like basically all the different event types so connecting the dynamo streams Kinesis s3 triggers yeah step functions etc but what I want to show you guys is I'm gonna deploy a service that automatically configures a web hook to a github repository so what we could see here is no web hook in my repository I'm gonna go ahead and deploy this it is going to go ahead and take my config values and set them to the service these are these are defined per stage so dev prod QA or if you have custom stages that's that's a constant that it'll really touch on but the idea here is like we need to find your infrastructure as code you can deploy it into multiple stages or in an integration testing environment to like random stages and then tear them down after the fact oh yeah so this is going to go ahead and create a stack for us it's gonna take a little bit this is one kind of caveat with using cloud formation under the hood it does take a little bit of time setting up the initial i-n policies and just to kind of show you what that's doing so like the cooperation template is generating a stack inside of our AWS account let me actually pull up AWS and show you so inside of here this app actually I didn't you guys the animal let me show you that real quick this app is actually it's called overbearing ops just the demo and what it does is it sends a text message to somebody every time there is a push notification to again hub repo but yeah basically it is updating the stack creating all of the resources including that third-party external resource which is that github webhook cool so that's actually done it's returned back like our values etc let's go look at that repository so if I go ahead and refresh the page there is the github webhook and it is responding to push events so before you had to kind of wire this together yourself or write your own scripts etc but this kind of new concept is you know just finding you want to github webhook in your service and what function triggers it based off what github webhook event which there's a ton of them if you've heard set up any web hooks this is yeah just doing everything right now but if I could choose yeah there's a bunch of everyone's so anyways that's kind of the demo and what this gives you as well is a way to if I you know let's say I'm just destroying my service and I want to do cleanup the beauty of defining your infrastructure as code is it what it knows how to update it notes how to create all the resources for you it knows how to update all of the resources for you if you change the configuration of them so if I change like the github repo for example or if I change instead of listening to push events I want to listen to github star events it would know how to update the third-party resource as well as cleaning up so I'm deleting this stack right now and we can see in cloud formation it's deleting the deletions in progress and go ahead and clean everything up so while that's going I feel like it's time for QA I've been talking a while I just looked at the clock but yeah so if you are interested in something like this yeah let me know check out this URL um I think I think it's cool so cool so yeah with that we'll open it up for questions while that stack is deleting so I'm going to answer this hello cool all right so that was a lot was that too much um cool so how do we want to do this Q&A okay let me hmm all right I'm gonna I'm gonna stop the YouTube broadcast sorry folks watching this is for Portland eyes only we will I will respond to the the the other people in chat though later

Channel: David Wells

Views: 6,233

Keywords: #hangoutsonair, Hangouts On Air, #hoa

Id: UGrGce6-cX4

Length: 64min 15sec (3855 seconds)

Published: Thu Jan 11 2018