+44 0330 223 3428
Call Us
+44 0330 223 3428

Mark Jaquith: Making ScoutDocs: Build Tools

Mark Jaquith: Making ScoutDocs: Build Tools

Continuing my series about ScoutDocs and the process of building it, this week I’m talking about Build Tools.

What is ScoutDocs? ScoutDocs is a WordPress plugin that adds simple file-sharing to your WordPress site.

Coding in React involves JSX, a bizarre-but-wonderful XML syntax that you dump directly into the middle of your JavaScript code. It feels exquisitely wrong. Browsers agree, so your JSX-containing JS code will have to be transpiled to regular JavaScript. This can involve using a complex maze of tools. Babel, NPM, Webpack, Browserify, Gulp, Grunt, Uglify, Uglifyify (yes, you read that right), and more. You have decisions to make, and you will find fierce advocates for various solutions.

For ScoutDocs, I decided to go with Grunt for task running, because I was already comfortable with it, and I needed it for grunt-wp-deploy. Use a task runner you are already comfortable with. Even if it is just NPM scripts. You’re learning a lot of new things already. It’s okay to keep your task runner setup.

Next, I had to choose a JS bundler which would let me write and use modular code that gets pulled together into a browser-executable bundle. After deliberating between Webpack and Browserify, I chose Browserify. Webpack is really complicated. It is also very powerful. I recommend you avoid it until you need it. I haven’t needed it yet, and found Browserify to be easier to configure and use, even though it’s a bit on the slow side.

As I was building ScoutDocs and tweaking my dev tools, tweaking my Grunt file, and writing code to search/replace strings etc, I began to feel like the time I was spending too much time on tooling. Was I becoming one of those people who spend all their time listening to productivity podcasts instead of… being productive? I can see how someone could get sucked into that trap, but putting a reasonable amount of time into configuring your development tools can pay dividends for you beyond simply the time saved. It can also prevent mistakes, keep you in coding mode more often, and increasing your confidence in your code builds. Spend the time up front to make your tools work for you.

Other posts in this series:

 


Continuing my series about ScoutDocs and the process of building it, this week I’m talking about Build Tools. What is ScoutDocs? ScoutDocs is a WordPress plugin that adds simple file-sharing to your WordPress site. Coding in React involves JSX, a bizarre-but-wonderful XML syntax that you dump directly into the middle of your JavaScript code. It feels exquisitely wrong. Browsers agree, so your JSX-containing JS code will have to be transpiled to regular JavaScript. This can involve using a complex maze of tools. Babel, NPM, Webpack, Browserify, Gulp, Grunt, Uglify, Uglifyify (yes, you read that right), and more. You have decisions to make,…

Source: WordPress

Related Post
WPTavern: WPTracSearch: An Elasticsearch-Powered Search Interface for WordPress Trac Tickets

WPTavern: WPTracSearch: An Elasticsearch-Powered Search Interface for WordPress Trac Tickets WordPress Trac is one of the more utilitarian and uninspiring interfaces that many contributors have to contend with in the process of giving back to the project. After growing tired of Trac’s mediocre search functionality, William Earnhardt set out to improve it with a new […]

Read more
WPTavern: Tips for Replying to A Call for Papers or A Call for Speakers

WPTavern: Tips for Replying to A Call for Papers or A Call for Speakers The following is a guest post written by Jennifer Bourn. With 21 years experience as a graphic designer, 15 years experience as a web designer, 14 years as a creative agency owner, and 11 years as a blogger, Jennifer Bourn has […]

Read more
WPTavern: Storefront 2.5.0 Introduces a Custom, Block-Based Homepage

WPTavern: Storefront 2.5.0 Introduces a Custom, Block-Based Homepage Storefront, WooCommerce’s free flagship theme, has just released version 2.5.0 with updates that make it easier to setup and customize the homepage. In 2017, WooCommerce 2.2 introduced starter content to help users set up the homepage template, menus, widgets, and add some demo products. This content has […]

Read more