Hey guys, Good day. Before I talk anything about this project, I am happy to say that this is my first post on the dev community and I'm so very excited to share whatever small things I have cooked up on my pc to this wonderful community. With this, let's get some electron stuff up our brains.
If all you want is to check out the app and the project , here's the link to the repository and the binaries:
Terminal Tweaker executables
nateshmbhat
/
windows-terminal-tweaker
Tweak your windows terminal to heart's content with this app using its beautiful interface to configure everything about the terminal.
Terminal-Tweaker
Tweak your windows terminal to heart's content with this app using its beautiful interface to configure everything about the terminal.
With the provided material themed color pickers , it becomes super simple to configure all those cute little colors you see in the terminal. See the tweaks reflect on the terminal in real time.
The app gives control over creation , deletion and updation for all of your profiles and color schemes and much more.
Download the tweaker here :
Links :
- About the app and my take on the technologies I used for this project
- I built this on top of my electron-react-typescript starter pack which comes with sweet typescript autoreloading and most bug fixes with CRA support.
- New windows terminal if you don't have it already.
Screenshots :
When I saw the new windows terminal trailer, damn it looked hot. But little did I know that configuring it would be a bit of pain before I installed it. So I rolled out a tweaker of my own for the terminal which does the configuration parsing and editing through the tweaker UI that's shown to the user.
This app reduces the tediousness of manual configuration through file editing and provides options to configure everything that about the terminal with material color pickers and others UI elements for customization.
Coming to the UI it's built using react with the semantic UI style components and state management is done using redux. Since I've been using React for a while, the best tech right now (as of 2019) to roll out desktop apps would be electron.
Well, after using electron I have mixed thoughts about it. Here's a rundown.
Type Safety and Auto Reloading :
After using javascript and typescript for a while, I felt insecure to not use typescript when I can. Though using electron was fun, it did come along with some issues when integrating create-react-app with typescript and making auto-reloading to work right.
As I ended up with many bugs and issues along the way, I decided to make a starter pack with all bug fixes, sweet auto-reloading, and typescript support to make testing during development pain-free. Here's my repo of this pack.
nateshmbhat
/
electron-react-ts-starter
A solid :) boiler plate starter pack when starting an electron project which uses create-react-app with typescript.
electron-react-ts-starter
( Has Auto Reloading and Works with Create-React-App )
This is a boiler plate starter pack when starting an electron project which uses react with typescript. The code contains some bug fixes that are found when using react with electron and typescript and has auto monitoring of typescript changes to reload the electron app for faster development.
Why this electron-react-ts-starter :
- Run electron app with create-react-app without ejecting.
- Auto reloads the electron app when the typescript source file changes. (This is missing in a lot of tutorial articles which only have an electron.js file and not a electron.ts file )
- Provides the required npm scripts and folder structure for simple to complex projects.
- Includes a very simple bundling process.
- Auto reloads app for changes in both main process files and react files.
- With the provided folder structure , main and renderer process codebase can be maintained independently.
Usage :
…Startup Times :
Electron makes use of chromium's rendering engine and this means more startup time than all those other apps out there. Though there are minor tweaks that you can do to speed it up, there's only so much you can do.
React :
Well, this is the shiniest part of the project for me. Enjoyed using the new hooks API to the fullest with all the new juicy hooks along with pretty damn useful custom hooks. Using react with redux was fun and nothing short of satisfying.
Building and packaging :
One of the scariest things that happen when using techs like this is an issue during building and release. Thankfully I was able to fix some of the issues that occur during packaging of the app for release and the starter pack above includes those fixes to make packaging easier. For building, I used electron-builder. I didn't have to worry about cross-platform issues since this tweaker is meant for windows 10 and above versions only.
Things you have to bear in your final app :
- High memory consumption.
- Slightly higher startup time.
- If your application is a basic one, then packaged executable sizes could seem too much since electron itself takes somewhere around 80 MB of space (rough estimate) in the packaged app.
Worth it or Not?
For me, it was. Other than the fact that the executable size is more, the ability to make your web app as a desktop app is not a small thing to have given the upsurge of web frameworks and technologies nowadays.
Efforts to fix electron's limitations :
- Here's some notable work that's done to reduce electron app size and memory usage: https://medium.com/dailyjs/put-your-electron-app-on-a-diet-with-electrino-c7ffdf1d6297
Top comments (0)