Cool, i’m on hi, everybody, let’s begin. We’re ready?>> awesome. So, welcome to this session on spas As serveless and scalebility. Bri begin i want to ask a Quick question. Anybody here bought bit coin When’s it was cheap? no? Check this out. August 2 it 3, 2013. I bought a bit coin. Yeah. Clap. Yeah. Best invemingt i ever made. You know, some people call me the asian warren buffet. [ Laughter ] but my friends know me a little better Because if you look later on that day i sold half of it. But i kept the rest. I kept the rest for four days And i got rid of of that. So you know, what you take Away from this is that i’m really good with money. So, as good as i am with money you can always do with a Little more help. So, that’s one of the reasons I listened to this pod cast planet money, anybody listen To that. I love this pod cast. And i have to say at this point i’m not affiliated with Planet money at all they have not endorsed me or microsoft But they have allowed me to use their image opt screen and One of the things they figured out last year. They figured out sometimes President trump tweets and When he tweets, sometimes he affects stock prices of companies. So this is example where he tweets something about toyota Motors i’m not sure what it was something negative and Immediately, at that moment, the stock price dropped. Okay? and so they asked themselves a Question what if you could create a trading engine that Made trades based off of trump’s tweets. That’s what they did. They created. It and it’s actually kould botus butt of the united States and if you go on twitter is are you can follow Botus has a twitter accounts itself and every time botus Makes trades they post on twitter telling you about the trade they made. Unfor fatally they shut it down you know, there are Podcasts. They’re non investment firm. They shut it down a bit later and everybody is a bit sad About this so i decided to build my own botus. That would make money for me. Automatically We all know where this is going, right yes. Don’t worry i made money, $61 today coming — i can get Applause, thank you very much, thank you. Thank you. Now admitly that’s 50 cepts for every hour i worked on the Project b but it is still a profit. But don’t get excited though, because i’m going to talk about — i’m going to teach You how to treat your very own botus no that’s a secret for 34E to keep, right? this talk is about how to Architect and scale a web app like botus ape chose botus It’s a rather complex application it has a bunch of Different moving parts i wanted an example with meat on It when we talk about scale and architect and spa. Now this is kind of like example of what botus contains. So, i tell you kind of not evened out long ago a little Two or three years ago it was simpler and clearen understand Is thousand architect an application like this and we Would use a framework maybe like express or some other web framework. And maybe you would have like a view layer so perhaps like Template rending engine or something like that. But essentially something we part in data and return to g. It ml when you return that. Maybe i’m calling it api but Essentially you control something between your voir Layer and database which has kind of lot of business logic. This application is Interesting it has twitter feed, something that runs Outside of any kind of user interaction listening for Tweets and it’s got trading engine on the back of the Thing so doing real trades on the side. And all this is kind of a one atomic code base. When you deploy it you deploy it in one unit. So that means you host it on server usually somewhere and Typically on azure that solution would probably be app Services, that’s how we would do it right now. What this talk will talk about we’ll talk about How — that’s or three years ago and a lot changed two or three years and we work incredibly fast moving Industry and cust edge of industry right here now So a lot has changed in 2 it, 3 years and topic of this talk is how would be architects Deploy and scale this kind of application today. Okay? and so, introduction. My name is asim hussain you can finds me on twitter jaw Achy blog about angular and java code craft do the tv and Cloud developer advocate at microsoft. What is cloud developer advocate. We’re pretty new team. We fall under the azure banner And our job is to be a conduit between the azure team and Developers such as yourselves. It’s a two-way street. We want to hear from you any feedback and we feed it Straight back to the pms and goes vice verse a if you go to The link at the bought tlom this is cdas that currently we Have. In our teams and there’s not That many of us. 60 Right now And in fact if you have been to expo haul you have seen our area. Which is called cd lounge you may have seen that area. That’s our area. If you go down there and meet Cdas we’re all hang around in this place and you might see In the corner of the back there is a pen where we’ve got Couple — a pen for a couple bunnies reduce stress and Stroke a few bunnies. Does that sound good i don’t know. And you can stroke a few animals And even watching it it’s comedy and yeah, i’m also Instructor on platform called udemi anybody heard of are it Or used it. Also instructor u development Mi they recently added subtitlesubtitling or automatic Transcription for courses and correctly for the first time Autumn. I mean i have been waiting for This day many years it finally happened, my name is awesome And this talk will be very asim. So going back to our old example, as i said, what we Would probably havefy was building botus three years ago Is view layer and maybe express rendering something Out. As a haste email — thvrment Ml back to the browser. And if we build it today now We’ll probably build spa. So essentially we’ll take that View layer and part of control or api and wrp that out and Build it as spa. And actually, what is spa? Okay. This is actual botus Application it self. You can see at the bottom Loaded per page from the server erin then basically Going to rendered. And once representeders we can click around and see pages Changing you can probably not tell but url is changing as well and important thing to Note from looking at network panel is not seeing any other Pages being requested from the server, okay? And that’s because single spa, Is single page application which literally means only a Single page is ever returned from the server, okay? And what does spa look like on this. If you use angular i’m an angular output and this is Angular spa build process looks like. Whether application is one ge or 10,000 page this is It. This is all you see in the Output folder and here you will only ever see one index Html file that’s all sewell he once index file gets loaded in Browser it loads all the other assets or java script files And that then drops on the page and java script take over Over. Okay That’s what spa is. We rip out and take you out And turn to spa. And then where did you host it Or put it. That’s the big question, right? And decision i see a lot of people making is just a host On app server essentially on server somewhere i see that Time and time and time again. Now, i don’t knowy think Perhaps used to it because that’s how you were taught to Host express application and how you go ahead and host Spa what i’ll show you it’s There’s a better way better way that gives you better Performance and it’s a lot cheaper. Maybe i should be sooiing saying things are a lot Cheaper. Lot bit performance. They don’t like you when i give you cheaper ways of Hosting tough on azure just understand Kind of method i’m going to talk to you have to Explain couple concepts may seem basic stwik me. It’s idea of statistic versus dynamic request. Okay seems pretty simple right? And statistic request is request for Url that returns same data no matter what. If two users on two different machines request same url it Will return the same data. If the same user requests the Same url over a certain period of time and return the same Requests. Opposite of that would be Dynamicry quest. Same cuseer makes same request And same url over different time points it’s a dynamic Request staiblingt versus dynamic. All right and we have a quiz. I like quizzes. Keeps audience on toes. So, if you requested jpeg file Would that be statistic request or dynamic request? statistic? Anybody think it’s dynamic? No. Good. I would have had to ask to you leave. Statistic request right? What about home page for web site is that statistic or Dynamic? depend, Right? i used to make my home pages Dynamic if you’re logged in user versus non logged in user I would use lightly different data. If you start doing — making It dynamic you cannot take advantage of a bunch of Features i’ll show you next. Okay? so, you can stay for now, it’s Okay. See it depends. Kaivrment how about if you have a profile page my logged In page taken might look different to your logged in Page would that be statistic or dynamic request. Die name. That’s right. Anybody think statistic? all right. So then next question is spa dynamic or statistic. Statistic. That’s right.>>>I showed you output folder And unless you changed output fold are because you changed application it’s not going to Change. Spa is Statistic. Why is that important it’s Important for a bunch of reasons one of the most Important ones is is cacheing. If you’re requesting url and That returns the same thing time and time again then you Can take advantage ever a bunch of different cacheing Features on internet most famous of which are come only Known browser base caching. It will cache resource if Statistic asset. If you set it up rightly. If you set it up rightlya tually between browser and server there’s a bunch of Other caches on the internet. Most famous one and well known Ct-one would be cdm. Okay. Content delivery network and If yours because you have to pay for. It and i like a proxy caxt Che in the united states devr anyly countries that have Poorer internet connections they have proxy caches they’re Used by internet service providers They have own cache like a mini internal regional area to Speed things up for users>>you make request or user Makes requests and it will get served by approximately. It won’t hit your receivers. It’s amaiszing.