What Framework you are using to style your Electron app


#1

There are many Frameworks out there to create Single Page Applicatons, React, Vue, Angular are the most popular. But what Framework works best in combination with Electron? Is there trick to style the electron app fast and give the app a native look, or is using Frameworks like this the best method? Thanks


#2

Electron is just a web browser as far as rendering (i.e. rendering a GUI), there’s no special trick for Electron as far as graphics go. Whatever works in a web app works in Electron.

Electron only gives you extra access to the computer when you’re writing logic to control things (f.e. access to the filesystem, etc), but the rendering is not any different than in Chrome (because Electron is built on Chrome), and any web-based UI library you find will work in Electron.

Here’s a few free ones (found by searching “html ui components”, “vue ui components”, “react ui components”, etc):

Those are all for web, and they all work on regular web sites, or in Electron, there’s no difference.

Think of an Electron app as a website that has additional APIs available (like API to access the filesystem directly, etc). HTML/CSS/JavaScript all works the same, and all the above libraries are written on top of HTML/CSS/JavaScript.


#3

As for a “native look”, you’ll have to find an HTML/CSS/JS library that gives you components that look like native. For example, here’s one that gives you components that look like native iOS and Android components: https://framework7.io


#4

Are there any Video tutorials how to install and use React with Electron?


#5

You install and use it the same way you do with a web site, so any video tutorials you find about setting up a React app will apply to Electron.


#6

Yes but there are a few things I learned while using jquery in Electron, In the HEAD Section of my page the normal jquery <script> Link is not working it needs to be
<script>window.$ = window.jQuery = require('jquery');</script>

So how I know what small changes to do to get React running.


#7

You got it: you should use npm install to install what you need, then use require to import it.

If you’re using a tool like Webpack, TypeScript, or Babel, then you can use import syntax instead of require. To get JSX syntax to work, you’ll need to configure Webpack, TypeScript, or Babel, just like with any other web app. You’ll have to look up how to use those tools separately from Atom.

React will not work without one of those tools, unless you choose not to use JSX syntax. In that case, you can use React.createElement after you do var React = require('react'), but do not write stuff like <div></div> in your JavaScript because Electron does not understand that syntax (it isn’t standard JavaScript). Those mentioned tools know how to convert the syntax into regular JavaScript (which calls React.createElement).


#8

Just in case you are interested in more complex UIs. I am working on an framework called viralgraphics.io which has an desktop like API to create and deploy desktop apps in HTML5.

The website and documentation is currently under construction. It has inbuild Electron support.