NBIM
Situation #
In my role as Principal front-end developer at NoA Ignite I landed in a project for NBIM. "NBIM" is short for the Norwegian Bank Investment Fund. And if you're Norwegian, you know very well who they are, and if you're not, you might still know. NBIM is what's more commonly known as The Oil Fund, which has a worth over 13 trillion Euro.
Now - they have a website that has been running for over 10 years, and at many points throughout those 10 years different developers from different companies has worked at it. And now it was my turn!
A third-party back-end team runs the site in Optimizely, and because of security reasons we would not have access to it.
The long term plan is to rebuild the main website. But before that could be done, the handover of HTML and CSS templates from front- to back-end needed upgrading.
Actions #
Issues #
- The current system is built on a old version of a static site generator, Metalsmith, that is no longer supported.
- Back-end wants to link directly to the CSS file and forget about it.
- A static rendered site with an overview of all elements, for both back-end team and stakeholders in NBIM.
- Ensure that other developers can easily pick up the repository and work on it.
Solutions #
After a round of research I decided that upgrading to the new version of the Metalsmith framework would be bigger in scope than relying on a more modern and future-proof framework. We decided on Eleventy (11ty) for this, as it has a thriving community and is known for its simplicity.
Front-end #
Eleventy, just like Metalsmith, renders files written in markdown. This way the existing markdown files could be kept, and only new layout files were needed. I set up Nunjucks formatting for the layout, which grants us great use of components (or Macros as they're called in Nunjuck). With the components in place we quickly pieced together the full templates.
DevOps #
Linting
Linting is a strict enforcement and formatting of code structure, thus any new code in the project will follow the same best practices. I set this up for checking accessibility, CSS and JavaScript.
NPM package
For the back-end developers convenience I set up GitHub Actions which would build a versioned NPM package for the CSS that the back-end wished for.
Now they point to the CSS file from the NPM package. With each update to the CSS a new version of the package is automatically created with an incremented version number in the file name. With each change to the version number the old CSS will be replaced by the new CSS, and the back-end developers don't need to touch anything.
GitHub pages
The GitHub Action also build and deploys the static pages as GitHub pages.
You can see them here: https://thenorthalliance.github.io/noa-nbim-frontend/alle-sider/ .
Results #
Happy team and client #
Since this was a team effort, I made sure we avoided working on the same code by delegating new components and templates every few days. Thanks to setting up a strict and easy structure from the start, the work of piecing the components and templates together went increasingly faster the closer we came to the end.
For future developers I documented the whys and hows for the process of converting the old system into the new system, along with everything needed to get the system installed and working.
Along with the rules for code architecture, the linting helped building a uniform codebase, made the developer experience better, and improved the user experience.
And not to forget – the workflow from design to back-end improved, as well as the communication between agency and client.
Lessons learned #
We were more than a dozen people from 3 different companies, however I would be the one doing the bulk of the work. And as it sometimes happen with many people involved, it was hard to get the scope nailed down. In addition, the main contact at the client was often hard to get hold of.
Thankfully I discovered that the back-end team had a long experience with the client, so I liasoned heavily with them to understand the client's needs and wishes.
Skills gained #
I was already comfortable with Eleventy - this very website runs on Eleventy! But with the added complexity of the many variables, components and templates I got to step that up a few notches.
I also picked up some more advanced usage of the Nunjucks templating language, which can be used in Eleventy.