I have made so many mistakes in my short coding lifetime to know never to use the DOM to call javascript methods like this:
<button type="submit" onclick="shoutout()">YAY!</button>
Doing that is just bad, really really bad. You should never do it. Never ever ever do it. In all honesty and fairness, your code will generally work the moment you do it and everything will be fine. But, the moment you make up your mind to optimize your page... Horrible stories will be told thereafter.
Few reasons to avoid inline Javascript temptation
I didn't even need to think too much about this. Just a quick search brought me a stackoverflow thread that highlighted a lot of my reservations for inline js and even more. I'd list them here
- It's not recommended to inline your javascript since you can't cache them. You definitely know how much resources caches saves your client and how fast your website loads because of it. Don't sacrifice it.
- Maintainability! How would you even begin to trace where you called javascript methods to start fixing it? How would you even keep track of what is using what?
- Separation of concerns
- Optimization and minification - I tried extracting the js files and minifying them, but the code never worked at all, which is why I am writing this.
- Inlining does not have any direct performance gains compared to external scripts. However, when you talk about caching and running scripts after you have loaded the page, it begins to make sense why not to do it.
Ok. I think that's all I have off the top of my head. Now, read the full story of how I got to writing this.
My own horrible story
So, I met this cool project and liked the idea, so I jumped on it. It is in the fintech space and I have always loved money and fintech and money. I always wanted to know how all these things worked behind the scenes. So you can see how I jumped and accepted this with my two hands wide open when it was presented to me.
As I got working on the project, it turned out that there was a developer who attempted making it work before, but couldn't, so he bailed (I still can't see why). Apparently, some of the javascript code he wrote was still all over the place in the HTML pages. As a cool guy that I am, I did not mind that at all. I happily continued working on the project and learning how to use the code that way. I just have to mention here that class names and id names were completely obscure and undescriptive. I have a headache thinking about it right now.
I like to keep things clean, but only after getting it to work. I continued coding with my script just below the HTML as it was faster for me (which is perfectly normal by the way). When I finished getting everything to work, it was time to take all the Javascript out and put it in a separate file so I can minify it.
I minified it quite alright and some parts of the app were working while others were not working. I unlinked the minified version and linked the 'unminified' version and the page worked fine. I copied and pasted all it's content again and minified one more time and it still did not work again. Something was obviously not right.
I went through the page again and realised that when I minified the file, for some weird reason, every method that is called directly from the HTML as the example above somehow didn't exist anymore (well, it got minified obviously). I checked how many of such exists and I am certain I counted at least 10 before scrolling the page. There are multiple lines this way.
What I would do
The best thing to do is use event listeners for everything. This way, it wouldn't really matter how I minify it, everything would just work fine. I probably have like 10 pages to rewrite and use event listeners for, but that fine. Imagine you have to do this for an application with several times that amount of pages... Sheesh!!!
I'm already scared.
Wish me luck... I'd definitely be needing a lot of it.
PS: In a totally unrelated topic, please always indent your code properly and remove anything you commented out you no longer need. Take pity on the next dev who would work on it.
Top comments (6)
jsx?
Haha, yes JSX is horrible code. 😂😂
Nah.
Vanilla Js in a plain HTML page.
As a JS instructor, this is one of the biggest pet peeves that I have with student solutions. No matter what I show in the class, there are always a handful of students that try this out because of Googling, I guess.
Then, it's even hard to argue against it b/c with some of our simple assignments, they just say, 'But, it works!' 😞😠
I totally understand you 🤣🤣
I face this challenge when I'm code reviewing and people are trying to explain away things like this. It can be exhausting but pressing further a little helps them get better and makes my work easy.
You are doing a great job!
Just a quick question about this statement "Inlining does not have any direct performance gains compared to external scripts."
The browser does not have to fetch the script from an external file across a potentially slow connection. This results a faster render??? Or am I missing something?
I agree with all your other points 100%