[work in progress]
npm install ratpack -g
ratpack is for beginners, tinkerers, ents, cylons.
script.js, and save it somewhere. maybe it looks like this -
drag it on to the app, or run
- steals a bunch of code/tools from create-react-app for live reloading, in-browser error messaging, file loaders for css, images, etc, and you can load your own loaders with js pragmas
- comes with liberal babel defaults, including future facing extensions (and decorators!). You can also use a
- preloads libraries like react, react-router@4, and glamor. It'll also use modules from
node_modulesfolder, and you can add your own 'globally' by installing with npm/yarn to
- use a local
publicfolder to serve static assets that can't be imported (todo - and / or to serve a custom
- use pragmas at the top of your file to configure ratpack
- todo - will autoupdate itself whenever I make a 'release', so you're using the latest versions of presets and packaged libs almost as soon they're out
- todo - a preferences pane to edit 'global' settings; toggle presets, add libs, etc
long, rambly rationale
tl;dr - old school flow, new age ride.
These first 2 minutes are critical. The idea you've just had is ephemeral, and needs to be written down fast. It'll be dirty, and you might just throw it away later. At this point, you don't care about the framework wars and modularity shaming and whatever. This is all about you.
Mind you, we still had build systems, and we bikeshedded a lot over them and how we built our apps, but those 'apps' were a different context; built for teams and stability. Indeed, deep inside those app folders it wasn't uncommon to find 'demo' pages and
.md scratchpads for ideas.
But 'personal' coding? Totally different rules. For one, you'd usually want the latest versions of libs. You want as little boilerplate as possible, to jump into the meat of the problem immediately. Maybe you'd have a little
/code folder with all your commonly used libs and personal experiments. Even in the context of a larger project, maybe you want to work on a component in isolation, but don't want / need to use the project's main infrastructure.
The setup process to use transpiled languages though... not so great. You need to install and configure a pipeline of tools, usually cli + node based, in a terminal, and pay this cost almost every time you need to run a new file. nwb, create-react-app, etc get so close, but by nature of their being designed for 'apps', don't achieve the lightweight, experimental feel I'm looking for. Also, CLIs, ick.
We're UI developers. We can do better. By building beginner/tinkerer friendly tooling, we can automate some of our own pain away, and increase how inclusive we are as a community and as a technology. Here's my attempt.
First, some of my 'requirements' -
- I do not want to have to install or configure anything 'build' related every time.
- I'd like some liberal defaults, and include some prepackaged libraries like react, react-router, glamor, polyfills for fetch etc.
- maybe I'll have a local node_modules, or in a folder higher up my path
- perhaps I'll have a local
publicfolder too, with images and css or whatever I'll need
- perchance if I need to, I'd like a custom babel config to mess with a plugin or preset
Let's imagine the core experience - I'd like to have an app (like a legit, macOS/windows/linux desktop app), and I'd like to drag and drop my
.js file into it / onto its dock icon, and it would "just work". It could open a browser tab to that file running in a simple html page, and reload whenever I make file changes. A list of previously opened files would be nice.
Hence... drum roll... ratpack. Hope you like it. Lemme know what I could do better, and what you'd like to see!
- better design
- frictionless mobile web dev
- build / deploy to now / surge / etc
- the service worker treatment
- end to end encrypted share ala ngrok
- multiple languages; flow, reason, node, whatevs
- eject config, for carrying on a 'real' project
- a smaller package
the shoulders of giants
this couldn't exist without the work of thousands of people in the OSS world. Some projects specifically -
- and of course, react and its entire ecosystem.
This is stil very early work, with a large number of todos to get through before it's 'production ready'.
That said, this is already pretty useful. If you'd like to try it out, either try out the
prototype mac release, or clone this repo and run
npm run && npm run package-app to generate the binary for
your computer. Have fun!