Looking for a reliable and modern front-end technology for your project? Learn how Vue.js will help you release your product faster.
Range is a team scheduling software for agencies & studios that helps improve their time utilisation. With a sleek interface and lean process, it allows project managers and team leaders to effectively manage team members’ time across diverse projects.
By the time we started the project AngularJS was in the 1.0.7 version. It was already considered stable (post 1.0) but the adoption was just about to grow, not to mention the integration with rails. At that time everyone was still using jQuery, hence most of the UI widgets were based on that library. When building Range (which was one of the first angular apps at Monterail), we decided to try as hard as possible to avoid using jQuery, even if that meant we will need to write our own implementations of common UI controls.
And in fact - we did.
One of the most important parts of Range's interface is the date range picker that allows a user to select the dates for scheduling. We couldn't find anything that would suit our needs, so we decided to implement our own using only Angular, no jQuery whatsover,and it’s 2013. Explore on our GitHub:angular-mighty-datepicker
While working on Range, we had to deal with numerous JS libraries and decided to solve all mentioned issues once for all. That's howrails-assets.orgwas born. You can read more how we solved assets management at ourblog.
Besides lack of good Angular components and problems with JS dependencies we struggled with one more riddle - the performance.
The very main piece of Range interface is the Rangeboard. Every team member gets a row with nested rows for her availability and projects assigned in selected time frame. This all spanned across 56 columns, one per day with granularity of single hour. All calculated in the browser. All draggable. All updated in real-time. And yes, there were quite a few performance issues.
Some of you might think - that's obvious, the Angular is slow. In fact, it wasn't Angular's fault that much. While we did optimised few `ng-repeats` and those kind oftypical performance improvements, the biggest bottleneck was the rendering and updating itself.
At the beginning we've used SVG for drawing. It seemed like a great idea - DOM-like structure, easy to manipulate with Angular's build-it directives, easy to style using CSS. Unfortunately it turned out this basic setup was very slow and we also needed some more complex features. We then turned out to beloved D3. The rendering was faster, but we started dealing with real-time updates and drag & drop we faced performance issues again. After lots of tries we decided to rewrite everything from scratch using only raw Canvas API. We ditched both SVG and D3 and written our own micro rendering engine that did nothing more than we needed: kept everything in sync via Angular's scopesm reacted correctly to all changes, supported drag & drop, keyboard navigation and synchronised animations. With that the performance was finally satisfying.
Range is an in-house product by Monterail: from the beginning of design process to the current beta stage’s development, both the product vision and implementation are results of the hard work of our internal team.
They also took part in Range project:
Your idea should not wait
— let’s set everything in motion.