AWS re:Invent 2019: [REPEAT 1] Production-grade full-stack apps with AWS Amplify (MOB308-R1)

all right let me know if you're not hearing from the back actually everyone has a headset why don't why am I saying this sorry it's a bit weird for me to have the headsets looks like aliens for me to hear Hey so first of all this is a session that it's a bit different than the usual Veda Lewis especially when someone from Nathan west trying to learn something and I'm gonna share some of summit use cases so this is that type of session my name is hol essa I am a service lead for AWS where we are connected I basically help define best practices and aggregate those for service customers so think about how K the risk customers use service where they come on patents anti-patterns how do they should how should they use that's exactly my day-to-day basis and this session is a mix of how I ended up learning from dent and design completely different from what I know I come from back in the office backgrounds and how that made me a much better engineer so I want to show you if you were to build a web app from scratch today how would you do it so that's exactly how it goes we go from the very scratch firm for the design idea to prototyping CSS obviously and then we go over with the payments pieces and every component of apps so a quick recap on the agenda or a real quick reaction we're gonna do a recap on the amplifier two sets I've spoken to a lot of people this week already there everyone seems to think they're amplify is only the CLI or the or the front-end JavaScript it's actually more than this so we're gonna be covering some of those misconceptions at first next we're going to be covering the service airline news case this is actually about three or three months of content in a single hour session so we're gonna try to cover as much as we can but all of this is being recorded as well we have 14 hours of video building this from scratch as well so we're going to show you the link so you can watch it if you wanted you including my silly mistakes on types and everything else also it's important to set the expectations of what we're not gonna be covering this is a 300 level session so I have some expectations for new as about you as well on what you know we're not going to be able to introduce you to a SS all of its features so some of the services we use I will briefly touch some of those services why we use them but I'm not going to be able to dive into every specific feature of how they actually use and why they are useful when we comes to service there's a bunch of definitions that you probably see out there I've been trying hard to find a way to explain in a much easier way for people who probably haven't used it address or use that extensively think of service as ax spectrum everything on the far left-hand side you will see virtual machines or VM traditional databases and things like this on the far right hand side you see fully managed services that will help you with scaling and higher availability and cost and some of the other pieces what you find in here is more of a chicken average showcase adjourning where you might be using some of the lumber functions or no longer functions at all just graph QL for instance or some of the databases traditional databases you're gonna be mixing matching some of those as you go along depending on what you're working the feature the use case it's not always going to be either full left or full right but it's important for you to understand that this how it distinguishes also when I put in the deck that's a full stack app I've been asking people all along what do you mean by full stack and I've got completely different answers from whatever whoever I was asking you so my own definition of full stack now is as someone who can build an application be there from the front end or the back end it's a builder some people actually get more flexibility and more knowledge into front-end orders back-end at the end of the day you were paid in I am paid to build solutions that's what matters whether using code forefront in the backend the customers experience is what matters so oh yeah by the way and this for this whole presentation especially from CSS it was pretty much changing stuffy and seeing what happens I will show you some of those things as well so we kept on amplify the easiest way to explain amplify comes into four pillars you have the CLI piece you have the platform components whether you're using mobile or web app or whatever that is think about our education come opponents for having signed up signing flows in general also the client libraries not only is JavaScript library too interactive AWS databases api's web storage whatever that is but also mobile and lastly amplifiers also an AWS service on the console to do CI CD for you hosting custom domains that sort of thing if you're ever doing single page applications on AWS today using s3 amplify course is definitely something I want to look at from the CLI it looks more or less like this you once you install the CLI these are the common flow everyone's going to be looking at first you initialize a new project you add a new API graph QL or rest and that's new amplify mark from the past couple weeks or say amount for a margin a month actually that amplify mock not only will mark the entire API locally graph QL our app sync in this case but it also launched a dynamo DB locally for you including WebSockets locally for you and all the joints and stuff you'd normally do in the console amplify push as you can guess is already pushed all the changes an update API update off all of these categories you probably have noticed on AWS has SEM CLI amplifies amplified CLI cdk a lebretia and a bunch of these things watch what makes amplify unique in this scenario is is the first line amplify CLI follows a convention over configuration if you want to do out education on your app or your mobile app or web app you just to amplify ad off you don't need upfront knowledge of Cognito and how he wires together all these pieces and then later you can change this configuration if you need you but it's different from Sam or others that overlap cover something like if you wanna do kognito this is how you should configure it's much more granular amplify things about what are the common practices that people use let's then down into a CLI for you the client it looks more or less like this this is one of those features that I picked up on the top is why I normally used all the time when you're trying to make a request you a graph QL or arrests that or REST API you import that API and then just to API get post etc he handles things like our rotating credentials if you're using kognito he handles things like retries and a bunch of other common practice is normally used in a very concise way of calling you that's also available to put a bunch of other frameworks of UJS the best framework in the world obviously but they also have angular I have react you know and maybe amber one day don't know and then I left you can see ad how we could use the platform components without indicated in react similar to view and angular that alone will simply do signing sign up all these pieces you normally would need in inner application including forget password all those sorts of thing and this is amplified console this for me was a big changer when I was trying to do a basic blog trying to do using Hugo for instance all I needed to do was actually deploy a single page application or a blog that I could have custom domains feature branches all the common pieces you normally would expect multiple stages environments just point into a git repository that's done you get all of this for free Wow for free I mean easy features and last squeak actually three weeks ago we announced this if you have a pull request on github and you enable that feature this is our when you label for private repos should save you from some cost of the environments but once you enable that feature even on public repositories once you have a pull request as CI will be run and create any fully ephemeral environment of everything you have API database etc and once that pair has been merged everything gets deleted automatically as well that's something that I've starting to use as well and it's pretty neat okay so let's start with the main piece now let's start with the meaty or veggie for vegetarian I like to see some smiles we're still awake as me so that's good right so the main thing here while we're here is a service airline imagine someone who never done any color or any design and it let that was me but that's kind of me still I wanted to learn from them because I always wanted to see while front-end developers go through an AWS and what exactly they go through from to chain etc etc etc it's easy to get stuck on your own bubble and it's kind of a work with backends every single day distributed systems there's all nice but why I noticed after years of services we're always trying to write as little logic as possible only business logic and get close to the customers from 10 is the closest to the customer all you're dealing with is the customer experience and I thought maybe I should try this maybe we spend a week learning yeah well since hours a whole year how do you start let's say you have an idea you want to learn front-end as well or you learn you want to learn how to do a web app but you don't want to do it should do app you want to do something more complex but not so complex that you can never give up in the middle why would you go so I've tried so many websites and I decided three ones that I use and I think you could like it you the first on the left is you're looking for inspiration you don't know what you built you want to see some cool designs that people are using it those ideas already exists but you want to have a feeling of how people are using and how people are designing the user experience maybe that's something that Pixar eyes so our line was one of them is I came from there but I've noticed that ecommerce is all over the place as always you have things like meetups you have hotels and a bunch of things the one in the middle was a lifesaver for me I haven't studied about colors now I did a little bit all you're doing this website you can even do in our mobile and all you do is you press spacebar and that will generate a color palette for you that looks good and then if you just say lock this primary color on the first one or the secondary color as you keep pressing bar like a maniac you see all these new colors being generated and show you like one that's it that's really simple the third one it's something called mood board that I learned at least oh well if that's wrong please correct me envision app imagine as you're trying to come up with an idea and you visit so many websites to see how things are implemented this allows you to have a canvas where you can have a copy and paste all these ideas screenshots and then later you can kind of reorganize and kind of of an idea while you're gonna Butte next so that's what I use including the colors you can see on the right hand side they even have as an IDE to make it web develop and easier but I couldn't use that one yet so check it out so after doing all this I used an app called sketch and I came up with something like this after a week of trying playing with stuff one thing I've learned as well from this web development pieces were trying with the HTML and CSS is like it's listening for failure like it's very frustration very frustrating to get something working at first if you don't know what you're doing sorry InDesign first just a sketch it makes it easy for you to experiment it makes it more you have more freedom to do whatever you want except I had to way too many way too much freedom that I thought some things I did in there it wasn't possible in the browser but still at least in my basic skills so how do you start it then so this is kind of a denies pieces we're here for the tack right so prototyping that's how we're gonna start I'm gonna be filling up this with all the technology choices I've made but just to give you an idea so the first one all I wanted to do was a front-end chacón API and then the API could call much border API as if I needed you and that each of those micro services have its own database and things like this the pieces I know really well is API and above and below the front-end was new so the UI UX I chose view I think asking for help for which framework should I start you Jess to me it was actually the easiest to start not only because the best framework but it's still it's it's so easy to start compared to everybody else but react other pieces now I understand that now I see the value why so why so popular as well where's our framework gives me the UI all these components are going to see in other pictures it's basically all the interaction the user experience comes from this it's simply amazing their documentation is one of the best I've seen it on the Internet in terms of frameworks they also provide you a CLI that you build at once and you build as a web app you build as a mobile app electron app or a server-side rendering as well and then obviously amplify for all the CID and many things and then stripe for the payment pieces after a month of trying and hard that's what I came up with this is the real CSS pieces working you can see how much of a difference it is from the sketch so the airline the idea was their line is I should be able to search for a flight on a particular destination and then you get those flights and you should be able to pay for a given flight and once you pay for the flight in your book successfully you are supposed to earn points like a lawyer to system so how would you start for the first thing you start without education using amplify first you need to do the infrastructure piece before I even do the components on the UI so by doing amplifying it off add they're already gives you all the default settings you probably need for your app that covert sign in/sign up change the password if you want to do recapture or custom workflows or admin custom attributes groups all of this is done here just by that's it single command and inside answering some of those questions that will set up Amazon kognito as a managed service to handle all that for you next you need to do some of the UI pieces naturally how readable that is from the back we are using amplified platform components to basically render this username signing account password I didn't nothing for this but just saying import template i amplify Authenticator and there was it nothing else as you sign up you can even customize and say ask additional signup fields give a name last name or anything like you want so coming from this idea you have the very basic now you have the UI you have the UX and now I have the off the first thing I love to do it was okay now I'm ready to do some of the basic api's where do I start my personal preference for any API is they always talk about JSON first have an idea on how I'm gonna be placing that jason and how we're gonna be working with that so from the api i started with this that's how they Jason I started first yeah yes that's right so this was this was the initial idea of how the data was actually looking like that's how a flight would look like the booking data and the loyalty data I've done some research on how Airlines actually work obviously they're doing way stuff way more complex that I need to do it's just myself so I needed to do something simpler than that or for instance they cannot book a return flight you can only go one way you never know right could go to Caribe and from that Jason it looks very similar now I have a graph QL type this for me was the game changer on AWS that was like the game changer personally for me after lambda once I saw this I was like that's exactly how I normally think I think about the business first how the data should look like then I can create an API from this JSON this idea for this mock I can basically mock this and run it locally so I can have an API already functioning without doing any code and once I'm ready I can start doing the real things this is something called amplify graph QL transformer by doing that at model what you rack while you're signaling is that type booking should live in a dynamo DB table in an OC code database and I want you to create great updates delete and list and get booking for me without any coding whatsoever as well and you probably don't see it but there's a there's a field called outbound flight which should go to a flight definition of the data as well that's exactly what I do next I do add connection once I queried that booking data and if my front-end selects the outbound flight you would go to the flight table get to fly that and it should matter need to fetch a specific idea of their flight and then you will merge all these array and send it back to my front end so I know exactly what I need to do all of this is still local I guess you do all this locally with no deployment whatsoever so that's how I excited to iterate in and prototype there quickly next one is it wouldn't be real if I were to have a booking that everyone could see it so I wanted to start getting some of our production pieces lowly so this is how you do out the education in fine grain detail we can go even further which I will show you the final schema but just so at least it fits on the screen what you do if off you say allow only the owner of its own booking which will be the customer which do you see the customer field right there you can change if you like and only allow people who have admin permissions to see other people's bookings otherwise one person could only see its own booking well you can go even further you can start saying whoever owns the booking could only read the book in benami updates or things like this again no coding no coding involved yet let's get you something more complex now you already know the basics you know the other education now but this has one problem if your bench production don't go with production like this if you go to production like this in a large scale the ad model lists all the bookings if you wanted you unless you get a specific booking if you list all the bookings you would do a scan on your table so that means performance is not gonna be good how can you fix it use at key by doing this it basically creates a global secondary index where you can say what is the name of the new query that you want to create and what are the fields that you want to use the secret from here is that where is the only two fields customer and status however as you you can add as many fields as you like and if you don't DynamoDB you can only have a primary secondary key but once you have a third field well four fields you're automatically doing composite keys without even knowing you then with this these additional fields will be hashed and will handle all these a graph QL layer no coding involved still nothing that you have to have done with that in mind the front-end looks more or less like this coming from the backend idea you have the front-end now using multiple components or modules and then each of those are responsible for their own States their own data fetching today each of their own api and that they should be able to all the data mutation and the state themselves or getting setters all these pieces that makes it easier to code for me and it makes it easier to know exactly if i want you to try to troubleshoot loyalty api I go is specific to the loyalty component by running that essentially what you do behind the scenes infrastructure wise the ad model everything you've seen it actually does this this hand sends the signature app sync to generate all the code you need to fetch the data creative days read and delete including the authorization details global secondary keys and all those performance enhancements there is no longer involved in here yet if you don't need any complex additional logic like basic filtering basic sorting of the data you don't need a lambda if you go further than this then lambda becomes necessary for that next piece is about payment payments is a two-way street first you need the front end the UI pieces stripe Jas and stripe elements makes it so much easier to do this not sure if you can notice unless your eyes are really really sharp card number expiry date and CVC I actually no real fuse in my UI this are actually an iframe that goes to stripe the stripe gets back to me using events and tells me that card number is invalid so then my front end can say oops you cannot send that data yet I cannot tokenize that card that helps with PCI DSS and a bunch of security concerns as well I'm not dealing with your sensitive data going straight to stripe and I can handle that then you need to do the backend piece once you tokenize your card that token of your card details you need to send to stripe so I can charge refund do whatever you need that is you need a lambda for that however the good news is that you know if you all you need to do is work with striping in that simple manner you no longer need to code this there's now on on service application repository which I can show you one-click deployment can handle this for you as well we've done this as piloted sweet series to make it easier for you so if you want to if another hacker Tony want to cheat you can do this now if we go back to our list of the tack that we've chosen so far we will now update that with hang up I go back there and you can take a picture and sorry so we've got your wife off api's and data using graph QL and DynamoDB we also use API gateway not only if you stripe the other pieces you're going to see in a minute right now my favorite part now to make it more prod ready and one of the reasons you're here I've used a bunch of advanced features of amplify so I've tried to mate as easy as possible to digest if something is not clear please feel free to ask me any questions afterwards so I can show you and I can show the more advanced pieces I couldn't add in the presentation itself the very basic of operations we're already talking about three API is easily and a bunch of other operations as you start with dealing with micro-services it's nearly impossible just to have logs it just doesn't work it needs you have some sort of tracing you know which part of your system was at downstream as at upstream that was studying should be a little bit slow more importantly tracing just by tracing just by instrument in your code doesn't help if you're dealing with multiple developers working the same system and it's something extra to just do the tracing some of the reserved comfort booking and you see out there if I were to click in one of those circles which I was showing a demo I would also see what was the customer they initiated that transaction which state machine started all this what was the API ID what was the correlation ID all of those pieces you can do it I can show you the code as well remember when I said that ad model it's not a gift piece of goods production this is how we tested we use the to code Gatling to do a load testing to actually get a better a sense of what our good defaults what are the pieces we needed to change and why so at least we are changing and we're documenting those things while you're looking at at them it may be hard to read I suppose but we're looking at searching a flight by using table scans and we change this so that at key optimization that you saw it just by doing this the worst case scenario went from two point three seconds to 250 milliseconds so you can see the difference when you're searching for large amount of data if you only searching for a tiny bit of data and do imagination tokens you don't need that optimization but in this case I want you to show you well we don't stop here if you already use lambda or API gateway the next one might surprise you and this surprised the many many of people by default when you use REST API on AWS through Amazon API gateway if you use confirmations you set all this up API get to has two modes edge and regional edge gives you ability to work with customers globally but if your customers are coming from the same region it doesn't make sense to have a CDN on top of it so regional makes it more sense when you're dealing with services service communication and put an API on top you don't need a CDN she go back outside come back again that adds too much latency by changing the API gate which you regional that owner only removes the CDN part last networking hops but it also enables HTTP 2 which improves our connection time and lambda by default if you haven't used that the memory setting that you use allocates CPU networking and i/o proportionally so less memory most of the time is bad news the more memory you get more CPU and more network if all your lambda does so in our case is talking to stripe talking to something else you want to crank that up and trying to low - to see what was your best memory but instead of doing this manually I can give you the you can give you in the appendix but there's a tool called lambda power tuning that opens source if you look up github lambda power tuning you can say try this lambda function 10 times 100 times and I'm looking to optimize for performance cost or a mix that will execute your lambda function a bunch of times and you tell you which memory you should use it's a much more systematic approach than trying try and try and again try and changing try and changing this was announced last week I couldn't test it yet but I was explaining to you why is a game-changer when you're using improv you definitely want to keep going to the database every single time arrest is a bit easier to cache because it's very very well accepted in very well-known proxies and things like this graph QL makes it harder because when it thinks about caching the front end decides what data they want specifically how was the format that makes it harder to cache compared to rest but now you can have the ability to cache at the server side and graph ganging up sync you can cache at the API level no matter what API call you use mutation queries whatever it is you can cache all that if you like or query in this case not mutation or you can do what I prefer now is you can do a pairwise / caching if you're using graph QL one of the main benefits is using different data sources no sequel here full text search somewhere ways from databases here or even no database whatsoever just a mock odds or something so this allows you to enable cache not only for a specific data source but also a field and Perkis motorization session which is something I've never seen the industry before so this is a huge announcement if you haven't seen it go experimented that the next one if you never seen it by default this is disabled and up sync for cost reasons but what you wants you click in app sync and say enable access logs that we were peer to you actually yeah I will show you so you can create custom metrics from from app sync using elastic search in a bunch of other ways but what you can get which I actually got ahead of myself is actually this you can say show me where the latency is show me in a pair fields what is this statistics that's causing my customer experience should be slow and all of this is already in the console once you enable access logs you get access to this and you show you the field what is the field key what is the operation the statistics p99 minimum maximum median and things like this so that's actually a super key once you use it and there's another one as well we can also find all the resolvers that had issues for the last Aksum out of time so you can quickly see what's going on as well let's talk about them they're no matter what back-end you use tracings are great but the challenge of traces is it's simple so if you're trying to find out a specific request it may not be in the trace and you don't want to be a card in that situation so instead of logging every single line what you want to do is structure logging so you have to define a number of keys they're always gonna be present across your logs and once you define this you can just convert their output into JSON so when I do log in from my lambda function that's the message that's the output that we're gonna get whether it was a code start with service which lambda function well is the memory and things like this so by doing this that goes to cloud watch logs and you can use any tool that you like just started doing some analytics on your logs and this or this concatenation and things like this from the front-end one thing that I missed but it's now isn't is a new feature is what if you wanted to do a correlation idea across all different services depending on which service you're gonna use you could do at a back-end level we're doing the fronton level is much easier what you do here you say every time amplify is gonna call up sync add an additional HTTP header that has a particular UID value and you can propagate that which we will across all those services and you can use that as for tracing for logging anything you like security is one of my favorite ones remember when I said that by default off allows you to do many operations and fine grained details whether using especially when using JWT you could also change the field that means owner in this case I'm saying now the owner is whoever has the customer field being the same value as it was before and you could also specify operations and you say whoever is the owner can only read and update their own booking nothing else they cannot delete their own booking they have to go to a separate system except everyone who has an admin privilege they can do anything else and you can do this from not only pretty type but also per feud which makes even more interesting at the top if you're not using real-time if you're not using subscriptions in graph QL disable there you don't want additional attack surfaces simply do a subscriptions column no and no Auto generation none of these things will be generated for you if you want if you don't have that basically you have not only created updates read it listed bookings but you also have own create booking on update booking on delete bookings and things like this this is kind of a low effort but it pays dividends really quickly if you haven't seen it before these are some of the basics HTTP Security headers you want to have there's more than this there's also CSP but it didn't really fit into the slides so just call us some of those imagine if someone you created a web app it became really popular and someone tried to get your web app into an iframe it's completely separate domain that you forgot to buy or something so you can protect against that by just saying X XSS protection sorry X frame options or say that you're dealing with a website that has a lot of sensitive data when someone clicks it goes to a separate website that you don't want to send specifically where that customer came from what was the link they clicked what was the source you can simply the referee referee policy you can say only show where the customer came from the HTTP referer within your own domain and the last piece it seemed it's quite similar to you see a CSP or content security policies my website my airline doesn't need to use our microphone or camera or anything like that so you can disable the feature all these features even though those excesses can your browser could try to use it so if you're an architect that's the section for you now how does that look in architectural terms let's go from the high level now let's say we get to us flight we want to search good as soon as I click that button go to front-end fecha flight go to up sync API using your bleep I and then we use VTR Pachi velocity plate goes straight you DynamoDB table job done at first looks super easy it just works what if I want to start payment so similar to why you ready now once I click agree in pay now before I start a booking process you go to API gateway lamda stripe do a pre authorization of that and then if it's successful then I go to the next step of trying to do some booking processes so from here normally you would see a bunch of DynamoDB being called and a bunch of them that's been called but we decided to do it differently one of the tips is if you have two transactions only or something that can finish really quickly and you don't need to do any try catch errors retries and things like this just by using mu CH 2 transactions it's easy just works but if you have something more complex than that integrate with step functions or any state machine that you can use so that look actually looks like this if you never seen this before this what we call saga that booking returns for sex value so we can pull that or we can even do a real-time which we're gonna do it soon by January February but what that does is on the right hand side this is what we call the happy path ideally if everything works as expected I should be which reserva flights reserved their booking collect a payment and go and go and keep on going but sometimes as you know the network is now reliable something can fail lambdas could fail something could fail so if that fails I could retry there a couple times but I should never keep retrying forever maybe I set a max retry or max a horse or max timeouts and one that happens those arrows coming on the left-hand side on the red boxes are my are steps that can help me clean up this state where it's supposed to be if I collected payment but I couldn't confirm the booking because database is having issues or whatever it is I should refund the customer and you can actually run this for up to a year if you like per customer but nobody wants to wait for a year to get their booking right once you get the booking and enlisted bookings remember when we had the outbound flight ad connection those things behind the scenes that's what happens as you list those bookings I think we know that the data field outbound flight it's not from the booking table and it has therefore to go to the catalog database to fetch that data then it goes back merge everything and it sends as if it was a single request to a single place that's why it makes graph q are so unique on that one you can go to many data sources and it doesn't matter your front end we're always going to receive the data and the contract they know next is a loyalty once you search for a loyalty I could have done it differently but I did this way to show you one scenario that I haven't seen yet on github what if you have you're trying to modernize your application but instead of doing a big bank approach as we did here to showcase what if you already had an API in place and you want that you have graph QL on top just are modernizing some of those things on the front end well in this case you will need to do a HTTP integration with your existing API and in this case we're using I am to do a cryptographic in a very strong authorization as well so that API even though it's public on the loyalty all the apps Inc can actually talk to them and I showcase I can give you the template and the source code to show how you can do this and that means I can use now app sync as a hub for many many many api's and I can still add functionalities over time as I search for that particular loyalty and I want to get more loyalty I need to know how it calculates once the booking has been confirmed a lambda function as part of that state machine that confirmed booking will send a notification to Amazon SNS in a topic like a fan-out approach and will tag a payload that says booking has been confirmed and that along the function will only be executed if the payload has a tag booking confirmed the reason you do this you don't want to keep sending multiple notifications you learn the function for invocation when you don't need it that function will only calculates loyalty points if a booking has been confirmed if it doesn't there's no need to invoke that function now that you are an expert you probably know all this now so this is kind of a what it looks or at least it last snapshot I took in February may look a little bit bigger but at least to give an idea for now kind of a recap on the architecture per se is you've got a front end talking shoe up sync up sync as an API hub goes to catalog to fetch new flights book those flights using a state machine asynchronously that spins up multiple of the functions and I collect a payment I go straight to API gateway from a lambda function which is stripe once the booking has been confirmed I go to loyalty and say ingest that into me and then when I once you get loyalty up sync goes straight to the API gateway are different than the function and do the calculation for me all right so now that you're an expert I will show you how the action looks like as well in code sorry go ahead so if you want to have a quick quick sneak peek into the code and everything and we've done that's the URL for that one or QR code if you want interesting node optimizations perspective I created a pull request just for this all the load testing behaviors how we optimize for performance hi optimize for security and a bunch of things there's a PR specifically for that if you're looking to do the same load testing on your on your own as well there's an open PR for Gatling as well there's a bunch of peer that you can go and learn or you can also watch the twitch and how we've done all of this as well before I show you all all the demo as well I just wanted to point out one thing there's one of my one of my colleagues Kojo Amissah n-- on twitter was asking every SS employee to showcase whenever they do the new example to showcase the effort how long it actually took how many lines of code you actually had to write and it's a well very fair enough that's let's write that so I tried a bunch of combinations to fit in this screen so when I came up with was something like this to showcase how much of an effort it was for me with no front end no design experience someone jquery's so you can call me web engineer I guess I don't know that it took about three months to complete all these things and as you can see I use typescript Python JavaScript view Jas bit of markdown obviously might make file my favorite thing in the world and when you actually highlights what makes the customer experience is actually this it's very little code compared to what you and normally would expect if you weren't using some some of those service pieces you probably would expect a cup of ten thousand or more more lines of this very very easily it's also fair to say that some of the airline industry there's a lot more complex stuff as well so it's not it's not apples to apples but at least it gives an idea that all of that create update read deletes you can do all of this without any code whatsoever so let me show you this how that actually looks static is a interesting thing all right all right so this is how the front that looks like I'm going to make a booking then I start showing the operation species distribute tracing how I can do some of those best practices yourself and walk it through the code so you can have a look so I've done a I've done a basic flight from London Gatwick to Madrid it's a place I was looking at after brexit but back see didn't happen so you know you know so after I got these flights in here you can see how the flight looks like in fact is even actually responsive see this I know it could be basic but Jimmy was like oh my god I made it and you should also be able to filter those flights for a particular price or or for its time schedule so let's select a flight that cost a thousand years I'm not paying so why not so I go and start actually getting details like this let me just check one thing here and I can use one of the stripe fake cards and once I do this and I creat a praying now that's doing that pieces of talking to stripe that actually making a pre-authorization if the Wi-Fi is good to me and it works I should be able to receive an email now and I should also be able to see a booking and then once I click on my booking I should be able to see booking reference where it goes I could possibly can so we're checking and because I made a booking I should also be able to see those loyalty points to be increased now and you can see it was behind the scenes I'm gonna increase the screen so don't worry if you can see yeah let's do this let's try to refresh this and see how okay Wi-Fi I need you alright let's try again well someone's playing with me now so you can stop downloading the whole it can stop maven package if you if you okay that's okay I will I will probably do it locally afterwards so the whole point is actually this alright actually I had a future you were supposed to help me here so here of course I will never see is only showing HTML so I see that okay cool so once this is actually the graph QL behind the scenes graph QL is pretty much a HTTP POST it's nothing really special if you look inside you will see that this you'll be seeing there multiple headers and once I look at the response it's just Jason but all of this integration the contracts the front-end knows it upfront it doesn't need a back-end anymore in fact surveillance now we spend more time in the front in the back end now how does that work behind the scenes this is this is how the schema looks like now I have a type flight add that model that I showed you the optimization of that particular flight search which I didn't add in these lights but you can see it all of the data fields and this was one of my new favorites compared to rest if you ever wanted to sunset our REST API he had to do versioning / view one is last few and things like this here what you can say is a the only piece I'm trying to sunset is seat allocation feuds shouldn't be used anymore where when people use it they should have a clear message that hey by the way use something else and it just do this by saying at duplicated and best of all you get analytics on top of that and your logs as well so you can quickly see who are the customers that are still trying to use that the data field for instance if I go back to booking it's slightly more complex than what you remember the ad model the at off ad key and things like this and you see their connection and some of those pieces as well so if I go now to the code itself the good should github this is actually the repo where you can find more information and some of the pull requests already open well I want you to pay attention here is everything inside amplify is the one managed by amplify CLI you don't touch this folder ever but I seriously don't I broke so many times that I don't want you to do it and then inside source you have the backend end-to-end tests front-end end-to-end tests were using Cypress you actually basically search for a flight booked a flight and things like this the front end you know Vijay is obviously perfect and then that graph that I showed you bookings catalog loyalty that's exactly how it looks like this components every action makes a call API call the graph QL statements mutations all of this has been generated by the way and on the back end if you're interested in to the lambda functions API gateway or server this application models Sam it's all here the booking has all those number functions make files PI projects and a bunch of more advanced pieces and every folder has its own lambda function its own event JSON for local testing its dependencies and I also have a log processing all the best practices that we normally would tell you in cloud watch logs it's all baked in that single file so you can go and check yourself if I were to look into one of those codes for instance to show you this is all the code that I actually had to write in addition to this all of that tracing that I was telling you to do it's actually this I open source that library for Python only check see how customers reaction would be in the feedback so if you do python I will show you the URL so by doing these few lines we are doing structure logging with logger setup and distributed tracing by doing this as well and when I mentioned to you that tracing is good but it's only good depending on how much context you have if I look for annotation see this booking status when my tracing get sampled not only I know which services you went through but I also know that a booking status has been cancelled and I can start filtering all those traces and say show me all the transactions that the booking has been cancelled and latency was higher than X and the customer was X ends yada yada yada yada so let's see that what we just did how much we can see in this should be the tracing so you can see in reality so that's how it looks like now of the booking process we just did it doesn't it is not the whole project yeah just a minor piece but at least it goes to show you how this transaction go remember when we were trying to get the loyalty data that's what it is let's say we once you get the payment piece we are once you collect payment and that call another API there once you stripe when she got configuration details for once you click on this one I click any view traces because I was only one one request is not gonna be much in here but what I can also see here which is where the important piece is is I can find out what was the booking what was that a code start if it was a co-star was a single functional across the board and he can start finding payments payment status which step functions actually started all this as well and it can go back in trace it what's even better is this hidden feature in x-ray it's not hidden it's just because we need to do a better job in there can you see this little button here that's the best feature of x-ray by clicking here I can do this annotations using these annotations in a way that I can say only show me all the requests that the latency was high enough or show me all the high downstream latency that things went horribly wrong or show me payments that failed basically what this happens is if I were to click in here the way you do this is by saying show me all the traces all the nodes upstream downstream where the annotation payment status was equals we failed and that also creates a cloud watch metric which you can alarm and you can start doing composite alarms as well let's try to make that booking fail so you can see the opposite side as well remember what I mentioned I use step functions that's how it is not right now so if I click in here and I go to I I can do this I'm sure they can't know that's from the picture you saw it reserved the flights everything else worked as successfully right it's kind of an easy one but actually make it fail if we're trying to collect the same payment that ideally should fail because you cannot collect the same payment twice we do ID opponents in here so let's try to do failure payment and then we just change this thing so we get the right annotation and hopefully we should see a divergence in here going from here yes step I was alive damn was this hat tough sometimes so you can see that you went back in here what's good about this is different from up sink pipeline resolvers I can go back in time and see exactly what was the input outputs have best better retry policies and things like this I could have the input what was the output the exceptions the logs and everything else if I go back to x-ray now and show me the last 15 minutes show me only payments that failed you see this means here ideally if Traci has been already in place now all that graph becomes more specific one for me and I can create much per views per customer per view and things like this they're going out to collect payments and try to see that trace for instance I will see that that specifically failed when I call my function inside my lumber collect payment and hit that API and he failed because I got a 500 phone stripe because payment has been already collected and if I go back to the same trace and I started looking for payment start as you can see failed and I can see exactly where he came from remember the name now failed payments so you see how I can start correlating things it's a much different approach of actually doing it what I using rough QL up sync all of those things to apply fir to go to logs as well she can ever give you a glimpse see how much of a difference it is by having a JSON I can start using cloud watch login sites you start querying that piece as well and create metrics for this so much so that I even created this in my dashboards just by using logs and nothing else I've got all this information now top 10 requests all the pieces I showed you on on the presentation all of these come from logs all the operational details I want to know and troubleshoot if I needed you field statistics which customer which operational how many times you failed how many times we tried all of these you get by structure logging all you need to do is chase on output nothing else like I promised if you are doing in Python I will love your feedback this is in beta right now that's the tracing structure logging pieces that's a library that I just open source last week that I'll start with Python first best language but we will do no js' and other pieces afterwards once we lock it down the api's if you store this library in Python just by doing there are treat features that are we started for now you can do the custom tracing like I'm doing right now with you and showing you up just by doing this annotating your functions that's why I saw the collect payment in the trace and when you do structural logging you set up the logger and this we already do the conventions I think it's right collects functions function version function 8-iron and things like this in code start and this is the new one that I will change because of the new announcements we made last week as well I didn't that graph that I showed you in the dashboard of showing successful payment successful bookings all you have to do is this in your code log metric name of it the units the value the name space dimensions and this will a synchronously call cloud watch and simply create that metric for you and doesn't have any impact on their performance that's a microsecond thing that's simply a print outside and I would change this using new cloud watch metric format so I'll stop here for now and then conclude this piece the message I wanted to give you for all this is not only to show how how I learned all these pieces and how hard it was to do CSS that's not the point the point is that if you look at the number of lines of everything of done including tracing all of this most of these pieces were called auto-generated and all we actually did it was actually start with a schema then from there we created all the functions we needed prototyping has never been much easier than that I mean I've been doing this business for quite some time in cloud I've been doing working for it the rest for over six years and I barely I barely stopped writing any code it's just our JSON now do my schema and I start from there if I my idea doesn't work I spend nearly nothing it's much easier to start any code that you write if you're not doing tracing if you're not doing structure logging metrics and all this someone else is going to be responsible for your code afterwards code is liability if your customer is having a bad performance someone has to go in troubleshoot and improve your codes no code is better than ever so that's why I'm actually looking into surveys and amplify and all those pieces as well if you weren't interested in something even deeper than that these are some of the sessions that are related I will give you my personal preference in my personal favorite as every year die do the last one I couldn't spend too much time on authorization because you would be overlap the last session mob 311 it's my favorite session if you are into you authorization that will show you all possibilities on how you can do we react or whatever framing car using entry how you do a much more fine-grained detail utilization per field per type service service communication or even better you can even use mucho authorization mechanisms within the same type with that if you want to continue that conversation I'm very active on Twitter being me anytime my teams are open and I think you so much for coming appreciate that [Applause]

Channel: AWS Events

Views: 10,573

Keywords: re:Invent 2019, Amazon, AWS re:Invent, MOB308-R1, Mobile

Id: DcrtvgaVdCU

Length: 55min 39sec (3339 seconds)

Published: Wed Dec 04 2019