Electron vs Ionic

Overview

Ionic

Stacks9.5K

Followers8.6K

Votes1.8K

Electron

Stacks11.6K

Followers10.0K

Votes148

Electron vs Ionic: What are the differences?

Electron and Ionic are popular frameworks used for building cross-platform desktop and mobile applications respectively. Let's explore the key differences between them.

Development Languages: Electron primarily uses web technologies such as HTML, CSS, and JavaScript to build desktop applications. On the other hand, Ionic utilizes HTML, CSS, and JavaScript to build mobile applications. While both frameworks employ similar development languages, they are tailored to different platforms and have different sets of APIs and libraries available for programming.
Platform Targeting: Electron is designed specifically for creating desktop applications and can be used to build applications for Windows, macOS, and Linux operating systems. In contrast, Ionic is focused on creating mobile applications and supports platforms like iOS and Android. Ionic also provides various native plugins and features that allow developers to access device-specific functionalities.
User Interface Design: When it comes to user interface design, Electron applications can have a more native look and feel since they are built using web technologies but have access to the underlying operating system's APIs. On the other hand, Ionic applications follow a UI/UX design that is more consistent across multiple platforms using a set of pre-designed components and styles.
Performance: Since Electron applications run on Chromium, which is an open-source web browser, they may have higher memory and CPU requirements compared to native desktop applications. Ionic applications, on the other hand, generally have good performance as they are designed to run on mobile devices with limited resources.
Plugin Ecosystem: Both Electron and Ionic have extensive plugin ecosystems that allow developers to extend the functionality of their applications. However, Electron has a wider range of available plugins and libraries because it has been around for a longer time and is used extensively for desktop application development.
Deployment and Packaging: Electron applications can be packaged as standalone executables, which makes deployment easier for end-users. Ionic applications, on the other hand, are typically packaged as Mobile App Packages (e.g., APK for Android), which requires users to have a compatible mobile device or emulator to run the application.

In summary, Electron is primarily used for building cross-platform desktop applications using web technologies, while Ionic is focused on creating mobile applications and provides platform-specific features and plugins for iOS and Android.

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 Ionic, Electron

Fernando

Full Stack Developer

Sep 21, 2020

Needs adviceon

Java

ExpressJS

Ionic

I'm currently doing some research to build a full cross-platform system that our personnel will use for various management and selling purposes, this is just a first step to migrate (and clean, lots of cleaning) a gigantic and obsolete system made in Java 7 with a nightmarish coupling between logic and view layers.

Since the system itself is considerably large, we are currently migrating the essential modules of its logic to an ExpressJS driven Restful API.

As a complementary project, I must find a way to share the highest possible amount of view code while achieving said cross-platform capacity.

My approach is the following:

Angular 7+ and @{Ionic}|tool:876| 5 for Android and iOS.
Angular 7+ for the web.
Angular 7+ and @{Electron}|tool:2946| for Desktop.

While Angular is the common part, and considering that Ionic can work on any platform, i'm wondering what is the best way to achieve a non-conflicting integration of Electron.js to the very-commonly-used Angular+Ionic Stack for both Mobile and Web development?

I've stumbled with a quite good template build called Polyonic but I would love to hear more about the matter before taking such a long-lasting decision.

109k views109k

Comments

Anonymous

CEO at ME!

Jun 7, 2020

Decided

While with Ionic it is possible to make mobile applications with only web technologies, Flutter is more performant and is easy to use if you are willing to learn Dart, which is a fun language. Plus, it has awesome documentation and, while its ecosystem isn't near as big as JavaScript's is, it has a good package manager called Pub and its packages are generally high quality.

403k views403k

Comments

Thuan

FE Lead at SOLID ENGINEER

Jun 16, 2020

Decided

Javascripts is the most populated language in the world.
Easy to learn & deployed production
Fast development
Strong community
Completed Documents
Native performance with lower RAM used.
Easy to handle native issues by using native code like Java / Objective C
Powered by Facebook.

666k views666k

Comments

Detailed Comparison

Ionic	Electron
Free and open source, Ionic offers a library of mobile and desktop-optimized HTML, CSS and JS components for building highly interactive apps. Use with Angular, React, Vue, or plain JavaScript.	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.
Performance obsessed;Utilizes Angular and React;Native focused;Beautifully designed;Based on Web Components;	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
Stacks 9.5K	Stacks 11.6K
Followers 8.6K	Followers 10.0K
Votes 1.8K	Votes 148
Pros & Cons
Pros 248 Allows for rapid prototyping 228 Hybrid mobile 208 It's angularjs 186 Free 179 It's javascript, html, and css Cons 20 Not suitable for high performance or UI intensive apps 15 Not meant for game development 2 Not a native app	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

What are some alternatives to Ionic, Electron?

Flutter

Flutter is a mobile app SDK to help developers and designers build modern mobile apps for iOS and Android.

React Native

React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React. The focus of React Native is on developer efficiency across all the platforms you care about - learn once, write anywhere. Facebook uses React Native in multiple production apps and will continue investing in React Native.

Xamarin

Xamarin’s Mono-based products enable .NET developers to use their existing code, libraries and tools (including Visual Studio*), as well as skills in .NET and the C# programming language, to create mobile applications for the industry’s most widely-used mobile devices, including Android-based smartphones and tablets, iPhone, iPad and iPod Touch.

NativeScript

NativeScript enables developers to build native apps for iOS, Android and Windows Universal while sharing the application code across the platforms. When building the application UI, developers use our libraries, which abstract the differences between the native platforms.

Apache Cordova

Apache Cordova is a set of device APIs that allow a mobile app developer to access native device function such as the camera or accelerometer from JavaScript. Combined with a UI framework such as jQuery Mobile or Dojo Mobile or Sencha Touch, this allows a smartphone app to be developed with just HTML, CSS, and JavaScript.

Framework7

It is a free and open source mobile HTML framework to develop hybrid mobile apps or web apps with iOS native look and feel. All you need to make it work is a simple HTML layout and attached framework's CSS and JS files.

Qt

Qt, a leading cross-platform application and UI framework. With Qt, you can develop applications once and deploy to leading desktop, embedded & mobile targets.

PhoneGap

PhoneGap is a web platform that exposes native mobile device apis and data to JavaScript. PhoneGap is a distribution of Apache Cordova. PhoneGap allows you to use standard web technologies such as HTML5, CSS3, and JavaScript for cross-platform development, avoiding each mobile platforms' native development language. Applications execute within wrappers targeted to each platform, and rely on standards-compliant API bindings to access each device's sensors, data, and network status.

Expo

It is a framework and a platform for universal React applications. It is a set of tools and services built around React Native and native platforms that help you develop, build, deploy, and quickly iterate on iOS, Android, and web apps.

Vue Native

Vue Native is a mobile framework to build truly native mobile app using Vue.js. Its is designed to connect React Native and Vue.js. Vue Native is a wrapper around React Native APIs, which allows you to use Vue.js and compose rich mobile User Interface.

Related Comparisons

Electron vs Ionic: What are the differences?

Electron and Ionic are popular frameworks used for building cross-platform desktop and mobile applications respectively. Let's explore the key differences between them.

Development Languages: Electron primarily uses web technologies such as HTML, CSS, and JavaScript to build desktop applications. On the other hand, Ionic utilizes HTML, CSS, and JavaScript to build mobile applications. While both frameworks employ similar development languages, they are tailored to different platforms and have different sets of APIs and libraries available for programming.
Platform Targeting: Electron is designed specifically for creating desktop applications and can be used to build applications for Windows, macOS, and Linux operating systems. In contrast, Ionic is focused on creating mobile applications and supports platforms like iOS and Android. Ionic also provides various native plugins and features that allow developers to access device-specific functionalities.
User Interface Design: When it comes to user interface design, Electron applications can have a more native look and feel since they are built using web technologies but have access to the underlying operating system's APIs. On the other hand, Ionic applications follow a UI/UX design that is more consistent across multiple platforms using a set of pre-designed components and styles.
Performance: Since Electron applications run on Chromium, which is an open-source web browser, they may have higher memory and CPU requirements compared to native desktop applications. Ionic applications, on the other hand, generally have good performance as they are designed to run on mobile devices with limited resources.
Plugin Ecosystem: Both Electron and Ionic have extensive plugin ecosystems that allow developers to extend the functionality of their applications. However, Electron has a wider range of available plugins and libraries because it has been around for a longer time and is used extensively for desktop application development.
Deployment and Packaging: Electron applications can be packaged as standalone executables, which makes deployment easier for end-users. Ionic applications, on the other hand, are typically packaged as Mobile App Packages (e.g., APK for Android), which requires users to have a compatible mobile device or emulator to run the application.

Electron vs Ionic

Overview