I joined the Exponea team 4 months ago with the desire to make a difference by developing the promising product and turning a fresh technological vision into reality.
All I had was a love for frontend technologies (Angular in particular) and solving complex performance and visualization problems, a hope to broaden my skills in single page application User Experience improvement (something I fell in love with when working with Andres Galante) and last but not least a recommendation from my friend Viliam, who assured me that the project was in good shape. On the other hand, joining a running project always comes with certain challenges: many new things to learn, specifics of the product and code base to get used to…
Exponea was no different. The app was Angular 1.4 at the time, and it was logically divided into 47 modules that shared 123 common angular directives. Overall, the code base seemed well-managed with several really smart ideas. But there were also things I did not like, such as the structure of CSS stylesheets and most prominently, missing end-to-end tests. (More on that later.)
Fast turnaround cycle to unlock productivity
A few introductory tasks later, it became apparent that the development setup would need some love – the LESS build step with the reload of the app took too long. Those who had a chance to work with me previously will know that I take fast development turnaround really seriously 😉
Improving LESS build time
Several “surgically precise cuts” into the Gulp build were all that was needed to rid the build process development profile of unnecessary application themes, introduce caching of intermediate results of the LESS compiler, and turn off minification. The resulting CSS stylesheets were reloaded in place without the need for full page refresh with Browsersync, and source maps were generated to help people find their bearings in the code before compilation. All in all, a huge boost in productivity, and only 3s needed to see changes in LESS files.
How can large number of small flies kill the browser
However, I soon discovered another, more ominous culprit of the slow development cycle: HTML templates and JS sources were all sent to the browser non-minified, split into hundreds of files during development. The browser needed another few seconds to pull all the sources out of the Flask HTTP server running inside a vagrant machine.
What we needed was a smart caching layer, one that avoids any unnecessary costly request. Luckily, that is exactly what Service Worker offers.
Service Worker to the rescue
Service Worker serves as a middle-layer between the browser and the HTTP server, handling all resource requests and allowing to preload, cache (or generate) files primarily for an offline use of the web page.
In our case, Service Worker caches all non-API requests and opens a socket to the Gulp watcher process. The process watches all JS and HTML files and updates Service Worker about changes made in the source code. Service Worker in its turn removes the file from cache, forcing the browser to download a new file version. With this change, we were able to cut the time the app needs to reload after each change down to 3s in the case of LESS file changes and 4s in the case of JS and HTML file changes.
Voila, the developers are a happy gang again!
(Special thanks to Martin Jakubik who put lots of effort to grooming our fast-dev feature.)
Our current efforts and future plans
Even though we became more productive in our day-to-day tasks, we really didn’t want to sleep on our laurels.
Instead, we started to focus on how to enable rapid prototyping, make frontend development more accessible for the wider team, maintain consistency (both design- and code-wise) and improve the testability of the application.
In the process, we came up with a new component-oriented CSS architecture and started building a showcase of our components. We are switching to TypeScript as we speak and plan to switch to Angular 2.0 soon.
These are exciting times… If you want to keep up to date with our progress, watch our technical blog.