In the last post, I messed around with Webpack a little. Webpack is a tool that solves an inherent problem in JavaScript: modularity. Web developers have had to deal with finding ways to create large, complex applications using a language designed for quick, simple scripting.
In this post, I want to look at what Webpack does for CH5 development and do we actually need it.
Before I give myself a headache thinking about Webpack, a quick diversion…
In The Beginning
There’s a fascinating history of JavaScript. My first use of it was probably similar to most: animate some images when the mouse hovers over:
document.getElementById('menu').addEventListener('mouseover', function (event) {
if (event.target.tagName === "IMG") {
event.target.src = event.target.name + '-a.png';
}
});
document.getElementById('menu').addEventListener('mouseout', function (event) {
if (event.target.tagName === "IMG") {
event.target.src = event.target.name + '-i.png';
}
});
Back in 2000, I didn’t appreciate the roots of the language. It was just an easy thing to copy-and-paste examples from around the Internet to add some flair to your home page. I knew back then that JavaScript had become fractured between Mozilla and Microsoft, and getting something to work reliably between the two took significant effort.
To my detriment, I largely ignored JavaScript for the past 20 years. Web development for me started with Perl, moved onto PHP, and finally settled in Python. I tried picking up Ruby in the middle, but didn’t do much other than follow _why’s poignant guide. Now that Crestron’s touchpanels have moved to HTML5, it’s time for me to get caught up on everything web dev related!
There’s a lot to like about modern JavaScript. The state of things now is much improved, but finding up-to-date tutorials is still a challenge. Let me get back to the topic of this post: modules. This is a recent addition to the language but there have been workarounds for some time. Now that there is a standard way to export/import variables and functions from modules, the legacy methods of doing so should fade away, and following guides online should get easier.
Webpack’s Role
Some of what Webpack does is deal with older browsers that can’t yet handle the newer syntax. It can run source code through a transpiler (like Babel) to take modern JavaScript and turn it into something compatible across a range of browsers. It also figures out the dependencies of all the modules and packages them together into a single script such that the program works. While doing that, it also removes:
- Unreachable code
- Unused exports
- Debugging statements
It can also compress the resulting file (minified) so it’s smaller and loads faster. These features can matter quite a bit when your application is hosted on a web server with a range of web browsers trying to render it.
But our project is hosted locally on a touchpanel or control processor. It typically loads once and continues running until we reboot a device or push an update. While we are utilizing HTML5 to create our UI, we benefit from not having to deal with all the constraints of typical web development, such as network latency.
Do We Need to Worry About Webpack?
For a simple CH5 project, I’m going to say… no. Or at least, not unless the framework you’re using uses it. For example, I like Vue.js and it uses Webpack behind the scenes to build and test your app. It hides the complexity from you which is a good thing. The CH5 Shell Project uses it to structure your app’s components versus the template’s layout. I think you shouldn’t have to spend any time worrying about Webpack while you’re building and testing your UI.
I’m sure there is value in learning Webpack inside and out if you plan to customize how your project gets built. But it’s a big complicated tool, so learning it to that level isn’t going to be easy. I think it’s possible to come up with a minimal configuration that works well enough to suffice for a few projects.
So for now, I’m going to put it aside and focus on getting a decent CH5 layout built.
Kiel the Coder 