Want to be a more effective JavaScript developer, without jumping through a million hoops? Then take on board these tips to get your code in shape. A few minutes. A few tips. That’s all it takes to make your development work more effective.
Document Document Document
When it comes to JS coding, you’re not documenting just for your own sake, but for that of others as well. Following standardized structure and naming conventions is great. It’s a fundamental coding 101 types of thing. But documenting your code is more – it’s not self-documenting, so please don’t think about that as a possible solution.
Check out JSDoc for information on best practices in documenting your code.
If you’ve not had to look back on code written some time ago, you’ll be surprised how little of it you may remember quickly and how clever you were in doing things with complexity as if they were no-brainers.
Use Hungarian Notation
Variable naming ranges from the incomprehensibly simply “a1”, “nvqz” to the TMI (too much information) of “loopOneCounterForDOBReCalculationDuringCheckout”. Instead of going either direction too far, consider amending your variable naming using a one-character prefix bit of trickery.
With Hungarian Notation, you add an “s” for string, “b” for boolean, “o” for object, etc, so as to give greater clarity as to what you’re working with, giving you instant insight into variables like “sFirstName”, “oSchool”, or “bIsGraduate”.
Don’t Be Afraid of Frameworks
Spend enough time around other developers and you’ll undoubtedly have friends in two camps. On the one side will be the “purists” who advocate doing everything from scratch without help from libraries, frameworks, IDE code editors or the like. They’ll edit with vi editors and have created their own repository complete with thousands of home-grown functions.
The other side is those who will spend three hours figuring out how to use the latest, and bulkiest, frameworks to code something that should have taken 10 minutes and been done in 20 lines of code.
Don’t let either side sway you from looking at frameworks for some situations and ignoring them for others. There’s a time and a place for using, and not using, frameworks.
One additional consideration is to look at using frameworks or libraries already included in the platform with which you’re working. For example, WordPress is including jQuery straight out of the box. If you’re picking a library, or framework, that’s already a part of the platform, you won’t incur any performance penalties by leveraging that which is already being included anyway.
Hackr.io does a good job of covering the relative strengths and weaknesses of some top JavaScript frameworks.
Look at Lean Framework Alternatives
Deciding on using a framework doesn’t mean you have to go all-in, using the largest (slowest) one available. In fact, for most JavaScript frameworks, there are lean alternatives available that can give most of the code coverage of the original, but at a fraction of the size. Going lean means that your project can be faster, without sacrificing the ease of development that frameworks provide.
React, jQuery, Angular, Vue and others all have lightweight alternatives. It pays to check for lean alternatives before doing all the coding because you’ll want to know how well the alternatives provide functional equivalents before going too far down one path or another.
Don’t Use Globals
Globals make things “work” with so much less effort or finesse, enabling you variables and functions to be available to every JavaScript file that gets called by the page. Sounds great, right?
Unfortunately, variables and functions with global scope can run into conflicts when multiple files make use of them in different ways. If the variable you thought was going to contain one bit of information is included by scripts loaded after the one you’re working on, you’ll find the results unexpected at best and dangerous at their worst.
The moral of the story is simply don’t use globals.
Use Development Environments for Development Work
It’s so easy to just login and make a quick tweak to some code on the “live” server instance. After all, it’s only a one line change and you know exactly what needs to be done. Unfortunately, those quick and dirty changes are also the times when you’re most likely to introduce a typo, leave out a semicolon or some other hurried mistake that can cause your main production website to become non-functional, costing you time and money.
For many seasoned coders, a development environment runs locally or on a low-end spec hosting account which then feeds into a staging environment. Staging servers then feed the production environment and is where code changes are tested.
Take the time to isolate your changes from the live server. Make sure everything works as intended and then deploy onto the live production environment once you’re 100%.
Use Asynchronous Requests
AJAX, or Asynchronous JavaScript And XML, gives you the power to keep users on the same page without needing to refresh the entire contents when only a small amount of information is needing to be presented to them.
The user experience benefits. Page speed benefits. In fact, there are very little downsides to using AJAX whenever possible. The moral of the story? Use asynchronous request/response whenever possible and appropriate.
Let CSS Do what it Does Best
Just because you’re a wizard at creating HTML and applying styles via JavaScript, doesn’t mean that you actually should be using JavaScript to do the style related work.
For example, if you’re testing the value of a form input and decide to style the input box with a bright red outline to convey focus and being active, it’s perfectly possible to do this with only JavaScript. However, it’s much more maintainable if you use the JavaScript to set a class which is part of your CSS and has all the properties associated with that class (including things like border color, font size and weight, and so on).
Let CSS do what it does best and leverage the strengths of JavaScript at the same time.
Conclusion
JavaScript can be tough, especially for beginners just starting out. Hopefully, with the help of these tips, you can be a pro in no time!
