About the talk
Serverless Web Applications with GraphQL, Cosmos DB and Azure Functions with Jan-Henrik Damaschke
Jan-Henrik Damaschke works as a CTO and Senior Cloud Architect for Security, DevOps and Automation in Germany. He is Microsoft MVP awarded in the categories Enterprise Security, PowerShell and Azure. As a writer he works on articles on security related topics and is involved in many community events as speaker as well as organizer. Jan-Henrik is passionate about sharing knowledge with others. He has written a book on Azure infrastructure solutions and is still active as co-author and reviewer.View the profile
Let's call the word next speaker on Henry. One of my favorite Tools in rescue helicopter with Stevie and Usher function so you can all see my screen brighter. Yeah, we're going to talk about some of those applications today and this talk specifically focuses on top of those with applications with gravity are Cosmos TV as a french fries, and a lot more as a service is. So, mainly focusing on a social services that are seven letters and just is a little disclaimer. I hope you're not afraid of a code. We will see a lot of source code and some slides we will have some very interesting
demos. And as this were going to be in architecture that is based on the real world application and it's not going to be extremely simplified, simplified enough just for you to know it's not your everyday. I just got up 10 sites to say it like that. So just just a few words to me. I'm in Henry. Dumbass Crime, City, Ohio at Orion and Senior like attacked. I'm a mix of every MVP a thing since 6 years now and you can reach out to me at Twitter at my handle that is on this slide.
You can of course add me at LinkedIn and you can read my blog posts and the ones that some colleagues of mine and some people from the community ride at it inside. So don't work. I can just recommend to take a look at that. So let's start. So why are all the we talked about 7 us? What has been the journey in the past? And why are we talkin about several? Especially for web applications? So the first thing that comes to my mind is, of course scalability. So with scalability, what that actually means is that you have the choice to scale. So
many services scale automatically for you. They scale out by time of a user account by request or something like that, but you can also choose to not scared anymore or shoes to skate out indefinitely, but basically, so that's what you get from that. And with that comes performance, especially for occasions today, like everything is possible. We are coming from a time when PHP and pure cervicide, rendering. What's the standard? It was just normal. After that we had. Sound like the name,
equivocations then there was a phase where we had a lot of static pre-renaissance web applications. So, static site. Generators, for example, the things like Gatsby, and so on. And after that time frame works, like reactive you that, I basically the the standard today and when I we're coming out and frame hooks on top of these, like next, Ray Sr. Next four View, and these provide basically the best from Two Worlds. And the next situation now is to combine like the best of the ring and the best of
pre-rendered websites basically. And that is where serverless can really help us. Because with the technology that we have today. It's yeah, if you can do, you can do everything there. For example, a new version of next. It's enough Raymond based on view, where there is an experimental implementation than redness you complete. Website inside of a browser web worker. So, everyone who said a little bit familiar with what technology is no set, some aside rendering inside of your browser is is a little bit crazy, but it just works and that's fantastic. So you can do
nearly everything today and then improve your performance. Not only in regards to usability and latency, but also for things like a c Owen song. So, of course, pricing the price scales with demand. So you have propane to go pricing for nearly everything in Ed's room or more services are getting the service here, just a few months ago. A few years ago. There was no 7 to see if a cosmo CB. And today, there is a 7 last year for Cosmos DB there. Since I've lived here for many other services as a functions, of course, has that ability of the convention plan
and so on. So you can, you can create nearly all services that you need for your weather application architecture, and some kind of survivalist tear, which basically means that you'd pay as you go, you pay per request per second at the use of service and things like that. Men, normally you have a smaller maintenance fee, and smaller, maintenance time and effort for this because you are starting to focus on other things. To start to adapt some of this applications. You have to have some kind of devops methodology you
play, so you can really grow from this. And if you already have things like a deaf person in your organization or some kind of death of space mythology that you use for your daily business and to operate your applications on the applications of your customers, and this helps Then of course the HD Mini service applications have first grade integration with a csbg Services. The GitHub integration of static have said we will take a small look at if we have time for that and it's 12 minutes is a great example of a bad because things like one-click
integration from ever. So if you're only as a Portland setup, your new study than directly. You're available repositories from get up and pushes the correct pipelines into your guitar. And that means that you don't have to care about like setting up your pipeline, setting up your pull request processes. And someone that's at least a base configuration already done for you and you can deploy and set up your whole cic experience in just a few seconds with the study credits, just as an example. The other thing that I like a lot
on one language only. But if you are, if you have the cap of Microsoft versus you can choose either the language that is best for the task or the language. That is that your developers are most familiar with. And that is something that is really helping with develop experience because you don't have to learn something new everyday. And the last but not least points in security, and I wrote it last in this list because it's extremely important, but it's something we cannot focus too deeply on Sunday. We can just
take a look at some of limitation and something you have to consider. If you're thinking about security, Bob bathing, play odesza, cops, integrating Security Service into your pipe light is extremely essential so things like he bowled Azure app, service, men's identities. There's a lot of stuff inside of Andrew. We all we've already seen the security Center and all the information is provided by bats. So there's a lot of stuff going on with it. I already mentioned study, bypass relatively new service and after that integrates
with your stubbornness, what applications? That is, so great. Start to host locations and it has a lot of very interesting features. So they are so basically reverse proxy which means that if you are connecting to a study by bad, every request that you make is going through the statement of Service 1st, and thus the been evaluated based on your configuration. That means you do you don't have to care about routing anymore. So if you want to redirect to specific route in your weather application, you can just put that in the contact file and study Webster. Take take care of that. If you
have a route and that's the really interesting. If you have a specific route that is not allowed for a specific group of users. You can just write that in a contact file and we'll take care of that. So you have authentication authorization in the whole routing thing as a platform. Just basically where you only have to configure a Json file. And that's it. Basically, I hope I hope we have enough time. I will hurry up a little bit then with an integrated to the end. Some eye-catching optimizations. I already talked about the integration that is really great free SSL. Certificates
coming with the service. You have a free, tier everything that we are talking about right now is completely free for everyone. So we can just set up a steady weather and all this, including the SSL certificate for your custom domain is included and you have an integrated authentication. That means that you inside of the service can just defined roles for yourself. For example, like administrator moderator, whatever. And a sign, that two specific uses coming from different services. So you can invite, you can invite you khaliq with the specific. Or with a handle of something and
assign a specific role to him. And if he accepts the invitation, he just has that role. And you don't have to care about anything, you know, about authentication, authorization, open ID, connect. That's all out of scope. If you don't want, don't want to handle any of that. Then you have the pull request reviews, which is a really great feature. Because when you're creating a pull request instead of web apps, automatically understands that you've created to pull requests, so this is just available for guitar. By the way, not fight for death of spots and I think the majority of people
migrating from Ephrata from Stewart to get it anyway, so pull request reviews are provided to a preview branch that they can take the code from your pull request branch and deployed between you instant so that you can preview the changes and see if everything is this, right? Like I said, the the free plan is including not only on the hosting features and the platform features that I just talked about, but also an instance of extra functions so you can deploy and additional Azure function. That's basically come down sometime soon, but it's abstract.
So you don't have direct access to that time. You have to defend a new code and then deploy it. And then you have a front and on the one side and then the aesthetic, then the other function at a specific route. And that's where it gets interesting because of the, as a function that he fought one is always map to /. AP eye on, you said that, you don't have any cars issues anymore. You don't have to handle course at all. You can dress ferry from inside of you, an application slash API and you have direct access to your as a French net. Mandara Spa Dallas and premium features
and their servants with lemon that you should know about. And now we get to the interesting part because I've seen that the sessions are only 25 minutes long. So as a demo, I have created a little application that you can open under a sesame seed. App and this application will enable you to create your own questions for the session and I may be able to answer that and you can also comment on questions from other people. So I will just switch over to that. So that, you know what I'm talkin about. So if you go to session feed do that, you
will be presented with the login screen. This is everything based on the age of 30, but I have to look into my other screen to to interact with that. So, please, excuse me for that. So, I will log in with my Microsoft account and I wanted will basically do it will because I'm already looked into, it will take my Microsoft account. If you are looking for the first time you will be asked to convince to provide to date on. This is basically, I'm just for the service to be able to lock you in. This is all the data. This is why I
just be printed out the wrong. I'll check here that you see if you lookin so the identity provider and some other stuff. So this is everything that is handed over to the application. May be the first thing as interesting as you over, you see here, is that the but what if you catch me to tell connect to slashdot.org me, and that's the end. Find where the front and the weather application. Gets all the user information about the alerting users. I'm not configured any other indication at all. I'm just inside of my study better by have told her that this path is authenticated. So, it just
Press the authentication from you and this is what happens then. And if you go to talks. Yeah, you see I've created another talk because I was confused about the time zones was was too early and then I tried another one and this is with the car and talk with his. Why do recording sinus on and you can go to discuss to ask some questions. And we'll talk about the architectures that is behind us in a second. So then you question. No, no questions right now. So I will just try to question. This is the
first question. What is? Static web apps. And I'm going to ask this question and what is interesting is that discretion is now has not appeared here and there's already someone who asked, never question. That is great. And if you, if you go to reply here, you see the entrance. There are no answers yet and you can add your comment if you want on my screen because I'm in full screen mode, a little back down here, but you can just add you, and we will be looking at this and I will be looking into this after the session but now we will talk about the extra architecture that's behind that. And
doing the presentation. We would also be notified about any potential comments or questions that come up. So. This is the medication, Effexor. I already want you. There's the new question already. Great. I already warned you that this is not the, the most, the other, the least complex. I can text you that you can think about it, but it's basically the city weather hosting the front and which is written in View and be API, that is written as a fraction 2000 as a fraction.
It's all based on typescript and what I did in typescript and because that's also the thing that we didn't discuss our project with this is based on is to use Graciela in there. And we'll just take a look at Grassy Hill and 2nd and why would you sit there? But Gretchen Ellis physical used as an API Gateway year, so you think you can also use an extra API Gateway, but the other API Gateway is kennel, kennel, so we use, of course. Like external things pads and the Graffiti L a p i r. A in, this case Apollo server is that
I would say, the most used, Graciela implementation that is out there. That is used as an API Gateway, for multiple reasons, because you have Microsoft. Do you have a Microsoft space architecture? So we have a message. I p. I n s a t. I s u c and the front end only communicates with graphql. And the thing about Dracula's that because it's behind the steady whip app. We can use the whole authentication and authorization part, which is sometimes a little bit of pain and Rescue out and we can use it completely
provided by the study web app. And we just use that to handle a user roles, the authentication and all that stuff. And we only have two. At some very little things to make it possible to 24 b or allow specific users to access Pacific endpoints. You will see what I mean in a second. And what you also see here is that the front end always connects to the proxy in the middle. So, to the city BiPAP, and then the study Bible connect to grassy Hill and thereby also checking if you have the papers. So that is basically Dale the singer point of
control the Steady B of itself. And after that the graphql API Gateway will connect to the other microservices that you have. I just I have just created this this a few days ago. So it just has a s, a p. I n a message to Avi. There's basically used to carry some special information. Like the questions that you've seen him to Cummins and the message to Avi is used for for pulling information. So, like I said, we have the wee half of the edge of a study with f and okay, so we have the
setting might have to end up front and then we have to back in the mongodb Mongo, a TI baii, stands must be some as a fraction and as a pub sub, I will not talk about this anymore because we don't have any time by Deseret pops up is just like signal or it's just wet so I could service to notify about some some new things. So why graphql? So graphql is basically a Korean language, VIP Eyes and which provides us with definitions for specific Antoine, some specific resources and we choose bit because everything is based on typescript and with typescript, we
have the possibility to Define our types and shared between the front and the back and and all the Microsoft versus. So we have we ever had Library of definitions. Basically that is used for the resources in the front end as well as in the back end as well as the great real definition itself. And thereby also the API Grand controlling what's available and what's not available, then? It also works great and 7 is basically because I promised I would just be implantation that I talked about off Graciela provide some very good Severance packages.
So you can run it on. Aw, You can run is the edge of time since you can run it on universal with those of us sanctions. You can run it everywhere. Basically, and there are some caveats to that, but it basically just works the way you expected to work, and it's also quite fast if you do some of the medications here and there, so the application that you are currently using, cuz I see that there are some persons are coming in this application. There's no optimization basically. So this is the raw performance of just the cheapest computers. And after that you can have,
there's no cashing, there's no anything. So there's lot of potential for the UI responsiveness and someone has a very rich ecosystem with some something wrong. So we have no subscription support. There's something else you should know in a circle is because you can subscribe to to a function. And sometimes with education, authorization can be difficult. And that is why we use as a static weather apps and switch to the edge of portal because and the edge of quality, we can see with all our resources in in a
specific Resource Group and business dress application insights with all the Microsoft disconnected. So the API itself and the front end the session API in the message Api and we can go to the back to the resource Group. And you can see that in this Resource Group. We have just time convention plans for the other functions. We have from the cosmos DB and we have the extra functions themselves and the steady weather and the city with him. Like, I sent has only If you come through as an option C of the Restless down in the configuration file, but the only
interesting thing that I want to show is that I've also created especially for the specific invitation. So every user that looks in, like you all are me. And you are the only get the anonymous and the authenticated road. So that is how you can check if your user is actually looked in or not. And I have created another roller Simon for myself. So that's my guitar handle, and I also have the speaker role and what that enables me to do is you probably spotted the new question here. And if I log out And login with my Microsoft account you will see that the
you question. And you knew talk about in here and you talk is not available and If I log in with my if my break-in because we're running out of time to time. I've only done 22 minutes. I have my calendar running. The app that you feel too, it's a very interesting of, by the way. So we can just go to the, to the takeaway slides. That's okay for you. So that's, that's basically the important part. So, okay, share your Twitter handle real quickly, and share it on your Twitter. So people
can see you there. Yes, course, of course. I think I will also show The Office lights as well as a whole part. So, but like I said, you can you can just ask more questions in the app and I have to take away is on right now. And I will also post the link to the whole presentation right there. And yeah, I think, if we're running out of time, this little bad, but I cannot paint. Unfortunately, a lot of interesting stuff in your talk. Right.
Buy this talk
Buy this video
Our other topics
With ConferenceCast.tv, you get access to our library of the world's best conference talks.