Skip to content

Home

Jump to bottom
Chunpeng Huo edited this page Dec 18, 2024 · 11 revisions

Dumber Gist

An online IDE to write JS SPA prototypes in your own GitHub gists. It runs on Dumber bundler.

What's the differences from other online IDEs

  1. Free forever.
  2. Written in Aurelia.
  • will migrate to Aurelia 2 when it's ready.
  1. Bundler runs purely in browser.
  • two tiny backends, one for GitHub OAuth, another for sharing traced cache globally.
  • only traced results of npm packages are cached remotely, not your code.
  1. Save your project in your own GitHub Gists.

Supported JS Frameworks

There are two popular frameworks missing from this list: Angular and Vue. Because their toolchain are designed to run in Nodejs environment, it needs more study on how to bring the toolchain up in browser environment.

Some JS frameworks need no special toolchain, like Backbone. You can just start with a skeleton with "None" framework, and start writing Backbone app. You don't even need to add backbone to package.json (see below for more details).

JS syntax

It supports all the JS syntax that those frameworks want. Dumber Gist is designed to run on latest ever-green browsers. Your app is transpiled to ES2017 to take the advantage of latest browsers.

CSS syntax

Dumber Gist supports less/sass/scss and native css. It doesn't support Stylus syntax yet, because a small trouble (how to import sibling file) on running stylus compiler inside browser.

You can even mix the supported CSS files in one project.

Unit tests

For all the supported frameworks listed above, user can optionally write unit tests in following test runners:

All tests run in browser environment, not Nodejs environment, obviously.

Bundler config

For simplicity, no dumber config exposed to end users. If you want to use prepend, just add those JS files to index.html.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Dumber Gist</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">

  <!-- Add those prepends before entry-bundle.js -->
  <script src="https://get/some.js"></script>

</head>
<body>
  <script src="/dist/entry-bundle.js" data-main="main"></script>
</body>
</html>

package.json

The package.json file helps Dumber Gist to pick correct toolchain. For example, if you have inferno in your dependencies, Dumber Gist will turn on special JSX tool for Inferno. The dependency on those JS frameworks has "special" meaning to Dumber Gist.

If you use some other generic JS lib, for example lodash, you don't have to add it explicitly to package.json. Dumber Gist will just get latest npm version for lodash.

However you can explicitly add a dependency to package.json if you want to target a version which is not latest npm release, for example, to test a pre-release. And that's how we test Aurelia 2's dev nightly releases "aurelia": "dev".

Clone this wiki locally