Electronjs & Reactjs + Animating BrowserWindow
“Electronjs struggle” is the original title of this article, but as time goes by it became one story of my web development adventure. As a Windows 10 user i should be proud because how great Microsoft team is try hard to make some change, even if my bash/cmd is not as great as a Mac user, i still wanna make some good code.
There are a lot of framework or library on web universe and for someone at beginner level, it might be to much for them but it’s fine as long as they try to focus on one thing. Ok now is my turn, i get an idea to build some app with react and electronjs. So i did try my best just to make sure all the things is ready to go, even though there are so many react-electron boilerplate outside, i just wanna make the thing as simple as possible.
What is electronjs? as you can see, electronjs is a framework to build a cross platform desktop apps with web technology.
Why i choose electronjs? I feel kinda want to use this framework because there are a lot of cool apps like vscode, atom, discord etc. So i encourage myself to make use of it too, maybe i can get some experience by learning it.
It’s not like i hate native desktop apps that being writed by some famous general programming language like Java, Python, .Net etc. If your goal is about performance, nothing can beat a native apps. But if you have another goal such as maintenance, UI, vast library and much more then i encourage you to use Electronjs as well.
So, are you still choose native apps than web? Then can you point me a java library for building frontend like Bootstrap CSS framework, can’t you? Ok, you got JavaFX then it’s fine. But the point is even if i found one, it’s not like it will go smoothly like Bootstrap CSS (It’s because i came from web world, so it would be a lot easier LOL 😅), *It’s just my opinion.
And when in the middle of code, i just wondering if there are some way to make an animation between BrowserWindow, when window.show() and window.hide() event is executed. Reading Electronjs documentation seems to be promising and after a bit of search i though it would be easy but NO! The answer is NO! Reality is just not beautiful as imagination, it’s not easy as it’s look like. From the documentation i read about animation option but it’s all for Mac only, OMG!. Windows Please!!!. I know it a selfish request but come on.
I become so addicted to find out how can i accomplish this thing. Making Discordapp as inspiration maybe it’s a bit overwhelming for me, i want to make a setting menu that look like Discordapp, from as far as i know when i see my Task Manager process, it look like discord doesn’t create a new process when i clicked the setting menu.
I tried and follow the instruction of this guy bakkiraju on this discuss https://discuss.atom.io/t/fade-in-fade-out/38028/5 but still no luck, when i try to figure run the app, it’s kinda clash with ‘transparent: true’ option. It’s showing window twice for some reason, but when i switch the transparent option to false, it work! No flicker. So after a few days searching on google then i got the answer https://github.com/electron/electron/issues/12130, thanks dude, feel refreshed cause i’m not the only one who had that problem in this world.
S̶o̶ ̶r̶i̶g̶h̶t̶ ̶k̶n̶o̶w̶ ̶i̶ ̶t̶h̶i̶n̶k̶ ̶a̶n̶i̶m̶a̶t̶i̶n̶g̶ ̶B̶r̶o̶w̶s̶e̶r̶W̶i̶n̶d̶o̶w̶ ̶i̶s̶ ̶n̶o̶t̶ ̶M̶y̶ ̶N̶i̶n̶j̶a ̶Way,̶ ̶m̶a̶y̶b̶e̶ ̶i̶’̶l̶l̶ ̶t̶r̶y̶ ̶c̶h̶a̶n̶g̶i̶n̶g̶ ̶t̶o̶ ̶m̶a̶k̶e̶ ̶a̶ ̶m̶o̶d̶a̶l̶ ̶i̶n̶s̶t̶e̶a̶d̶.̶
Let’s continue what i left behind, i’m sorry for my off in this few months cause i need to finish the thing that i start, my duty in college (Argghhhh finally 🤗) and then enjoying my time fooling around. Until i realized that aaahh… i got pending react-electron project, i think it’s the time to move forward into the next step *more & more search on google 🔍.
So i’m starting my research from the last pieces of clue that i had earlier from discuss.atom, as bakkiraju said:
Finally figured out the problem, steps to get animation to work
- create a BrowserWindow with {transparent: true, frame: false}
- Dont specify backgroundcolor during BrowserWindow creation in js, give color in html file as in step3
- In html use css styling to give background color to html body tag using rgba
Ex: in css file use backgroundcolor=rgba(171,171,171,1) - In css add animation that transisitons opacity from 1 to 0
- capture the animationend event in renderer js file and do remote.getCurrentWindow().hide();
🙄 🙄 🙄 🙄 🙄 😤 😤 😤 😤 😤
Ok, the first time i read those instruction “Hmmm, ok that’s fine. I can do it. It’s just a normal css transition”. Haahhh… that’s silly me, seems like the words “It’s easier to talk than to act” is really true.
When i tried to animating electron BrowserWindow with those step, imperatively adding and removing css classes into the dom inside react and the simple answer is FAIL. I don’t know, what the hell is going on, is it javascript problem?, css problem? or i’m the problem? I think the last one is the most relevant. Yes it’s because my lack of knowledge about this world. About how reactjs work, the problem occur when i’m not using the same environment like bakkiraju *i think, maybe if i’m just using a normal html, javascript and css, it will gonna work just fine, unfortunately i’m using Reactjs *sad 😭.
More and more searching on google, medium, youtube etc but still no luck. Clicking on the same article twice, three times or even more, just to get the right answer. Desperately trying to figure it out, am i missing something bla bla bla. Ok i need to take a break first, maybe with that way I can find what i’m truly looking for. 😪
# Update 30 July 2020
First of all, thank you for the gist from Victor Aremu and sorry for very long update after all this time.
Okay, here is the update. After investigating about what happened “Why my css transition is not working?”, it’s turn out due my lack knowledge of React itself, then i realize that i need some way to implement those css transition in React style, so i can’t just do the imperative way like adding and removing the classes from JSX. And then guess what? It’s very simple, i just need to use package called ReactCSSTransitionGroup to make the transition work in React, 😭 Finally.. 😭.
You can watch the tutorial by Petr TIchy from iHateTomatoes, below:
It’s very easy to understand when someone explain something by doing something, i think 😁.
There are other library to create great css animation like React Spring or Framer Motion, if you wanna try something fancy. So just check it out if you feel that ReactTransitionGroup doesn’t suit all you need.
Last thing, i just wanna point out a few things about electron BrowserWindow:
- Use it only when you need it, why i said “only when you need”, is because managing multiple BrowserWindow can be complicated, like check the position of window itself, make sure to always stack each other with man window etc. And of course it will cost you some extra RAM consumption.
- Use case that i found to use BrowserWindow so far is for creating hidden worker thread that will be used to deal with high cpu usage so it will not blocking main thread process. Another use case is to create a simple animation like Discord animation when we launch the app to prevent user from seeing a blank white page, while the app is bundled and served to the dom, so after the dom is finished loading the loading window will be terminated. It’s will greatly improve the UX i think. If you wanna learn how to do it, you can read the article “Slack / GitKraken / Discord electron loading screen tutorial” by Nicola here.
Last word, thanks for reading until the end, i hope you got learn something new. Peace 😁.
