Terminal Tweaker : An electron-react project to tweak the new windows terminal to heart's content ❤.
Tags: javascript, react, electron, typescript
Published: 2019-07-28 08:33:08

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](https://github.com/nateshmbhat/windows-terminal-tweaker/releases)**
{% github nateshmbhat/windows-terminal-tweaker %}


  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.

{% github nateshmbhat/electron-react-ts-starter  %}


### 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