Get a complete design stack
Get to know DashCore color options
Useful accordion elements
Comply with the hideous EU Cookie Law
Online store home with an outstanding UX
Online store shopping cart
In this post, I’ll take a deep dive into KeystoneJs, a popular Node.js/Mongo based CMS.
My first impression is that this is a fairly MVP type project after reviewing the docs and demo site. However, I’m interested in whether of not the architecture and features would provide enough value for it to be used as a foundation for a moderate or larger project.
So we’ll be looking at initial setup, learning curve, features, pros/cons, adherence to coding best practices, architectural considerations, scalability, performance on so on.
I started out by following the getting started guide here:https://keystonejs.com/getting-started/yo-generator/
Unfortunately, running the available yomen generator resulted in some errors for me, but it did complete and I received the “Your KeystoneJS project is ready to go!” message. This was a little disappointing as it was my first experience with the framework.
Running node keystoneinitially gave me an error relating to SaaS. However after a quick search on google I was able to move past this.
Here are a few screen shots of the bare bones site generated by keystoneJs:
So its looking pretty darn vanilla but let’s add some content and start to look at KeystoneJs’ admin features.
So off I went, creating a few post, categories, and galleries. Oddly, when I added a gallery, the system seemed to get into some kind of bad state where no matter what I clicked on I was stuck on a blank gallery page. However creating categories and posts was fairly quick and intuituve. The only thing I didn’t like was that the “Add” and “Save” button appear on the same screen, allowing a user to make an easy mistake of click “Add” when they meant to click “Save”.
The system run very fast and there is hardly any noticeable page load lag. It is fairly consistent with the responsiveness you would expect in a SPA (ie: Angular/React/Vue App).
Here are a few screen shots of the backend of KeystoneJs after adding some content:
One MAJOR disappointment I had is that I wasn’t able to upload multiple photos into a gallery. Moreover, I found out the hard way that you have to click “Save” after each individual photo is uploaded or you loose to previous photo you already uploaded. Adding a multi upload feature would have taking the dev team like a day or so to add so I just don’t get why its missing such a standard core feature that any CMS has?
Now that we’ve added some basic content, let’s flip back over to our front end site and see how we’re looking.
Here are a few shots now that we’ve added some content to the backend:
You may notice that the images in the gallery have all been forced to have an even aspect ratio, but cropping wasn’t used so they all appear distorted. Also the galleries just all list out in a page, there isn’t a details page as there is for blog posts.
At this point I’m really wondering what was the intent behind this. Is seems like a decent idea, but the execution, lack of super basic features, surprisingly significant bugs, and lackluster UX really cause me to start thinking I’ve just wasted a few hours of my time here.
Well, there just isn’t much there. There is no service layer ->
I REPEAT, THERE IS NO SERVICE LAYER
So after looking thru the code, I was really hoping to find something that could be gleamed from my experience with KeystoneJs, but it just doesn’t exist. It’s super basic at every level. It looks like it was architected by UI developer, not a full stack developer with experience constructing scalable/maintainable solutions. Not necessarily a bad thing if you’re building a tiny marketing website (there is a place for KISS), but anything beyond that, I think you’d be much better off starting from scratch or looking at another framework.
Yes! If your just getting into web development with Node, this would be a fully working demo project that could serve as a decent initial learning tool. However is doesn’t really adhere is any common best practices from an architectural perspective, but if you are looking to understand how routing, view engines, etc work, this might be helpful.
It really wasn’t my intension to bash KeystoneJs. I have a strong amount of respect for any open source project and it’s creators. I was really hoping there would be some ideas that I could pull into my own open source Node.js based CMS sonicjs. If anyone has really spent some serious time with Keystone and thinks that I missed something, please let me know in the comments below!