JavaScript Frameworks: Here is What WordPress Devs Need to Know

For quite a while now, the WordPress development community has been buzzing with talks about JavaScript and more and more WordPress developers are turning towards JavaScript. Somewhere along the line, you’ve probably come across the term “JavaScript framework.”

What exactly are these frameworks and how can they be helpful? Since there are a bunch of frameworks out there, which ones do you pay attention to and which ones do you ignore?

This article will clear up some of the confusion and answer the above questions related to JavaScript frameworks.

What are JavaScript Frameworks?

Wikipedia describes JavaScript frameworks as:

A JavaScript framework is an application framework written in JavaScript.

Well, that is not very helpful, is it?

Essentially, a framework is something that provides a solution to a given problem. Thus, while a hospital is a broader entity, the ICU is a framework that serves a given purpose — providing critical care to patients. Similarly, a JavaScript framework is an entity that allows you to solve a given problem when working with JavaScript.

If you have been following JS development even casually, you may have already heard of frameworks such as AngularJS. Here, AngularJS is a framework for dynamic web applications. In other words, when you create a web app using HTML, AngularJS lets you extend your HTML code so that you can write the application’s components using it. Therefore, using AngularJS as a framework, you find the solution to a problem — you do not need to write additional code; instead, you can reuse HTML as a template engine and express your application’s workflow using it.

Naturally, JavaScript frameworks can be used to save a good deal of time for everyone. But are there any other advantages (or disadvantages) associated with such frameworks?

JavaScript Frameworks: Pros and Cons

Pros

The most obvious benefit of working with a JS framework is that you get a robust and reliable code base for your projects. You can build upon the framework’s code structure and extend it to suit your needs. There is hardly any need to write everything from scratch.

Another common advantage of going with a JS framework is that most of these frameworks are well documented. Furthermore, such frameworks are often under very active development. This implies that you can expect bug fixes, new features and other updates rather regularly.

Almost all the popular JavaScript frameworks tend to have a loyal community and user base of their own. You can expect to receive quick replies to your queries and active forum participation from members.

Lastly, the learning curve associated with JavaScript frameworks is not as steep as that of vanilla JS (that is, JavaScript sans frameworks). For beginner JS developers, or WordPress developers looking to get started with JS development, a framework can provide an easier learning ladder.

Cons

Of course, much like every other good thing, even JavaScript frameworks have certain downsides of their own.

Often, JavaScript frameworks tend to be bulkier and more bloated than vanilla JS. This is comparable to a WordPress installation and its plugins — while you can surely do a lot with the help of plugins, certain plugins are notorious for being resource hungry and bloated. Not all JavaScript frameworks are guilty of this crime, but there are many that are indeed slower to operate.

Raw JS is, comparatively speaking, faster to run. While a framework can get the job done and be easy to learn, raw JS is often the “master” level of development. Many developers tend to operate purely with raw JS and then build along as they progress, so as to have better control over their projects.

Speaking of control, coding in vanilla JS means you are free from any dependency on a given framework. Opting for a lesser known JS framework means if the framework is abandoned by its developers, your project may suffer. You may have to re-build everything with a new framework or, even worse, rely on an out of date and unsupported framework.

Many JavaScript frameworks have their own methodology of getting things done. If you are an expert with a given JS framework, it does not mean you can work with any of the other frameworks. You might have to spend some time learning and familiarizing yourself before you can work with an entirely different or new framework. “Migration” can, therefore, be a challenge at times.

That said, the downsides of JavaScript frameworks are not big enough to outweigh the merits. If you do some thoughtful planning, you can pick the perfect JS framework for your project so that you do not have to make amends to your code later on.

Which JavaScript Frameworks are Ideal for WordPress Developers?

Similar to WordPress plugins, there is no shortage of JavaScript frameworks out there. And again, much like WP plugins, you cannot simply pick any random JS framework and get going with it.

React is developed and maintained by Facebook

For WordPress developers, the choices are plenty because WP plays well with most JavaScript frameworks. That said, React is quite possibly the first choice for many WP developers looking to get started with JS development. This is because of a multitude of features:

  • React serves as the base for a wide array of existing WP-related projects, including the REST API, Gutenberg and other apps based on it.
  • React is maintained by Facebook and is under active development. In other words, it is not likely to be abandoned anytime soon.
  • It has a big community of users and there is no shortage of learning material on the internet.
Angular is developed and maintained by Google

AngularJS too, in comparison to React, is a wise enough choice simply because it is backed by a large community and has a very detailed and versatile documentation.

Another alternative would be Vue.js which is lesser known but is rising in popularity every day. It is said to have a very easy learning curve even for absolute newbies. Even though the community is rather small for Vue.js, it can be used for a wide variety of projects and is surely worth a shot. It is highly performant, well documented, and has already been localized into multiple languages.

For the daring of heart, there are dozens of other options, including some one-person projects that are used only by a handful of applications. This page enlists some useful and relevant JavaScript frameworks.

Conclusion

Before we wind it up, it might be a good idea to mention JavaScript libraries. More often than not, people use JS frameworks and JS libraries interchangeably. However, this is an incorrect understanding of the two terms.

As discussed above, JavaScript frameworks provide a complete solution for a given use case scenario. There are specialist frameworks for frontend development, dynamic applications, server side development, and so on.

JS libraries, on the other hand, are a set of functions and classes that can be called to perform a specific task. For example, a library to show glittering text in Comic Sans (okay, bad example, but you get the idea) will do just that — show glittering text in Comic Sans. Your JS framework can call this library as and when needed to perform this given function. Thus, a JS library is a set of pre-written code that can be used to abstract and perform specific tasks within the workflow for faster development.

Going by the textbook definition, a JS library should be limited in its functionality such that it performs only a given set of specific tasks. A JS framework is a prototype that does a diverse list of related tasks. However, many big JS libraries can perform such diverse features that they are termed frameworks in their own right. YUI is a good example. This is why the definition and difference between JS libraries and frameworks is a blurry one nowadays.

That brings us to the end of this discussion about JavaScript frameworks and their uses. Which JS framework do you use for development and why? Share your views in the comments below!

Posted by Sufyan bin Uzayr

Writer, web dev, coffee-lover. :)

  1. Hi Sufyan,

    Great post. I think with the rise of Gutenberg, React will be growing fast in the WordPress community. Most tutorials will say about it and use it as *the* way to create Gutenberg blocks.

    Reply

    1. Hi Anh!

      Thanks! And I agree with you on that one, React is definitely gonna be growing fast and lead the race in terms of popularity among WP devs.

      Reply

      1. I did have the question I know that the Framework they chose to go with for gutenberg is react but Vue could also be used with wordpress right?

        Reply

        1. Yep, you could definitely go with Vue. I just posted an article today on Gutenberg News that shows you how to get started with Vue instead.

          Reply

          1. Dope thanks! Mike do you run Gutenberg News? If so I love following all things gutenberg there.

          2. Yessir, I do! Thanks for following!

  2. Although I knew what frameworks are this is was a very insightful read and I really appreciate all the information you guys are putting out on the JS in WordPress and Gutenburg.

    Reply

    1. Thanks, Daniel! I’m glad you’re enjoying the content. Stay tuned, more on the way!

      Reply

  3. Sebastian Gärtner July 31, 2018 at 5:01 pm

    As far as I understood Gutenberg doesn’t push for any framework. Sure, the core uses React but you can write blocks in whatever.

    Will that mean, that every plugin for extra blocks could also try to ship another framework and we could end up with WP pages that ship a collection of React, Angular, Vue and maybe some doubled because the frameworks are poorly enqueued?

    For some reason I have a strong antipathy against React (really don’t know why – maybe just because it is super hyped and I am a bit tired of learning new stuff?!) – but anyway – I feel like: better use what the core is using?!

    Reply

    1. Hey Sebastian,

      Thanks for your thoughts. You can definitely use what suits you for developing blocks. Today I posted a link on Gutenberg News showing how to work with Vue instead of React. Ultimately, I think there will be more resources surrounding React for block development simply because that’s what core is using, but that doesn’t mean you can’t be a black sheep!

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *