PROs and CONs of Using WordPress with ReactJS

PROs and CONs of Using WordPress with ReactJS

ReactJS took the WordPress community by surprise when it was introduced in November 2015 by Matt Mullenweg announcing Calypso as the culmination of more than 20 months of work by dozens of engineers and designers. Calypso was described as being:

  • Incredibly fast;
  • Written purely in JavaScript, leveraging libraries like Node and React;
  • 100% API-powered;
  • Fully responsive.

Suddenly, thousands of PHP developers had to become fluent with JavaScript to be able to take advantage of the newly proposed tech-stack and build apps ontop of WordPress the React way.

This year at WordCamp Europe in Paris, Matt launched the Gutenberg editor – obviously built with React. Gutenberg is expected to move not only the WordPress ecosystem forward but the whole Web.

Only a few months later, September 14th, another announcement turn the WordPress community upside down: “We’re going to take a step back and rewrite Gutenberg using a different library.” The decision came after Facebook’s patent clause addition to the React license. While the community of developers was busy voting on what to use to replace React, just 10 days after Matt’s blog post, Facebook succumbs to the pressure and announces relicensing ReactJS under the MIT license, making WordPress and React marriage possible again.

The waters are now still again and it’s time to analyze what this emotional roller-coaster surfaced: first, the WordPress developer community proved that it can be an instrument of power; second, other JavaScript frameworks have been considered for a replacement (Angular, Preact, Vue) which shows that technology is an enabler, not a goal in itself.

As Steve Benfield, President at Engageonq.com puts it:

Moving to MIT License erases the small cloud of doubt around its use and relieves having to defend our choice of React with our investors. React is heavily used in software development and this move will make it even more popular to use. We are pleased that Facebook decided to do the right thing and honor the intent of Free Open Source Software (FOSS) and not use it as a legal defense mechanism.

From a product strategy point of view it makes a lot of sense for WordPress to continue its development using React, but why was React chosen in the first place. Below are some PROs/CONs that probably have been considered when the initial decision has been made.

PROs of Using React

  • Learning curve – Easy to start writing (if you can get over the syntax)

Writing React templates is extremely similar to writing HTML with interpolation thanks to JSX. It ends up looking similar to Mustache templates, except the markup is directly in your JavaScript component code.

React is extremely unusual in that it encourages you to put all your markup, style and functionality in the same place, but this gives you convenience and extreme modularity in the long run, which we know is a good thing.

  • Total separation of data and presentation

React provides little more than a presentation layer. Although React components do have a concept of ‘state’, this is best used for ephemeral storage. Anything you could lose on a new render can go in React state, although when combined with Redux, putting as much of your data in your Redux store as possible generally gives the best results, as it allows complete separation of state (Redux’s concern) and presentation (React’s concern). And of course, in case of WordPress, using the REST API is how the data reaches React & Redux.

  • Speed – never think about re-rendering!

The benefit of this separation of concerns is you don’t have to concern yourself with whether something has been rendered before, or whether it’s the first time. Since React rendering is immutable, the first render and the 100th render of the same component are handled the exact same way. When state changes, Redux re-renders relevant components on the page.

  • React isn’t a framework

React is a library which provides a declarative method of defining UI components. ReactDOM is an associated library which provides rendering and DOM diffing. Redux is a library which provides a data store, and React-Redux provides the glue between React and Redux.

  • Access to the native world

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.

  • Backed by Facebook

React is being used by companies such as: Alipay, Airbnb, Dropbox, Facebook, Netflix, Reddit and many more (https://github.com/facebook/react/wiki/sites-using-react).

CONs of Using React

  • React isn’t a framework. Again.

Philosophy is great, but when you need to get something done quickly, the React Way can be frustrating. If you have clients and projects and pressing deadlines and the first page of your React handbook no longer works, you can get frustrated. The looseness with which React can be employed is great for experimentation but challenging when you’re trying to do things the right way. Knowing there isn’t one yet will save you some time here.

  • Community conventions are still developing

How do I structure this? How do people handle that? I won’t say library developers don’t have strong opinions on how their libraries should be used because they certainly do. The problem is turnover and change is so rapid, these don’t have time to solidify into common practices. Only those really paying attention to monthly, weekly, daily changes in the React community could tell you the best way to use X library.

  • Build tools are necessary (or strongly encouraged)

For all front-end apps but the absolute simplest, decent build tools are highly recommended. For simple apps, you can often get away with shell scripts in your ‘package.json’ file. For more complex apps, you might want to use a tool like Gulp to manage multiple tasks. These build tools are useful but remain unnecessarily complex. I would strongly recommend sticking to npm scripts like above and using the command line interfaces of your build tools, for example, ‘browserify’ or ‘webpack-dev-server’.

  • (Restrictive Licensing)

As we all know, this is no longer the case, but if you think about it, Automattic/WordPress team decided to go with React regardless of this number one CONs that nearly made them loose months in re-writing Calypso and Gutenberg.

Conclusion

I’m sure that the same exercise was done with Angular and VueJS and the reality is that any of these three JS frameworks/libraries could have been chosen. At the end of the day, the display of politics we’ve seen these past weeks is a clear indication that the technology itself is not the end goal … it is and always will be an enabler.

Tim Platt, VP IT Business Services at Virtual Operations:

The patent clause was drawing scrutiny from legal counsel in larger companies and absolutely resulted in decisions to not utilize React technology. Companies with well-run software development organizations maintain guidance on open source software licensing – which licenses are preferred, which are not, and those that are outright not allowed. Secondly, use of open source software must be reviewed and approved by the legal team – no approval, and it’s not going to be allowed to be used. React, with its patent rider, was increasingly showing up on the “never use” list. The MIT license is permissive, and is likely to pass legal review every time. Developers love React for the benefits it brings – so this is a community win and a developer win because the more people that use the technology makes the technology better and it’s now going to be easier than ever to use React in projects – big and small.

When it comes to WordPress developers, using one framework/library over another has to be a decision that’s deeply rooted into the project scope: you might want to go with React Native if you want to build a mobile application with WordPress as a back-end, VueJS if you’re looking for a simple Single Page Application or go with Angular2 and TypeScript if that’s what your client demands.

You do have to learn JavaScript and learn it deeply, just like Matt said it couple of years back … JavaScript is a ubiquitous language that will clear you the path through the years to come.

Tech-Biz in between guy. CEO at WPMobilePack.com. Organizer at BucharestJS & JSHacks. Passionate about entrepreneurship. Love to play 🎾, squash and 🏓.

Leave a Reply