Custom Schematics: An Angular Application by the push of a Button... by Manfred Steyer

[Applause] thank you and welcome to this talk this talk is about generating own stuff with the angular CLI and schematics and I am manfred I am a train and consultant for angular I'm doing a lot of in-house consultancy and trainings and I'm also part of the Angola not-not-not of the angle of the Google developer expert group in addition to that I am also the founder of angular college where I and some colleagues of mine are doing some workshops and consultancy so one question for the beginning have you ever tried to set up a modern JavaScript project by hand who has tried this yeah and who had fun with it not that much okay it isn't that fun at all when you have to do all those stuff by hands because you have to take care about the compiler about your typescript compiler for instance you have to take care about the package manager and packages in general you have to build a built chain that is optimized for bundle sizes and performance you have to include testing tools and also something like test coverage analysis and to have of course to include linting tools and so on and so forth so as you see here that isn't fun as well as it isn't easy at all but we are lucky we have to angle a CLI and the angular CLI is doing this for us to use the angular CLI as you might know you just have to call and she knew and she knew is creating a new project and then you can use and she generate to create new components to create new services to create new models and so on and now the question arises if we could use this for custom stuff if we could tell the CLI to create a project with custom templates that align with our own content identity corporate identity or if we could just create a non menu component or some other components we need on a regular basis and this is exactly what this talk is about in this talk I will introduce schematics I will show how to use kinetics to do this I will show how to create custom schematics for custom stuff like own menu items own Kurata forms and so on I will show you how to use parameters for cogeneration as well as how to use templates and in addition to that at the end I will show you how to scaffold a whole project for a great use case so let's start with schematics in general schematics is the tool used by the CLI to scaffold stuff to scaffold components modules and services and it is also the name of the project behind it in addition to that schematics is also the name of the code generators created with it so the name cymatics is used for both as you see here and in addition to that there is another term that might be interesting for you this term is called collection a collection is nothing else than a set of genetics assets with code generators that belong to each other's Mon word of caution schematics is currently experimental that means that the public API hasn't been stabilized and that also means that there could be breaking changes nevertheless try it out give it a try report feedback or use it to get quicker starters with your own projects and so did other guys and project teams for instance the cool guys at Noble created something that is called an X and an axis both it is library but also a code generator leveraging schematics to create a so-called workspace every workspaces and environments based upon the CLI that allows you to do the monorail approach which allows you to have several projects at once several projects that belong to each other on the other side the people behind and she rx also published a schematics project some weeks ago it was at the beginning of this month and it allows you to generate all the boilerplate you need for schematics one thing that is nice with schematics is that schematics are atomic that means they work like a database transaction when you are generating codes you don't modify your files on the hard disk instead of this you are modifying your files within and staging area within the staging area that is represented by a tree object you can modify existing files or you can add new files of course you can also delete existing files and when you say ok now everything is ok then you can commit your transaction that you can write back everything to your hard disk this is quite important because this current is that it isn't possible that something breaks in the middle and it guarantees that it isn't possible that your project is left behind in an unknown State you can transition your project from one well-known state into another well-known state into another consistent state yeah so of course the question arises now how to create an own schematics project and the answer is to create a schematic you can use what do you think a schematic that's right well you just need to install this tool here that is called schematic CLI and then you can scaffold a new schematics project using schematics blank in addition to that there is also the possibility to use schematic schematic to create a new brooch with some sample code the sample code is quite nice to learn schematics it contains a lot of stuff and also a lot of comments that tells you how to use everything yeah here you have some sample schematics within this project this is how it looks like when you are scaffolding a plank schematics project as you see here it just looks like scaffolding and angular application you get several files generated and then some libraries are nvm installed and now there is one important thing I call it's month for its first rule of surviving schematics you needs will make sure that you use exactly the same versions as within your CLI generated project you have a huge problem when your schematics project uses other versions than your CLI generated project so please just align your def dependency for instance here I'm using the dev dependencies I had found within my seal I project I have scaffold that with the CLI 16.8 and then of course you have to npm install everything when you look into your schematics project you see a project structure like this and when you look closely at this you see this is more or less an NPM package you have that year's config Chasen you have a package JSON and you have a nodes modules folder and one important thing here is that the package Jason is pointing to a collection jason and this collection jason in term is describing all your code generators all your schematics normally you have an own folder for its each schematic that isn't the rule but it is quite common when you look into the schematics for the angle of CLI you will find this pattern and each schematic comes with a so-called rule Factory the rule factory is creating as the name implies a rule and the rule is just doing the code generation this is what the rule Factory looks like it is just a function the function takes some options the options are the options you are passing at the command line when you are calling the schematic and the return value is a rule and this in turn is also just a function and this function takes the tree as you've heard before the tree is representing your staging area and it takes a context object with some additional stuff for instance as you see here the context contains a latke you can use to lock out some information and 53 you can create some new files for instance here because it's such a nice habit I'm creating a Hello txt file with the contents HelloWorld after that of course you want to test your schematic and for this you have to build it just run npm run build and then you can run schematics with the name of your code generator with the name of your schematic here i'm using point and hello bolt point means that the schematics collection is the current project and HelloWorld is the name of it the name of my code generator you can also test it within another project for instance within a demonstration project for this you need to npm install your schematics collection or you could also link it by using an BEM link and then you can use the schematics tool one more time the first word you are appending here is the word of your collection the name of your NPM package and the second name is the name of your code generator both here is named HelloWorld and instead of schematics you can also use ng generate which is more or less the same but it's the angle of a to two things so let's have a look at this let's try this out I have prepared a simple hello world application you know Green is the hope as we see in Austria and Germany and within this collection I have of course a package.json and as you see here the package station has this very special entry point that is pointing to my collection the collection Chasen is describing the collection and within here we have for instance my hello world schematics and yeah it has a description as well a factory the factory is called hello world it's located within the index file and when we look into the index file we have our factory which is returning the rule which is in turn creating our file ok let's switch to the console and let's build a briefing and VM run built and then let's run it let's try schematics schematics with dot and hello world I am lacking an S ok now we see this working I've got my debugging information and I've got a hello.txt so let's have a look inside the hello.txt and as you see there is nothing so for some reason I didn't get a Hello txt the reason for this is when I'm using schematics within an schematics project pointing to it with a dot then schematics run in that a back mode and the back mode means that nothing is written to the hard disk I'm getting a try run everything is executed in the main memory but nothing is written to the hard disk which is most of the time what you want when you want just to test it just think about data base tests it is quite common to do a rollback at the end of a data base test because of this I will switch off the debug flag let's set the back to false let's set the back to false and now I get my hello world written to the file system nice thing so much for this first introduction so now let's go one step further let's talk about parameters normally when you want to generate code you want to pass some parameters to tell the generator how it should do its chop and for this I want to switch to a more exciting demonstration a demonstration that is generating a menu component this menu component consists of several files of course there is an angular component called for instance side menu but there is also a side menu item describing the items of the menu and there is a side menu service which is providing all the items which is telling the component which items to display and here I want to define that the side menu item as well as the side menu service is optional when I'm not creating it then the side menu component shell just displays some hard coded menu items but I'm when I'm generating it then the side menu component shall ask the service which items to display and for this I want to have a comment like this something like an she generates with the name of my schematics navigation menu for instance I want to append the name of my menu it's your called side menu and I want to add a flag that tells the code generator that are this service shall be generated on it when we look into the structure of our schematics project we will see one time again that we have NPM package we have an package JSON with a side with a nodes models folder and with ideas config Jason and one more time the collection Jason is describing everything for instance it is describing my menu schematic within my schematic I have one more time a rule factory and I have two more files describing their parameters I'm allowed to pass for instance here is a schema Jason containing a JSON schema that's my most favorite sentence within this talk please try to say it's the schema Chasen with the Chasen schema try to say it at 3 1 2 3 yeah yeah that's perfect the schema jason with the json schema and as you can imagine it just contains some json schema that describes all the parameters that allowed here and then we have the schema ts file and it contains the same but in the form of a typescript gasps this is what it looks like it just contains property for all the parameters and some of the properties are automatically passed by the CLI and other parameters or custom parameters like this menu service flag here well when we look into our project we will see that there is another rule Factory and now this rule Factory gets this menu options object containing all the parameters so my rule can look into it and so my rule can find out which options have been bussed of course when we wants to create such a site menu components we don't want to write everything with typescript we want to use templates that tell the generator how a component class looks like or how a component template looks like or how the service look like and for this I've created a folder files it is not a rule to have a folder with the name files but it is very common when you look for instance in the schematics for the angular seal I you also find a folder files and within this folder you have templates like this one and I think you have seen something before this looks a bit like I would say a PHP file who has done PHP before yeah some of you who has done ASP before asp.net yeah it's all more or less the same you have your code that you want to generate and you have some procedures that are executed some procedures within placeholders that are rendered out to the page for instance here I have meta limiters and within those delimiters I'm using the past property name this is the name of my component I want to scaffold for instance side menu or top menu or bottom menu or something like this and I'm also using a function the function is called classify classify is formatting the name so that it fits for a class name you know when you are defining class names you are using most of the time pass car keys for instance and you aren't allowed to start with a number gasify is taking care of this one nice thing about templates is that the template name itself is a template the template name itself can contain some placeholders for instance here I'm using the placeholder path you just need to write it between two underscores or here I'm using the property named the placeholder name name which contains the name of the component I want to generate you can even use functions within your file names for instance here I'm using the function - arise - arise is just taking the name the name is piped into - arise and - arise is formatting this name so that it fits for a file name you know normally we are going with kpop keys when defining file names so how to call a template we need one more time a rule Factory returning a rule and then we needs to define a template so us in the world of schematics a source is just something that flows into your tree that is just taking into your tree and in my case the source pieces upon every file within the files folder and those files are piped through those functions here through the filter templates function through the template function and through the move function as you can imagine the filter templates function is just filtering the templates it is deciding upon better the needs that service or if we just want to go without the service the template function is just executing the templates all the templates that can be found and all the templates that aren't filtered and this template function gets some properties passed for instance and passing all the command line options so that I can use them within the templates within these options object you find something like the name of your components you want to scaffold as well as the path think we have used before and within my string utils I have all the functions I've called before for instance that - arise function but also to classify function one important thing here I am using the spread operator which means that not the options object is passed and not the string utils of check this passed but every property within those objects are passed for instance as mentioned their property - arise or classify as well as the property name and path and so on all the properties get passed to the template here and then we need to move everything to the right folder to the current folder for this I'm calling the move function here move is also replacing the placeholders within the file names and when we have this template source we can construct a new rule before I've written a known rule but normally you are just creating a rule by chaining existing rules and that is what happens here for instance here I'm just taking the chain rule which which is chaining other rules and so I'm chaining the branch and merge rule as well as the merge riff rule at the end of the day this is just branching my tree within the main memory like Hubert's branch check its project then everything is written into this branch my template source with all the execute the templates is written into this branch and then everything is merged back to the tree object and at the end of the day my tree is written to the hard disk okay nice by leveraging this we can quite easily generate a main menu but I think we should go one step further it would be nice to have some schematics which scaffold a whole application this is what I want to scaffold I'm doing a lot of crud stuff because I'm doing very much in the field of business software and as you might know such a business software contains a lot of crud forms and my idea is to create something like this to generate something like this a form that allows me to search for some entities and that lists my entities and then I want to select this or that entity to get a detail view this is what I want to generate and as a matter of fact we can use everything we have learned so far to accomplish this but we should also think about our project process we should think about things we need in addition to schematics for instance first of all it would be a good idea to create an example that is covering all the cases I want to generate with my code generator an example that is respecting all the data types and types of filters and the types of entities and relations I want to respect with my code generator then we need to find the evaluation points the things that differ the things that changes when I'm generating a project with it after this we need to define a model for our variation points for instance Chasen object that contains every information we need to generate our custom stuff each information we needs to tell the code generator so that it know it so that it knows what to generate so that it knows to generate something for flights or something for hurdles or something for invoices and then of course we need to write the code generator and test it so one thing that I found out is that it is good to take some time for the first example take some time for it and review it carefully because this is what you get when your code generator has been built this is what your code generator will generate out and of course you don't want to find out at the end of this chain which takes some effort that you need something different within your generator you want to align with best practices here and in addition to that it is also a good idea to embrace libraries and components make sure that your example is as tiny as possible make sure that you are generating as less code as possible because every line of code even every generated line of code needs some amount of maintenance and it is increasing the complexity of your project so make sure that is as tiny as possible don't create a code generator that is generating a data grid create a code generator that is generating a file using an existing data grid you don't want to duplicate your data grid code in your project okay I have done this and I want to show you a simple demonstration for this let's move to my crud demo here I have a model JSON file and this model JSON file contains everything we need to know to generate a crud use case for instance the title of our use case the name of the entity it contains the API it contains also the fields I want to filter here we could append some names of controls we want to use to create a filter and it contains a description of all the fields I have of course we could generate this out of swagga of a spec a description for this features would leverage and other schematics okay and now let's run this here as you see I am running and she generates crud module with a name the name of my entity and I'm telling my code generator that I want to use my own schematics project not the default schematics from the angola team but my own schematics project and as you see here a lot of stuff is generated stuff that would bring a lot of effort when we would have to write it by hand I'm getting my edit component I'm getting a class for defining a filter and getting my list component I'm getting a model my routes as well as a service and entity file okay so what's the current state of this idea the current state is that I have written this and I have published it to NPM so you can grab it from NPM and you can use it as is but you can also fork it and change it so that it fits better your project so that it'll I sped-up if your cooperate identity or with the design of your very application and if you like you can also contribute to it I would say let's join forces to create something bigger let's use the power of the community when you want to take in further into this topic there is a very nice introduction written by the angular team by Hans Lawson the father of schematics you find it behind the first link I self have written a tutorial that consists of really so far I think there will be some more articles and it shows how to write this menu schematics I have showcased before and of course you can use and fork and modify my nvm project my angular crud generator so let's come to a conclusion we have seen that we can leverage schematics to automate parring tasks we have seen that schematics is the official solution in the world of angular there are some existing projects out there leveraging schematics like the CLI itself and aksar and she rx are also using schematics we have seen we have a staging area this avoids to destroy something when something bad happens we have also templates and rules we can create our own schematics or tweak existing one and I want to encourage you just to try it out to automate all these monotone oast asks you might have so so much for me thank you for coming and have a nice conference thank you [Applause] you

Channel: ngVikings

Views: 7,752

Keywords: ngvikings, conference, finland, angular

Id: JAt1FSwhnWk

Length: 30min 47sec (1847 seconds)

Published: Fri Mar 09 2018