Leaving electron.js to the past.

So, I recently started using tauri because electron.js was no longer working on my pc… I was amazed to see the release build size of the tauri app.
It was way smaller than expected.

Size Comparison

Electron.JS Tauri
62.5mb 4.32mb

These are the sized of installers for windows. The project was just a basic hello world displaying page.

So as you can see, Tauri is the next desktop framework for webdevs… Electron.JS is nothing compared to Tauri.
Tauri by default provides various templates for new projects like vanilla.js, react, svelte.js, vue.js and a lot more in the future. The tauri devs are also working on bringing Tauri to Android and IOS.

Tauri depends upon Microsoft Edge Runtime2 and not bulky core apps like Electron.JS depends on chromium.

Getting started with Tauri

This is for windows only, get your OS instructions on tauri.studio

This will make your ready for developing in tauri…

For Further Understanding, Check Out The Docs

Source link

Building an Electron App with VueJS and Vite

Showcase of Electron rendering VueJS code

Building an Electron App with VueJS and Vite

Let’s combine the power of Electron with VueJS and Vite to create incredible desktop applications using nothing but Javascript.
This article was originally posted on my site.


Clone this repo and use it as a starter template.

electron-vue is dead, long live electron-vue-template

It appears electron-vue, the leading Github repository that combines VueJS and Electron hasn’t had a commit since April 21, 2021. Prior to the April 21st commits, it hasn’t had serious contribution activity since December 3rd, 2019 and before that October 23, 2018.

The repo may not be dead, but it’s on its way out – failing builds, hundreds of open issues, and being locked into specific tooling versions all may be signs to be.

vue-cli-plugin-electron-builder is neat, but it’s not my cup of tea.

With 3.5k Github Stars and about the same amount of support as electron-vue, I decided to give it a shot. Their claim is to run the command vue add electron-builder to your existing application created using Vue CLI 3 or 4 and that’s it, your VueJS web app now runs within an Electron instance.

With a fresh VueJS application built using vue create then immediately running vue add electron-builder, I was able to get an Electron instance running which truly is incredible.

Although it compiled and launched, it did give me an ExtensionWarning error message. Trying to move around the directory structure and changing the file names broke the application. Having to read the documentation to manage something as basic as filename and location is irritating.
I’m afraid this package has a bit too much magic going on behind the scenes for me to be comfortable using it.

Why electron-vue-template? It only has 14 stars!

It’s very simplistic, with no unnecessary dependency overhead.

electron-vue-template scaffolds the site in a transparent and easy-to-manage way. It comes with a very nice directory structure, making it easy to digest and understand where configuration or build code is occurring. There’s no magic happening behind the scenes in a node_module build script.

Because of its transparent nature and well-structured code. This template works perfectly as a beginning spot to build out a desktop application using VueJS and Electron.

There is little loss of this repository loses its only contributor tomorrow. Because it’s a template, you can clone it and pick apart the pieces you want.

Not to mention, it comes with Vite!

Vite is in a league of its own when it comes to Hot Module Replacement (HMR). Because of its on demand file serving, application build times are nearly instant – far, far quicker than any other build tool that exists.

Of the three packages mentioned, electron-vue-template is the only one that comes with Vite built-in. This alone is a reason to utilize the template.

What’s next?

I’ve been using Electron these past few weeks on a personal app that I plan to reveal soon. It’s gotten to a stage where the backend logic is hammered down and is in need of a UI boost as well as a state-management system like Vuex.

I’ll be integrating a state-management system soon – either Vuex or Pinia. I’m curious to see what this process looks like within an Electron app utilizing Vue, but I’ll try my best to write up a blog post as I go through the process.

Source link

Electron Adventures: Episode 99: Should You Use Electron?

So now that my 100-episode Electron Adventure series is coming to a close, I want to spend the final two episodes on a retrospective. This episode will be about Electron, and the next one about the series itself.

Idea behind Electron

Cross-platform GUI development has always been a huge pain. Your choices were:

  • write the app multiple times, once for each platform, in multiple different low-level languages
  • use some “cross-platform” lowest common denominator solution like various Java toolkits that results in an awful experience for everyone
  • just drop the whole idea and make the app single platform

Meanwhile, web development was ridiculously easy, and ridiculously powerful, and it was all cross-platform by definition.

So the whole idea behind Electron was basically “screw all that, we’ll just ship a whole browser with the app”. And it worked. So well that today you’d be very hard pressed to name any decent cross-platform GUI apps that aren’t Electron apps.

Why is Electron controversial?

Whenever anyone mentions Electron, it instantly triggers haters who absolutely cannot stand the idea of bundling the whole browser. The haters are especially bitter because they are losing utterly, and they cannot even begin to offer any alternatives.

The first objection is that it takes too much space. This was always a stupid argument, and it got even worse as time goes. Even the shitty entry level laptops have 256GB+ disks these days, so if you download 100 Electron apps at 100MB each – not something a typical user does – even that’s less than 4% of your laptop’s disk. And this becomes less and less relevant as time goes.

But really this isn’t Electron specific issue. The whole software world moved hard to “bundle all the things” mode.

The days where an app would just use whatever happened to be installed on a local machine are gone. Every app comes with a package-lock.json or its equivalent specifying exact versions of every single dependency.

But that goes even further. Instead of just bundling some JavaScript libraries with node_modules, or some browser with Electron, more and more apps just bundle a whole Linux distribution with Docker, and run that. Or they bundle a whole collection of Dockers for different parts of the app, with multiple Linux distributions inside. Some recent languages like Go basically decided to not even support traditional shared libraries – if you use some code, you have to bundle it into a single executable.

Electron deciding to bundle the browser back in 2013 was ahead of its times, but now this is hardly a controversial decision. Everyone bundles everything.

Web based alternatives

Over the series, we tried a huge number of alternatives to Electron, and found all of them to be pretty bad.

There’s two kinds of alternatives to Electron. The first is all the other web-based solutions that just don’t bundle the browser, and use whatever’s installed.

In principle this works, as long as the user has a recent version of Chrome or such, like with Ferrum. But they need to be strict about it, and if no Chrome (or Chromium) is found, they need to just tell the user to install it.

Even that doesn’t quite solve the problem. Electron bundles two things – browser and node. Even if we use user’s browser, we still need to bundle the backend language, and none of the languages have easy cross-platform bundling story. OSX comes with really old versions of Ruby and Python, Windows comes with .NET, Linux comes with whatever each distro decides (at least some sort of Python), none of them were made with portability in mind. It would be great if we could just ship an app in a Docker to the user, just like we can with servers, but we’re not there yet.

Anyway, every alternative we’ve tried that used OS-bundled HTML view, like Safari, os whatever Qt has, and so on – all of them have been a total disaster. The web is easy to develop for, as it’s basically all Chrome, or things that try to keep up with Chrome. Not having to deal with IE11 or obsolete Safari or some half-working toolkit-specific browsers is definitely worth paying for with a 100MB download.

Non web alternatives

Another thing we tried were a bunch of non-web-based alternatives. I tried to pick the most promising ones, and skip the obvious trash, but none of them were acceptable.

And it’s no surprise really. Every Java-based GUI I’ve seen was a barely functioning disaster, and Qt-based GUIs were not much better.

Not to mention none of them really solve our problems. OK, so we don’t bundle the browser, but is telling user to “install Java” or “install Qt” actually better than telling them to “install Chrome”?

And as I said before, we’d still need to somehow install the backend.

Best choices

I don’t think anything can really compete with Electron when it comes to cross-platform desktop apps.

The best Web based alternative would be either “just run in the user’s browser” (Jupyter style) any of the “ask the user to install Chrome” solutions (Ferrum style). I think these could be turned into viable solutions with modest effort.

Judging only by the quality of GUI programs I’ve used, I suspect the best of the non-Web alternatives would be .NET. It comes preinstalled with Windows, which is otherwise the most painful system to target, and it can sort of work on other systems. As I was writing the series on a Mac, I never tried that, but I’ve seen others be somewhat successful with it.

Qt based solutions were mediocre at best, and Java based solutions were all an unmitigated disaster.

How to use Electron

As I recommend Electron so strongly, what do I recommend using with it?

For the language, vanilla JavaScript. We’ve long been promised ability to use any language for web development, but so far none of such promises have been delivered. Flavored JavaScript (CoffeeScript, TypeScript, etc.) don’t really offer anything meaningful for their cost.

For the framework, you can’t go wrong with Svelte, which is the leading 3rd generation framework. There’s nothing too wrong with using React, which was the leading 2nd generation framework, but React is extremely limited by being based on web capabilities and thinking from the mid IE era, and has a big advantage that you’re more likely to know it, but looking forward, Svelte is the way to go.

I don’t think other frameworks really have much to offer that those two don’t. I really wanted to try Imba 2 with the series, but Imba 2’s tooling was really getting in the way of Electron, and I was able to fix some of these issues but not all, so I ended up dropping the idea (I definitely ought to PR those fixes). Maybe Imba will be the next Svelte, but it’s not there now.

As for Electron, due to its origin in attaching browser frontend to node backend with some IPC duct tape, many of its architectural choices are really awkward, with many concerns being on the wrong side of the frontend/backend divide, or even worse split between both. Fortunately, there’s a lively ecosystem of npm packages that deal with a lot of that awkwardness around things like managing window positions, saving user settings, and so on, and you should absolutely check if there’s a package that solves your problem instead of forcing yourself to use plain Electron alone.

Coming next

And that concludes everything I wanted to say about Electron. In the final 100th episode of the series, I’ll look back at what it was like to write a 100-episode daily blog post series.

Source link

Minimal Time Management App – DEV Community

Being a high-school scholar and having all the pieces on-line, it will get quiet troublesome to handle time and get duties achieved.
So, I did some analysis and received to learn about a method known as Pomodoro.

And I began in search of a great Pomodoro Timer app however didn’t discover any good app. Both they had been paid or lacked a number of options.

So, I made myself my very own Pomodoro Timer app. It is extremely minimal.
It’s constructed utilizing ElectronJS & JavaScript.

I might like to share the app with you guys and obtain your suggestions.

Take a look at the App on GitHub and obtain it and even give it a Star.

Source link