[docs] Changes to Tauri-Electron comparison list

Hey guys, I just discovered Tauri, and I already love it, great job! However I think that the feature comparison list needs some work. It needs more of useful information and less of weird information on it.

Now, let’s break down some of the metrics on the comparison list:

1. Can Render PDF (Tauri: yes; Electron: no)

If by “rendering” you mean “displaying PDFs”, then the comparison is false, it’s actually very easy to do in Electron:

Electron 10.1.3: mainProcess.js

function openPDF () {
  let pdfWindow = new BrowserWindow({
    width: 1280,
    height: 720,
    webPreferences: {
      plugins: true
    }
  })

  pdfWindow.loadURL('file://C:/test/test.pdf')
}

Plus, neither Tauri nor Electron were created specifically for making “PDF reader” apps, so the ability to “render PDFs” is not really a main feature of either of them.

2. Multithreading (Tauri: yes; Electron: no)

Multithreading is an ability to run multiple blocking tasks concurrently. And we all know that Electron has multiple ways of achieving this:

• Web worker
• Node worker_threads
• Spawning separate node processes
• Executing binary files via system terminal

Which, again, means that the comparison is factually false. I would argue it’s even easier to utilize all the threads of your CPU with Electron because creating a worker.js and a message event listener is much easier than creating a proper multithreading system on Rust.

3. Splashscreen (Tauri: yes; Electron: yes)

This comparison doesn’t even make any sense. The Nokia 3310 had a splashscreen animation. Splashscreen is just a loading screen, which can be done on anything that runs code. You can even do it with pure HTML without any scripting.

Am I missing something or does this comparison convey absolutely no meaningful information? It’s like saying that both Tauri and Electron require a computer to run and can both perform computations. Don’t you say! Incredible, that! 😄

4. Speed

I was quite impressed by the ~0.5 sec launch speed of my test Tauri app.

Guys, why would you compare the ability to “Render PDF” and “To have a Splashscreen” but not speed - one of the most important metrics to devs and users? The app launching speed, the computational speed of different tasks (Rust vs V8), the compilation speed, etc.

5. Interface Service Provider (Tauri: Varies; Electron: Chromium)

This comparison, unfortunately, doesn’t convey any useful information either.

How does it all work? How is it possible that we can use Node’s npm packages on Rust? Can I just install node bin module from npm and run ALL Node’s modules on Rust? What kind of black magic is this?

We know that Electron supports image, audio, video decoding, it gives us the browser window and document objects that have different listeners (click, scroll, drag, etc), it supports the majority of HTML / CSS / JS features, and so on. But it’s not clear how Tauri handles all of this. Does everything just works the same? Or do we have to create our own low-level listeners in Rust, or what?

What HTML / CSS / JS features do we lose with Tauri?

6. Supported file types

I can see that Tauri can decode and display some types of images, but why can’t it decode and display videos at all? What file types will be supported in the future?

Why is “supported file types” metric not on the comparison list? This sort of information would actually be useful to have on the comparison list.

[aleksey-hoffman]

@nklayman thanks for considering these changes, glad they make sense to other people as well. That’s a good idea to test it in VMs. I think it would make sense to compare the performance of the “bare bones” test apps based on the same framework (e.g. your Vue plugin) as well as more complex “real life” apps (in the future), and to include multiple speed metrics:

• App launch speed
• Dev server compiling time
• Computing performance for different tasks (to test whether Rust is actually better than JS V8 engine)

---

As for the splashscreen. I figured that an HTML / CSS splashcreen is actually better than a separate window, and here’s why:

• With HTML / CSS splashcreen you can create a nice fade out transition on load, which looks silky smooth.
• HTML / CSS splashscreen also appears automatically when you reload the window, not just when you open it. So you don’t need to manually create multiple listeners to trigger the window-splashcreen. And if you have to manually show the HTML / CSS splashscreen later on without reloading the window, you can just animate its opacity back to 1.
• It loads instantly, just as a separate window does, if you place your code in the right place. E.g. in my Electron + Vue app, I put the HTML / CSS splashscreen into index.html before the Vue <div id="app"> mounting point, so it loads instantly, even before Vue is mounted.

If anyone wants to try this method, here’s how I did it:

index.html

<style>
  body {
    padding: 0; 
    margin: 0; 
    overflow: hidden;
  }

  #loading-screen__container {
    background-color: tauri-apps/tauri#333;
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    pointer-events: none;
  }

  #loading-screen__logo {
    font-size: 128px;
    color: #eee;
    text-align: center;
  }

  #loading-screen__title {
    font-size: 48px;
    color: #eee;
    text-align: center;
    font-family: 'Noto Sans';
  }

  #loading-animation__container {
    opacity: 1;
    animation: fade-in 3000ms ease;
  }
  
  @keyframes fade-in {
    0% { 
      opacity: 0; 
      transform: scale(0.8); 
    }
    100% { 
      opacity: 1; 
      transform: scale(1); 
    }
  }
</style>

<body>
  <div id="loading-screen__container">
    <div id="loading-animation__container">
      <div id="loading-screen__logo">Logo</div>
      <div id="loading-screen__title">Title</div>
    </div>
  </div>
  <div id="app"></div>
</body>

App.vue

async mounted () {
  this.transitionOutLoadingScreen()
},
methods: {
  transitionOutLoadingScreen () {
    const loadingScreenAnimationContainer = document.querySelector('#loading-animation__container')
    // Reset opacity to 0, before fading out
    loadingScreenAnimationContainer.style.opacity = '0'
    loadingScreenAnimationContainer.animate(
      [
        { opacity: 1, transform: 'scale(1)' },
        { opacity: 0, transform: 'scale(0.75)' },
      ], 
      {
        easing: 'ease',
        duration: 500
      }
    )
  }
}

[nklayman]

PR merged 🎉