jeff hooton

Switching from Wordpress to modern Javascript

posted on dec 8, 2019



Back in 2018 I made the decision to modernize my skillset by focusing on full stack modern Javascript applications instead of continuing to focus on Wordpress theme development. I had found myself fairly limited in terms of what I was able to do with Wordpress. The more and more I used Wordpress, the more I realized that there were use-cases that had me trying to wrestle Wordpress into acting how I wanted it to act to do something fairly simple.

Switching to becoming proficient/mid-level in modern javascript took me roughly 3-6 months of work. I took a pretty straight forward path, and had a background in several different disciplines of software development, so timing may vary from person to person

How the switch was in the beginning

In the beginning, I knew I had to get a fundamentals down. My experience with javascript in general, was pretty limited. I had hacked together some jQuery code, when needed, while working on Wordpress. Some resources were especially helpful while focusing on Javascript. I immediately went through codecademy’s javascript section, laying a foundation of the basic syntax and differences that you find in javascript compared to other languages.

First book I read

After finishing that, I purchased Eloquent Javascript to get a deeper dive into the language. I had read somewhere that it was the number one book for learning javascript.

This book starts out with the basics, and quickly goes into more in-depth topics surrounding what sets javascript apart, and what javascript’s individual strengths are.

I was able to make it through 7 or 8 chapters of this book before the exercises seemed a little over my head in terms of complexity. No worries there, I can always return to it later on when my fundamentals are stronger.

Javascript 30 by Wes Bos

I thought this would be a good time to get some experience using javascript to solve problems that are more applicable to real world scenarios. I picked up a copy of Javascript 30 by Wes Bos. This course really helped me visualize what I could actually accomplish with javascript, and helped me broaden my horizons.

I would recommend this course for anyone that is about where I was when I took it. I think it really helped bridge the gap from fundamentals and basics to real-world use-cases.

Picking up a modern frontend framework

The next logical step for me was to look into ReactJS. To be totally honest, I chose to start with React because of the job market. There were a lot more open roles that listed React than either Angular or Vue.

I also knew that React had been on the scene for long enough that I knew it wasn’t going away any time soon. One more consideration that I took into account was the trend of React, it was moving most steadily up, closely followed by Vue.

The place that I started when looking into React was the React official tutorial itself, you can find it here. I found that the basic tutorial on the React website, however limited it was, gave a good basic overview of some of the core concepts of React.

The tutorial covered passing data from one component to another through props. It also covered making components interactive with the use of event listeners. The tutorial also covered component state, which is a vital part of React, especially when starting out.

After the first tutorial

After completing the React official tutorial, I decided it would be best to try and recreate a simple website using React, so I created a very simple portfolio website with React. I bootstrapped it with Create React App, and it was super simple. The website didn’t have any interactivity, besides some carousels, and it certainly didn’t pull any data from another source.

However limited the scope of that first React project, I felt it really helped me as I set out to create something without the use of any tutorial or guide, and finished it to completion. I ended up hosting this project on Heroku.

Integrating backend and frontend

There are several pre-built node specific CMS platforms that work really well with a javascript frontend. The one that I have the most experience with is Strapi. Strapi is a self-hosted solution, meaning you pull it down, configure it and then host it yourself. You can host it anywhere that you can run nodejs.

The nice thing about using a prebuilt solution is that it creates your API for you when you create a content type. It will automatically create CRUD endpoints for every single content type your create, and allows you to override existing endpoints if you wanted to query a post by slug rather than id, or if you wanted to extend the functionality of your API.

Once you have a source of data that you can pull from, there are a bunch of ways to fetch that data in React. My favorite, tried and true method for sending HTTP requests has been Axios. I have even utilized Axios to interface with 15 year old SOAP endpoints at my current job.

What about SEO with modern javascript!?

Modern javascript frameworks and libraries have opened up the ability to provide the same, if not better, level of SEO friendliness than Wordpress offers through Yoast. Frameworks like Gatsby, Next and Nuxt offer server-side rendered, and even staticly generated, modern javascript applications. This means that all of the content that Googlebot or Bingbot need to see to index your site are rendered immediately, you don’t need a spider to sit and render the javascript on your page to fully get an idea of what your website is about.

I’ve found that when using any of the frameworks above, the pros definitely outweigh the cons in this category. You get the full abilities that Wordpress/Yoast provide, and you get to skip out on a lot of the unnecessary bloat that comes along with Wordpress. Your website is custom built, and only includes what you need - this allows your site and pages to load much quicker than is possible on most Wordpress instances. This will always vary, and your product will end up being a reflection of the work that you put into it. It is possible to have a screaming fast wordpress instance, and a sluggish javascript application, but overall I’ve found that I get a better finished product using javascript.

So how does this relate to Wordpress?

Swapping to a modern javascript stack for my career and personal projects has opened the door to a lot more complex applications. I’ve been able to write much less opinionated code, and find myself wrestling to get stuff working the way I want it to much less often.

The developer experience using React is much nicer in my opinion than Wordpress. I know Wordpress is shifting towards a more modern form of development, which can be helped even more so by using a skeleton framework like Roots Sage, which introduces a modern MVC approach to developing themes for Wordpress. There are also several SaaS applications, like SpinupWP, that help out with the entire Wordpress ecosystem, and will definitely be something that I turn to if I need to ever develop on the Wordpress platform again.

My personal verdict

Wordpress is a great platform for what it is meant for. You need a blog, or small personal or company website done incredibly quickly, with a vast plugin architecture to accomplish different tasks that you don’t have the bandwidth to develop yourself? Choose Wordpress. If you want to build actual web applications that go beyond the scope of what I mentioned above, do yourself the favor and branch out into something more powerful/flexible than Wordpress. It doesn’t even necessarily have to be modern Javascript, you could pick up any number of other platforms to achieve more than is realistic with Wordpress.

If I could do everything over again, I would have made the switch much sooner. The doors that switching has opened up for me are incredible, and my ability to go from idea to product has never been stronger.

more posts