Skills - what, why, and for whom?
Recently, Brave launched their Skills app - an application for tracking their employees' progress on their career path.
The tech stack - what makes this clock tick, and why?
The user is able to see their own progress measured by skill levels, determined by various requirements and expectations to be had of an employee of a certain level of experience as well as compare their skills against all the other employees within the company.
Skilltree also allows to view a list of all the requirements complete with various skill and position levels - for example, senior developers are expected to be able to handle the entire software development cycle, end to end.There are two main elements powering the frontend layer of the application. The core of Skilltree is written in React, while Bootstrap 4 is the visual layout framework.
What is important to note, the implementation of Bootstrap is actually a port rewritten 100% into React components(no jQuery required!), called reactstrap(link).
This makes the core visual stack consistent and easy to develop. Because React's main philosophy is that of self-sufficient components - building blocks of code combining, in our case, the functionality and looks of Bootstrap components - it is extremely easy to rapidly develop working prototypes of individual views.
Besides React and Bootstrap, Skilltree is also making use of Google Firebase's Auth module. One of the main technical requirements of the application was that the application was only available to Brave's employees, and not anyone else. Since we're using Google's services on a daily basis, and every one of our employees has a dedicated @bravelab.io company email address, it seemed like a natural choice to try and implement an auth system based around Google's services.
For the backend, the choice is obvious. Bravelab is a Python and Django workshop, so we've used our expertise to craft a new API specifically for the needs of this project then integrate it with our own core backend. Designing models and endpoints in Django is very easy and intuitive, and Django itself is heavily focused on extendability and integration. All it took was write a new Django App inside an existing project.
Our go-to solution for database in this project was SQLite. The data package itself is very small, plus reading and saving data from memory makes for a very fast I/O pipeline.
And finally, a word about the final piece of the puzzle - the test environment.
Unit tests were written using Facebook's Jest test runner and Enzyme - a utility belt testing library for React components.
However, the biggest challenge was implementing an end-to-end testing solution. As you may be aware, there is no dedicated E2E framework developed specifically for React. Therefore, we had to try our best to adapt an existing E2E testing solution for our needs.
Enter Protractor - the end-to-end testing solution for... Angular. Yes. You've read it right. We've managed to make Protractor and React work with each other, and even hooked it up to Travis - our CI solution of choice - for a comprehensive application build process.
The Process - From Pull Request to Deploy
So how does our build process look in detail?
When a pull request is opened, the code is run through two cycles of our building process in Travis before merging, and once again after it is approved by a reviewer.
The process incorporates a complete E2E test cycle. When testing Angular apps, after executing the ng e2e command, Protractor starts a development server instance for the course of its tests, then instantiates a Selenium WebDriver server for test automation, and then runs a browser to "click" through the app as per the test spec sheets.
Similarly, in our build process, the various environment variables are passed into Travis, then all the application dependencies are installed. After this, our own implementation of ng e2e is called, and, if the tests pass, the app is built and deployed to production.
Everything has a purpose - What problems did we solve?
First of all, Skilltree serves a real purpose and solves a real case. Its purpose is to inform our employees of their career path and the potential steps further down they could take. However, we've also encountered, and fulfilled or solved, a number of needs and issues that arose on a bigger scale.
Skilltree is one of our first complete applications in React. While it is true that frontend tools change all the time, lately we've specialized solely in Angular apps, and Skilltree turned out to be a fitting exercise in React.
Another major issue we wanted to tackle our way was integrating test suites within our CI process. Skilltree comes complete with unit tests as well as E2E test suites.
End-to-end itself also proved to be quite a challenge and an accomplishment of its own. For one, we needed to come up with a solution specific to React, and incorporate it with Travis CI for our build.
When All is Said and Done - Summary
Overall, developing Skilltree was an educational experience. React turned out to be a flexible and capable tool and the unique challenge of combining Protractor and React taught us many valuable lessons along the way.