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

Not so long ago, I stumbled upon the brainchild of GitHub - Atom. And immediately became interested in what technologies were used to create this editor. And, as it turned out, the basis of the foundations is Electron - Chromium and node.js in one box. Naturally, I decided to see what kind of beast it is, hooking at the same time 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 under cat.

Where to begin?

Particularly impatient - a link to the source .

Well, you need to start with the cloning of 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 in the root of the project. You will install the modules for building and running the application described in ./package.json , the modules for running the application itself ./source/package.json (in our case they are missing) and the dependencies described in ./source/windows/bower.json , for client rendering. On the client, we will use Polymer and some custom elements from a fairly large "Paper Elements" catalog available on the framework's official website .

After successful installation of all dependencies, we can start the application by running in the root folder:

 build 

At the same time, the program build will be initialized and its subsequent launch upon successful build. At the exit, we should get something similar to the first and only image of the post.

And if more?

And if more, then you should look into build.bat

 grunt build && run 

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

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

This task consistently raises a set of actions: compiling sass files, compiling TypeScript, templating pug files. Each task has a corresponding file in the ./build_scripts directory, and the configurations described in these files automatically fall into grunt-config.

Upon completion of the build, the run command is executed, which starts the application itself. If you are familiar with Grunt, then you will not be able to understand the assembly.

Little about the structure

In the directory ./source are all the source code of the program:

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

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

Webview

The content of the Todoist service itself will be located and isolated within the webview tag, courtesy of the Electron developers. We need to specify only the src attribute with the address of the displayed page, specify the necessary styles for the page to be correctly and harmoniously displayed.

In custody...

I apologize for such a concise story, which does not at all explain the essence and some points in the project, but I believe that if Electron interests you in conjunction with the technologies mentioned above, then it will not be difficult for you to understand the project.

PS: At the root of the project there is another batch file (if you haven’t noticed of course yet) - “release.bat” - the launch of which will assemble the project, pack it into a special app.asar container and put everything in the ./build/release/dist folder with the main performing file "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.