The Secret Sauce, Ep. 04: Improve Your Front-End Development

Wouldn't it be nice to have a butler on hand to help streamline things? Well, in this case we're not talking about a person who comes and waits on you, but rather an impressive and integral front-end development tool developed internally at Palantir.net to help automate some of our work.

Wouldn't it be nice to have a butler on hand to help streamline things? Well, in this case we're not talking about a person who comes to your house and waits on you, but rather an impressive and integral front-end development tool developed internally at Palantir.net to help automate some of our work.

iTunes | RSS Feed | Download

Butler does a lot of things and has plenty of features, which our Front-End Developer Lauren Byrwa talks about in this week's short-form podcast called The Secret Sauce. Things like:

• Gulp integration
• Compiles your Sass and rebuilds your prototype
• Moves your prototype into Drupal 7 or Drupal 8
• Refreshes your browser so you can see updates simultaneously in multiple places
• Plenty of optimization options, too, so you know where exactly the performance issues are coming from

Thanks for listening, and look for our long-form podcast On the Air With Palantir this Thursday!

We want to make your project a success.

Let's Chat.

Transcript

Allison Manley [AM]: Hi, and welcome to the Secret Sauce, brought to you by Palantir.net. This is our short podcast, up to 10 minutes, that offers a quick tip on some small thing you can do to help your business run better. I’m Allison Manley, an account manager here at Palantir, and today’s advice comes to us from Lauren Byrwa, who is going to talk about using Butler to improve your front end development.

 

Lauren Byrwa [LB]: Hi, I’m Lauren at Palantir, and I’m going to walk through a new integration that we’re working on, called Butler. It’s going to tell you how you can integrate Gulp with your Drupal 7 site and Drupal 8 site, and go over some of the ways that you can automate your front end development. Butler was created internally. Since its creation, it’s become an integral part of the Palantir development process.

 

So what we’ve built here is basically a Gulp integration that would allow you to integrate your prototype directly into your D7 or D8 site. The way that works is that Gulp is automatically going to compile your Sass and rebuild your prototype when necessary, as well as refresh your browser. When I say ‘refresh your browser’ I’m talking about both the prototype and the Drupal site, which really helps you streamline day-to-day tasks in that you can see updates simultaneously in both places.

 

So that’s the basis of what it does. But where the real power comes in is that it does a lot more than that. It also gives you the option to optimize your code and your images, as far as minifying your CSS, minifying your Javascript, and optimizing your images. What this means is, instead of doing everything separately, I tell Gulp to do one task. I say ‘Gulp optimize’ and it will go through and take care of all the minification and the optimization necessary to make your site really perform.

 

As well, it will swap out the files for you. During normal development, you might be using uncompressed files for your CSS or your Javascript. When you run the optimize task it will automatically minify those and swap out the files from the unminified version to the minified version. On top of that it also gives you the option to test your code really quickly as well. The big part that we’ve built into this Butler integration with Gulp is adding a test task, which means that you can tell Gulp to test all of your code and it will lint through your Javascript and your CSS, as well as run a performance test on the Drupal 7 or Drupal 8 site. This means that you can side-by-side QA where your performance errors are coming in, and whether they’re coming in from something in the static code, i.e. the prototype, or whether they’re coming in as a result of an integration with Drupal. This is really great for being able to narrow down where you might need to work on the performance of your site.

 

Having this integration streamlines our front end development process. It means that not only are we doing the great quality work that we already do, but we’re doing it faster. It makes sure that everything we do aligns with the best practices that we always follow.

 

AM: Thank you, Lauren. For more great tips, follow us on Twitter at @palantir, or visit our website at palantir.net. Have a wonderful day!

Development Drupal