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?
$(yarn bin)/nwb {start|build|test}
$(yarn bin)/react-scripts {start|build|test|eject}
Scaffolding?
Simple project template
nwb new react-component react-loading-button
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
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

Installable Dev Envs
By pekala
Installable Dev Envs
- 503