Removing Roadblocks in the Move to Angular 4 thumbnail

Angular has become the de facto front-end MVC framework of the Web. We had been slowly adopting Angular 1 here at Lucidchart, but the vast majority of our crucial components were built in jQuery and vanilla JavaScript. We were one of the early pioneers of Angular 2. We found Angular…

Using Angular 2 Components In a Non-Angular App thumbnail

Lucidpress is a large application—hundreds of thousands of lines of handwritten JavaScript. After seeing the success Lucidchart had in modernizing its UI with Angular, we wanted to follow suit, but we didn’t have the resources to do a wholesale rewrite all at once. We wanted to write some new Angular…

Package Management: Stop Using Version Ranges thumbnail

The problem Package and managers Packages are collections of software: data files, binaries, executables, source archives, etc. These are published, resolved, downloaded, and installed with package managers. Unfortunately, in 2017, almost every package manager has the the ability, the default, or even the common practice of creating nondeterminism in the…

Cracking the Code Review, Part 2: Tips for Reviewers thumbnail

Previously, we discussed ways that you can maximize the success of the code reviews you request from your peers. However, preparing a good code review is only half of the story. There is a lot you can do as a reviewer of code reviews to make your review as helpful…

Upgrading From Play Framework 2.3 to Play 2.5 thumbnail

Recently I had the opportunity to upgrade the Play Framework from 2.3 to 2.5 on all of Lucid’s JVM-based services. A lot of the upgrade involved pretty routine things like changing implicit parameters from Lang to Messages or updating uses of play-json to match the new API. However, over the…

Cracking the Code Review, Part 1: Preparing Your Code Review thumbnail

Code reviews: Some love them, some hate them, but most probably see them as no better than a necessary evil. As a result, we often view them as a mundane task to check off the list–a final gatekeeper before our wonderful features or bug fixes can begin their journey into…

Angular 2 Change Detection: “Seeing” It in Action thumbnail

The Angular 2 change detection system is somewhat of a black box: you update some variables in the model, and the components update automatically. Thoughtram, Victor Savkin, and other websites have written some excellent posts explaining change detection (which we reference in this post). Often, these posts present a series…

Flaky Tests: The Tester's F Word thumbnail

As an engineer reviewing failing tests, there is almost nothing worse than trying to debug and investigate a flaky test. A flaky test is one that when run multiple times, it sometimes passes and sometimes fails. From a developer perspective, tests are supposed to just work. When they fail, they…

Angular 2 has several different paradigms for bootstrapping an application. The default platform that is used in Angular’s examples is the dynamic browser platform. Platform browser means that this application is going to be bootstrapped in a browser and will therefore have direct access to the DOM and other browser…

Let’s be honest. Setting up a “modern” front end application in 2016 can be painful. Luckily the Angular 2 team has provided a command line tool, angular-cli, to help ease the pain. Although it is still in beta, angular-cli is a great way to set up an Angular 2 project…