Electron vs PostCSS

Overview

Electron

Stacks11.6K

Followers10.0K

Votes148

PostCSS

Stacks2.4K

Followers548

Votes49

GitHub Stars28.9K

Forks1.6K

Electron vs PostCSS: What are the differences?

Developers describe Electron as "Build cross platform desktop apps with web technologies. Formerly known as Atom Shell, made by GitHub". With Electron, creating a desktop application for your company or idea is easy. Initially developed for GitHub's Atom editor, Electron has since been used to create applications by companies like Microsoft, Facebook, Slack, and Docker. The Electron framework lets you write cross-platform desktop applications using JavaScript, HTML and CSS. It is based on io.js and Chromium and is used in the Atom editor. On the other hand, PostCSS is detailed as "Transform CSS with JS plugins". PostCSS is a tool for transforming CSS with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more.

Electron and PostCSS are primarily classified as "Cross-Platform Desktop Development" and "CSS Pre-processors / Extensions" tools respectively.

"Easy to make rich cross platform desktop applications" is the top reason why over 50 developers like Electron, while over 17 developers mention "The "babel" of CSS" as the leading cause for choosing PostCSS.

Electron and PostCSS are both open source tools. Electron with 74.9K GitHub stars and 9.81K forks on GitHub appears to be more popular than PostCSS with 21.1K GitHub stars and 1.15K GitHub forks.

Slack, Intuit, and InVisionApp are some of the popular companies that use Electron, whereas PostCSS is used by Rainist, Uploadcare, and Twilio SendGrid. Electron has a broader approval, being mentioned in 221 company stacks & 374 developers stacks; compared to PostCSS, which is listed in 63 company stacks and 47 developer stacks.

Share your Stack

Help developers discover the tools you use. Get visibility for your team's tech choices and contribute to the community's knowledge.

View Docs

CLI (Node.js)

Manual

Advice on Electron, PostCSS

Anonymous

CEO at ME!

Jun 17, 2020

Needs adviceon

Sass

Stylus

PostCSS

Originally, I was going to start using @{Sass}|tool:1171| with Parcel, but then I learned about @{Stylus}|tool:1172|, which looked interesting because it can get the property values of something directly instead of through variables, and @{PostCSS}|tool:3339|, which looked interesting because you can customize your Pre/Post-processing. Which tool would you recommend?

547k views547k

Comments

Semih

Software Engineering Manager

Oct 1, 2020

Needs adviceon

JavaScript

HTML5

.NET

Hi,

We are planning to develop a brand new UX for an already existing desktop software. The previous version is developed on C#.NET with Winforms & WPF. Our plan is to use JavaScript/HTML5 based frontend technologies for the new software. For some components, we are highly dependent on .NET/ .NET Core because the JS-based versions are not mature enough.

What would you choose for a desktop-based Engineering Software that supports multi-OS and has rich UI capabilities considering the .NET dependencies?

Thanks in advance,

Semih

57.9k views57.9k

Comments

Detailed Comparison

Electron	PostCSS
With Electron, creating a desktop application for your company or idea is easy. Initially developed for GitHub's Atom editor, Electron has since been used to create applications by companies like Microsoft, Facebook, Slack, and Docker. The Electron framework lets you write cross-platform desktop applications using JavaScript, HTML and CSS. It is based on io.js and Chromium and is used in the Atom editor.	PostCSS is a tool for transforming CSS with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more.
Use HTML, CSS, and JavaScript with Chromium and Node.js to build your app.;Electron is open source; maintained by GitHub and an active community.;Electron apps build and run on Mac, Windows, and Linux.;Automatic updates;Crash reporting;Windows installers;Debugging & profiling;Native menus & notifications	-
Statistics
GitHub Stars -	GitHub Stars 28.9K
GitHub Forks -	GitHub Forks 1.6K
Stacks 11.6K	Stacks 2.4K
Followers 10.0K	Followers 548
Votes 148	Votes 49
Pros & Cons
Pros 69 Easy to make rich cross platform desktop applications 53 Open source 14 Great looking apps such as Slack and Visual Studio Code 8 Because it's cross platform 4 Use Node.js in the Main Process Cons 19 Uses a lot of memory 8 User experience never as good as a native app 4 No proper documentation 4 Does not native 1 Each app needs to install a new chromium + nodejs	Pros 21 The "babel" of CSS 15 Customizable 8 Autoprefixer 2 Variables 1 PostCSS Flexbugs Fixes

What are some alternatives to Electron, PostCSS?

Sass

Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It's translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.

Less

Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable.

Stylus

Stylus is a revolutionary new language, providing an efficient, dynamic, and expressive way to generate CSS. Supporting both an indented syntax and regular CSS style.

Bourbon

Bourbon is a library of pure sass mixins that are designed to be simple and easy to use. No configuration required. The mixins aim to be as vanilla as possible, meaning they should be as close to the original CSS syntax as possible.

Sciter

It brings a stack of web technologies to desktop UI development. Web designers, and developers, can reuse their experience and expertise in creating modern looking desktop applications.

wxWidgets

It is a C++ library that lets developers create applications for Windows, macOS, Linux and other platforms with a single code base. It has popular language bindings for Python, Perl, Ruby and many other languages, and unlike other cross-platform toolkits, it gives applications a truly native look and feel because it uses the platform's native API rather than emulating the GUI. It's also extensive, free, open-source and mature.

Compass

The compass core framework is a design-agnostic framework that provides common code that would otherwise be duplicated across other frameworks and extensions.

Qt5

It is a full development framework with tools designed to streamline the creation of applications and user interfaces for desktop, embedded, and mobile platforms.

JavaFX

It is a set of graphics and media packages that enables developers to design, create, test, debug, and deploy rich client applications that operate consistently across diverse platforms.