DEV Community

Cover image for Xplorer, a modern File Explorer that was written using TypeScript, has its performance improved on the recent release
Justin Maximillian Kimlim
Justin Maximillian Kimlim

Posted on

Xplorer, a modern File Explorer that was written using TypeScript, has its performance improved on the recent release

Xplorer dark

Hello devs!

About two months ago, I released the first version of Xplorer and wrote a post about it which makes both of the blog and the repository went into trending 🚀. Thanks a lot for it. Please read this blog before continue reading

What is Xplorer? (click to expand)

Xplorer is a file explorer built from ground-up to be fully customizable. And even without any customization, it already looks modern!

Xplorer is a cross-platform application built using Tauri, and you can run it on Windows, MacOS, or Linux without having much trouble. One of the key feature is Xplorer allows you to preview the files you have directly inside Xplorer. And it's not only limited to picture or document preview, but also video preview.

To summarize, Xplorer's features contain:

  • It looks modern
  • Easy to use
  • Cross-platform
  • File Preview, even for videos!
  • Customizable
  • Supports multiple tab
  • Most importantly, Free and Open Source Software(FOSS), which means you can change components inside if you see fit

Xplorer is currently under heavy development. You can give your suggestions and feedbacks in our Discussions page. If you feel comfortable in writing code using Typescript and Rust, we highly encourage you to contribute to this project.

Some Screenshots (click to expand)
Xplorer on Garuda Linux with Light+ theme
Xplorer on Windows with Dark+ theme
Xplorer on macOS with Light+ theme
Xplorer on Windows with Dark theme
Xplorer on Windows with Light theme

During that period, I received many inputs regarding the performance of Xplorer, I actually realized this when first developing Xplorer and have no clue to improve it because I didn't know any other framework for developing desktop application using JS Stack besides Electron at that time until some people suggesting me using Tauri

_One of many suggestions_

And soon, I tried it and boom 💥! The performance went rocket (although some of the features may be not as fast as the native one) as it now relies on Rust as the backend to handle file operation while it still relies on TypeScript, SCSS, HTML for the frontend. The installer size, memory consumption has drop a lot when the performance increased after migrating it to Tauri.

The new version of Xplorer is now a polygot program as it uses Rust for handling file operation while the HTML, SCSS, and TypeScript (which is transpiled to JS and CSS) still maintain the same for the frontend look.

Pros

  • Improve performance and memory usage
  • Decrease installer size up to 90%
  • Improve startup speeds (from ∼ 1.52 s to ∼ 1.28 s) (_tested on i7-9700 32GB)
  • Thread safe
  • It's cross platform
  • Non-ASCII drive name supports (thanks to sysinfo crate)

Cons

  • Some features like dragging file from Xplorer to another application has gone as Tauri has no this feature.(https://github.com/tauri-apps/tauri/issues/2593)
  • Opening folder might be slower than on Electron for some cases because Xplorer need to communicate to Rust

Overall, using Tauri is much better than Electron IMO, especially when using the app in less computing capability computers. Also, Tauri also let user to develop cross platform application with webpages (HTML, CSS, JS) just like Electron does but more lightweight.

Another improvement/changes of Xplorer

  • Introduce new icon
  • Add ability to continue the previous session on startup 🚀
  • More personalized settings ⚙️
  • Supports previewing almost all programming languages with syntax highlighting 👁️‍🗨️
  • Improve some functions algorithms 🚀

More detailed changelog: https://github.com/kimlimjustin/xplorer/releases/tag/v0.2.0

Notable features

  • File Previewing Xplorer supports file previewing
  • Looks Modern Xplorer looks modern
  • Support Multiple Tab Xplorer support multiple tab

Links

GitHub link: https://github.com/kimlimjustin/xplorer
Documentation site: https://xplorer.vercel.app
Discord: https://discord.gg/MHGtSWvfUS
Install it now: https://github.com/kimlimjustin/xplorer/releases/tag/v0.2.0

Any comments will be appreciated, also, don't forget to drop a star on GitHub if you like to :D

Happy coding! 🎉

Latest comments (15)

Collapse
 
uahnbu profile image
uahnbu

Really glad to hear that Xplorer has just migrated to Tauri. Performance is better than the current UWP app I'm using. Some more adjustments to the UI/UX will make the app dormant and I'd definitely set it as the default explorer.

Collapse
 
uahnbu profile image
uahnbu

My primitive benchmark says that Xplorer uses 5% of CPU less than the UWP app (50% less), but 10MB more memory (10% more), as the same folder is opened.

Collapse
 
therealokoro profile image
Okoro Redemption

Smashing!!🔥🔥🔥

Collapse
 
cavo789 profile image
Christophe Avonture • Edited

Did you know that XYplorer is an existing name for such tool: xyplorer.com/. That application exists since 1997. When I first read your post, I thought of this software.

Collapse
 
danielo515 profile image
Daniel Rodríguez Rivero

What are you talking about? XYP is not the same as just XP
There are many many brands that differ just in one letter, so your argument doesn't apply

Collapse
 
cavo789 profile image
Christophe Avonture

Which argument ? 😉 I was just giving information and said I had read the subject too quickly and mistakenly thought it was the tool I was using. I did not make any judgement or presume anything.

Thread Thread
 
kimlimjustin profile image
Justin Maximillian Kimlim

Ah maybe he thought you said I take over the name or smth like that, but yeah, it's completely my own idea of Xplorer name, anyways, thanks tho for letting me know

Thread Thread
 
danielo515 profile image
Daniel Rodríguez Rivero

Then it is obvious that I made the same mistake as you did and read your message to quickly. My apologies

Collapse
 
kimlimjustin profile image
Justin Maximillian Kimlim

I didn't know that existed, Xplorer is the name I randomly picked it when trying to thinking about a name of the File Explorer, and suddenly thought that Explorer without "E" is still read as "Explorer", so I picked Xplorer.

Collapse
 
cavo789 profile image
Christophe Avonture

Make sense. Was just for information and because I've read your subject too fast 😉 I use then mentionned one since years.

Collapse
 
marflage profile image
Marflage

Awesome. I will surely check it out

One question: you mentioned you used Rust for backend to use file operations. I am not sure I understand it properly. Does not Typescript support file IO? Node does so perhaps Typescript does too. Also, what is the use of a backend here? I only think of backends as http servers. This question is because of my little experience with professional development.
Thanks!

Collapse
 
shivarajnaidu profile image
yuvaraj • Edited

Backend means not http here..

Instead the the code that do operarions related to file read deletion other files ops written using rust

And http is not the onlyn way to comunicate between programs .. we have IPC mechanisms those are very faster than http for programs running in the same system.

And regarding typescript file reading..
Rust is definitely faster and safer than nodejs so tbey decided for that .

As we will have alot of file ops here..

Hope this answers your quries..

Collapse
 
marflage profile image
Marflage

Thanks for the reply. Yes, it does answer my question. Just one thing though: regarding IPC mechanisms, do you mean like MPI and socket-based communication but on the same machine?

Thread Thread
 
kimlimjustin profile image
Justin Maximillian Kimlim

It's something like that, basically when user want to operate something, ex opening a folder, the typescript code send a message to the rust code to open that folder return the information of the files inside the folder to the typescript then typescript is in charge to display it on the webview.

Hope this answers your question.

Thread Thread
 
marflage profile image
Marflage

Now all the confusions have been cleared up. Thanks!