Azure Portal: The Largest Single Page App in the World
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Title of Series | ||
| Number of Parts | 133 | |
| Author | ||
| License | CC Attribution - NonCommercial - ShareAlike 3.0 Unported: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this | |
| Identifiers | 10.5446/48918 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
NDC London 2016100 / 133
2
6
10
12
15
17
23
24
28
30
31
32
35
36
39
40
43
44
45
47
51
52
55
58
59
60
61
62
63
64
67
69
71
73
74
75
82
84
86
87
97
103
107
108
111
112
114
115
117
120
123
126
128
129
132
133
00:00
Software developerAlgebraOpen setInformationBlogEntire functionComputer animation
00:46
Software developerTrailLevel (video gaming)
01:30
Software developerRandom matrixPlanningMultiplication signRoundness (object)CASE <Informatik>Inheritance (object-oriented programming)Universe (mathematics)Logic gateHand fan
03:02
Software developerUniverse (mathematics)Data centerProjective planeComputer animation
03:57
Software developerProjective planeCodeExtension (kinesiology)Data managementComputer animation
05:04
Software developerVideo game consoleProcess (computing)Charge carrierClique problemAlgorithmWebsiteLink (knot theory)Search engine (computing)Figurate numberComputer animation
05:52
Software developerExtension (kinesiology)Scripting languageJava appletFrame problemCore dumpSet (mathematics)Point (geometry)Link (knot theory)Multiplication signSystem callBuildingMereologyExtension (kinesiology)View (database)QuicksortComputer fileWebsitePerspective (visual)DebuggerSequelCrash (computing)Message passingTelecommunicationData managementScaling (geometry)Independence (probability theory)Service (economics)Scheduling (computing)Game theoryCartesian coordinate systemCodeRevision controlProjective planeCASE <Informatik>NeuroinformatikDefault (computer science)Functional (mathematics)InternetworkingSoftware frameworkError messageFront and back endsEvent horizonProgram flowchart
10:14
Software developerPoint cloudCAN busComputer animation
10:59
Software developerFlip-flop (electronics)Multiplication signMereologyQuicksortContent (media)Structural loadExtension (kinesiology)Cartesian coordinate systemCloud computingVirtual machineTesselationConnected spaceWebsiteSequelOperating systemWeb 2.0Keyboard shortcutElectronic mailing list2 (number)Level (video gaming)Service (economics)Computer animation
12:47
Software developerCartesian coordinate systemExtension (kinesiology)Greatest elementSemiconductor memoryMultiplication signLeakComputer animation
13:51
Software developerType theoryFraction (mathematics)WebsiteComputer configurationScripting languageGroup actionTelecommunicationSoftware repositorySoftware frameworkJava appletCodeFunctional (mathematics)Front and back endsApplication service providerSubsetException handlingComputer animationXML
15:10
Software developerFunctional (mathematics)Software frameworkElectronic visual displayScripting languageComputer fileLevel (video gaming)Presentation of a groupExtension (kinesiology)
16:14
Software developerTwin primeComputer fileCodeRight angleSubsetValidity (statistics)Profil (magazine)MathematicsNumberType theoryFunctional (mathematics)
17:09
Software developerRight angleNumberObject-oriented programmingType theoryGoodness of fitParameter (computer programming)Functional (mathematics)Wave packetCompilation albumError messageString (computer science)Code
17:50
HexagonSoftware developerElectronic visual displayVideo game consoleFunction (mathematics)Social classParameter (computer programming)NumberCategory of beingType theoryMessage passingConstructor (object-oriented programming)MathematicsPlastikkarteSign (mathematics)Source codeJSON
19:10
10 (number)Software developerVideo game consoleElectronic visual displayObject (grammar)State of matterExistential quantificationScripting languageExecution unitMultiplication signType theoryUnit testingQuicksortSource code
19:52
Software developerElectronic visual displayVideo game consoleUnit testingAngleFrame problemLibrary (computing)Inverter (logic gate)Touch typingProjective planeXML
20:36
Software developerProjective planeCapability Maturity ModelQuicksortLibrary (computing)CodePoint (geometry)SynchronizationSpring (hydrology)MereologyXMLUML
22:02
Software developerVariable (mathematics)Front and back endsWebsiteLibrary (computing)Revision controlProjective planeMultiplication signAxiom of choiceServer (computing)WritingSoftware testingQueue (abstract data type)DemosceneExecution unitComputer animationXML
23:17
Software developerExtension (kinesiology)Cloud computingLink (knot theory)Frame problemOpen setWeb browserWebsiteCodeConnected spaceNeuroinformatikElectronic visual displayComputer animationSource code
23:58
Software developerNeuroinformatikElectronic visual displayUnit testingCodeExecution unitSoftware testingMultiplication signExtension (kinesiology)Computer filePoint cloudMathematicsWebsiteStructural loadCASE <Informatik>InternetworkingConnected spaceHypermediaRight angleSystem callSubsetSpecial unitary groupComputer animationLecture/Conference
26:34
Software developerIntegrated development environmentLine (geometry)Process (computing)Software testingCodeFraction (mathematics)Website40 (number)
27:13
Process (computing)Software developerCore dumpBitRevision controlIntegrated development environmentCodeScripting languageCompilerPhysical system.NET FrameworkServer (computing)Set (mathematics)Variable (mathematics)Process (computing)Gastropod shellRight angleFrame problemDifferent (Kate Ryan album)Computer animation
28:13
Software developerSoftware testingExecution unitCodeVideo gameComputer programmingFamilyCASE <Informatik>Order (biology)Control flowUnit testingExecution unitProjective planeSoftware testingMathematicsComputer animationSource codeMeeting/Interview
29:21
Execution unitSoftware developer19 (number)Software testing2 (number)Process (computing)Execution unitScripting languageJava appletUnit testingAuthenticationComputer animation
30:07
Software developerCodeFunctional (mathematics)Rule of inferencePixelCodeComputer animation
30:55
Software developerCodeMathematicsCodeRight angleAreaInformation technology consultingComputer fileView (database)Revision controlBranch (computer science)Logic gateVirtual machineServer (computing)Computer animation
32:16
Software developerDifferent (Kate Ryan album)WhiteboardINTEGRALDisk read-and-write headHTTP cookieBranch (computer science)Green's functionPhysical systemPlanningGroup actionLevel (video gaming)Right angleIntegrated development environmentUnit testingSoftware testingBuildingProcess (computing)Revision controlCodeExecution unitService (economics)Product (business)Extension (kinesiology)DialectMereologyComa BerenicesQuicksortStructural loadContinuous integrationCloud computingSampling (statistics)BitAnalytic continuationComputer animation
35:01
Software developerSoftware testingGUI widgetGastropod shellGraphical user interfaceCompass (drafting)Extension (kinesiology)MathematicsDisk read-and-write headDifferent (Kate Ryan album)Design by contractMultiplication signUnit testingControl flowSoftware testingQuicksortTask (computing)Basis <Mathematik>CASE <Informatik>Computer animation
36:10
Software developerRepresentation (politics)WhiteboardSoftware testingComa BerenicesVirtual machineConnected spaceQuicksortControl flowPoint cloudAnalytic continuationParallel portSoftware bugCommitment scheme
37:31
Software developerWeb-DesignerField (computer science)RandomizationWeb browserPhysical systemWindowBuildingStaff (military)Revision controlComputer animation
38:32
Software developerCodeRevision controlInternationalization and localizationLatent heatWeb browserPoint (geometry)Software bugMultiplication signStaff (military)View (database)Arithmetic meanCuboidSoftware testingComputer animation
40:04
Software developerSoftware testingUsability
40:43
Extension (kinesiology)LogicSoftware developerCodeVariable (mathematics)Cross-site scriptingAxiom of choiceMetropolitan area networkVirtual machineMaxima and minimaPoint (geometry)Multiplication sign2 (number)View (database)ResultantLine (geometry)MereologySystem callQuicksortMatching (graph theory)LogicExtension (kinesiology)CodeRight angleSelf-organizationRoundness (object)Exception handlingConnected spaceDirected graphHand fanRevision controlSource codeVariable (mathematics)Structural loadComputer animation
44:25
Software developerCategory of beingObject (grammar)CodeMultiplication signComputer fileRight angleLine (geometry)Object-oriented programmingView (database)Ultraviolet photoelectron spectroscopySource code
47:13
Software developerExtension (kinesiology)LogicCodeObject (grammar)Variable (mathematics)Cross-site scriptingObject (grammar)Game controllerFrame problemMereologyEndliche ModelltheorieExtension (kinesiology)CuboidConnectivity (graph theory)Right angleSoftware frameworkValidity (statistics)View (database)Computer animation
47:59
LogicSoftware developerExtension (kinesiology)CodeVariable (mathematics)Cross-site scriptingCodeLogarithmGame controllerWebsiteServer (computing)NumberControl flowRight angleMobile appPower (physics)Figurate numberExtension (kinesiology)Connected spaceMathematicsWeb pageBlogClient (computing)Different (Kate Ryan album)Parameter (computer programming)Structural loadAlgorithmBitFront and back ends.NET FrameworkMultiplication signMeasurementComputer animation
50:25
Touch typingSoftware developerComputer animation
Transcript: English(auto-generated)
00:05
Good afternoon, thanks for coming for my session. So my name is Jacob and I work for Microsoft and you can find more information about myself at my blog at jj09.net.
00:22
I encourage you to subscribe even if you would like to. I came here for the nicest city in the world in Seattle in the United States. It's already gorgeous there. Anybody here have been in Seattle, maybe? How did you like it?
00:41
Just for recording purposes, the entire audience says they like it. Actually I live in the city of Redmond and I'm a cyclist and before I moved to Redmond I didn't know that Redmond is like the best place on earth for cyclists. We have over 200 miles of bike trails around there, like these green things on the map.
01:03
These are bike trails and here is one of the trails which is next to my apartment which is like so awesome and actually in Seattle we can bike all year around because the weather is similar to London and it doesn't rain that much so it's just great.
01:21
Before I lived in Kansas in the winter we had like minus 20 Celsius so it wasn't possible. Here it is. Oh, and we have also one of the biggest bike rides in the United States. It's called Seattle to Portland and every year 10,000 cyclists are going from Seattle
01:42
to Portland, do 200 miles in two days or one day. I did it for the first time last year. I did it in two days. This year we have a plan with my friends to do it in one day. We'll see how this goes. I know that we are in Europe now and you're probably not big fans of American football.
02:04
Actually I don't know if I'm okay here calling this football because it's rugby, right? But you know we have one of the best NFL teams in the US. Two years ago we won the Super Bowl, last year we lost in like last minute and we
02:23
lost in a situation where in the 99, excuse me, in 999 out of 1,000 cases we should have win. So that was like, it was so bad. And this year we are training again. We just went through the first round of playoffs. We play with Minnesota Vikings and actually we should have lost because like the last
02:45
minute everything Vikings had to do they had to just kick and score and you know nine times out of ten teams score and they missed. And that was so surprising that after the game, you know, I found this.
03:04
I don't know if you guys have seen the Miss Universe when the wrong lady got the crown there was like music and after that they said oh I'm sorry actually it's not you it's the other. So this is Seahawks logo, this is Vikings. But let's go back to tech.
03:23
So this is Azure data center. Actually I'm not sure if it really is but I found it on Bing so it should be. And this is Azure Coast in France. Actually I was wondering what are the origins of the Azure name, where it's coming from.
03:41
So this is one of my ideas. It's pretty nice. I think this is Nice or Nice. And the French people here how to how to pronounce it Nice okay in English it's nice and it's actually nice right. And I work on the project code name Ibiza and this is actually Ibiza Island in Spain.
04:05
You know some people are wondering what is the origin of this project and some people said that yeah because after we shipped we're supposed to go there for a party but probably something didn't realize that you know our team can grow to such an extent that it will be like a couple hundred people at the time and that might be an issue.
04:25
So but maybe we still will go sometime I don't know. And the public name of the project I'm working on is the Microsoft Azure Management Portal. How many of you are using Azure?
04:40
Okay almost most of the people here. Are you guys using the new portal? Who likes the new portal better than the old one? Who likes the old one more? Okay only two hands all right. So yeah as you know guys I don't know if you figured this out but you know if you
05:01
double click on the dashboard you can change the themes. I like this dark theme you also have like dark and blue theme. There's also light theme which is pretty cool. I prefer the dark theme and if you do F12 you can notice that we have the ASCII arts
05:20
in the console and actually as you might notice there is even job offer in there. Like if you click this it will go to Microsoft careers website and it will be job offered directly to our team because you know on Microsoft career you can never figure out what the job offer is. Like you see something with algorithms and you don't know it will be like Bing search
05:41
engine or maybe this will be some marketing website. But under this link there are job offers directly to our team. So if you're interested click. So a few things about the portal. For now all people who contribute the code only to the front end of the portal.
06:03
I'm not talking about the back end API to manage the Azure but only to the front end of the portal is something around 500 people. I am working in team that builds the core of the portal and the framework on top of other teams are building extensions.
06:21
What we call extensions for example website extension which adds functionality so you can manage your websites. There is also SQL extension so you can manage your SQL. From your perspective it's like you have websites and SQL right? Because it looks like it's one piece but underneath they are like they are separate.
06:41
And as of today you have 75 different extensions. When I started in this team over a year ago we had maybe like 20 I don't know. So you see over the year we grow so fast. And what we call Blade is sort of the piece of the view we display.
07:01
So if you open something on the portal as you guys might notice if you're using it you get this separate view you can consider it as angular view for example. And as of today we have over 1800s of this view over there.
07:20
And so the reason why we build a new portal because a lot of people actually like the old one but the problem with the old one was that it didn't scale because it was a small little application when you wanted to release a new version all teams had to sort of schedule and do their release together and I am talking here about only front end.
07:42
Okay like back end services they are independent still but the front end growth as well. So then the front end event wasn't scaling. And the idea with the new portal it was a little bit crazy.
08:01
So we have this Azure website is the core of the portal and on the Azure website we expose that framework of the portal and people who use who build extensions like websites or sequel what they have to do they have to install our SDK that we provide
08:22
to them they say they open visual studio say file new project as your portal extension and they have some sort of startup code and they deploy their code independently so their front end code is deployed independently and then we
08:41
only have the link to their end point on the portal and we load their extensions but what is good about that is that they can deploy whenever they want we don't care so if you are you're building websites extension you can deploy even 4 a.m. and our team doesn't care about that you can
09:03
deploy 10 times per day or you can deploy one time per month doesn't matter the only thing that matters is you provide us this link to extension and the extensions are actually separated from the core of the portal in such a way that every extension has a separate iframe so we load only the JavaScript
09:23
code in this iframe and this extension works in such a way that in the portal we have some you know default settings file and for example we know yeah we want to load the website extension we open websites extension and then we communicate with their iframe and they do some computation calling to the
09:43
back end exchange in exchanging data with with the portal and the communication works through post messages and this is also some sort of isolation thing in such a way that if for example some extension will have some error the extension will crash we are our JavaScript on the on the core
10:05
of the portal will still work and all other extensions will be fine and actually I can I can show you really quick if the internet will work go to the portal and login microsoft and I need to factor off so I'll get notification
10:43
on my phone okay I got it okay I'm in so now the portal is loading let's see
11:04
what will be the load time I'm really curious here because you know this is not website like all others this is not just static content like there is a lot of requests happening now and this is loading and you can actually consider this as sort of web virtual machine when when that the
11:24
portal is like an operating system and all the extensions are like separate applications build on top of it and if you click the secret key combinations control LD here for example you can see such a things as the portal load
11:40
time so it loaded in four seconds it's not that bad and here you can see there is a list of extensions that were loaded initially and we load extensions on demand we don't load all 75 at the start because then we'll have to load a lot of JavaScript and you know we will kill your connection
12:01
especially if you don't have very good connection what we load is hubs extension hubs extension is actually some chorus extension of the portal that's without this portal will not work the name of this extension is just from historical reasons here you can see we have a cloud services here are websites there's sequel and the extensions that are loaded here they
12:25
are loaded because they are we have tiles pinned to the dashboard and you can see here for example here I have cloud services part and again part is historical reasons we call this thing tiled and rename to part and then
12:40
again or name to the tile now here we have some virtual machine and so on and for example for now I don't have application inside so if I click application insights we close this but I open some applications insights now the application insights extension should be loaded and you can see here
13:04
at the bottom I also have this extension loaded and then after extension is not anymore needed we said like if I close this I think we said like 60-second polling so we check hey is this extension still
13:24
needed and if it's not needed we just unload this to don't have memory leaks and other performance issues because you know even without that the portal is taking 231 if you have opened it for a while it goes to 300
13:41
actually it's much much better now because there are times when it was over half gigabytes of memory needed to run this thing so this is a quick quick overview of this stuff is built and the technologies we are using we
14:08
are mainly using typescript because we are writing mainly front-end code of course we have some ASP.NET website in there but this is like maybe fraction of the percentage of our code base and typescript is actually very very cool
14:23
for that because we are building API that other people are consuming and our framework team is over 50 developers working on you know one repo one code base and you know even communication in such a big group is hard so you know when somebody is changing something and somebody else wants to use it you know
14:43
they don't know and if we had JavaScript we probably would have a lot of you know conflicting issues in typescript we have protection in strong typing for those of you who are not familiar typescript is a type superset of JavaScript so it adds optional typing in top of JavaScript
15:04
that prevents you from calling for example function wrong argument actually let me let me show this really quick so if I let's say I have some function on the framework so I have function draw or maybe display and I have two
15:31
params here and let's say you know just for presentation purposes I do console.log displaying X and Y let's say minus 10 be more so let's assume
15:47
this is doing something and then you know this is on you know let's say this is function it's on the our framework level let's say SDK framework and then here somebody who is writing extension they are using this
16:03
function so they for example want to say this play 10 and 20 and then I'll save this file and this is in typescript so I need to compile this to JavaScript so I would say tscapi.ts now this will produce me the
16:24
JavaScript file and now I can run it with note and now I can see I am displaying 0 10 right here actually not much happened because the JavaScript code will look exactly like typescript because typescript is
16:42
a superset of JavaScript so every valid JavaScript code is also valid typescript but you know when then we want to make some change for example somebody say okay I am providing numbers here but what if for example I will say here 10 X and 20 Y right I mean because of because why
17:09
not you can still compile this here because we don't have strong typing on the function hello and if you run this then doesn't look good right displaying not a number not a number so you know what we do we add typing
17:26
oops we add typing to the parameters so for example we can say here number and number and now if somebody will try to compile this they will get the
17:42
compilation error that you cannot pass the string to function that expects number so then you know before you check in your code you go back here and you are fixing this then it's 10 and here it will be 20 and then I can
18:02
compile this and then this will work and this also is useful when for example you want to change the parameters so for example you want to say I don't want X and Y maybe I just want I want to create some class because in types we can create classes with X number property and Y
18:25
number property I can even create a constructor here X and Y I'll not strongly type it for now but I still can strongly type this as well say number and number here and here I'll just assign this X to this X and this
18:49
Y to this Y and you know this is all awesome and now I don't want to pass X and Y anymore I just want to pass the coordinates which is type X and Y
19:01
this this class and here I'll just get this parameters from there and then of course you are change API I'm sure nobody is using it yet because you know I told them so right so for sure they are not using it because you know that's how it usually is right but then I compile and oh somebody didn't listen to me when I told them not to use it they
19:21
actually were using it okay so they have to go back and they have to fix it so they actually need to hear you're here and create new X and Y and say 10 20 and then pass the C object here compile this one more time and
19:43
then when they run this it works again right so this you know this typescript gives us sort of first unit tests for unit tests because you know sometimes I've seen I've seen somewhere you know in JavaScript unit test
20:03
something like that that looks sorry you have not equal and then you have some object some function and undefined and I was like thinking what is this and so this is the way how in JavaScript you can make sure that some somebody's
20:21
not breaking some API or stuff like that in typescript you don't need this thing anymore so that's our biggest biggest thing that allows us to run this project and another thing is a knockout JS library I we are using
20:42
this to binding we are not using any big framework like angular or react first because we wanted to have flexibility and the project also started three years ago when knockout was pretty mature angular like sort of starting and what was also very convenient the creator of
21:03
knockout Steve Sanderson was working with us so either when we needed some features we could just ask him and they got like pretty high priority which is pretty nice and and this library is also also pretty good we also use
21:21
jQuery like everybody we used required JS for a synchronous module loading and this helps us a lot with performance because if we would like to load our entire JavaScript that we generate it will be for now maybe like 20 megabytes so so we had to synchronously load and for now our
21:45
startup code is like 1.5 megabytes or something like that because you know we crafted to get as low as possible in here we also use d3 so if you see like the charts on the portal which is like a lot actually on this what I showed you
22:04
here there is you know not not many charts but if you see here for example you have this monitoring this is this is made with d3 it's pretty nice library we also use HTML 5 we use less which helps to better maintain the
22:22
CSS we can write mixins and variables for JavaScript or typescript testing we use Qunit library why Qunit why not Jasmine because again the project started three years ago at the time Qunit was most popular choice but the
22:42
best community support we also sign on JS for for mocking in Qunit and in the backend in our website you see sharp we have a SP dotland MVC I think four or four and VC four or maybe it may be five not sure exactly about the
23:04
version now we also have one backend server in node.js and this is actually pretty interesting because when you know in the when we are in the portal and we have this iframes like if you do f12 here and if you go here here you
23:26
can see these are the extensions here so here's the iframe here is the hubs extension here is cloud services a billing extension and actually you can even open this thing so let's see I'll open billing I'll open link a new tab
23:45
so this is what we actually load to iframe if you do ctrl U you see that here there is no UI it's only JavaScript that again communicates with the website and here what is happening in this code is only the some
24:01
internal computation we don't display anything here so some people in our team I figure out that hey when somebody has slow connection and the user do something and sometimes you need to do multiple calls to the server or get some multiple data to check something I need to go back and forth
24:21
why we cannot run extension in the cloud and then when you do request it's it's fast because you're already there you're not going anywhere you have the fastest connection possible and then we just set up the WebSocket connection between the website and this extension running in
24:40
cloud we call this relocatable extensions and this may be better for people who doesn't have the best internet connection and we are still experimenting with this but in some cases it works and this is this is
25:03
interesting I think for unit testing in C sharp use MS test but most of our we have some some simple unit tests of the infrastructure and we even have some unit tests for the code size so for example if you adding the code to
25:23
our code base that will make the startup code bigger you get a filing unit test which is you know somebody say oh that doesn't make sense at all but from the other hand if you look at that that you have more than 50 people working on one thing like every person cannot know everything every
25:44
person cannot know like is this file load at startup time or no and if they get this filing test they they might be like hey actually you know maybe I can asynchronously load this or maybe maybe actually I have to do this then it's okay you just fix that test change changes like code site that is
26:01
acceptable like for example one time somebody needed to do some media player or something and you know they first try was adding like two megabytes to start up code right which is more than 100% so then they go to failing test but the most of our C sharp tests are selenium tests selenium UI
26:23
tests and this is most of our C sharp code base we also use moku for mocking but we have only a few tests using that actually and this is how our code base more or less looks like you can sort of ignore the JavaScript because
26:41
this is just compiled from typescript so the actually code that we have written is here like it's around 800,000 lines of code so we are going towards 1 million and an easy sharp you can see that it's 240 but when I
27:02
check you how much our website has our website has maybe something like 10,000 so it's only a fraction of this most of them are selenium tests okay so how we how we build this thing how our development process looks like I'm always interested how like other people and other teams are doing that
27:23
so I'll tell you how how we do it and maybe afterwards we can chat how you guys do it so we use environment called core XT this is a tool created at Microsoft it's a little bit something like Vargant these days people use
27:40
Vargant to create like isolated dev environments right so you have the same environment for development like you have in the server in core XT is a little bit different it sets or it's it is a set of PowerShell scripts and you get packages that by setting the environmental variables creates this environment that you can build from the code you have locally you can you
28:04
can build targeting the compiler that we are using in our build system and using the same version of dotnet framework and so on and then we write a code everybody loves to write a code actually this is a meme called
28:21
programming in the movies versus the real life so this is real life and this is movies right that's how it looks like that's what our our families things we do right but actually yeah the life is boring so in our case we we
28:45
wouldn't be able to survive without unit tests like seriously maybe if you have team or five or ten people maybe yeah you can do project without it like for us this is like not possible because almost every change you do
29:05
somehow there's some dependency somewhere there that you're breaking you might not know right because of course you cannot know everything so in our always when we commit some code there has to be associated unit tests
29:20
with it and one problem with with tests is that Selenium UI tests are pretty expensive because sometimes to to run one test it takes 30 seconds to even one minute to you know to run the IIS to log into the portal do the
29:41
authentication and all this stuff and then you know you just click on one thing and okay it works so we push towards using the Q unit tests in JavaScript and we're trying to have more of them because in one minute you run thousands of Q unit tests and we also have TypeScript which is our first
30:02
very unit test which is our of course biggest test base and before we checking code we commit code we do code reviews so in our team the rule is that usually when you do some new functionality to have sign off for two
30:21
people usually the reason is again like you might not know something somebody might know some area or have some you know suggestion for you and it's always when more people will look at some code piece and can give you some advice how to do stuff like sometimes if you are like you know just fixing some CSS one pixel off right it's okay if just one person say okay
30:44
or sometimes when it's something like really really really simple then we somehow go go without this but usually we do code reviews and you know it's it's not free because you know sometimes you get a code review right
31:02
and you have 100 files changed right please check if it's okay right okay cool so this would I will spend the whole my day today right so this is a problem we are trying to do a small changes as possible and just the code code reviews that are as small as possible as well or you know if code
31:24
review is big we just do consultation on originally the people who are familiar with some area where we do changes are checking this for our source control we use git which is pretty cool who we always yeah you guys
31:43
also really recommend always do private branches because you know if you don't save some work somewhere on the server your machine can you know burn and your work will be wasted right so if you have your private branch you can save a
32:00
lot of work and you know commit us as soon as possible like you know you can always amend the commit so before you push it to repo you can just say you know git commit 123 and temporary have it and just push it to private branch and once we push our code to codebase we develop in branch we call the dev
32:24
branch and after something goes to dev branch we run the build in our build system and then we run all our tests we have a bunch of different tests we have a unit tests we have the UI tests we have some for example some some
32:43
sample extensions we check the extension load works fine and once everything goes through CI continuous integration and everything is green no test failed then we merge everything to our branch that we called docfood or
33:04
see a release candidate and we run a release to our we call it RC environment that is available there and it's our first sort of continuous delivery stage because then later on once code is there we have also two
33:26
other branches one is called impact which stands for ms.portal.azure.com and this is the the place where all people from Microsoft I think all MVPs are redirected when they go to portal.azure.com and so they have like
33:44
you know the more fresh version I would say but we do this deployment manually we used to do it every day now I think we do it once a week we sort of still trying different approaches trying to see what will works the best and the third branch here it's called active but we call it
34:05
production it's actually production branch when we merge everything to production we run the build we copy the bits to the cloud service and we do release we have for now we are geo replicated to all azure regions
34:24
actually I'm still pretty scary when I'm doing this deployment right because we are releasing the thing that so many thousands of people are dependent on and in our process like there is approval needed so we have a group of
34:40
people who are like very experienced with deployment they know all the stuff about this so when somebody is trying to do deployment they need to get sign off from some other person so you know at least two person knows what is going on and you know when something goes wrong at 4 a.m. you know two heads is always better than one and this is our continuous integration board so so
35:05
the first thing we do is build and then we have like bunch of different tests so for example here you can see we rank unit testing chrome we also separately around in IE and here you can see this one is yellow because some tests failed probably there so it's already beneficial and we have some
35:27
other test like for example the compass tests this is like sort of our contracts with extension partners we told them that hey you have three months backwards compatibility because at the beginning the problem was that
35:43
every time when we released the new SDK they has to fix all the breaking changes we do so now we we told them hey we won't be doing breaking changes for three months when we do breaking change we're just letting you know and we will not obsolete the current API for three more months but
36:03
you should you know switch you have like heads up you'll get warning when you developing and you'll know that you have to change and we also have every week somebody is our CI board representative so you know if somebody broke something or sometimes it's like because we don't have one
36:23
CI run per commit because we have almost 40 comets per day and one full CI run takes almost like half an hour so sometimes we have like three or four commits and then something breaks and then of course there are situations when all four people says oh for sure not me for sure not me so then we
36:43
have this guy that he's sort of like figuring out who broke maybe there is some issue with continuous digression infrastructure because you know we run our tests actually in the cloud and we run the them in parallel bugging days we had issues with flaky tests because sometimes you know for example
37:03
you just lose connection to virtual machine or something during the the virtual machine setup went wrong and sometimes was marked as failed and you know all CI was green what we do now when some tests fail we do retry two times and if you know that two consecutive tries are passing we say
37:25
okay so this test actually it's just flaky it's okay something just went wrong on CI and if somebody breaks the build he got the unicorn on his desk and a couple of random things we do I don't know how many of you guys are
37:49
web developers okay so almost like everybody in the room probably you also have this pain like every web developer with back supporting the old
38:04
browsers right and unfortunately some of you might for example building the current or system when the gentleman who is retired from Kentucky and he is laptop running Windows XP and then for example I6 he wants to run the car so
38:24
you better support this because he probably has a lot of money you can make on him right we are actually fortunate enough that we don't have to do this because our customers are developers so they usually are up to date with staff so we just support the latest versions of all US browsers also
38:45
only the latest version of IE which is IE 11 at this point when I say we don't support like lower versions it doesn't mean it will not work there it will be just if we get some bug that only repros in let's say IE 8 or IE 9 will not
39:03
spend time on fixing because it's just you know not very efficient like for now you know the biggest pain for us is Safari we actually support Safari only on Mac only the latest version but there are still a lot of weird issues
39:20
I'm not sure why like for example Safari is the only browser out of these that doesn't support internationalizations API called Intel like Safari doesn't have this yeah we had to polyfill and this is actually pretty expensive because to polyfill one culture specific region is I think
39:41
like 50 kilobytes so if you want to polyfill 20 or 30 to load a lot of code into into the browser into download all of this but it should be made by browser also many times we get some weird Safari bugs and recently I have seen an article that the Safari is a new IE whatever that means and as I
40:06
said you know when we don't test it doesn't mean it doesn't work somewhere so this is my friend's Tesla car and we run the portal there and it loaded but I'm not sure if it still works because that was like a over a
40:20
half a year ago I think I'm not sure if it's still work because again we don't run our tests in Tesla but yeah the same is with the phones for example you might try to use it it's hard you might be lucky you might be not if you have some weird old Nokia phone it might not really work and the
40:46
the last and the biggest piece we do at the end of our sort of development because the new portal became version 1 in December last year so like a month
41:01
ago Microsoft we call it GA general availability rest of the war say just V1 you're not better anymore you are V1 and we are better for almost year and a half if I remember correctly there are like multiple reasons one of the reasons was fast growth of Azure we have more and more people who wants
41:23
to put stuff in and they're putting in the old portal because you know this is what everybody was using they didn't have enough time to put it in the new one so on so forth and you know at the beginning I gotta know if you guys try use portal over a year ago but it was super slow like you could if you
41:40
have the newest machine it was hard to use it earlier last year it was getting better and better because you know we left the performance at the end right because first thing to get stuff working and because of many you know architectural choices and many reasons like it was even hard to to get the
42:04
basics to get all extension running to get all the features for all extension they needed because you know some some extensions they have some very specific things that we had to support and so on so the last round before before becoming V1 was the work on the performance and one of the things was
42:25
for example the extension reliability so I told you we load extensions sort of on demand we are saying hey please load this extension and you know when you do a lot of requests and especially if you have not the best connection you can just get timeout right and then you know this
42:43
extension is not loading and you know stuff is not working and if you load like five or six extensions it's pretty likely that maybe one of in one of 100 requests maybe one of them will not fully load at some points sometime right so then our goal was to have 99.9 percent so that means we have only
43:07
one failure per 1,000 requests to that and how we ensure that we did the retry logic so if extension failed to load we try again and we have timeout set to I'm not sure if it's 60 or 90 seconds but we retry two times and if
43:26
after two times doesn't load then we mark it as failure and before becoming V1 our goal was to to do this 99.9 percent and now we are above that. Another thing was the code size reduced so as I mentioned like
43:42
our code base is huge you have seen almost 1 million of TypeScript code lines so so there are a few people were working on this how how they can you know resolve dependencies in such a way that the minimum amount of code will be
44:00
load at the startup and also how to make this code as small as possible and for example one of the ideas was in JavaScript is to capture the calling you know nesting variables so even if you use minifier minifier not always can do all the work for you like for example if you open them here yes so
44:29
for example if you have something and you call some object and some property of this object and some other property and something else if these properties
44:49
are public usually a minifier cannot really minify because you know they don't know what will happen right and if you call it once it's fine but then later on you do again some property of this object other property
45:07
something else and you do it like a few times in your code it's not minified but if you capture for example for example let's see here I am
45:20
just saying here I'm saying this so I'm actually using the same thing in here sorry so actually I am using the same thing all over here right just I'm accessing different objects here right so if you go to the top of the file
45:40
and you say let other this or whatever and here you say object some property of this object other property and then here you can just say other this and you can say the same here so you can say sorry other this and one
46:13
and poo-poo-poo oops sorry what I mean yep and and and three to twelve
46:25
eleven and if you have this code and then you want to minify this then you your minifier will produce code that looks more like that X again this cannot be here this cannot be minified here but this here probably
46:44
will be like a X B X C and so on right so here you can you know per line you can say like 10 or 20 bytes so if you are calling it 10 times you have like 100 bytes and then if you spread it over a few files you can save 10 20 maybe
47:04
30 maybe 300 kilobytes and then this matters so it's like you know very small thing but at the end if you adds up everything it matters and so it sounds crazy right like you know you just captured the naming of objects
47:21
but but it worked another thing as I mentioned we do lazy loading of our components so for example one of the one part of the framework is controls so we deliver the universal controls for the users so you know if you're in the portal and you see for example this you see this is text box this is not
47:42
created by this particular extension partner this is created by us framework and they just reuse our our control and they just communicate with with the view model and getting the value and we provide the validation and all all the support for them and we don't want to load all controls at the start because
48:06
again the controls code base is also big so we just load control when it's needed so when it's displayed we asynchronously load them now we we are also started working on the lazy loading of our styles because you know
48:25
our our CSS are also pretty big and you know you might say it won't matter but then again if you have a big code base you have you know 50 developers adding code every day after some time it grows to such a such extent that but
48:42
it's hard to control and then it actually matters in the slow connections and this is actually this picture is from my coworker blog so you know what we have to do and all of you have to do as well you know when the number of users of your website is growing the number of features of your
49:04
website is growing you need to keep the page load time constant right and this is very challenging because you have bigger load but you still need to be there like because it's like actually it makes sense right you have more users so you'll be slower right but we can already do that we need to go
49:23
down instead of going up in here and you know how to do this so in this you know simple algorithm here right we just measure different parameters and figure out maybe this will do we do this change then measure again is it is
49:40
it better is it improved if now then try different things and if it is then we measure some other things and we come up with other ideas how we can do stuff and that's how we we come up with idea of the relocatable extensions that we you know run the client actually clients like JavaScript on the server and actually add tomorrow there is a Steve Sanderson talk here now
50:04
he's working on the running front-end JavaScript on the back end with ASP dotnet so I believe his work now was a little bit inspired by the work we are doing in the portal so this is pretty much all they have so thank you
50:26
very much and please find me after my session I will be happy to talk to you