This post was written by Arkady Fukzon. Arkady is a Back End Developer at Fiverr.com.
As Fiverr started growing, managing shared resources among developers became more and more difficult.
At first we were using 2 Skype groups: one for sharing our limited number of staging servers and another for pulling requests from GitHub. Our developers used our first Skype group to test our code where each person could post a question such as: “Who is using server X?” If the developer’s question wasn’t answered quickly enough, he would simply deploy his code on the server, overriding the previous code.
As you may know, we developers are not the most patient kind. For most developers, a few minutes were enough to decide that someone was brutally overriding their server while in a meeting, on a coffee break, or simply didn’t check Skype too often. Someone shout across the room “who is using staging X???” became pretty common, as well as arguments as to who took which code first.
Something less exciting, but just as annoying was happening in our second Skype group. This group was dedicated to pulling requests from GitHub (code reviews). We usually posted a link to your code changes on the group, after that the reviewer announced he was taking your review. At Fiverr, all developers review each other’s code according to their specialty: Backend, Frontend, Android and iOS, and posting comments for your code on GitHub.
The problem with the second Skype group? 10 others would often post their request after you did, burying yours. So a brilliant solution was devised in the form of a nudge message—but that didn’t help the situation either. In the end we found ourselves hounding people near the corner exchanging reviews for snacks.
The Solution:
Our solution was a dashboard for (servers) and those who were using them. This includes a queuing system and a dashboard for code review crowdsourcing, which encouraged developers to review each others’ code to see what needed to be reviewed.
The Dashboard Page:
In this page you can see all the open reviews and Graylog requests, as well as the top reviewing users for each type (some gamification for bored developers). At the bottom you can see all free servers for taking and a list of useful links (fully configurable).
The Servers Page:
On the servers page, you’ll find a list of servers divided into types. You can take each server for a limited amount of time; automatically for one hour, extendable after that, and if the time has passed, the server will be automatically released.
This was created in order to prevent a new phenomenon nicknamed, “server parking”, which was executed by cunning developers taking servers at the night before and never releasing them. In fact, some still do that by extending the servers until the maximum 12 hours. It is said that some people still wake up at night to secure their server.
You can still take the server if someone is holding it with his or her consent, as well as queuing on the server. This results in an automatic transfer of the server to you once it is released by the system or the previous developer.
If all the servers of type are taken there is a type queue that will get you the first server that gets released.
An admin user can also mark a server as down in order to prevent use in case of system issues.
All actions in this page can be posted to a HipChat group. This updates everyone in real time and eliminates the need for everyone to go back and look into the system.
The Pull Requests Page:
This page includes a list of all requests pending for review as well as past ones (sorted by status), In this screen you can create a request:
Posting the GitHub link fetches the description automatically from GitHub (you can later change this yourself), choosing the request type (FE,BE,IOS.ANDROID), with an option for multiple requests for different types to be open simultaneously (for full stack devs).
As for reviewer’s options, you can take a request. In GitHub, you can post comments and later flag the request as completed or flag those that need more attention in Devflow (for requests with many comments).
As with the server’s screen all actions in this page can be posted to a HipChat group. This updates everyone in real time.
The Graylogs Page:
A page similar to the pull requests page, with all the functionalities stated above.
Each one of the requests dashboards above features a leaderboard at the bottom increasing the gamification effect.
An important point to mention is that devflow uses websockets allowing the pages to be automatically updated without refreshes initiated by the user – everything is live! No overrides will occur (unless there is a bug, and there always are).
Devflow also includes a management console for managing the users and servers in the system.
Technology and Stack:
Devflow is written using the “mean” stack: NodeJS, Express, Mongo and Angular.
Node packages used in the project:
● express – server framework
● github – for github integration
● mongoose – mongo querying and data modeling
● node-sass-middleware – the sass css preprocessor
● passport and passport-google-oauth2 – google authentication
● socket.io – websockets
Client libraries:
● AngularJS – JS framework (with some external directives)
● hint.css – for displaying hints
● font-awesome – icons
Devflow features an original design (- no “bootstrap templates” used here).
In conclusion, devflow is a system for collaborating on resources that aims to be intuitive, fun and easy to handle. In the end, developers are the ones who need to use it, thus improving everyone’s productivity.
I believe that at Fiverr we are close to achieving just that through this tool. I hope that you’ll make good use of it as well expanding and making the platform more complete as there is still a long way to go and many improvements and integrations can be done.
Devflow is fully open source! Check it out on Github.
P.S. Devflow was created as part of my 20% innovation time at Fiverr.
The post Devflow – Team Collaboration System appeared first on Official Fiverr Blog.