DX: Dev Experience via Dev Tooling & Sane Automation | by Ahmad Awais

![image](https://d3ui957tjb5bqd.cloudfront.net/op/font-preview/2666916/5/14?2&s=%7B%22size%22%3A144%2C%22text%22%3A%22Developer%20Experience%22%2C%22retina%22%3Atrue%7D)

![image](https://d3ui957tjb5bqd.cloudfront.net/op/font-preview/2666916/5/14?2&s=%7B%22size%22%3A144%2C%22text%22%3A%22%26%22%2C%22retina%22%3Atrue%7D) ![image](https://d3ui957tjb5bqd.cloudfront.net/op/font-preview/2666916/5/14?2&s=%7B%22size%22%3A144%2C%22text%22%3A%22Developer%20Tooling%22%2C%22retina%22%3Atrue%7D)

[![img](https://d3ui957tjb5bqd.cloudfront.net/op/font-preview/2772760/3/14?2&s=%7B%22size%22%3A72%2C%22text%22%3A%22by%20Ahmad%20Awais%22%7D)](https://twitter.com/mrahmadawais/)

.footCenter.bio[⚠️ Press f to go full-screen.]
---
class: split-50 nopadding bkgpos_00
background-image: url(img/bright.png), linear-gradient(to bottom, #7F16F2, #1E1D40)

.column_t2.font10em[

</a>

]
.column_t2[.vmiddle.pushfront[

#### 👋 I'm

# Ahmad Awais

---

🥑 Open Source Developer Advocate

👓 WordPress Core Dev (Full Stack)

👨‍💻 EE-CS Engineer turned Emojineer

---

.bio[Rants on Twitter [@MrAhmadAwais →](https://twitter.com/mrahmadawais/)]
.bio.smLnk[[FOSS GitHub](https://github.com/ahmadawais) | [AhmadAwais.com](https://AhmadAwais.com/) | [LinkedIn](https://www.linkedin.com/in/mrahmadawais/)]

]]

---
class: split-50 nopadding bkgpos_00
background-image: url(img/bleft.png), linear-gradient(to bottom, #875EFF, #28A1F2)

#### 🐦 Follow

# .noLnk[[@MrAhmadAwais](https://twitter.com/mrahmadawais/)]

---

🔥 Development Hot Tips

🤣 Developer jokes/rants‚ you name it

💯 SuperCaliFragilisticExpialidocious!

---

.bio.smLnk[MOAR: [FOSS GitHub](https://github.com/ahmadawais) | [AhmadAwais.com](https://AhmadAwais.com/) | [LinkedIn](https://www.linkedin.com/in/mrahmadawais/)]

]]
.column_t2.font10em[

</a>

]

---
class: split-50 nopadding bkgpos_00
background-image: url(img/bleft.png), linear-gradient(to bottom, #373277, #4D43D1)

## 👨‍🏫 VSCode.pro

---

After ten years of Sublime, in 2017 I completely switched over to this new open source code editor called Visual Studio Code. I couldn't be happier.

---

✅ JavaScript Based Open Source Editor

🎉 I was able to contribute 👨‍💻 to VSCode

💜 [Shades of purple ↣](https://marketplace.visualstudio.com/items?itemName=ahmadawais.shades-of-purple) my first code editor theme is used by over 10,000 developers in .smLnk[[VSCode](https://marketplace.visualstudio.com/items?itemName=ahmadawais.shades-of-purple)], .smLnk[[iTerm2](https://github.com/ahmadawais/shades-of-purple-iterm2)], .smLnk[[Hyper](https://github.com/ahmadawais/shades-of-purple-hyper)], .smLnk[[Slack](https://github.com/ahmadawais/shades-of-purple-slack)], .smLnk[[Alfred](https://github.com/ahmadawais/shades-of-purple-alfred)], .smLnk[[Highlight.js](https://github.com/ahmadawais/Shades-of-Purple-HighlightJS)], etc.

---

🌟 Sign up to [become a VSCode Power User →](https://VSCode.pro/)

---

]]
.column_t2.font10em[

]

---
class: split-50 nopadding bkgpos_00
background-image: url(img/bright.png), linear-gradient(to bottom, tomato, gold)

.column_t2.font10em[

]
.column_t2[.vmiddle.pushfront[

# Dev Experience

---

Let's talk about **you; the DEVELOPER**.

---

👉  Your **experience as a developer**

👉  How can you improve your **dev-workflow**

👉  And **developer tooling** to make you better

⚠️ Press `f` to go full-screen

]]

---
class: split-50 nopadding bkgpos_00
background-image: url(img/bleft.png), linear-gradient(to bottom, #F2C54B, #E44E27)

# Dev Tooling

---

**Developer Tooling** is important if you want to love what you do and do it more often at the same time.

---

✅ Love what you do

✅ Do it more often

🎯 Sane automation

]]
.column_t2.font10em[

]

---
class: split-50 nopadding bkgpos_00
background-image: url(img/bleft.png), linear-gradient(to bottom, #2C65FF, #C423FF)

## 📦 create-guten-block

---

A zero-configuration #0CJS developer toolkit for building WordPress Gutenberg block plugins.

---

👇 Downloaded 60,000+ times

👨‍💻 Used by over 15,000 developers

🐾 Over 1,000 projects depend on CGB

---

🌟 Star [create-guten-block →](https://AhmdA.ws/CreateGutenBlock)

---

]]
.column_t2.font10em[

]

---
class: split-50 nopadding bkgpos_00
background-image: url(img/bright.png), linear-gradient(to bottom, #7F16F2, #1E1D40)

.column_t2.font10em[

]
.column_t2[.vmiddle.pushfront[

## .center[📦 CGB Usage]

---

```shell
# 1. Create the block plugin.
npx create-guten-block my-block

# 2. Browse the plugin.
cd my-block

# 3. Start compiling & Watching.
npm start

# 4. Build for production.
npm run build
```

---

---

]]

---
class: split-50 nopadding bkgpos_00
background-image: url(img/bright.png), linear-gradient(to bottom, #7F16F2, #1E1D40)

.column_t2.font10em[

]
.column_t2[.vmiddle.pushfront[

## WHAT YOU GET

---

⚛️ React, JSX, and ES6 syntax support

🏗️ Dev/production build process is webpack based

👋 Beyond ES6 i.e. `async/await`, object spread, etc

🤖 Auto-prefixed CSS, no need for `-webkit` prefixes

🎒 Bundled JS, CSS, and images for production

🛠️ Hassle-free single dependency of `cgb-scripts`

---

🌟 Star [create-guten-block →](https://AhmdA.ws/CreateGutenBlock)

---

]]

---
class: split-50 nopadding bkgpos_00
background-image: url(img/bleft.png), linear-gradient(to bottom, #F81700, #00b0ff)

## 🎯 WPGulp

---

An advanced & extensively documented Gulp WordPress boilerplate to help you kickstart a build-workflow for your WordPress plugins and themes.

---

👇 Downloaded 110,000+ times

👨‍💻 Used by over 20,000 developers

🐾 About 3,000 projects depend on it

---

🌟 Star [WPGulp →](https://github.com/ahmadawais/WPGulp)

---

]]
.column_t2.font10em[

]

---
class: split-50 nopadding bkgpos_00
background-image: url(img/bleft.png), linear-gradient(to bottom, #CA3534, #611014)

## npm

---

`npm` is the node package manager.

---

✅  It's used for the JavaScript language

🎯 It is the default package manager for Node.js

]]
.column_t2.font10em[

]

---
class: split-50 nopadding bkgpos_00
background-image: url(img/bright.png), linear-gradient(to bottom, #7F16F2, #1E1D40)

.column_t2.font10em[

]
.column_t2[.vmiddle.pushfront[

## Publish NPM Packages

---

✅  `npm init -y`  — read [the docs](https://docs.npmjs.com/cli/init)

🎯 `npm publish` — read [the docs](https://docs.npmjs.com/cli/publish) and a detailed article on [how to publish your package on npm](https://hackernoon.com/how-to-publish-your-package-on-npm-7fc1f5aae600)

🤖 `release-it` can automate GitHub tags, releases, and npm publishing. More on [release-it](https://github.com/webpro/release-it)

]]

---
class: split-50 nopadding bkgpos_00
background-image: url(img/bleft.png), linear-gradient(to bottom, #543D2D, #F88B0A)

## Composer

---

`composer` is a Dependency Manager.

---

✅  It's used for the PHP

🎯 Packagist is the main Composer repository.

]]
.column_t2.font10em[

]

---
class: split-50 nopadding bkgpos_00
background-image: url(img/bright.png), linear-gradient(to bottom, #7F16F2, #1E1D40)

.column_t2.font10em[

]
.column_t2[.vmiddle.pushfront[

## Using Composer

---

🤔 Get started with Composer — read [the docs](https://getcomposer.org/doc/00-intro.md)

✅  `composer init`  — read [the docs](https://getcomposer.org/doc/03-cli.md#init)

🎯 Publish packages on [Packagist](https://packagist.org/)

🔥 Hot tip: [Using composer with Teams](https://twitter.com/MrAhmadAwais/status/1020023997172416512)

]]

---
class: split-50 nopadding bkgpos_00
background-image: url(img/bright.png), linear-gradient(to bottom, #F5AE16, #F19021)

.column_t2.font10em[

]
.column_t2[.vmiddle.pushfront[

# What's NEXT?

---

Let's build some sort of automation, RIGHT!

---

✅ Most devs are well versed in `Gulp`

✅ Many devs find `webpack` quite hard

💡 How about we combine `Gulp` and `webpack`

]]

---
class: split-50 nopadding bkgpos_00
background-image: url(img/bleft.png), linear-gradient(to bottom, #F5AE16, #F19021)

# Gulp + webpack

---

**Mind blown?!** OK here's what we're going to do:

---

🎯  Combine `WPGulp` with `create-guten-block`

✅  Code modern JavaScript by using `webpack`

✅  Keep handling everything else with `Gulp`

😭  → 😫  → 😠  → 😐  → 🤔  → 🙃  → 🧐  → ❓

]]
.column_t2.font10em[

]

---

# Gulp Task for webpack

<hr>

Let's create a task inside of WPGulp's `gulpfile.js` to handle `webpack` JavaScript compiler.

<hr>
---

class: middle, bgGulp
layout: false
.left-column[
### 1. Install Development Dependencies
]
.right-column[

.space.sp1[]

```shell
# TERMINAL
# 1. Open your project root folder and run.
npm i -D webpack webpack-cli gulp-util babel-preset-cgb babel-core
```

]

---

class: middle, bgGulp
layout: false
.left-column[
### 1. Install Development Dependencies
### 2. Create a webpack config
]
.right-column[
.space.sp2[]

```shell
# TERMINAL
# 2. Create a webpack config.
touch webpack.config.js
```

]

---

class: middle, bgGulp
layout: false
.left-column[
### 1. Install Development Dependencies
### 2. Create a webpack config
### 3. Declare Constants
]
.right-column[
.space.sp3[]

```js
// Inside gulpfile.js
// #3. Define constants.
const webpack = require( 'webpack' );
const gutil = require( 'gulp-util' );
const webpackConfig = require( './webpack.config' );
```

]

---

class: middle, bgGulp
layout: false
.left-column[
## 4. WRITE THE GULP TASK
]
.right-column[

```js
// Inside gulpfile.js
// JavaScript via webpack.
gulp.task( 'webpackJS', callback => {
	webpack( webpackConfig, ( err, stats ) => {
		if ( err ) {
			throw new gutil.PluginError( 'webpack', err );
		}
		gutil.log(
			'[webpack]',
			stats.toString({
				colors: true,
				progress: true
			})
		);
		callback();
	});
});
```

]

---

class: middle, bgGulp
layout: false
.left-column[
## 4. WRITE THE GULP TASK
##### 4.1 `'webpackJS'` task
]
.right-column[

```js
// Inside gulpfile.js
// JavaScript via webpack.
* gulp.task( 'webpackJS', callback => {
*	webpack( webpackConfig, ( err, stats ) => {
*		if ( err ) {
*			throw new gutil.PluginError( 'webpack', err );
*		}
*		gutil.log(
*			'[webpack]',
*			stats.toString({
*				colors: true,
*				progress: true
*			})
*		);
*		callback();
*	});
* });
```

]

---

class: middle, bgGulp
layout: false
.left-column[
## 4. WRITE THE GULP TASK
##### 4.1 `'webpackJS'` task
##### 4.2 `webpack` compiler
]
.right-column[

```js
// Inside gulpfile.js
// JavaScript via webpack.
gulp.task( 'webpackJS', callback => {
*	webpack( webpackConfig, ( err, stats ) => {
*		if ( err ) {
*			throw new gutil.PluginError( 'webpack', err );
*		}
*		gutil.log(
*			'[webpack]',
*			stats.toString({
*				colors: true,
*				progress: true
*			})
*		);
*		callback();
*	});
});
```

]

---

class: middle, bgGulp
layout: false
.left-column[
## 4. WRITE THE GULP TASK
##### 4.1 `'webpackJS'` task
##### 4.2 `webpack` compiler
##### 4.3 Error handling
]
.right-column[

```js
// Inside gulpfile.js
// JavaScript via webpack.
gulp.task( 'webpackJS', callback => {
	webpack( webpackConfig, ( err, stats ) => {
*		if ( err ) {
*			throw new gutil.PluginError( 'webpack', err );
*		}
	    gutil.log(
			'[webpack]',
			stats.toString({
				colors: true,
				progress: true
			})
		);
		callback();
	});
});
```

]

---

class: middle, bgGulp
layout: false
.left-column[
## 4. WRITE THE GULP TASK
##### 4.1 `'webpackJS'` task
##### 4.2 `webpack` compiler
##### 4.3 Error handling
##### 4.3 `webpack` log
]
.right-column[

```js
// Inside gulpfile.js
// JavaScript via webpack.
gulp.task( 'webpackJS', callback => {
	webpack( webpackConfig, ( err, stats ) => {
		if ( err ) {
			throw new gutil.PluginError( 'webpack', err );
		}
*	    gutil.log(
*			'[webpack]',
*			stats.toString({
*				colors: true,
*				progress: true
*			})
*		);
		callback();
	});
});
```

]
---

# Configuration file for webpack

<hr>

👀 Copy paste the `webpack` [config of cgb-scripts](https://github.com/ahmadawais/create-guten-block/blob/master/packages/cgb-scripts/config/webpack.config.dev.js) to our `webpack.config.js` file.

<hr>

✅ Trim anything that doesn't handle JavaScript from our `webpack.config.js` file

<hr>

✅ Update the paths and we're good to go

<hr>

😎 Let's have a look
---

class: middle, bgGoldTomato
layout: false
.left-column[
### 1. Update Paths
]
.right-column[

Add paths by looking at the [paths](https://github.com/ahmadawais/create-guten-block/blob/master/packages/cgb-scripts/config/paths.js) file.

```js
// FILE: webpack.config.js
const fs = require( 'fs' );
const path = require( 'path' );

* // Make sure any symlinks in the project folder are resolved:
* const theDir = fs.realpathSync( process.cwd() );
* const resolvePath = relPath => path.resolve( theDir, relPath );
```

]

---

class: middle, bgGoldTomato
layout: false
.left-column[
### 1. Update Paths
### 2. Add the Mode
]
.right-column[
.space.sp1[]

```js
// FILE: webpack.config.js
// …
// Export configuration.
module.exports = {
*	mode: 'development',
	devtool: 'source-map',
```

]

---

class: middle, bgGoldTomato
layout: false
.left-column[
### 1. Update Paths
### 2. Add The Mode
### 3. Update Entry/Output
]
.right-column[

```js
// FILE: webpack.config.js
// …
// Export configuration.
module.exports = {
	mode: 'development',
	devtool: 'source-map',
	entry: {
*		'main.min': './assets/js/src/index.js' // 'name' : 'path/file.ext'.
	},
	output: {
		pathinfo: true,
*		path: resolvePath( './assets/js/build/' ), // The dist folder.
		filename: '[name].js' // [name] = './assets/js/index.build' as defined above.
	},
```

]

---

class: middle, bgGoldTomato
layout: false
.left-column[
### 1. Update Paths
### 2. Add The Mode
### 3. Update Entry/Output
### 4. Add New Externals
]
.right-column[
.space.sp2[]

```js
// FILE: webpack.config.js
// …
// Add externals.
externals: {
*    wpObj: 'wpObj',
*    gtag: 'gtag',
*    Intercom: 'Intercom',
*    jquery: 'jQuery'
}
```

]
---
class: split-50 nopadding bkgpos_00
background-image: url(img/bright.png), linear-gradient(to bottom, #F5AE16, #F19021)

.column_t2.font10em[

]
.column_t2[.vmiddle.pushfront[

# Gulp + webpack

---

**Mind blown?!** Here's what we've accomplished:

---

🎯  JavaScript is being handled by `webpack`

✅  Everything else is still being handled by `WPGulp`

✅  We can now use modern JavaScript features, npm Modules, async/await, Object/Array spreads, etc.

🤔  → 🙃  → 🧐  → 🤞 → 🤫 → 😁 → 🤗

]]

---
class: split-50 nopadding bkgpos_00
background-image: url(img/bright.png), linear-gradient(to bottom, #292F33, #654500)

.column_t2.font10em[

]
.column_t2[.vmiddle.pushfront[

---

---

.bio.smLnk[[FOSS GitHub](https://github.com/ahmadawais) | [AhmadAwais.com](https://AhmadAwais.com/) | [LinkedIn](https://www.linkedin.com/in/mrahmadawais/)]

]

]]