I’m going to cover terminology that comes under a few headings:
- Core Concepts
- Templating Systems
- Development Tools
So let’s start with the core concepts you need to understand if you’re going to make sense of all those libraries and frameworks.
A framework is similar to a library but instead of being a standalone set of tools you can use to create code, it will provide you with a framework to hang your code on. Sometimes you’ll need to install a library in order to use a specific framework.
The MVC model is something the documentation for libraries and frameworks will refer to when describing how they work; each library tends to focus on one of the three elements of it. It stands for Model-View-Controller. The model is the underlying structure of the data (in WordPress, your database tables); the view is the elements of the user interface, such as text, buttons, images, animations etc.; and the controller is the connection between the model and the view – the code you write to get the elements on the page to interact with the data.
It can have SEO drawbacks however as you don’t have the benefits of multiple URLs.
API stands for Application Programming Interface. It’s a set of code (functions, hooks etc.) provided by a system that lets other systems interact with it. If you’ve ever added a twitter widget to your site, for example, you’ve interacted with the twitter API. WordPress has multiple APIs, most of which are designed to let your themes and plugins interact with WordPress’s core code. The REST API is different as it lets other languages and systems interact with WordPress.
REST stands for Representational State Transfer (snappy, yes?). It uses decoupled architecture, which means that the various components of a site or app are separate from each other (or decoupled). So your site can be stored in one place while the data that powers it is stored completely separately.
All of the libraries below are open source and free to use.
It’s normally used for effects and interactions that don’t interact with data that will change over time and relates to the view in the MVC model.
Angular (or AngularJS) is a library maintained and used by Google. Angular does a similar job to React (it’s the view in MVC), so you can use it to interact with the REST API again. So if you’re using React, you probably won’t use Angular, and vice versa. Pick one, and get to know it.
The website says that ‘It’s the answer to the question: “If I sit down in front of a blank HTML page, and want to start being productive immediately, what do I need?”’
The backbone.js framework is dependent on the Underscore and jQuery libraries. It’s designed for building Single Page Web Applications and links the three elements of the MVP structure together (hence its name).
else for loops.
Handlebars is based on Mustache and can render Mustache templates as well as adding its own.
Gulp is another tool that automates website build tasks for you, in a similar way to Grunt. Again it’s a command line tool, and you’ll need to have Node.js installed in order to use it. You can read more about Gulp in our guide Using Gulp to Speed Up WordPress Development.
Putting It All Together
It’s likely you’ll need one of each of:
- A library, or possibly a couple of them if you can’t find one that meets all your needs. Find ones that complement each other and provide the tools you need for your projects.
- A framework (optional). You might choose to use a framework on top of your chosen library or libraries, or you might not. If you’re building web apps and standalone apps you’ll need two frameworks.
- A templating system to make your coding more efficient and avoid repetition (again, optional but helpful).
- A development tool (optional) to automate processes you run a lot.