Lucidchart is a highly performant web application. When editing a Lucidchart document, users expect a high frame rate and a responsive UI. To ensure a great experience, we track frame rate and UI stalls. This article describes how we leverage an existing library, Zone.js, to accomplish this. Prereq: The JavaScript…
angular 2
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…
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…
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…
Recently, I started on a project to migrate JavaScript to TypeScript in one of Lucidchart’s Angular 2 applications. This application has several components, each with its unique view. For those not familiar with Angular 2, a component is merely an encapsulation of a view on a webpage with its associated…