Angular Schematics - The Solution to All Your Problems Webinar | ng-conf & Infragistics | #ngconf

and then with that I'll just turn over I believe Jason is our first speaker and I'll let them all introduce themselves but thank you for being here and yeah over to you guys thank you thank you very much Brooke I am going to share my screen real quick we've got several things we're gonna be our presenters today my name is Jason Baris I I manage the product development teams here at infra Geist --ax and I'm just going to do a few slides and then I'm gonna hand it over to the super experts victor and dom ian who will be really teaching us about angular schematics so very quick about it for gistic SIF you're not aware of who we are last year was our 30th year anniversary so we've been around the block a few times we have a heavy focus on desktop UI toolkits as well as modern web like angular so angular is a big piece of product for us and we're really excited to always participate in ng-conf and unfortunately we couldn't be there live this year we're really happy we're able to do this to just continue to talk to the community because you guys are what make us tick and give us the motivation to continue to build awesome product so this slide really talks about our material based components so we are unique in this space we have a set of UI components and controls for angular they're a material based it's called ignite UI that's what you're going to be learning about today but everything we do with this product is really about enabling you as developers to deliver amazing experiences to your customers so you want really rich user experience all kinds of cool capabilities but you want to be able to do it in an easy way that's really what ignite UI is all about and throughout today's presentation you're going to be learning how we use schematics to enable some of that in our product in today's presenters the two key guys are on the left in the right of the slide you're going to see victor and in there and their Twitter handles and then Steven is in the middle with the red aura around him Steven is on the product marketing product management side if you have any questions there's his email address but Victor and Damian you have their email addresses now or their Twitter handles now so please tweet to them I'll use all of our contact information to continue the conversation even after the webinar so we really want to continue to talk to you guys about what's what's going on so with that I am gonna stop sharing I want to thank everyone for joining I'm gonna pass it off to Victor and he can introduce himself and Dom Ian and then we're gonna talk about how we're gonna solve all of your problems today with angular schematics thank you all right cool as we said I'm Damian and my partner today is Victor we both work at him for gistic s-- Victor's a developer I'm an architect and we work at the team that handles quite a lot actually within the company we do our own version of a CLI and within that we also do angular schematics and we've been doing this for a while and it actually solved quite a bit of our problems so we'd like to share a few things with you today so maybe you can solve yours and as we said in the title it's gonna solve all your problems of course not as long as your problems are limited to solving world peace within the angular community or in all seriousness we we know we know what the pain points of everyone is like imagine that fancy new project you want to start and all the time you spend into configuring the structure bringing in tools and packages you love just to get to actually working on it and then what else that shiny new library that you found but it also comes with an instruction manual to get started so that's no good and then you also may may be sharing some I don't know the deployment or building scripts with your cut within your company or whatever else and that's something that needs that needs to keep being maintained all the time and then the bane of us all really is once you get that project started it's usually left there because everyone is too afraid to do updates right and because they're afraid of breaking changes and those are all things that we can help alleviate today so I'll actually defer to a quote from Scott Hanselman because it has stuck with me for years and it's actually about a completely unrelated package called EDIUS shoutout but it goes it goes it fits so well that I just couldn't resist using it and goes like this so whatever problem you have if you have this problem this solves it and I see Jason laughing thank you that should have been audible right so yeah and since we have quite a bit of information to share with you today we sort of want to whet your appetite first with some of the things you can accomplish with schematics we're gonna show off a little bit of course hello but yeah so I'm gonna turn over to Victor he's got some demo for you and I guess it's it's sharing can you see my screen yeah okay thanks Damian for the introduction so basically what I'm gonna show you is how you can add the grid did Daniel showed this grid to your existing blank angular project so what we have here is just a standard angular project just run just get from mangy new blank as you can see you have your app module your routing module when what we've done is just extract all the stuff that comes with the app component and baked into the home into a home I think you might be you might have a ghost directory in there I might yeah you're right yeah that was a ghost so yeah we'll show you how to add this grid to this blank project by doing a simple command like ng at ignite you I annular this isn't it's a schematic feel like a man so isn't angular's here like a man sorry which adds the package to your project sorry if it's a bit slow i'll talk over it and execute any logic that you might have attached to that hoax or say so this is done via schematics and during our presentation we'll touch on this and show you how we can do it for your own libraries what it's doing now is basically installing in being packages so it has access to all the extra logic that we've put in them it's taking a while so you have this problem here right now you're seeing is from schematics it's so prompt if you would like to include some polyfills to support older browsers so yeah sure we'll go with it and if you would like to include a CSS library that normalizes your containers sure why not and as you can see it includes some some packages which are just standard dependencies for our library and it also says that the package the base library is installed and now is installing our schematics package so you have access to commands that can allow you to quickly add these beautiful grid views or any other views okay can I interrupt really quick yes getting some requests that you increase the size of your code can you make it a little bit bigger yeah thank you yeah and I think to victors since you and dami are gonna be using the command line a lot you can increase the size of that font as well if you can I mean this is the only thing that we're going to be doing so I think cool so yeah as you can see the changes it's added it added some packages it's added the browser animation smaller to the app module this is done like behind the scenes so the user doesn't have to do it themselves we need this browser animations module in order for our grids to run and to cap those move animations the polyfills are added and all this is done behind the scenes without needing the user to actually improve anything so we all float a big part of this onboarding process off of them and adding the grid itself we've also installed our schematic package which allows us to run this command so actually Victor can you actually bump up the font on the console not right now I know it's not it's not the greatest experience ever yeah I guess so 24 can you see this much better thank you okay thanks so we just run this schematic gingy this is our schematic collection in this schematic name which is C short for component and as you can see this process with a menu which allows us to choose from several components or grids like menus gauges scheduling different charts or even more fancier scenarios like the one that was shown in the presentation with this grid like it promises for a name and then we can just cycle through this again this is also handled by the schematic logic or partly - kinematic logic or we could choose to finish this in run start and it's installing some other packages since these are also all floated from the start so they can save time and to save even more time I have this project running on another port and as you can see this is the result this movie or result in your project as well you have a grid where you can display a chart for selected roles if you select further roles this truck changes you have all sort of functionality like grouping sorting filtering you can click on a single role to display a chart by region and we even have a little service that simulates a live data feed so as you can see the little numbers change and what we hope during the presentation is that we'll be able to show you how to incorporate some similar logic in your own libraries so we can ease the use of your users and save yourself some headaches so I give you how what we want go through is a quick intro of what schematics are and then just jump right into it so how you can create your own schematics from scratch explain a bit about the API go over an example which will create a schematic very similar to this one so creating a component from scratch and adding it to an existing angular project and finally we will touch on these custom angular CLI cooks so ingénue ng add an NG update and also Damien will take a deep dive into the typescript API so you can save yourself even more headaches when I'm dating files in touching stuff in the file system so a quick intro to schematics for our schematics well they're basically the building blocks of the angular CLI you use them constantly if you even if you don't know it so like calling n GG C or ingenue is actually calling a schematic they work by making transformation to an in-memory representation of the file system called the tree so this abstraction is basically because it allows for better performance and actually doing stuff to the representation without reflecting it on your physical files so you can do a so-called dry round and it allows for advanced handling emerges so like if you have a couple of incoming changes to the same file you can sort those out all of this is done by rules which are highly reusable functions these can also be tested by themselves so that's really great because it provides the sort of modularity and they're also they also can be changed it's a it's a pretty fast API which we'll touch on for going forward and last but not least there's a they provide the schematics provide a collection where you can expose schematics to your packages users or you can keep some for internal use which further ensures where that modularity and testability and here as you can see are some of the schematics we each from day and I think most of us have seen them so let's jump into all ring how we can create our own schematic the an you think you've provided with provided us with a really easy way to get started there's a flavor framework agnostic CLI that lets you create and run schematics so all you have to do to get to get started on your own machine is run npm install this package and afterwards just called schematic blank and this will create a blank schematic after your schematic is created you can go in if you check the files would look just like a standard NPM package with a couple of exceptions first you notice in the package JSON there's a property called schematics which points to your collection the collection is the place where all of your schematics are exposed to the users of your package and in the collection schematic you have a pointer to an index TS file which exposes the schematic Factory and that's about it here you can see a quick snippet so this is the property you find in your package JSON which will point to this which is the body of the collection the schematic collection the interesting thing here is like the main point of interest sorry is the schematics property which contains the definition of all of your schematics so their names will be you will have to be unique so they can be differentiated by apps using them and they have a short description in a factory the factory points to a function in the file like in that index GS file we mentioned and for our particular example schematic this will be the factory it's a simple function that takes in an object an options object which holds specifies the arguments did the did the rule will take into account when running so if you want to pass anything pass it through this object and then the factory returns a rule which will be executed on the tree the rule itself has access to the tree so the that abstraction of the file system and the context the context has a lot of useful stuff we'll touch on that later and this example schematic just logs like quick message now let's talk about more about the API so what it can do with the schematics they expose a vast API which allows you to do all sorts of stuff including but not limited to manipulating files and doing all sort of creation of de deletion two things in the PI system or directories through the context you can log messages as we saw in the example schematic or chain different tasks so you can change NPM package installs or get fasts or even change our schematics which we'll do an example and last but not least it allows you to chain rules so operations on the files on the tree can be chained inside of the body of a schematic and also he emerged three states which we talked about earlier and we'll touch more later to better illustrate this we'll go through an example scenario we will we will create two schematics and call them in a third separate one one of our schematics will blog a message pretty basic our second one we'll create a file using the tree API and our third one will just change in using this context API to create the tasks and this is the expected output we can see like we expect to see a message and a printing the calls over the doll file was created so this would be our package or collection JSON sorry it would hold the definition of both the schematics so the config schematic will be one let's create the files our greeter will be the one that displays the message and our combined will be the one combines both how we do this is for the config schematic the first one we'll be using the tree API to create files as you can see we can check for existence of files so we can read the package JSON if it exists if it doesn't throw an error from the package JSON once we've read it we can take the content and write the contents in another file like we can take the name sorry we can take the name of the package from the package JSON and write it in another file so like a config file of sorts using a simple json stringify you know this is done through tree api from the context api we'll be taking advantage of the expose logger which gives us the opportunity to log messages like info or error messages if you want to stress out your users or warnings we simply just go context don't lager and yeah info or error or warning and it logs a message in the console and we'll also be using it to execute tasks as said there's an robust API that allows you to chain tasks define in chain test sorry and we'll be using this one run schematic tasks which runs a schematic from the current collection we have the greeter in config tasks already configured in collection and finally we have the options object which we can pass to the ran to the schematics running we're just past nothing because they don't care about the options these two in particular and afterwards we just chained them by doing context add task the task predefined and for the second one we do content add task the task we defined and this here the second argument is an array with IDs to which for which this task is dependent so it should wait for those and if this is executed finally it would execute this in an order next we'll go over a quick example of how to create your components connect to the one we showed which would also expand upon the the schematics API which we're currently going over so what we'd like to do is create a component example that that's an a custom component to an existing angular project by adding the component we mean similar is an GGC so creates the component files and adds the component to the app module but we want to further expand on that and creates not just the component with the blank key works as the blank in GC components are all we'd want to template the inputs and be able to pass a name for it and the type so to do this we'll take advantage of the following whale strictly typed the input for the somatic itself so it would be able to accept two parameters so the name and the type since we'll be doing a lot of stuff that we want to do a lot of the angular since GC does we'll call it internally and then build upon it and finally we'll use it some baking API exposed by the schematics which would allow us to change the the templates the templates the files sorry of the created in GGC component in build on top of them so we can change what is visualized this is what we want to input in our command line in the output we want to be files so I'll show you how it's done like in action I guess more like with preparation because we sort of yeah you don't but hey we'll go over house so yeah this is a simple schematics project as you can see we have the collection Jason this is the basic schematic we showed the one with the logger this is our component schematic as you can see you have a description it creates a component pretty simple a factory which pointers points to this index yes unless chemo which is the new thing with the schema you can control what arguments your schematic accepts so if we go to this to zoom in a little bit because the other visual studio is our input this one didn't this points to this schema and the schema defines like what inputs the schematic accepts so it's a normal Jason the interesting property is this properties which defines a collection of all the arguments you can pass to your schematic so here we want to name inside as you can see you can define a description for your property outside so strange boolean number and on bronze which interesting if the property is not provided you can prompt the user to to enter something so in this case if it's Stringer's we'll say hey please provide a name and you have to type in a string you can even provide a list so if your property is a hasn't it known it will only save values of that list so here the focus card and what type would you what type of component would you like to that so yeah it will display a list where you can choose from similar to our CLI that we showed in the beginning since this is typescript we might as well type our options in put into the factory so yeah we have a type on a name both are spring and if we go into the component factory for the components into the factory for the component schematic we can see yeah it accepts options of site component and then it tries to read your angular Jason if you don't have it it throws standard stuff and it all and does all this - just get the source route so app - a source dot - app and you'd see it returns a chain of two executions now what a chain does is do two rules in order on the word tree so what we want to do here is since you want to create a component first we want to call the angular component schematic because it's already done we believe it works we know it's tested so there's no need for us to reinvent the wheel we can when we can already use it how we do this is by using the external schematic method which is again provided by the API specify the collection which this is the collection with the defaults schematics is pulled by angular see you like oh this is the name on the schematic so component and the options we just want to pass options name when we run this this will create a component in our treat just the same as running in GGC name the second thing and the second part is the more trickier part here we're merging a source with the actual Tresor so what's a source well it's the state of the Tresor say and how do we get the source well we'll get it from arts and plates so angular's sorry the schematic actually API exposes a great range of functions which you can use to template your files so we can just write these as a string here but it will quickly get out of hand in terms of manageability so what we do what we're going to do is create our own templates so under the component file where we define our schematic as well we'll put a folder with files and files per type since we only have card it's only car here and in it we create we will define arts in place like this so if you can see the names you can see that they're a bit odd so and that's in plate itself it's not all that different from a component es file so type script file but you can see all these things they're kind of out of place well that's where dozen training comes in these brackets and % mean start evaluating an expression this - wise name and here classify name or actually it's persons that are going to be evaluated and this means stop evaluating for the path of the file itself these are done with double underscore and if you want to call a method you won't use brackets like in it's in place but you used at so name at there so it's kind of like a pipe in your angular components and like but instead of a line you use app and all the files have a dots and break in the ends don't worry about that this is actually pretty convenient because if you have a dot TS file which needs to be compared you don't have to actually like write custom rules for your TS config to skip over it it will just skip over it in the schematics templating API takes care of this so the way we call this is take all these files back in our schematics body take all these files and apply complaints on them so apply complaining on them is basically code with a simple dictionary object where we have definitions for these - arise and classify method functions which you saw in the template well they're actually pretty standard exposed by the by the schematics API as well classify turns the string into a class name so camel case with first letter being uppercase and that rise does yeah and the name is the name we want for our component so all of these will be evaluated in the templates and afterwards we just want to move these because the source is currently starting from here we want to move these to the default app root which we get here so source source - app and finally in the chain what this will do is apply this source so the changes we want to do on the files with the current state so the state where it already has the angular components fed out and we'll use merge strategy override because those are two sets of changes and you want the latest to come in so these and we can quickly build this by running NPM run build I'll just run the building I'll switch to the more zoomed in yeah I don't need this anymore so if we go into the to another blank project this is just a project where I dump leads we can call the schematic by doing an GG similar to the first time but this time we'll pass relative URLs to the collection Jason so when GGC enjoy schematic source collection Jason and the name of the schematic so component and if everything's correct this should run yeah see then the front which we put in for the name is now prompted because we didn't input any name so our name can be cool card or something and it prompts us with a list of types of components to choose we only have a card so I guess we'll choose a card as you can see our inputs that these components are all added to the into the existing project if we look into the project in Visual Studio code I heard I don't cap and get three foster all I do is just slow if we check here you can see that all of these parts in the templates which we want it to be a valid or properly displayed here so you have a pool card instead of app - tries name and cool card for the component name so I hope this was helpful and I'll be turning over to Damian just as a reminder you could if you're liking the seminar or I don't know if you're hating it because you can tweet at us on Twitter with Adam for gistic sand heading for ng call for a chance to win a one-year subscription to with Mike your wife render and do all sorts of cool stuff with schematics in our packages so Damian back to you I think it's Universal than everyone loves it so far so it's great oh yeah keep up the twitter chat as well right alright so I hope that showed you a basic glimpse into the schematics and what you can do and so far we've talked about mostly general purpose kinetics something can generate or something can automate either using dereference hematochezia live or benji generate command but if you want to go further there is some specific there's some points specific to the angular CLI that you can plug into and that's really where the fun starts so of course you all know ingénue command that's how we all start right but the thing is you can create a somatic that handles ingénue and that will be run when creating a new project of course the way to the way to tell the ingénue command to handle creation with your schematic instead of what it usually does is by overriding the collection entirely which is instead rather than the semicolon thing is actually done to a separate parameter you have to pass in but that's fine and of course you can already imagine what this can do right so say you already add two libraries when you start a new project or you well for example you want RGGI stores or you want your setup to be just so in terms of structure this will let you do that every single time you make a fresh project it can be tailored to your custom needs so the way to set it up is surprise surprise you add a new entry to the schematics collection except this time the name cannot be of your own choosing it has to be named ng - new because that is the way engineer command looks through your schematic collection and again below is a simple example of how to call that ingénue you pass in your collection in this case it's the same as the interest chimeric project but it can be anything else your own library and then you call it but and with great power and you know how that one goes you are really on your own after this point because once you once you write the collection on ingénue it will run your schematic only with the options you specify so anything you need created for the product structure you have to do yourself even something as benign as package.json or getting our file that's all on you now and thankfully because this is a schematic just like any other you can go ahead and reuse these schematics that angular has by default using their collection so yeah you can do that and then build on top of it or you can do something completely a custom that's up entirely up to you and then we have two commands that go hand-in-hand quite often that's mg add an NG update and the hooks for those and they are more geared toward towards libraries and their support their lifecycle and the first one I'm jihad runs when you install a library in a project and then ng update runs when you install a newer version of that library in a project right and when if that sounds an awful lot like a simple post install book we hear you but there's a significant distinction here this is better let me tell you I um I don't know about you guys but when I install a package I don't particularly expect a post install script to go ahead and touch any of my project source or spam my logs for that matter but that's a different story right but when I run in G odd or in G update I don't only expect I am NOT surprised by this I'm actually counting on it I'm expecting it I need this there's a clear communication of intent when somebody calls in G and they want your schematic to run pretty project they're asking for you to set it up or they asking it to me changes to make their project work even after the update right and as long as everyone knows about ng Aden ng update and uses them it creates a great ecosystem that you can create that you can make better at least for your users you can ease their set up their own boarding and the pains they might face while updating okay so a little bit of detail how to get how to set up your library or package within with hooks for in jad no surprise there it's again a schematic it will run when you go in jab just like we did at the start with ng at ignite why angular it will be run when your package is installed in a project and again this is something that can make onboarding for new users extremely easy because you can do all the configuration just like we did install additional packages make config changes setup styling set up everything for him so they would not have to do it themselves again nothing too surprising there a new entry in the schematics collection again the name cannot be of your own choosing it has to be in G dash ad except this time we don't even need to help hustle with the collection at all because ng odd is already called with your specific library in the name so we don't have to do anything else and then of course come come the migration so you've made your shiny awesome awesome library and then you made it easy for users to adopt it using ng ad and they're happy now when you have a bunch of happy users that report some issues or maybe they log feature requests for some great features and then you start implementing those and you realize well they're the things I made in the first version those will have to change a little bit like my public API or some configuration my library needs those who need to change for the new version to support those new great features and then I know it's our favorite past-time reading endless change logs but user not really like that most of us would just rather get it ready and not do too much and not face any breaking changes at all if possible and then just go to work so when we see migrations there is a certain distinction so why is that well don't you worry there's still schematics but they're special in a sense because they're configured just a little bit differently like from the set from everything else you do with your schematics collection so the way you call these is similar to ng add you go and chip date and then your library name and then you can also specify version it's basically like npm install' we are not kind of like that ng @ is kind of the same as well but again different purpose in an intent communicated through Ning those so again those are extremely useful for both you and the people that are using your schematics for libraries so we make use of those extensively for one main reason confidence it gives us the confidence as developers and vendors for a library such as ignite why for angular to make changes when we have to because we can migrate those and it also gives our users the confidence to run the next update and grab the shiny features because they should not be worried that their projects gonna break if they run if they get the new version because we'll handle that for them great so you can imagine how useful that would be okay so this is gonna be a little bit different this time because migrations are actually laser focused on their own thing and since you're expected to have an ever-growing number of them they're actually live in a separate collection although similarly used to use a property in your package Jason to point that collection and the major difference for those schematics is they each come with a version that specifies at which point should ng ng updating the angular CLI will run which schematic or cymatics is it can do multiples we'll talk about that in a second so here's an example of a package.json snippet that points that has a ninja break property that points the emigration collection and in chip date is a property because there are some additional configurations you can uh you can add to updates but we're not gonna dive into those too much right now and similarly to your schematics collection your migrations collection also has cymatics except this time the name you give each schematic sentry such as migration one right here doesn't play much of a role at all outside of testing maybe what does play a major role is the version so now you can look you can see this is designated as a version 2.0 2.0 2.0 so this will allow your users using the first version of your awesome library to update to version 2 and this schematic will be run when they when they update to version 2 and you can apply any changes you deem fit for their product to stay functional and what's great is once you never ibly reach to version 3 and you still have to make changes as per usual you can define yet another migration in this collection it'll be stamped is version 3.0 right and actually the great thing is angular CLI is smart enough to figure out if some user is actually still running version 1 if they're in they're updating to the latest version and those migrations are incremental and it will actually go on and run both derogations for version 2 and version 3 once they jump through the hook so it will ensure that all your changes no matter what version in between the way the user is updating from will be executed and this is a quick tip from us so if you're anything like us and you have a whole bunch of migrations then they'd just keep piling up since we keep releasing versions and you have more than one team working on your library or you accept open source contributions do yourself a favor make those migration make that migration logic reusable and configurable through something simple like for example this Jason that's our version of it but I've seen it implemented in other libraries and that's something I highly recommended you because you spare anyone else that is not you that you have written those migrations you spare them the need to actually understand schematics and migrations in detail to get something running all right fine so at this point I'm hoping you have an idea of what you can do with schematics and you have a bunch of things that you want to do when they're coming up and you it's a list and as well as once you start implementing functionality do you quickly come to the realization that you don't want to just generate files or overwrite generated content the whole thing you actually want to go into the source and make precision find little tweaks on tunes and make changes in the source and sure you can probably get away with string hunting and markup and you can probably get pretty precise and safe with that but trust me when when you go and touch the typescript files logic it's very hard to tell if you're actually editing the correct thing at the correct place so we don't really pretty with we don't particularly like breaking projects so we that's where typescript comes to the rescue now we normally associate typescript with the compiler it comes with and that's what everybody everybody's using but what you can do is actually tap into that compilers API which will allow you to parse that string source file gain insight on the source code itself and that will hopefully allow you to to make a correction in the code with surgical precision and typescript beating typescript of course you have interfaces for the core construct such as a program or source files within it and crucially a source file is also the root of a syntax tree that is a basically advertent a ssin of the entire source code you can traverse that tree you can you gain access to each and every single node you gain information about that node so you can touch on imports you can see what the import is about where it's from what it's importing variables their types basically all the other things the typescript compiler knows you can know as well and this snippet below is actually an example taken straight out of our migrations you tell us I believe so once you parse a source source string into a source file you can you can for example go over the top-level statements which include imports and class definitions there for example filter filter those out looking for import declaration this is something that we do for example in migrating rename changes and I'm gonna talk about that a lot I guess but this is something that we do when we hunt down for a for an import from our own package so we don't touch anything that we're not supposed to touch of course and we're looking for some imports that we have to rename or otherwise track further down in the code and manipulate so of course the syntax tree doesn't know it only give you access and knowledge on the source code you can also manipulate it so you can go ahead and create new nodes everything in the source tree is a node so you can create new nodes manipulate existing nodes or read and create new stuff so for example you can create a new import declaration or you can go ahead and touch on decorators the class decorators which would be the component on an image module decorators which we do constantly and now I know data is the best currency and the compiler API will give you D data but you have to do something with that data that matters that's what counts so one option to go ahead and do that would be to use something that builds on top of it and that will be the typescript language service and that will give you the smarts to your data if you will so it's about as powerful as it gets although I'm guessing there's a package out there that see if probably even more feature-rich but hey know what's right there so what you can do with with the language service I'm gonna give it just a quick example because I'll stick with the renaming theme so for example you can trace definitions or references just a variable or instance or find the rename locations for anything that you point it to which is basically like f12 and f2 commands and vyas code right and that's no that's no coincidence because the language service will give you just about anything you can imagine in terms of functionality although it is a lot definitely so you can trace a variable or a class back to its definition you can navigate code between matching braces if you want to single out the same a single block you can even check for errors after you've changed something or ask for code Corrections or go even wild and uber factors and if all that sounds familiar that's because the language service is basically what drives your ID your favorite development environment like this code so anything you can imagine in terms of feature you probably find it as a method of a service and now of course it wouldn't be that such additional power would not come without a cost right so a language service in typescript requires a host to run which is basically it's middleware to talk to your source code and I would normally just read off of the files but since we're running with schematics and those run with a virtual file system tree just like the one in there we'll have to do something a little bit special so when setting up a language service host the main the main version the main methods that you that we should be interested in is getting a snapshot which is the services' way to read your files and what you can do is bind that house to your virtual tree and use its API to return snapshots for the service and here's the catch though the method does exactly what it says on the tin it is a snapshot and the service does cache so the way to tell it to invalidate that cache is normally giving it the script version now there's a slight problem with that since the schematics virtual tree API doesn't really provide at least not publicly there is no timestamp on changes and there's no versioning built in so what you end up what we end up doing is version it ourselves and I know this might not be the way that everyone would go for that but that's how we did it we just made a map for every file we have to change an increment versions per change and how we how we detect those changes is basically by doing a monkey patch on the tree overwrite minute so we know every time that is called that is our way of doing it your mileage may vary if you have a good decent idea where your changes are you might not have to go there but I just had to mention it so you've dug through your source code and you've gotten a good idea what changes you want to make so now how do you go about actually applying those changes back in the tree so there are two ways to go about it depending on the scale of changes you want to make so you can do string manipulation because if you just want to replace a single nodes text it already has a started end index that you can find in the syntax tree or if you've used language service and requested renamed locations those who also Mack map nicely back to the string source and you can do that as well but if you really really want to go fancy with it you can just go ahead and redo the entire syntax tree yourself apply changes create new nodes edit notes do whatever typescript is nice enough to actually include the printer which is basically like a reverse compilation if you will because out of the syntax tree you'll not output JavaScript you'll actually output typescript back which is awesome there's again a small caveat with that and that is the printers you it does have some options to configure but they're not a lot and it's a little bit opinionated in terms of formatting so it will basically do double quotes and tap indentation no questions asked but again this is something that we do all the time the language service pretty much again to the rescue it does have a functionality to allow you to do file formatting so if you want you can ask language service with options including indentation in quotations you can ask the language service hey I want this file formatted to these specifications give me the play the places I should edit and you can reformat that file just the way you like it so I guess that's sort of it it's more of we're basically just touching on the surface here there's so much more you can do because schematics are just like your package in your code you can bring any other to you seem fit we just stuck with what's available out of the box but you can build on top of that as much as you like and it's a great way to ease the process of getting new users and keeping them and perhaps making them happy and so I'm sure the doubt would free up some time for you to solve all the other problems we have alright so I guess that's it and we'll leave you with a whole bunch of resources for documentation for schematics for typescript compiler the demo victor showed is also in github will point out everything that that we talked about we have an implementation in one package or another we have a bunch of them unfortunately but do ask will point you to the right direction we have we'll leave you a bunch of links and then we also have some tutorials and blogs from our infrastructure that you will get access to the slides I saw that in the chat I believe will send that out at some point I'm guessing the answer is yes yes so we're going we've been recording this whole thing and we will we'll haven't edited it just kind of made pretty and then in I don't know about a week or so we'll be able to publish it on the ng-conf youtube channel and then if logistics would like to do that as well they can but yeah we'll make this whole thing available yeah if you get us the link to the slides and things we'll make that available as well all right well in that case we're sort of open for questions yeah so if you want to go into the Q&A down there Damian you can find the questions and then we can just start at the top and work our way down okay so the advantage of learning schematics yes creating a abstract syntax tree project using TS more um I don't get what the project would be but if you want to use just more if I say go ahead but so far what we've been doing is using both because schematics are just the delivery tool for your changes you still have to figure out how to do the changes yourself so go ahead and do both cymatics are just the way the DEQ system is right now and it's sort of nice that that we have finally have an ecosystem where everything is known and expected so at this point when you start a project you sort of expect to run name jihad and you sort of run you expect to run ng update when a new version is there that's the default now that's the expectation for it and that's great so yeah I guess I should click answer live yeah all right because I mean it will probably mark it as answer yeah it just moves it into a different part of the Q&A okay okay so I can read the second question it's about you know the custom schematic where there is two parameters like name which was my card in the game type which is which was cap so the question is can we validate those parameters the name and the type thank you I know there are a few methods but they're built in there is an oh yeah you can define in the schema you can define patterns for the names but they were like an HTML tag and something else they're limited they're limited and they're not really too well documented you can probably dig those up from the for we do this all the time you can go into angular defecates packages and you can check out how they use it I'm fairly certain ingénue for example uses for the new project name it uses a HTML like validation since you can only input words in a - but yeah I don't think you can do like full regex patterns explosion thing although you can always once you get that in put in in your schematic code you can always validate that again and throw an error if it doesn't work for you I can only add to the previous one that is Victor showed there is a prompt and you can always use the prompt instead of yeah if it's a list that's easy if it's a baron it's trickier right so here's the deal this I'm gonna expand on that just a little bit more I guess this the schema you define for the schematic itself is sort of like the pre run if you will since the CLI will gather your options before any bit of your own code actually runs so that schema tells it tells the angular CLI or the schematics you like how to handle input but once once those options are generated based on that schema if they pass validation or not you can still validate them again because your code is run at much later point after you get the options already okay I'm gonna read the next question so you're a library author and you want to bootstrap an initial application it's very interesting should the override for engine you be added to the library or global separate package same with ng add it's not clear if users have to npm install the library first to get access to the schematics or the ng binary knows how to download and run those ok umm I guess it varies but for ng and you definitely want to include it in your package or main library because like we like we do with ours you do ng add the library like ng at ignite or angular you don't want it to be ng add some schematics prize package it's just not as convenient it doesn't really ring the same way or correspond to a normal install that you would do and so I guess the de-facto for ads at least the ng at schematic would be to keep it in your library and that is something that we do if you want to offload parts of the code that your end yet has to do you can install a difference American if the separate schematics package that's exactly what we did Michael Victor showed in the start when you call ng add it actually added the library itself and the schematics package because we actually need that schematics package to run one of its of its schematics for a set up so you can divide and conquer if you will and for for engine you I guess either way goes we found we do we do way too many things I mean don't you need the collection to be globally installed locally so you can run it oh yeah oh yeah that's that's a whole different story yeah yeah so that's that's a very good reason not to put it in your library because you don't need your library globally installed so yeah when you go into new - - collection the collection you provide it's either that relative thing that that Victor did but that was just localized or you're never doing that basically that's just but what you normally do is give the package name and if you give a package name danglers here why would I would expect that to be found either inside the current project and since that's ingenue there is no current project or installed globally so yeah I would definitely go with a separate package for engineer plus as we as we found out we do way too many things with ingenue and we also have a bunch of additional package dependencies to do that and we don't want to carry that with the main library so go with a separate can you modify okay next question can we modify the HTML with schematics like change the component selector from component 1 to company - yes that is exactly what migrations are for that is exactly what we do with them and yeah you you're gonna have to find your own way there is no built-in API for that you do it on your own terms however you see the brackets yeah there is no API built in to the schematics it only gives you access to the file itself so in terms of migrations any change you want to make you do it on your own you can find HTML parser packages are pretty common we sort of forgot for when that because our migrations are again part of the main library we didn't want to do anything extra so we just did simple string searches that works all right do you have a recommended library of functions that will apply play updates to the ast for example add node import to Phi function ah I wish I did I I believe everyone's doing it on their own we certainly did because again additional dependencies but I'm certain there must be something if any if anyone else knows that knows of such library please chime in the chat thank you I think the next question is a follow-up to one of the answered ones if your your miking this one is answered yeah no the next one is was about I think migrations if you can run a migration without without actually only by doing ng update or is there another way well there is another way that you can run it like sort of like we showed the local thing for debugging purposes you can do ngg the path through a collection and afterwards the the name of your collection of your migration schematic to expand all that you sorry you can't actually tap into ng update in any other way because it checks in your what's the word repository Oh Egypt it does a whole lot more than that it's actually one of the more complex commands within the angular CLI because it will go check against the NPM registry yeah oh yeah it will go check your gob object it will find all the stuff from the NPM registry I'll check with which projects have migrations defined and what versions are for those and it will offer you the chance to enjoy date whatever I could you want but that all happens so it has to be able to talk with the registry so ng of Hostess calendar the way to go yes did you mention the since migrations are still schematics you can them it said yes that's what I did oh yeah okay I'm sorry I'm not installing you can run them with an GG but there's no other way to run them yeah I mean those are just the two ways you either have a newer version available in one of the registries or you run the manually by n GG oh yeah for further record anything that that we said is a special type of schematic hook so ingenue anything like that there's still schematics there just triggered by an X by an additional command that does something extra and looks for a specific specific schematic but you can still point to that point to your collection whether that would be the schematics collection or the migration schematics collection and you can call out by name anything you like with ng G or schematics CLI in it will write and what's the question if there's a question if there is a the opposite of ng update if you want to downgrade our version using the migrations oh boy there isn't and I'm guessing that's on purpose the intention is to go forward only yeah but you need a different transform function for it so like it progresses from one state to the other but it's not necessarily the same function to bring it back so it's most definitely not the same function oh yeah you know not something handled so we'll not don't really provide a way for that and I'm guessing that's in digital you can write your own schematic so for a backwards migration and they like the user can run it but you'd have to provide it there's no way to automatically run it so like ng degrade or something for a folder or file an engineer schematics when creating an initial project yes yes you can basically it's up to your imagination or well you know like what you want to do right that was and the demo Victor showed envious code when you had a URL source that's created off of a file within the schematic of a folder of files within the schematic itself you can do the exact same thing with engineer no problem you just have to like the the files you want inclusion in the package that exposes the collection you have to shake them your system when the schematic the schematic can create a source from them and then merge it with anything else how would one go about modifying house written in a language like rust oh that's a good question I'm sort of hoping crust would have a similar API to go with it but I'm really not sure so basically keep your fingers crossed oh yeah but again schematics are just basically note projects or not modules they're not special it's sort of like there is no restriction on what you can run although don't go crazy please thank you but still you can call up any additional package I'm sort of home I sort of assume that there's an NPM package that will handle rust out there so you can definitely bring that in and use it okay so the question is you have any examples of got just pain points and anti patterns that you run across that we should be aware of well I guess we sort of touched on some pain points it's always tricky especially when you're when you're bringing up external functionality outside of the schematics API such as the typescript compiler or I guess somebody mentioned kiss more than there are a few good typescript packages out there it's kind of hard to teach them not to touch the file system directly so that's a pain point definitely so we do we we had our struggle with that and we do everything we can to funnel every operation through the schematics a virtual file system because that otherwise you would go yeah I'll do a dry run on this on this humanik or for example and somebody would go ahead and touch the touch the file system and that's not cool that's not expected mm-hmm right because a dry run would still run and that would actually happen transparently for your code is it is it transparent like your code would not know it's running in dry run your schematic will run just as expected applied any changes to the tree just as expected except when the time comes for those three changes to be applied to the file system the angular CLI itself will say oh nope that's a dry run we're stopping here right so that's definitely one thing to avoid so anything else you bring make sure you go through the proper schematics API for touching any files and what else I want to expand on that like we we had a couple of issues with our template files so where we did where we read them from because if you try to access them from the tree you can't actually do it because they're actually not in the app route they're in your package so you have to do FS and read and we're in the tree you have to use tree and it's a bit tricky so you can get kind of what's the word entangled there so what we did in our implementation like in one of the pods we did a simple overlay of the state so an abstraction so we know whether we're touching actual physical files to for instance get our templates or we're touching like the tree in the current project States so we know we have to be careful like thing instead okay I really can't think of anything else I might later on if I do I'll make sure to mention it but I don't know I guess you describe your schema as well as possible because anger the seal I will actually when you go for collection that components - help you'll actually output the contents of your schemas help so do make sure you maintain that one oh yeah yeah I'll figure out something else later on you know I might tweet it who knows all right I am marking this is done okay I think we got your mall it was awesome 17 questions answered so great oh we we apparently have little helpers running around so that's really nice we try you're gonna try thank you we left the hard ones for you guys I would assume so we answered ones like how's the weather oh he's up that must have been a hard question to ask this house the winner house the winner where yes presentation it varies hey well any last thoughts Jason or anyone else nope thank you everyone for attending follow us on Twitter and and obviously ng-conf for the webinar replay so we really appreciate your time you have everyone's information here to answer questions and follow up so back back to you Brooke okay perfect then yeah we'll just we'll go ahead and choose a winner for the price of that one-year license to the ignite UI and we'll make sure to notify the winner that they have been selected so that'll be great and then also a really common question at the end of webinars is always can we get the replay can we get you know the recording of this and yes we will make that available so it usually takes about a week just to have everything edited down but you know give us up to two weeks just in case whatever comes up and we'll have the replay of this put up and available on our YouTube channel and yeah you can go back and watch it at your your convenience but other than that again just like Jason was saying thank you so much for attending we really appreciate your support and look forward to additional webinars coming up in the future we have a lot slated so those will be created as well but thanks for attending everybody and we'll hope to see her out thank you very much Brooke you as well thanks guys I'll see you bye-bye thank you your evening yeah much time really oh cool one sorry I guess yeah you guys are past dinner time oh we yeah depends second dinner time is that a thing okay you guys thank you thanks everybody thank you very much I appreciate it great job

Channel: ng-conf

Views: 3,874

Keywords: angular, angularjs, javascript, ngconf, ng-conf, programming, angular conference, ng conference, angular javascript, angular tutorial, Javascript Tutorial, Programming Tutorial, Computer Programming, Google Angular, Google Programming

Id: S_XxDC4WdKI

Length: 77min 25sec (4645 seconds)

Published: Mon May 11 2020