+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: AMP Plugin for WordPress Version 1.0 Introduces Gutenberg-Integrated AMP Validation

WPTavern: AMP Plugin for WordPress Version 1.0 Introduces Gutenberg-Integrated AMP Validation Version 1.0 of the official AMP plugin for WordPress was released on the eve of WordCamp US, after two years in development by contributors from Automattic, XWP, and Google. This first stable version has a massive changelog with 30 people credited for their contributions. […]

Read more
WPTavern: WordPress 5.0 “Bebo” Released, Lays A Foundation for the Platform’s Future

WPTavern: WordPress 5.0 “Bebo” Released, Lays A Foundation for the Platform’s Future In 2016 at WordCamp US in Philadelphia, PA, Matt Mullenweg announced to the world that a new post and page editor would be coming to WordPress. “The editor does not represent the core of WordPress publishing,” Mullenweg said. His vision of the editor […]

Read more
Dev Blog: WordPress 5.0 “Bebo”

Dev Blog: WordPress 5.0 “Bebo” Say Hello to the New Editor We’ve made some big upgrades to the editor. Our new block-based editor is the first step toward an exciting new future with a streamlined editing experience across your site. You’ll have more flexibility with how content is displayed, whether you are building your first […]

Read more