Can you imagine the combination of Angular 2 and Jade is super awesome and timesaving? If not, read the following lines and reconsider!
When building SPAs using Angular2 or AngularJS, you will use custom HTML markup extensions (aka directives) to instrument Angular how to render your SPA or how the different building blocks of your app should correspond to user interaction. Using those directives is easy and well known in the Angular Community. Nothing special here.
But, I found myself repeating almost the same markup multiple times while building different prototypes on Angular2. To get rid of those duplications,
*ngFor may be a solution, but with respect to performance on mobile devices, you should avoid using those structural directives for such basic things.
At this point Jade enters the stage. Jade offers stunning but simple mechanisms to make you even more productive. You could easily build compassable
mixins, derived templates and other cool things. Besides all the advantages like maintainability, readability or the time you save, it’s also fun to use it!
Fasten your seatbelt and prepare for some extra time that you can spent with your friends and family instead of waisting this time with tons of markup code.
Get started - baby steps
FontAwesome is cool, I it. It takes away a lot of pain, like looking for the right images, integrating those in the build process, creating image-maps to reduce HTTP requests… you see, it’s cool!
But it’s frustrating to write
<i class="fa fa-foo"></i> for the 3242th time. Let’s build a
mixin to get rid of that.
Using it is simple, include the
mixin file and call the
This will generate
Let’s start with forms. Building forms (as soon as designing those in CSS is done) is a stupid task. It’s all about writing the same
input node with tons of attributes multiple times. Here a short mixin for
Usage is pretty the same as you’ve learned in the previous sample.
This will render
The interesting part here are all those Angular related directives. See
[(ngModel)] for example. Because Jade will be compiled to HTML during build time, we can pass around the actual bindings as strings and use Jade String interpolation to produce the final, Angular conform Markup.
Combine mixin files
So far we’ve created a
icn and a
input mixin, both are located in different files
mixins/forms.jade, let’s add
mixins/index.jade to have a single file, containing all mixins.
Now you can refactor your root
jade file to just
include mixins/index.jade, so you don’t have to specify each mixin file.
More complex input directives
The amount of HTML compared to the few lines of Jade is immersive. But this difference will become even bigger if you create more powerful mixins. Let’s add some nice icons to our input form. The sample shown input we’ve created a few seconds ago, should still render without any image. So change the
The indentation is important here. The ending
input node is exactly on the same level as the
if statement. So it gets rendered no matter if there is an icon or not. Another important piece is the usage of
Yes, you’re right were starting to nest multiple mixins. Imagine that power? Using this mixin is again simple. Change the
index.jade to match the following.
firstName input remains without an icon. On the other-side will you find a nice looking envelope in front of the email input field. Once again, see the generated markup.
Integration with Angular 2
First, let’s take a look at a simple component responsible for rendering an edit form to allow users change customer’s data.
This is a regular Angular2 component. There is no need for changing something here. The
You may ask where all the magic will happen. Well it’s inside of a
If you’ve never used gulp or need a refreshment, check out my series of posts on Gulp, it is worth reading it!
Once Gulp is up and running in your Angular2 project, there is only a single new dependency you’ve to install to have things you need.
With respect to the common ng2 project structure and systemJS, you can build html templates to the correct destination by using the following
Hook up this task to the sequence of tasks being executed during a regular build and you’re done.
Whats your opinion? Have you tried it with Angular? Do you have the same impressions I’ve shared here? Or may it adding too much complexity to your projects? Leave a comment.