History lesson! Once upon a time, not so long ago, JavaScript was trash. Among many things it lacked were:
- lexical variable scoping
- classes
- template literals
- multiline strings
- looping over arrays without explicit indexes
- any sanity with regards to what
thisreferred to - concise syntax for declaring and using small functions
- array or object destructuring
-
...spread operator - and a lot more
It was crazy why anyone would code this way. People were so desperate they were even cross-compiling Java to JavaScript, or coding things in Flash. Or just used jQuery for everything.
The problem was that while JavaScript was terrible, cross-compiling another existing language like Ruby or Python (or Java for some crazy reason) would cause massive issues with interoperability with browser APIs, as they were all designed for JavaScript.
CoffeeScript tried something else - it fixed as much as it could on syntactic level, while keeping mostly to JavaScript-like semantics. It pretty much single-handedly saved JavaScript. I'm pretty sure it it wasn't for CoffeeScript we'd all be coding in Flash today.
Then the mainstream JavaScript incorporated 80% of CoffeeScript features in a way that would be backwards compatible and run natively in the browsers. This put CoffeeScript in an awkward position - not only it lost its main purpose, but ES6 implemented many things in ways that were not quite compatible with how CoffeeScript did it, so targetting ES6 would cause serious issues with existing CoffeeScript codebases.
CoffeeScript also arguably went overboard a bit - there's really no reason why foo is off needs to be a synonym for foo == false (that is foo === false in JavaScript, CoffeeScript intentionally doesn't have sloppy equals).
CoffeeScript 2 attempted to continue CoffeeScript in the post-ES6 world. For sake of nostalgia, let's give it a try.
Let's get started!
The first I discovered is that js2coffee I used years ago no longer works. At least it doesn't support any modern JavaScript features, so I had to write all my CoffeeScript by hand. Oh well, I might still remember some of that.
npm install --save-dev coffeescript electron
package.json
As we're not using any pre-configured template, we need to decide how to structure our source, and write our own package.json.
I decided to put all the source in src, and output it all to public/build.
This results in the following package.json:
{
"scripts": {
"build": "coffee -o public/build/ -c src",
"watch": "coffee -o public/build/ -cw src",
"electron": "electron ."
},
"devDependencies": {
"coffeescript": "^2.6.0",
"electron": "^15.1.0"
},
"main": "public/build/backend.js"
}
src/backend.coffee
It's a little cleane, but same as before - just open a window with index.html and preload.js. Then quit the app when the window closes.
{app, BrowserWindow} = require("electron")
createWindow = ->
win = new BrowserWindow
webPreferences:
preload: "#{__dirname}/preload.js"
win.loadFile "#{__dirname}/../index.html"
app.on "ready", createWindow
app.on "window-all-closed", =>
app.quit()
public/index.html
All we need to do is refer the CSS and compiled JS:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="app.css">
</head>
<body>
<h1>Hello, World!</h1>
<script src="./build/app.js"></script>
</body>
</html>
public/app.css
I thought about making it SASS to better match CoffeeScript theme, but it will do like this.
body {
background-color: #444;
color: #fff;
}
src/preload.coffee
As a placeholder for something more useful, it just sends a dictionary of version numbers to the frontend:
{ contextBridge } = require("electron")
contextBridge.exposeInMainWorld(
"api",
versions: process.versions
)
src/app.coffee
And finally we use browser DOM APIs to print those version numbers:
body = document.querySelector "body"
ul = document.createElement "ul"
body.append ul
for key, val of window.api.versions
li = document.createElement "li"
li.append "#{key}: #{val}"
ul.append li
Run it!
Then we can run it with these two commands:
$ npm run watch
$ npm run electron
Results
Here's the results:
In the next episode we'll write some games.
As usual, all the code for the episode is here.
Top comments (0)