The Xilution web site has gone through a significant amount of change over the last couple of years. Here's a brief story of the latest rendition in which I used Gatsby.js to solve some nagging single page application performance issues.

About two years ago I created the Xilution web site (actually several micro UIs partitioned by subdomains) using Vue.js. I was drawn to Vue.js because it promised to help me publish lots of needed web content for my growing startup quickly. Turns out, Vue.js was just what I needed and I was able to create more web content in less time than I had ever done in the past.



About a year ago, I set out to create the Xilution Customer Admin Portal. At the time, my experience with Vue.js was limited to the few micro UIs that I created for Xilution, but I had lots of experience working with React.js through my day job. Since I was more confident creating larger sites with React.js, I went that route for the portal. One thing led to another and I ended up porting all the Xilution web site micro UIs to React.js and Redux. No slight to Vue.js. I'm just more comfortable with React.js (especially for unit testing).

Moving forward in time to about a month ago, I started paying more attention to Xilution's web performance and SEO. I quickly learned that Xilution's single page React.js apps were suffering from bundle bloat. I spent hours with Webpack Bundle Analyzer attempting to reduce the size of the bundles. I got frustrated pretty quickly. I needed a different way of thinking about my site construction.

I reached out to the local Javascript development community here in Des Moines for help. A good friend suggested that I take a look at Gatsby.js. I was familiar with Jekyl and the benefits of static site generation, but didn't want to go down the Ruby route. I had also tried Hexo on a very early version of the Xilution blog, so the concepts of static site generation were comfortable to me. I also liked the idea of reusing a good portion of my existing React.js components from the single page applications.

About a week ago, I starting porting the Xilution landing page to Gatsby.js. It took about a day to complete the process. Moving my existing React.js components into the Gatsby.js framework was surprisingly easy. Next, I moved on to the Xilution products site which was a little more difficult because it pulled in product data from a Xilution API. The Using Gatsby without GraphQL documentation proved to be especially useful for this site port which was completed in about a day as well. Four more micro UIs followed and the migration was complete. The process went very smooth and I couldn't be happier with the lighting quick performance of the site. Check it out for yourself!

ICYWW, I did not port the Xilution Customer Admin Portal or the Xilution registration site to Gatsby.js because they need to support dynamic user interaction and wouldn't have been a good fit.

If you're supporting mostly static single page applications and like me struggled with performance, you may want to give Gatsby a try. It's especially good if you are already familiar with React.js. Happy coding!