Tuesday, March 19, 2024

JavaScript Framework Fundamentals

In this article, we look at JavaScript Frameworks. To write this article I drew upon the expertise of two people, TJ VanToll, and Ran at Wildebeest. Both gave me insight into JavaScript frameworks and when to use them — or not.

One of the key things to realize is that regardless of the framework you use, you’re going to be working with JavaScript code. If you know JavaScript, you can move between frameworks relatively easily.

If you only learn one framework, you will be tied to that one and frameworks evolve over time. The JavaScript world changes quickly and frameworks tend to come and go.

It may seem contradictory, but you shouldn’t use a framework unless you absolutely need it. While frameworks can speed development, there is overhead and they will take longer for your users to download.

jQuery

The canonical JavaScript framework that most JavaScript developers get started with is jQuery because it is a library that helps you do things in web apps, such as animating or moving elements around on the screen — hide and show, etc.

jQuery is sometimes used when lighter-weight, vanilla, JavaScript or CSS could do the trick. jQuery can be useful if you need the many features it provides, but a minified jQuery file costs you 84kb. It may be worth every kilobyte — if you need several features, that’s great. However, if you just need a few things such as class name toggling or animation, the payoff isn’t worth it.

JavaScript MVC frameworks

The next step from there is JavaScript MVC frameworks. They help you build entire applications with options to:

  • structure your app
  • build your app into pages
  • animate between them
  • establish where the data will go
  • how you communicate with a back-end, etc.

These would be the Angular’s, the Reacts, etc.

One thing to realize is that there are so many varieties of frameworks that you cannot keep up. Instead of trying to stay current with what’s available, look for frameworks that have been around for a while, are supported by a big company, that have a vibrant ecosystem and community around them. Inevitably, you will run into issues and if you can Google for solutions, this will save you a lot of time.

Chrome Developer Tools

Most programmers use the Chrome developer tools because they are great for debugging JavaScript. This can be used with NativeScript and Android apps. Microsoft Edge has a good JavaScript debugger that’s built right into the tool. It’s important to realize that the debugging tools tend to be the same regardless of which framework you use. Some tools such as Angular, offer extensions for the Chrome dev tools, which gives you a bit more knowledge and functionality.

Bundle Files

Place vendor frameworks (such as TweenMax, jQuery, or Velocity) in a bundle to minimize conflicts with your custom JavaScript and reduce the number of HTTP requests through the browser. Bonus: Use the minified version in your production build and the non-minified version while you’re developing locally, so you can more easily track down issues as they arise.

Import Only What You Need

Use Webpack, Gulp, or Grunt to keep your code organized and only import the features you need. If you’re not careful, frameworks can bog down your application while working their magic.

Fortunately, you can bypass loading the entire framework by importing or requiring specific features you want to utilize with the help of ES6.

Beware of Boilerplate

Boilerplate can be a great asset for getting a project up and running quickly. However, it’s even easier to get lost in the bulky cluster installed by default. Take the time for a tutorial, then build something small from scratch to quickly find the framework that best suits your needs.

Framework Functionality

With the new frameworks, you can build completely native iOs, Android apps, server-side apps, chatbots, and you can control robots with NativeScript, etc.

Into the Future

According to TJ VanToll, “Ten years ago, using JavaScript on the server was unthinkable; today Node has 3.5 million users and an annual growth rate of 100%. Five years ago, using JavaScript to drive a native iOS or Android app was a niche; today NativeScript and React Native are growing at staggering rates. Three years ago, using JavaScript to build desktop apps was rare; today Electon is downloaded more than 100,00 times each month.”

“JavaScript will never be used for all programming, as many other languages are better suited to solve certain problems and use cases. However, JavaScript’s widespread usage ensures that it will always be a factor, regardless of the development platform.”

“As JavaScript gains in popularity, and its speed increases, the language will continue to find inroads into environments such as VR and the Internet of Things.”

About the Author

Nathan Segal has been working as a freelance writer for 18 years. In that time he has published more than 1,000 articles and has written 9 books. You can learn more about him at http://NathanSegal.org.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured