Installable Development Environments

Maciej Pękala 18.05.2017

@penzington

What are they?

yarn add my-inst-dev-env -D
$(yarn bin)/my-inst-dev-env

dev server, bundling, testing, linting, typing etc.

{command}

... and scaffolding?

Examples?

create-react-app

$(yarn bin)/nwb {start|build|test}

$(yarn bin)/react-scripts {start|build|test|eject}

nwb

Scaffolding?

yeoman

Scriptable scaffolding for any stack

 

create-react-app

Simple project template

nwb

nwb new react-component react-loading-button
yarn create

Installable Development Environments

Why you shouldn't use them

  • indirection, abstraction that leaks
  • loss of access to features of underlying tools
  • tools optimise for "direct" usage, complexity from going around it

Why you should use them

  • quickly kick start to the projects
  • easily upgrade your toolchain across projects
  • focus on your application, adding value
  • encourages more decoupled architectures
  • encourages experimenting with shiny new tooling
  • don’t need to get into "frontend ops" if it doesn’t interest you

Why you shouldn't build your own

  • avoid mistakes other devs made
  • keep up with community best standards without FOMO
  • NIH syndrome
  • contribute to the existing open source projects instead
  • it’s not easy to make it robust (eject, boilerplate)

Why you should build your own

  • fine tune to your specific needs
  • only bring the features and tools you use
  • don’t have to make trade-offs
  • quick iterations, bug fixes
  • you will learn a lot

Demo

Tips

path.resolve(__dirname, 'file/in/dev-env/package');
path.resolve('file/in/app/code');
require.resolve('babel-preset-react')

 

  • accessing files in app code vs package code
  • use CLI tools from node - spawn child processes
  • yarn link works fine for development
  • ESlint support for text editors can be problematic
  • expose multiple binaries, or use e.g. commander
  • yarn and npm differ in some details
const spawn = require('child_process').spawnSync;
spawn(binFile, process.argv.slice(2), { stdio: 'inherit' });

Thanks!

Maciej Pękala 18.05.2017

@penzington

Made with Slides.com