Marko? Marko! #3: Electron, Webpack

Today we will talk about why we had to ditch Lasso in order to use Electron with MarkoJS, and take a look at some examples of Marko’s “beautiful concise syntax”.

Last week we talked about how to set up Electron with MarkoJS and Lasso. A problem we ran into however, was not being able to use Electron as a remote in our renderer. It turns out this a problem with Webpack too, and it requires adding a target: electron-renderer rule to a webpack.config.js.

We were hoping we could achieve a similar result within the config for Lasso, but eventually we decided to switch over to Webpack, and were able to set up our remote in MarkoJS, so that we could work with Electron. But not before we had to go into our webpack.config.js and set up an alias as well. Adding this rule to our resolve object was a little tricky to figure out, but thankfully MarkoJS has a great support, and the creators of MarkoJS themselves showed us that the rule we needed was aliasFields: ["browser"].

Aliasing and targeting like this allows us to load an index.marko file into our Electron browser window like this …

app.on('ready', ()=> {
  topWindow = new BrowserWindow()
  topWindow.loadURL('file://' + __dirname + '/index.marko')
  topWindow.webContents.openDevTools();
  topWindow.on('closed', ()=> {
    topWindow = null
  })
})

When using MarkoJS, we have the option of using its Concise Syntax. It was a pleasure to work with on this project and we had fun refactoring our code. Here is an example of a 3x3 grid using Concise Syntax.

class {
  distract(url, e) {
    e.preventDefault()
    mainProcess.createWindow(url)
  }
}
div.grid
  div.cell on-click('distract', some url) -- Wikipedia
  div.cell on-click('distract', some url) -- TED Talk
  div.cell on-click('distract', some url) -- Beat Maker
  div.cell on-click('distract', some url) -- Music Videos
  div.cell on-click('distract', some url) -- Throw Your Trash Away
  div.cell on-click('distract', some url) -- Hustlin'
  div.cell on-click('distract', some url) -- Pointer
  div.cell on-click('distract', some url) -- Gif
  div.cell on-click('distract', some url) -- Staggering Beauty

Here we are able to create new windows in Electron with a click event in our Marko component. We do this by exporting the createWindow function from our main.js Electron file, and importing it as mainProcess.createWindow in our Marko component like this…

static {
  const electron = require('electron')
  const remote = electron.remote
  const ipc = electron.ipcRenderer
  const mainProcess = remote.require('./main')
  const currentWindow = remote.getCurrentWindow()
}

Alright! That about does it for our experiment with Electron and MarkoJS.

Here is a link to our Repo if you would like to see more of our code.

Message me if you have any questions or would like a zip file of our Electron app.