README
:goggles: GRaderJS 
Build cross-platform desktop apps without the bloat using JS, HTML and CSS.
Details
Minimal binary is 10MB (Windows, Hello World App, using node v12.10.0). Typical Linux/MacOS binary is 14MB (Hello World App, using node v12.10.0). These days we have upgraded to node v14.15.3, but you can control the version (as long as the required nexe pre-built node binaries are available for that version). Node v14.15.3 binaries are larger (~19 - 24 MB).
- Overview
- Getting Started
- Step by step guide
- API
- Then build it
- Configuration
- Screenshots
- More
- Licensing
- Related projects
Advantages
- Simplicity. Grader is just a web server running on localhost viewed with the user's browser. If they have Chrome installed then you get a proper looking desktop app (thanks to the --app flag), and access to a bunch of cool APIs to control the browser (thanks to remote DevToosl protocol).
- Extensive APIs. Because you have access to Node.JS and, with Chrome, DevTools APIs there's so many things you can do. You can do almost anything.
Disadvantages (...or, Opportunities, and Opportunities for Improvement? Yes)
- New. Undeveloped. Embryonic. Fragile. Untested. Unknown (relatively).
- Requires Chrome to be installed for a great experience (some people don't have it).
- Bundles Node.JS (and packs using upx but the binaries are still bigger than using Tauri or Neutralino).
- API still undeveloped and likely to change.
- Icons (for the binary) don't work (and it's a hard problem).
Grader Workflow
- Create a new Grader app
- Fill out the sections with your business logic and app specific node
- Compile to get cross-platform binaries
Extended Workflow
- Code-sign your binaries and upload them to app stores or GitHub releases or your own website.
Ultimate Workflow (still impossible)
- Use
impossible non-existant(future?)packaging tool to bundle each binary in a soothing bath of platform specific app metadata that includes icons and associated weird OS specific coolness to make things truly awesome.
License
Copyright (c) 2020, Dosyago and/or its affiliates. All rights reserved.
This is a release of Grader, an cross-platform app builder.
License information can be found in the LICENSE file.
This software is dual-licensed. For information about commercial licensing, see Dosyago Commercial License for OEMs, ISVs and VARs.
Built with Grader
- wingrader - windows 95 cross platform
- jspaint.exe - classic paint cross platform
Getting Started
npx graderjs my-app
API & Documentation
Only a couple of API calls, classed into four categories: Protocol, NodeJS, App, Window.
Read the API docs for a detailed usage or see below for an overview.
Protocol Control
Instrument the browser directly with DevTools*.
- constrol.send(command, params)
- control.on(eventName, handlerFunction) (also off)
*See commands available at DevTools protocol homepage
NodeJS related
As normal just use npm to add dependencies and import to use them
App Lifecycle
- launch:
go() - shutdown:
stop()
Window Related
- ui.open
- ui.close
- ui.move
- ui.size
- ui.minimize
- ui.maximize
- ui.restore
- ui.fullscreen
- ui.partscreen
- ui.getLayout
- ui.openBlank (not yet implemented)
- ui.writePage (not yet implemented)
- ui.getScreen
Docketty Docs
Then, read the API docs or see below for the Getting Started Goose Guide.
Questions
Open an issue!
Step By Step Guide
Get Started from the Command line
Use npm to get the Grader.JS tool to automatically populate your new grader app.
$ npm i -g graderjs@latest
$ graderjs my-new-app
Then, read the API docs or see below for the Getting Started Goose Guide.
Or...
Get Started from GitHub
Click "Use This Template" on the base-repo and you will have a new repo, then clone it to your workspace and cd into it, and run:
npm i
Then...
Start Building!
Read the API docs, or create yer binaries right away:
./scripts/compile.sh
You now have a GUI app in Node.JS and JavaScript/HTML/CSS.
And you will have cross-platform binaries available in /bin
(and also for download from the computer you're on at port 8080.)
Start Coding
Put your own code into, src/app.js:
E.g:
import Grader from './index.js';
start();
async function start() {
await Grader.go();
}
And put your JS/HTML/CSS into, src/public/index.html:
<meta charset=utf-8>
<title>Your Cross-Platform App</title>
<style>
:root {
font-family: sans-serif;
background: lavenderblush;
}
body {
display: table;
margin: 0 auto;
background: silver;
padding: 0.5em;
box-shadow: 0 1px 1px purple;
}
h1 {
margin: 0;
}
h2 {
margin-top: 0;
}
</style>
<h1>Hello World!</h1>
<h2>Meet <i>Grader</i></h2>
<p>
<button onclick="grader.ui.minimize();">_</button>
<button onclick="grader.ui.restore();">⬜</button>
<button onclick="grader.ui.close();">x</button>
<script>
(async () => {
await graderReady();
const [title, favicon, startURL] = (await Promise.allSettled([
grader.meta.getTitle(),
grader.meta.getFavicon(),
grader.meta.getStartURL()
])).map(({status, value, reason}) => {
if ( status == 'fulfilled' ) return value;
return reason;
});
console.log({title, favicon, startURL});
document.title = title;
})();
</script>
API
Read the API docs!
Build it
./scripts/compile.sh
You now have a GUI app in Node.JS and JavaScript/HTML/CSS.
And you will have cross-platform binaries available in /bin
and also for download from the computer you're on at port 8080.
For more demos see the demos in src/demos.
Configuration
You can configure some options, via the configuration located in src/config.js:
module.exports = {
name: "MyGraderApp",
entry: "./app.js",
author: {
name: "my name",
url: "https://github.com/my-github-username",
},
desiredPort: 49666,
version: "0.0.1",
description: "A Beautiful Demonstration",
source: "https://github.com/my-github-username/MyGraderApp",
organization: {
name: "My Org",
url: "https://github.com/my-github-org-name"
},
apiOrigins: [], // origins allowed to call API from UI (not implemented)
DEBUG: false // switch on debug output when you're ready to debug
}
Screenshots
More
See the API docs for more. Or just read the README.md of the grader app you've just created, it contains the full API docs. You can also take a look at the API code in src/index.js.
Licensing
You're free to use this so long as you abide by AGPL-3.0. If you want to use it commercially or don't want this license, you can purchase an exemption.
Related projects
See this list of Electron alternatives for more options for cross-platform desktop app developement using web technologies.
nerding warnung
WARNING: This project uses Google Chrome to display the UI. Running this will download and install Google Chrome if you don't already have it installed. If you are allergic to Google Chrome, please avoid running or ingesting this coode.