For Bolt 4.0 we’re going to do a major refactoring of the Bolt Backend, with the following goals:

• It should look and feel both solid and professional
• It should be well built (UX, design, HTML, CSS and JS alike)
• It should be (slightly) theme able
• It should be maintainable

To do this, we’re going to take about ten months. Which (not by coincidence) is just about the time when we’ll be ready with Bolt 4. This process will be managed by me, and I’m going to ensure that we’re going to follow the schedule, instead of doing things haphazardly. Re-designing such an important part of Bolt should be done with care, keeping especially these parts of our manifesto in mind:

Our slogan is "Simple, sophisticated and straightforward1". This embodies everything we strive to do with Bolt: It is as simple as possible, but not simpler. It uses sophisticated technology to achieve this, and use of the system should be straightforward and evident. Bolt aims at three groups of users: Editors (content writers and editorial staff), Frontend developers (HTML/CSS specialists and implementers) and Backend developers (coders, devops and sysops). All three are equally important.

The process is split up in a number of different sub-projects, which will partially overlap. See this carefully crafted ASCII diagram:

The Process

This process will (as mentioned) take a while to complete. One of the reasons for that is that we’ll need to maintain a working system in the meantime. We can’t just start working on a new look & feel, and slap that onto the current codebase. Instead we’ll refactor the backend piecemeal, until we have a spiffy new backend. Currently we have a backend in Bolt that’s very functional. It’s pretty straightforward, and easy to navigate. There are obviously points that can be improved upon, but at the same time, a lot is already pretty good. Should we do a total rebuild, we’d lose the tremendous amount of effort and experience that got us to the point where we are now.

Disagree with me? Read this.

These are the steps we’ll take, roughly:

Splitting up current CSS

The current CSS for the backend is a mix of functional and visual styles, only separated by the area they apply to. For example, the CSS that specifies the rules for the sidebar has both the rules that determine what it looks like, as well as the rules that determine the structure and functionality. This isn’t good for the refactoring, because things are too interwoven. We’re in the process of splitting this up, so that we can move forward better.

Wireframing

We’ll make Wireframes of the current pages in the Bolt backend. Partly to document the backend as it is, but also to take the opportunity to improve screens and workflow where possible.

Updating Bootstrap 3 to Bootstrap 4

We’re currently using Bootstrap 3 in the Bolt Backend, and we’ll need to update this to Bootstrap 4. This can be done, as soon as the “Splitting up current CSS” part is done.

Adding Vue.js

We’re going to add Vue.js to the Bolt backend. Because it’s pretty awesome, and it’ll allow us to refactor more functionality into components, for easier maintenance and ongoing development.

Perhaps we can even use this: VueBoot or Bootstrap-Vue.

Refactoring Twig

The current Twig templates for the backend mix up presentation and business logic. In an ideal situation, the Twig templates would be purely for the presentation layer, while all business logic would be moved into the PHP code, where it belongs.

Updating the build chain

We’re using NPM, Yarn and Grunt in the current build chain for our compiled CSS and JS assets. We’ll re-evaluate these tools, and see if we can improve or replace them, in an effort to increase stability and reduce complexity.

• Can we remove Grunt, and use “vanilla” NPM?
• Should we use webpack?

Visual Design

The current “Look and Feel” of the backend will be updated, to be more appealing to a wider group of people. In this step of the process we’ll make visual designs of a number of pages in the backend, as well as different components that are used in different places.

Styleguide & Identity

We’ll also evaluate the logo and our corporate identity (used colours / fonts). If needed, they will be updated / redesigned. This will lead to a Styleguide, that we’ll use during the implementation of the visual design, but it will also serve as a guideline for people writing extensions or themes for the bolt backend. The Styleguide will allow them to add components / pages that are consistent with the rest of the Bolt Backend. As an added benefit, we can ensure that these external works will not “break” every time we do a minor update to our Bolt backend code.

Implementing design

During this part of the process, we’ll apply all the work we’ve done in the previous steps, and we’re going to actually implement them in the Bolt backend.

At this time we'll also implement the options to do (mild) themeing in the backend, for people to customize it.

Removing Jquery UI

We’re going to remove the monolithic Jquery UI, and replace the required parts by smaller components that fit our use case better. Like GitHub - bevacqua/dragula: Drag and drop so simple it hurts for Dragging and dropping, and flatpickr - lightweight datetimepicker & calendar or Pikaday for the date picker components.

Perhaps we’ll replace more Javascript components, as we go along, we’ll see.

Migrating components / pages to Vue.js

We’re using a bunch of home-made functionality now to do a ton of things in the backend. We’ll leverage the functionality in Vue to make these more like actual components. This will likely take longer than the time we have allocated for this project, so this effort will likely continue through Bolt 4.1 and onwards.

Updating Bolt.cm

We’ll obviously need to update and redesign the Bolt.cm website as well. It needs to be more closely related to whatever the new Visual Identity for the backend will look like.

What's next?

Currently Jack (@jackiboy) and I are working on the redesign and re-implementation. Gawain (@gawainlynch) will be working on the "Refactoring Twig" part. Soon(ish) there will be things to show to a larger audience. We're planning to take feedback from the community into account, but we're also very adamant about the process not turning into Design by committee. That said, we'll need more people helping out with this major effort. Are you interested in helping out with one of the sub-projects or the overall re-design, please let me know! 👍

Currently we're working on the "Splitting up", and have some mockups of the direction we need to go in. We'll be starting on the "Refactoring Twig" and the "Wireframes" soon.