Electron, SASS, TypeScript, Pug (Jade), Polymer and a bit of flying cycling to create a Windows application

Not so long ago stumbled upon the brainchild of GitHub'a - Atom. And immediately became interested in what technologies were used to create this editor. And, as it turned out, the basis is Electron - Chromium and node.js in one box. Naturally, I decided to see what kind of beast this was, while still hooking up a couple of technologies unknown to me at that time - TypeScript, SASS and Jade (now Pug). I didn’t even think about the idea for the application - it will be a desktop version of the well-known service - Todoist.

Who cares - welcome to cat.

Where to begin?

Particularly impatient - link to the source .

Well, you need to start with cloning the project:

git clone https://github.com/Defenderbass/TodoistElectron.git
cd TodoistElectron

The next step is to install the dependencies, for which we run the install.bat batch file , which lies at the root of the project. The build and launch modules of the application described in ./package.json , the modules for the operation of the application ./source/package.json (in our case they are absent), and the dependencies described in ./source/windows/bower.json are installed for client side rendering. On the client, we will use Polymer and some custom elements from the rather large "Paper Elements" catalog, available on the official website of the framework.

After successfully installing all the dependencies, we can start the application by executing in the root folder:

build

This will initialize the assembly of the program and its subsequent launch upon successful assembly. At the output, we should get something similar to the first and only picture of the post.

And if more?

And if in more detail, then it's worth a look at build.bat

grunt build && run

That is, the registered task described in Gruntfile.js first rises :

grunt.registerTask('build', [
    'clean:build', 
    'sass:dev', 
    'sass:components_dev', 
    'typescript:dev', 
    'typescript:components_dev', 
    'copy:dev',
    'copy:pug', 
    'pug:dev'
]);

This task sequentially raises a set of actions: compiling sass files, compiling TypeScript, template pug files. Each task corresponds to a file of the same name in the ./build_scripts directory , and the configurations described in these files automatically fall into grunt-config.

When the assembly is complete, the run command is run , which launches the application itself. If you are familiar with Grunt, then understanding the assembly is easy for you.

A little bit about the structure

The ./source directory contains all the program sources:

• ./package.json with a description of the dependencies and the main file;
• ./app.ts - the main executable file, which raises the process of rendering the page (window);
• ./windows - the directory with the files for rendering, the most voluminous in our case. It contains libraries (Polymer), some self-written modules, class decorators and custom elements created through Polymer.

On the created page, only three custom self-written elements are used. I really wanted to inherit one class of a custom element from another, but Polymer does not give such an opportunity out of the box, so I wrote wrappers in the form of decorators for element classes to conveniently determine the methods and attributes of an element, and with all this, the resulting classes can easily transfer inheritance.

Webview

The content of the Todoist service itself will be located and isolated inside the webview tag, kindly provided by the Electron developers. We need to specify only the src attribute with the address of the displayed page, specify the necessary styles for the correct and harmonious display of the page.

In custody...

I apologize for such a short story, which does not explain the essence and some of the points in the project, but I believe that if you are interested in Electron in the compartment with the technologies mentioned above, then understanding the project will not be difficult for you.

PS: At the root of the project there is another batch file (if you haven’t noticed yet of course) - "release.bat" - the launch of which will collect the project, pack it in a special container app.asar and put everything in the ./build/release/dist folder with The main executing file is "Todoist.exe". The finished program can be packaged in one installation file, for example, using a utility such as Smart Install Maker , for convenient installation / uninstallation of software from users' machines.