You can use JS for:
- Form validation, where you need to store values inside variables
- Third-party APIs that can be placed on pages or posts
- Executing events
- Tracking code
- and more
In other words, it has the potential to bog your site down with performance issues, mostly due to 3rd party scripts as compared to your core site JS. So keep your use of WordPress plugins to a minimum.
Decoupling your WordPress frontend and backend with a headless CMS option is one way to deal with this and other problems, including those inherent to WordPress itself. You can use something like React JS (see below) for your frontend and WordPress for your backend.
At this point, you will need to have a developer involved with your website (including content management) due to added complexity. It also costs much more and requires separate hosting for the front and back ends. However, that is the subject of another article.
Fortunately, this approach is not necessary for most small business sites.
According to Wikipedia, “Cross-site scripting attacks use known vulnerabilities in web-based applications, their servers, or the plug-in systems on which they rely. Exploiting one of these, attackers fold malicious content into the content being delivered from the compromised site.
When the resulting combined content arrives at the client-side web browser, it has all been delivered from the trusted source, and thus operates under the permissions granted to that system.
By finding ways of injecting malicious scripts into web pages, an attacker can gain elevated access privileges to sensitive page content, to session cookies, and to a variety of other information maintained by the browser on behalf of the user. Cross-site scripting attacks are a case of code injection.”
Since most JS in your site comes from 3rd party themes and plugins, it is not as secure as the core WordPress code, and you must be careful with it. By comparison, PHP is server-side code and if done correctly more secure.
React JS is a code library for building user interfaces. It lets you compose sophisticated UIs from small and isolated pieces of code called components. You can build entire website frontends with it (as mentioned above).
React is important because it is used to build WordPress’s new content blocks. In effect, the blocks are React components.
Dev.to explains the technical truth, “Gutenberg uses a modern, React-based front end stack. The foundation is
wp.element which is a thin abstraction layer atop
React. Gutenberg uses it to create the Blocks and static HTML for persisting the content. The editor-view uses the React component which saves static, serialized HTML. The visitor receives the saved static HTML instead of the React component.”
Soon WordPress headers, footers, rails, and widgets can be React JS-based. And eventually, theme layouts will be built with it. WordPress is moving away from PHP to React for much of its frontend functionality.
This change is fortunate because the new blocks included with WordPress are replacing 3rd party plugin functionality with its inherent risk. It will also help with the optional decoupling of WordPress’s front and backends, and the use of headless mentioned earlier in this article.
It was created by Jordan Walke, a software engineer at Facebook in 2011. Despite coming from the embodiment of evil, 🙁 React is a useful development. 😉 Plus, you shouldn’t hold someone’s parents against them.
- React JS – https://reactjs.org/
- LAMP, the WordPress Software Stack – https://en.wikipedia.org/wiki/LAMP_(software_bundle)