ReactJS Intro: Using Babel on the fly during production vs compiling during development
During previous post, I gave a brief introduction to the multiple ways to develop apps using ReactJS.
In that post I have told that Babel can be used to compile JSX and ES6 to ES5. And the same Babel can be used in 2 ways.
- On the fly in the clients browser.(Compilation during production phase)
- Compiling on the development machine. (Compilation during development phase).
Lets take a look how they work and which one is preferred.
On the fly in the clients browser.(Compilation during production phase)
Your code doesn’t execute right-away unless it is in ES5 or ES6(in some cases).
First your code should be converted to JavaScript so that browsers can execute it, as JSX is not supported.
After the conversion to JavaScript, then the browsers execute it.
On client’s browser:
JSX → Babel → JavaScript → Execute
In programming, the most resource intense work is compiling the code. (Executing depends on code/logic)
So, you are doing the most resource intense task in clients browser and using more CPU work on client’s browser(some users can be using slow computers and your webpage may hang their computers due to using too much resources).
Babel is used to convert(compiles) JSX to JavaScript which is not advised to do it in browser as I stated above.
Facebook itself says
It does a slow runtime code transformation, so don’t use it in production.
Compiling on the development machine. (Compilation during the development phase)
In this method, you are doing the most resource-intense task on your computer and sending the simple JavaScript to execute which reduces the work to be done by the browser which results in faster loads of webpage and less CPU work on the client’s browser.
When you compile the JSX to JavaScript, you are saving lots of time by avoiding runtime code transformation in the client’s browser.
Usually compiling does code optimisations and produces the final resulting code.
Then you can minify it to replace long variables with short variable names, removing comments, removing extra empty lines, etc to reduce the size. Then the file is gzipped and transferred to the client’s browser. This stage(minify and gzip) reduces the size and saves bandwidth and increases webpage render times.
On your computer:
JSX → JavaScript → minified JavaScript
On client’s browser:
JavaScript → Execute
Conclusion:
After reading the explanation, what do you think which one is better?
Obviously, the 2nd one is Compiling on the development machine. (Compilation during the development phase).
Got any doubts/questions/suggestions? Comment down below.
