Rendering JavaScript on the Server: Angular Universal
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 |
| |
| Alternative Title |
| |
| Title of Series | ||
| Number of Parts | 61 | |
| Author | ||
| License | CC Attribution 3.0 Germany: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor. | |
| Identifiers | 10.5446/54949 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
Plone Conference 201740 / 61
3
11
14
21
22
25
26
27
33
34
37
38
44
45
53
55
57
58
00:00
Server (computing)Computer-generated imageryGamma functionPrice indexMeta elementVideo gameVolumenvisualisierungWebsiteFingerprintPointer (computer programming)RootRight angleCartesian coordinate systemHybrid computerSingle-precision floating-point formatWeb pageWeb 2.0WebsiteFigurate numberPhysical systemAxiom of choice1 (number)WeightMeta elementInstant MessagingOpen sourceArtistic renderingWeb applicationMultiplication signWave packetDifferent (Kate Ryan album)FrequencyGroup actionServer (computing)Information technology consultingSoftware developerOnline helpTerm (mathematics)Complex (psychology)Real-time operating systemGoodness of fitDigital photographyMereologyMobile appView (database)TwitterCore dumpProjective planeCircleFacebookSource codeRoutingComputer animation
05:55
Link (knot theory)Social softwareWeb pageServer (computing)Single-precision floating-point formatWebsiteCodeString (computer science)Bootstrap aggregatingFermat's Last TheoremCore dumpMaizeComputing platformAnnulus (mathematics)Software repositoryReading (process)Common Language InfrastructureProduct (business)Multiplication signSoftware bugRight angleRoutingWeb browserRevision controlUniverse (mathematics)Annulus (mathematics)Projective planeComputer fileMobile appSoftware2 (number)Abstract syntax treeCartesian coordinate systemWeb pageLink (knot theory)TwitterUniform resource locatorCASE <Informatik>Fiber bundleAndroid (robot)Web 2.0Client (computing)Bootstrap aggregatingGoodness of fitData miningAbstractionDemosceneCode1 (number)Source codeStructural loadServer (computing)Normal (geometry)NeuroinformatikShift operatorDifferent (Kate Ryan album)Boom (sailing)Single-precision floating-point formatComputing platformIntegrated development environmentWebsiteScripting languageIsomorphieklasseSheaf (mathematics)WikiTerm (mathematics)Open sourceMobile WeboutputFactory (trading post)Bit rateMedical imagingFacebookRootGroup actionSoftware repositoryTouchscreenCore dumpBoss CorporationBitAngleConnectivity (graph theory)String (computer science)Module (mathematics)VolumenvisualisierungMetadata
15:43
Java appletMIDIContent (media)Web pageRevision controlFacebookFloating pointCanonical ensembleTwitterComputer-generated imageryClique-widthAbsolute valueRootCompilerWeb browserInjektivitätTime zoneComputing platformGame theoryDew pointServer (computing)Module (mathematics)Fluid staticsAerodynamicsClient (computing)VolumenvisualisierungChi-squared distributionGamma functionLarge eddy simulationLatent class modelDependent and independent variablesInjektivitätRight angleCodeMultiplication signMobile appRoutingBranch (computer science)Universe (mathematics)Product (business)TwitterSubject indexingRepresentation (politics)Meta elementWeb pageExpressionLibrary (computing)VolumenvisualisierungWeb browser1 (number)Uniform resource locatorCompilerSlide ruleGoodness of fitFactory (trading post)DemosceneServer (computing)Hand fanMereologyBitRun time (program lifecycle phase)Module (mathematics)Home pageComputer configurationRevision controlSystem callOpen sourceInheritance (object-oriented programming)CASE <Informatik>Single-precision floating-point formatConnectivity (graph theory)AngleRootNormal (geometry)Medical imagingComputing platformMathematicsInternet service providerRegular graphObject (grammar)Division (mathematics)Different (Kate Ryan album)Router (computing)PlastikkarteTime zoneIntegrated development environmentWebsiteHash functionNamespaceCanadian Mathematical SocietyPoint (geometry)Abstract syntax treeExtension (kinesiology)Scripting languageDataflow
25:31
Dependent and independent variablesVolumenvisualisierungEntire functionServer (computing)Client (computing)Maxima and minimaDiscrete element methodComputer-generated imageryEuclidean vectorWeb browserState of matterHeat transferOvalBendingWindowInjektivitätRevision controlModule (mathematics)Fibonacci numberComputing platformComputer iconClient (computing)Computing platformRight angleVolumenvisualisierungDependent and independent variablesWeb browserType theoryServer (computing)Slide ruleSoftware frameworkCASE <Informatik>Subject indexingComputer fileCodeObject (grammar)Connectivity (graph theory)InjektivitätMobile appWindowMultiplication signNavigationSystem callMassSoftware testingBootstrap aggregatingHeat transferError messageUniform resource locatorCache (computing)Module (mathematics)HTTP cookieAuthenticationState of matterComputer animation
30:49
Online helpWeb browserComputing platformVolumenvisualisierungServer (computing)Client (computing)Time zoneInformation managementSoftware repositoryGame theoryComputing platformIntegrated development environmentWebsiteObject (grammar)BitWindowStructural loadVolumenvisualisierungRight angle2 (number)Server (computing)Multiplication signSystem callCodeScripting languageMeta elementMobile appLibrary (computing)Web browser1 (number)Bootstrap aggregatingConnectivity (graph theory)TouchscreenDemo (music)Goodness of fitSoftware frameworkGreatest elementSet (mathematics)Stress (mechanics)InternetworkingHypermediaCartesian coordinate systemTwitterComputer animation
36:06
Computer animation
Transcript: English(auto-generated)
00:10
I'm mark Bozek I'm the founder and CTO of deaf help online and it's a consulting development training firm we're located in Florida right now but work with a lot
00:22
of different startups to Fortune 500 companies right now trying to help them upgrade their angular projects and basically get their teams up to speed things like that so and today we're gonna talk about uh skip that slide sorry so we talked about angular Universal but before I get into that I
00:42
kind of wanted to give you guys just a general background and like a nice basically history of the web and let's talk about like server-side rendering JavaScript in general you know because I think to me it's like the future of the web or at least for some of it so anyway like I said I'm mark check out our
01:03
website dev help online it's still in the works so right now it's very bare bone there's a really serious photo of me I'm actually a fun guy I don't know I think I need to update that and I'm actually also part of the angular universal team so I work with a couple of guys from the Google angular core team and a lot of open source people to
01:22
kind of build upon and improve the angular universal which if anyone's ever heard of it it's basically rendering angular on and node so get into that so Who am I just remember my name cuz it's kind of silly it's Marc PI Zack but just felt funny
01:42
it's polish so go figure you can find me online at mark pi Zack I try to blog as much as I can hopefully more soon but if any you want to talk about anything angular in general just hit me up on Twitter always free chat so all right so story time I kind of wanted to start out
02:02
with talking about in general terms the web right and where we came from where we've been and kind of at least where I see it going so you know I to me it kind of you know obviously it started way before this but everything started out kind of server rendered right so we had
02:22
things like PHP net anything a JSP whatever right and there was a lot of pros to that a lot of cons so kind of to get started let's say I'm just gonna generalize that whole period of time and call it server side
02:40
rendered right obviously it's gotten a lot better since then but I kind of want to have some laughs and how bad it used to be right so this used to be Google pretty ugly right I mean this was Amazon if anyone remembers and we used to do a lot of chatting there was Instant Messenger
03:01
there was chat rooms and you know some things have changed but some things kind of stay the same right we've everything's been replaced now we have facebook Messenger we have slack and we've almost gone full circle right it's pretty strange but it's the way the world works right so some of the things with server-side rendering that I
03:20
thought was always really beneficial and like they did well was you know we didn't realize how good we had it back then when you let's say you're doing a PHP app or whatever SCO is as easy as just basically Natick adding a bunch of tags right meta tags or title it was super simple right it was great for static sites a lot of other things right
03:41
but some of the things that you know it was lacking right was mainly user experience you know we had to get to any page you have to do a full reload right everything constantly so like there wasn't that rich immersive experience you know so you know and everything there was a lot more server requests in
04:01
general right so you know what did the web do you know flipped everything upside down and all of a sudden the cool thing was single page applications right so whether you did a hybrid with little jQuery or you went full react or angular you know what have you single page applications now now are cool right kind
04:22
of cool so I'm gonna call them client-side rendering for now and like CSR so if you've never seen these acronyms don't worry I think we made them up but so but with single page applications basically this happened and we had this massive system which is basically a nightmare to work with and every few weeks you kind of felt
04:44
like this right I mean you're all you you kind of who never sure of yourself it's like am I making the right choice you know one day angular next day view then there's react then there's a million other ones so it can get a
05:00
little frustrating but some of the things that client-side rendering does really well of course is user experience right so that's kind of why everyone switched right so we got that really immersive experience you know everything you could immediately see when things were happening right the really quick page transitions it's perfect for really complex web apps and things with
05:21
real-time data and you know the best thing is really just it you it feels like things are happening right you click on something and maybe a modal moves there's animations right you can't do that server-side rendering so a lot of good stuff but some of the downside right of course is no snow SEO right so
05:40
typically when you you know view source on any front-end app this is what you see right you just basically nothing and it's not personalized for that for that exact route or anything right so basically nothing and of course it general longer load time so you get to
06:01
that route and then you have to load you know megabytes of JavaScript files and then all of those have to run and process and then bootstrap your app so you see this a lot and that's also kind of a con right I mean if someone is on a slower network let's say 3G and it takes five seconds for your app to start up
06:21
you know Google's done like experiments and stuff on this typically if a page takes longer than three seconds most people will actually leave so you actually get a lot of bounce rate because of that so once again kind of kind of a not a good thing right so so with all this together you know you basically just rewrote your app you know
06:41
you did it in react or angular and all of a sudden you realize this isn't good either and your boss is pissed and then you're throwing your phone on the ground you know so what do we do from here right so the goal really want me ideally what we want is we want the best of both worlds right we want SEO we want that really quick paint you know you see the
07:02
application right away we want you know if I copy and paste the link to Twitter or Facebook you want to see that preview with the image and metadata and you know we want the user experience want to be interactive it's almost sounds delusional right if it's possible so you know can we get that right so the next kind of shift
07:22
that I noticed in like the web in general was someone I think 2013 coined the term isomorphic JavaScript which sounds kind of like a weird chemistry experiment I think it's a crazy where I prefer the word universal and I think that's why the creators of it called it that I mean the idea of it is basically
07:41
you want it to run on both environments right the the browser and the server so in general the how it all works right you have your you have a JavaScript code and we want that same code to run on a server and on the browser so that's basically isomorphic or universal
08:02
whatever you want to call it which to me sounded like a fairytale because I was like how could you how could you ever do that like there must be a million you know and that's kind of how I felt this was years ago when I first heard of it and I thought it was a joke you know I thought there's no way that's possible you know I have to see it first right to
08:20
believe it so but someone had then explained to me what it really was so it's basically the code give your code you sent it to the server it's supposed to serialize it right so it takes your entire app at whatever URL or whatever portion of it you're at sorry creates the all the HTML for that sending it to
08:42
the browser the browser then in the background since it has those big bundles starts loading them it starts downloading them bootstrapping and at the end of the day everything finishes and all of a sudden you have a client-side out there buddy catch that I write it go to quick
09:02
we'll be going over in a second anyway so here comes annular Universal sigh I I came about to the project about two years ago and angular Universal was their solution to kind of handle this and make this work it because if you
09:20
remember in angularjs which is the older version right it wasn't possible to do this because angularjs is really tied to the browser right there every everything was based on the Dom and things like that the new angular is very abstract so that's why you know everything's done using like all these abstract abstract
09:41
syntax trees and things like that so you're able to create your app in different environments so if you ever use native scripts as well it's done similarly right so native script takes your app and basically renders it on a mobile device for iOS or Android and it's able to do is because of how
10:00
abstract it is so they basically create their own engine on top of angular's so Universal does the same thing and the founders of our creators were Patrick Stapleton you might know him as Patrick jeaious and Jeff Whelpley really good friends of mine so they created this project because they had they needed this for their projects right and Jeff
10:22
Whelpley actually has created a I think he hasn't working in production but for angularjs he actually has a way to server render it so if you want to find him on Twitter bug him about I think it's online somewhere I forget the link but so anyway so these guys actually created it and to me it's kind of amazing because the the whole project
10:40
actually didn't come from the angular core team itself it's originated by people like us right just random open-source people and then eventually got moved into core this year so some of the other people on the team and me of course right Jason Jean who doesn't put his picture online Alex Rick vive and Vikram from the angular core team Jeff
11:02
cross who was also used to be in the core team now he's at Noir wall and Waseem segmen from Saphir and a lot of other people a lot of big contributors yeah so like I was saying it was open source it was its own repo and now it's actually part of angular so if you've ever tried to use
11:20
it in the past it's a lot safer now it's a lot more tested it's and it's actually within the same codebase so you can kind of it's really production-ready now it was before but not really so kind of like we were just showing so the way we handle that right as you take your angular app right so that's your app
11:41
your root component everything inside of it you're gonna run it on node using something called a render module factory right this is just like an overview don't worry we're gonna take the whole app basically turn it to a long string send it to the browser in the background we load all of your angle angular bundles everything and then platform
12:01
browser does its thing and then and then BOOM so everything you've already known right now we have a normal single page application with angular right and actually recently Jason Jean from Forbes got angular the CLI integrated with Universal so this actually makes it a
12:22
lot easier to start and if you even want to take a look at it now if you're on a computer just go to angular slash universal starter just make sure you go to the CLI folder because there's two different versions on there so now with the CLI it's a lot easier all of the crazy web pack stuffs hidden and it's a lot easier to get started right and you
12:43
can see there's two different ways to get it running and everything like I'll get into those in a second oh and if you already have an angular seal is anybody uses the CLI before got a few awesome so if you already have an angular app written in it you can check out the CLI wiki at that section a really long link
13:02
I tried to shorten it check it out there because it has like how you can get started with it easily so before I get into kind of how it works I want to show you guys what it is so you know what I'm talking about right so this is right here a static like this
13:26
is a regular angular app this one right and what I'm gonna do is I'm gonna slow it down a little bit to do like a fast 3G and just just so we can see the transition a little better and I'm just
13:40
gonna reload real quick so this is kind of what you're used to right let's see on this on a phone you get that loading screen this is also a really simple app so the fact that even takes a few seconds that's crazy enough right so you can see we get that loading which is kind of ugly right sorry I didn't style this very much and you can see it took
14:00
about like four seconds on a fast 3G just to finish bootstrapping map right so like we were saying earlier if certain people will leave the site within a few seconds if it doesn't even if they don't see something that can work with starts scrolling interacting with it so so this is just a regular angular CLI loading everything
14:23
client-side rendering right right over here we have the same exact app but we're gonna do fast 3G as well and we're going to hopefully this is the right one there it is okay so here we we have it using Universal so in this case I don't
14:43
really have much going on this app so it took a hundred milliseconds for it to get that initial paint so the like basically the device it's usually a little slower than that but I'm obviously localhost yeah so I mean we basically hit the server the server rendered it so quickly and the device
15:01
immediately got a painted app which is great and then you could see behind the scenes it was then creating it and also took three and a half seconds for it to become a client side app but the anyone looking at your app or on a device or on the web they got the impression and like the perception right that
15:20
really quick and there's something there I mean no one's gonna go to and immediately start clicking on stuff so even if it takes a few seconds you're fine you know and more importantly if we do view source for both of these this is the client-side rendered one and oh can you guys see that I don't it's obviously all truncate is
15:42
like production right you could see there's really nothing in here we have this app root and I statically put in this loading text right we don't have we have the meta viewport but there's no title the title is the original index title we don't have any meta tags or of anything right we go over to the universal version same exact thing but
16:02
now you can actually see the whole app is so maybe you can't see it there it is that better right so now you can see everything actually got rendered so inside of this app root you can see we took the H ones to image although all the URLs the code that we got from node and even some of the meta
16:22
tags you can see the title changed a blown fan page home and I don't know if I added a new Metis I'll show you this one has some bear with me here we go so this is just a different route so you
16:42
can see in here actually loaded it up with all the meta tags and it's it's literally just as easy as it used to be there's a there's an angular service called meta just include it in any component you couldn't have it be part of the router or whatever and you basically just update tags in there and you say for meta name Twitter card I want it to be this for Twitter site I
17:01
want to be my hash tag whatever so you can see everything here we got flow and kampf lazy loading page I'm later on today I'm going to post this whole example so you guys can take a look and mess around with it it's really easy to use and you know does that make sense right pretty cool I thought
17:22
all right so behind-the-scenes basically it's a lot of dependency injection right which does anyone unfamiliar with dependency injection right it's you know you're basically swapping things out so you're saying every time I want to use logger swap it out for super lager right
17:42
and you don't have to change your codebase at all all your code could stay the same gets the reference logger but behind the scenes is actually going to call super logger right and a lot of these things are go sing earlier if possible because anglers compiler and the renderer they're not based on the browser right so we're able to swap these things out and say instead
18:02
of creating the app for a browser create it from node right and of course a little bit of magic so these are some of the things that are typical you know when you're making when an app's being created right so you have like the renderer you have any time you're doing
18:20
HTTP calls typically gonna call browser HTTP right the platform location is anytime the route changes things like that and obviously the way all of your styles are rendered right because well in the browser there's native you can emulate things so what we do for Universal is basically swap them out and provide something different right so
18:42
anytime the app is about to render things we use a server renderer which is it knows your node land so it creates them differently right and any time you make an HTTP call we're actually gonna use nodes xhr to make the request a node but you know everything's wrapped in
19:03
zones right which is a part of the angular library and zones is basically like it's just a wrapper around let's say timeouts anything async it lets you know when things are done when things go wrong right so we wrap everything around and that so we're aware of it right so if any of your HTTP calls make make an
19:23
error or like when they're done where we angle irnos and basically this is how and the app knows it's finished right cuz let's say you get to an app and you make two HTTP calls one for products and one for to see if they're authenticated right because of this
19:43
we're able to be aware of it in node when they're both done and since they're rendering everything else finished all the HTML your HTTP is done we say okay we're all set and then we send it off to the browser you know so kind of a long story there sorry I don't funny but it
20:00
cares you know and then a lot of other fun stuff like document has been changed to Domino which is just an abstract syntax tree it's just a different it's like a JSON representation not JSON it's like a long object of your HTML right so think of your eight-year whole app as
20:20
objects you know so you have like your body tag and then it has children and that's all of your divs and everything in there so you know look at like I said things are different a node right and the other two same kind of thing we're just we're just making sure we know how to deal with styles and how to deal with routes changing so sorry that was a
20:43
little bit behind the scenes right so this is the typical angular app right you've got your app module you have your main typescript file and then platform browser so basically with Universal all we're doing is forking it and we have two different branches of it so we're gonna have an app server module a main
21:01
server and platform server right this is for the four node server everything an angular app is basically your main component and your normal app so you don't have to touch anything there you're basically just creating a little bit different starting point for your app right based on the environment and
21:22
this will be really similar in for that if you like I was saying if you got native script so that's done similarly so just a dig in a little deeper right normally of your using browser module right so an app server we're actually going to import everything that your app module has so you can see it's like an extension of your normal app and then
21:41
we're gonna import server module right and what all server modules doing is a lot of dependency injection we're just talking about so in there this is like in the actual code these providers are like there's like 30 things inside of there they're basically just dependency injecting over top of everything normal right you know what to worry about this
22:01
I'm just showing you case you're curious like so this is all you need but behind the scenes it's doing although all the magic right I'm just trying to like make it not as mysterious you know and so the other thing that's cool is with something like this there's two options you can go right you can statically generate all of your pages at build time
22:22
or you could do in my runtime right and so what does that mean like if you wanted to generate static ones it's you could think of like a CMS right and your pages aren't that dynamic or there's many only certain pages you want to generate so in this case I'm statically good and generate index about and contact us right and they're gonna once
22:44
you create them with Universal they're just gonna toss them in you're just fold ER and you can literally just serve that up however you'd like and those will be regular HTML pages built to be fully rendered versions of your app dynamically rendering is more it's done at runtime right so in this case we're
23:02
actually gonna have that node server and every request that comes in for whatever route for home page for about us for products it's gonna do it at runtime because let's say your Amazon you know you can't statically generate bicycles right you need every every time it's
23:20
gonna be completely different so this is usually the use case most people are gonna go down you know I'll get into this this is kind of the gist of it don't use this code right here because it's kind of just mock but you can see right here so from basically saying for every requests this is a node server by the way for express for every request
23:41
I'm just gonna pass in that a OTD angular module right nao T just means like ahead of time compiled gonna pass in that original index.html page which usually is very blank or it's just has like your app route the current URL and when it's finished I'm just gonna pass the HTML to the
24:01
browser so it really it's nothing fancy this is kind of all you need and then a few things like I was showing in the previous slide it takes more than a few minutes but if you download the starter all this will be hooked up for you you know you you have to worry about it it's it's pretty well-documented as well so in there you can kind of get a good idea
24:21
of like we're to start what's what you know what's the purpose of everything so this is you doing everything manually and with render module Factory but you know I'd recommend just use the we created an express engine which kind of does some of this piping for you you can find our angular slash Universal and there's actually more libraries in there
24:41
and there's more to come so this this namespace and this is actually where the old universal used to be it's gonna be now it's gonna be filled with like third-party and open source modules things that make your apps better pretty much anything for universal anything you'd want so keep an eye on that and
25:01
using the engines look it's a lot cleaner we pass in that app server module and that's it and you can see right here we're actually passing in same thing so for every request we're just rendering the engine if you're not familiar with Express engines don't worry about it but it's it's doing what
25:21
we did on that last page and some just behind the scenes and we're actually passing in every single request and response so you know why does this matter what's nice is now because we're doing that inside of your angular app you can actually using the injector you can grab these things so you can grab
25:40
the current during a server render you can actually grab the request in response so let's say you have cookies or authentication data or anything you could pass in anything through node and access it within your app so let's say they're already logged in and you want the server render to say you know welcome mat or whatever this would using
26:01
this you can grab all that data and actually make it within your app everybody with me so far sorry if it's a bit much I know it's a little crazy but it's worth it so I kind of want these some of these the next few slides are basically I wanted to go over
26:21
typical gotchas and problems with SSR so these will happen no matter how you do it so no matter what framework or anything one important thing to realize is that each one is gonna render so when you hit the server it's gonna render your app it's gonna do it one more time on the client side right so why does that matter if you make an HTTP call and
26:43
component let's say component C here it's gonna trigger it again on the client and the reason that something like that might matter is because it's actually gonna flicker right so first you're gonna get like all those bicycles let's say then they're gonna disappear right before bootstraps all right when it does booster and they're gonna appear
27:01
again so not only you're hitting the server twice you're getting kind of a bad user experience things like that and we all shot a fix that in a second if you use anything like window or document inside your app that's not gonna it's not gonna end well right that those things exist on them in the browser but node is just gonna throw a real sweet
27:21
error that doesn't really explain anything and just shut down so no bueno so how could how can we take care of some of these problems right so coming up in the newest in 5.0 it's actually me something called transfer state so right now that's an RC I don't think it came
27:41
out just yet but what this is gonna do is automatic you can either manually set things to transfer or using the transfer HTTP cache module it'll automatically do all of that wiring for you and it's as easy as literally adding these few imports so for your app module and your
28:00
app server module you just include the the cache module you can see what there's one for the browser and one for the server right now when we make that call it's actually going to send all of that data down over the wire in the in the index file that's like a JSON blob it's going to reuse it on the client
28:21
so it's kind of nice so not only did you save her you know you didn't make two round trips to the server you actually you got rid of a flicker and the user once again had no idea they just think perhaps crazy fast so ya know the one I was saying like be careful with the window right it's only on the browser
28:41
but with dependency injection right well you could take advantage of it in your app and do whatever you want so right over here I kind of just made a this is kind of like a window right very mock you could put as much or as little as you want in here and in here you could say I just kind of stubbed a few things right for the browser I'm gonna use
29:01
dependency injection and provide the actual window and you can see I'm doing type of window you want to make sure it's not undefined otherwise that you know you don't want the server to use this because one like if I just had window there once again no one would have blown up so this is kind of like a workaround hack right so for the browser
29:21
we're actually getting the window this whole the whole this whole service actually got replaced with the massive window object with everything that's normally in there for the server you can see we're actually providing and using that mock so cuz you know in the server we don't we're not we don't want to touch the navigator we don't want to do location we want to make sure any time
29:43
someone does window nothing happens right and don't worry about it right in here another like big I'd say pro tip is with the universal we have something called its platform browser so whenever you want in your code you can actually make test to see and make sure
30:02
that you're which platform you're in so you can see here I'm taking advantage of a couple of things right so one we're making sure we're in the browser and then I'm using that Windows service to do something crazy like use jQuery right which everyone you're not supposed to do with angular but people do apps sometimes need certain things right the
30:21
world's not perfect but by doing this we can actually do whatever we want so this this code basically it's completely ignored on the server but in this case and the browser I'm going to do something to the window or to the body sorry so kind of cool it's just a way of basically ignoring things like hiding it from node you know no it's pretty strict
30:41
and also something new in five-o is you can actually use that document that is provided in the node environment that the one I was talking about that's like an object a JavaScript object anywhere you want you can actually use it like like almost like it's the browser so in here I'm actually querying a selector
31:00
and so anything you normally could do you could do and this would actually work in node I'm just kind of cool so this kind of just shows what we were just talking about so this is the same thing component using it the browser can that actually use this window but because of this node keeps running we don't actually use window in here so so
31:25
far so good there's anybody really confused there not yet one other big gotcha is just make sure you know with any this is a same thing with any framework really be careful with set timeouts at intervals right because
31:40
these things are gonna slow down your server render right if you put a set timeout or an interval that just never ends you're never gonna get a server render right it's just gonna keep going and no it never stops so same thing wrap them with his browser if you want to be really careful which I usually like to just use that window service just to make sure using the right one and this
32:02
like it like I said before just ignores it in nodes so that way you get that really fast paint because if you know let's say in your code you have a little set timeout of a second and then you do some kind of animation there is no animations a node so you know might as well ignore it right and of course if you guys want more there's there's a
32:21
bunch of more gotchas and definitely more documentation coming soon we know it's one of our biggest problems right now so check out angular universal if you want to see a little bit more on that let me see so in conclusion you know I think with
32:42
all this you can get I think the beauty of it now is we can get SEO we got social media previews we can well why is it missing some of my stuff of course there's a couple more in there sorry about that but basically with now I
33:01
think we can get the best of both worlds we can you have SEO you have a really fast initial pain of your application yet it's still really interactive right so yeah rich user experience you could post it on Twitter all everything's there you want as long as you provide it
33:21
you know just be really careful what you do so you know if you you're used to doing kind of things however if it's a little more strict you know but that's okay the good thing is by doing this you your app in at the end of the day is cleaner it's more platform performant and more reliant right and at the same
33:42
time you can even take your app and move it to something like native script which it's done a lot of these things apply to native script so if you get used to these things you can really easily make your app mobile as well so they serve around your mobile everything and one thing I can't stress enough be really careful with third-party libraries because if you pick about our Joe
34:03
schmo's random library he could have window everywhere and he'll just blow up you know and and when something like that happens you have to actually use webpack and swap it out and that gets a little confusing so try to find ones like you know ng bootstrap material is like almost compliant like there's
34:20
certain libraries that are they really do things carefully and you won't have any problems with right oh there they are alright that's strange so with server-side render we also got rid of that loading splash screen right which I think I don't know if we saw in the demo all right so this is the server-side render one when I push that
34:42
5 immediately we see the app right right over here get that loading so that now that's gone which normally doesn't matter for in a quick if you have quick internet or anything like that it's fine but you know most of the world has 3G right if your customers are using 3G the stuff
35:01
should matter it's give me a lot better for them they're gonna have that perception even if it takes a few seconds for them to get that render they're used to it probably taking 15 for some complex site to load and a nice very loose metric is typically it'll be like two to three times faster for like an initial paint so depending on what
35:21
you have going on just remember if you have you know an HTTP call that takes five seconds it's going to wait five seconds for it to render right so doing some of those tricks we're showing earlier you can actually maybe you can make sure you ignore that call on the server things like that nope so we went
35:40
from this to this ugly thing but now we have all of our code right we've got our titles our metas you can see down at the bottom even like that's like some of the HTTP call that was cached and sent along with it so like we were saying earlier can we get the best of both worlds I mean I think yes but it takes a little bit of work but I think it's worth it and thank you guys
36:04
[Applause]