How to use Nuxt Layers to encapsulate your code

[Music] what is it we we released D of view episode one yesterday it's it's Easter come we have occas the video okay okay okay all right no stress let's start looking into KNX layer straight away here we [Music] go when we build our applications things can get quite complicated especially then when it goes from one project to another and you have certain things that you always do right and of course then you can say hey let's encapsulate these things these maybe functions helpers utils and some kind of npm package and it works and then you might start saying oh yeah we have a component Library as well that's also in a package but what to do with all next stuff yeah of course you have modules that also makes sense obviously but it wouldn't be nice if we have for example multiple applications of products if they could just all depend on the same base you would update the base then you also know that you might have to touch on these product applications of course and this is something that works already also is written here with like a component library with composes that you can just extract in a package and with modules that's fine but also with npm packages yeah of course you need to set up a private registry it's a bit of effort so commonly you can also put them in a mono it might make things easier or use get sub modules if you want to nevertheless this is more or less a solved issue but what if you think further let's say you have these products and they are for a client each right but now you say okay two clients want the same product app here this one but they want different features or they want a different style so what do you do well I know Solutions with branches I know Solutions with repositories and once again subm modules and it all feels painful but with n it's a bit easier thanks to layers so what you can do is you can extend the tree to this and now we actually talk about layers as an proper application so let's say you have a base layer which is more or less a part of a next application it contains the next config and then whatever you need in here and then you can say okay we have another application that actually extends this base layer down here so we can have multiple applications extending that base layer here like the product applications and then say we have another layer on top so think of it as like an inverted tree that once again depend on this product app and does also on the base layer so we have like a white label application here and there you know the drill and that works pretty well the best part is we'll see that in a bit with layers you can override parts of the lower layers but otherwise you have everything ready at your disposal with full intellisense with your typescript support and with all the KNX app features without hassle but while this is a common thing I see around there's also another benefit that's not talked often enough about so you can slice your application like that especially if you have some kind of white labeling need but you could also say let's take just one single application and group it for example by feature you could say hey we have one application that's on the top and then we say we have a card layer search layer an authentication layer they all cover these part these parts or you could even say hey the off layer well we need it for other parts and then you could write layers that depend on the off layer then used by the application eventually so all in all you can spin up your next application with smaller sub apps and with layers you can then encapsulate the code in a nice and meaningful way and if you wonder okay this is a little bit abstract how do you actually do that well don't worry this is our job now let's jump into the demo app all right our demo application is wait not not really existent right I mean there's a package Json it's fine and we have a pmpm work work space ammo that I set up because we use a little monor architecture for our application which we'll initialize right away but also we will initialize the layers so what's in the application that's no secret you've seen it multiple times will just be a plain view next application right pretty simple but we can also use noxy in it to actually initialize our base layer so what we can do is we can use pnpx bring it to a new line pnpx noxy in a-t for- template layer and then say base so that's the name of the folder of course so what we can do is we can create let's say a partial nox application based on that layer template and we will do the same for the other layer called Layer Two that we described here and after that I will quickly prune some dependencies and remove a few unnecessary things to make things a little bit less complicated after the video you will easily be able to work with the layer template but um for now we don't need everything there straight away and then we'll look into what the template gave us all right if we open the base folder now we will see lots of things that are familiar like a package Json that makes sense we're model reper structure right didn't do much with that and N config wow so as mentioned before every layer is a partial n application but there's a component in here hello world we'll have a look at that in a second the problem is we don't really see like we don't see any app. viewer pages but nevertheless we can start the application and then see what's happening in the browser and here it already says Okay a full server is booted up that's nice so let's see what the browser gives us all right all right the browser shows hello world from Bas layer that's kind of expected because we used hello world component but it also says it here but the question is where exactly is this render because we don't have any app we don't have any pages so let's just jump back in the code and see what's going on there exactly being back in the base folder yeah we don't see any app. view any pages but let's have a deep dive in package Jason and see what's happening here in Def because on Def we don't run the def server based on thatn config here we run noxy def playground and the playground folder is part of the layer structure to technically test these partial KNX layers KN applications because obviously you want to maybe do some tests speed e toe tests or just show developers hey here are the things uh like let's have a look if if things still work you want to try try out some stuff so let's take a look at the playground folder here and here we see an appt view which renders our hell will component so there is where the things get rendered for the def server and also N.C config which uses the extend keyword and the extend keyword is exactly on how to use a layer so we basically have a mini playground application here in the playground folder that's a next application extending on the base layer only so this is already how you would use extends but this basically says extend the whole folder above so the whole base folder here and now we briefly know how n layers work so they're n applications they can have any kind of components pages. have to utils composes and so on and we can use them to BU stuff but what we didn't do so far is we didn't use the base layer and we didn't like extend that like we didn't say our application hey let's extend that layer this is what we'll do next and after that we have to see how we want to incorporate our second layer that we didn't use at all at the moment but once step off each other let's start with adding the base layer to our application add our base layer we don't have to do much except what is in that KN con for the playground here so we go into our app folder and I will quickly also start def server there get it up and running and now we are in the next config of the application and in here we can say extends and then point to SL SL sorry dot do/ base perfect now we say please this application here this app should extend the base layer like we did in the first example yeah similar ideas similar vibes okay but how to make sure that it actually works well we can go to our app The View here remove the next welcome component as we should anyway now why not adding the hello world component from the base layer so let's do Hello World here save this and see what we see maybe below right uh base layer component to make sure it's also the correct um View and let's see what happens in the browser now exactly what we would expect we have this hello world from the base layer and with the N death tools we see it's coming from base components hello world so it's resed correctly you can jump in there straight away and of course the base layer component with the carrot comes from app. view so we successfully used the base layer here um but well the message isn't correct right hell what from base layer yeah true what if we would want to change that what if we want to adapt that and override that component overriding a component for lower layers is not that complicated we can just take the component take the same name very important and put it in the higher layer or the higher application so in here we just have now components hello world and now we do hello world from applic ation Ln so if we check the browser now we will see exactly that hell World from application and if we track it down it's now our own hell World component that's because well based on how KNX T's component Imports the import from the more specific layers so the more the more higher ones in this case our application which is highest layer if you would say so are preferred compared to those um of the layers below so they have priority and are overridden great so now we can even override certain components of course not all because now our layers a bit useless of of layers and this is perfectly fine if you have presentational components in a white label application where you might say oh yeah H that's tricky maybe let's not show that as a table but like as a grid and you're like okay then we have to um overwrite that the component in that case so there are lots of like valid cases way you want to do that sometimes also just to say hey there's a function and I want to change what it's doing for some um specific layer that's fine so the first case is kind of covered let's jump to the second case that I've shown you with the like off layer search layer shopping cart layer how we would realize that well we do that with our Layer Two that we haven't used so far and use the base layer and the layer two in between where the ab on top of here uh extends both so let's jump into it and more or less use a component from the layer to layer and from the base layer to do that let's rename our base layer component here to do not hello world but maybe do some component and just write some component from base layer to make sure that can distinguish and now let's close these folders for Less um confusion and open the layer two folder here and it also has a component called hello world so let's change this and say layer 2 component for example and once again this can have many subcomponents that's all fine too and the next and last step well we want to add the component but that means we would have to extend not only by base but also by Layer Two and now in our app. view in app add the latest component and also rename that hell world one because well that was we changed that right and we don't want to use the hell World from here so we call it some component so let's use some component here and the layer two one was layer 2 component and you see already this works with autoc completion they are recognized already we can move this here and I didn't have to do anything no reload nothing so we're good to go would say and now in the browser we should see the components from both layers and this is exactly what happens perfect so here we see the base component some component that we renamed that's perfect that uh works as expected and down here in Layer Two the layer two component and that's a very very simple example on how you can use two layers side by side of course they can once again have other layers as well so if you'd want to you can even say I have a layer depending on the layer and so on and so on and here we are offering layers should be a breeze with that as usual the code is linked in description below as all the other references so don't forget to check that out and might use it as a starting base or just see okay this is connected let's uh code along however you want to very important there are a few caveats to mention when using layers so first it's really nice that you can extend folders locally and that's not it that's actually more featured in a caveat because you can extend repositories like GitHub bit bucket gitlab and so on and you might have to do a little bit more to actually access them when with an access token when they're private when the public it's a bit easier and you can also extend npm packages yeah so you can also share your layers as packages but when you extend layers and they use an alias in a path so let's say you do import whatever from at slash or till the Slash and so on that might not work in your end application and why well because these aliases they always point to the Source directory of the running next application and if you run your app then the ad from a layer below they will point to the app which is not the desired way right not not at all the thing is there is um a consideration to create named layers that also then have their named aliases there is an issue tracker tracking the progress on that and it might come in the future but that would solve the issue so then you can say at at base slash and so on so on which also make it easier to access files from layers below even though you might want to override them or use them and then do something else with them nevertheless this is all a little bit in the future but right now the layers are still pretty powerful I've seen you in action and quite some projects and generally people are happy after they figured out how to use them especially because use you can use all the KNX goodies like the Auto Imports we've seen the modules and so on and so on so now it's your time make your projects modular layerable however you want to call it and compose nice things out of them reuse stuff and get going if you have any questions of course regarding to layers if there's anything maybe we should build together with layers please drop them down below as usual or read all of them and come back to you um I know layers is a topic that lots of you want to see covered so here we are and other than that of course stay tuned for the next videos and please have a look at the newly released podcast with Michael T and me called Deja view if you haven't noticed or heard yet a link to the episode is here and also in the description or maybe here mirrors weird anyway um that's it for real now check out the view check out the other videos on the channel and latest see you next week stay safe and happy [Music] hacking [Music] oh

Channel: Alexander Lichter

Views: 3,651

Keywords:

Id: fr5yo3aVkfA

Length: 17min 7sec (1027 seconds)

Published: Fri Mar 29 2024