Series: Building the CRUD-builder

Blueprint Basics Pt 1-Generating Files

Published on May 09, 2015

Blueprints are machines for generating code. Let's build a machine for making a CRUD resource. In this first episode, we generate the files and customize them using the default variables available in blueprints.



In episodes 34 and 35, we created a CRUD interface. It took us about 15 minutes. However, lots of CRUD interfaces have a lot in common. This week, we're going to create a machine for generating CRUD interfaces.

The Power of Blueprints

Let me demonstrate that machine in action. First let's delete last week's work. Now we'll fire up the machine with this command. Generate is the command for getting a machine, a blueprint. CRUD is the name of the machine. Post is name of what we'll be generating. Then the rest are data options. Let's hit that and it creates all these things for us.

There's a couple of things that need changed to make it exactly like what we had before. I'll do that real quick.

Now we have something exactly like we had before with our edit and our delete buttons and our new buttons. All that work that we did last week was accomplished in less than a minute. It takes out a lot of the possibility of error because the computer does it for us. Let's go in-depth on how we created that machine.

Who Generates the Generators?

You can generate the blueprint using an Ember generator. Type blueprint and then the name of the blueprint that you want. That will create a folder within the blueprints folder and then an index file.

The index file is where you create a lot of the custom logic and custom variables that you can use in your path and templates. For this first episode, we're going to just be using the defaults that they give us. In the pro episode, we'll be creating our own variables and figuring out how to manipulate the index file.

Your Resource’s Directory Structure

We create a files folder, which is where all our files will go. Within that, we create a root folder— notice the double underscores. That means that it's a variable. In our case, the root is app, although you might have named yours something else. root will know that.

Within root, we'll create a double underscore name folder. When this is generated, it will be post. We'll also generate a double underscore name S folder. When this is generated, it will be posts, plural. Things surrounded by double underscores are variables. Everything else is taken literally.

As an aside, the things with double underscores are called file map tokens. You can define your own in the index.js. This is the index.js for the route generator that comes with Ember-cli. This also happens to be how they can create classic and pod architectures in the Ember-cli generators. We won't be doing that today, but if you wanted to, you could do that. Now back to the main event.

File Blueprints And Default Variables

Now that we know the mechanics of naming the folders, let's create some files. We'll create a model.js and here we'll just do like we normally would. When we generate, it will generate this. In our pro episode, we'll put the attributes here based on what we put in in the command line, but for now, we won't be using any special variables.

By contrast, if we do the show folder, then we'll be needing some of the special variables that Ember gives us. This is our current show controller. Let's go ahead and copy that and then use that to construct our controller down here. We'll just need to change the transition to route since we won't be transiting to posts every time. It will be dependent on what you name your CRUD interface. We'll put in dasherize module name and then add the S to make it plural. There are better ways to make it plural, but this is good enough for now.

Dasherize module name is just one of five template variables that you get by default with your blueprints. We'll be using many of these when we're creating our files.

I created a bunch of these files off screen. Let's take a walk through several or them.

Let's start with the name plural template file. Here we have the finished product after it's generated posts. Over here we have the template and the blueprint. Notice everywhere it has posts, it has one of these variables. Here it's dasherize module name. Down here it's camelize module name because when there are multiple words, you want them to act differently. It's just taking what you want and then putting in the variables wherever you have the name or something that's going to change depending on what you're generating.

From the top, we have the edit controller and the edit template, then the edit fields component and then template, which still has some stuff that we're going to put in during the pro episode. You've already seen the show controller and template in the model, then the new controller, the new template. You can pause at any point. You see that right now we're just replacing a post with various module names.

Next Time: Custom Variables, Adding to Preexisting Files

It's that easy to generate the files. The harder part comes next time when we explore the index.js. Specifically, we'll learn how to add attributes to our model, how to display attributes in our show template, how to put in the edit fields for our edit fields template, and then how to add nested resources within a currently existing file. I look forward to seeing you then.

Building the CRUD-builder

Subscribe to our mailing list