Web Development

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…

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…

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…

Speeding up RESTful Services in Play Framework thumbnail

Here at Lucid Software we use a hypermedia-driven application architecture. This means that a client that uses our micro-services simply has to hard-code a “bootstrap” resource URI, and we can re-jigger our endpoints whenever we choose. This approach gives us flexibility on the back-end while maintaining perfect compatibility with our…

Building Angular 2 Components on the Fly: A Dialog Box Example thumbnail

UPDATE 8-22-16: This post has been updated to use Angular 2 version 2.0.0-rc.5. It was originally written against the API provided by Angular 2 version 2.0.0-rc.4, but as Tom Nurkkala pointed out in the comments, the relevant API from version 2.0.0-rc.4 has been deprecated. UPDATE 9-24-16: A more succinct variation…

Introducing Xtract, a new XML deserialization library for Scala thumbnail

Last summer, our team added support for importing Adobe InDesign files into Lucidpress, a cloud-based publishing app. Specifically, the app now supports IDML files, which consist of XML files packaged up in a .zip file. The process of conversion involves: Parsing the XML from the IDML file into a model…

Angular 2 Best Practices: Change Detector Performance thumbnail

Introduction: Angular 2 and Lucidchart Lucidchart launched in 2010 as one of the very first and most impressive graphical applications on the web. Over the course of several years, it has grown organically to include an incredible array of features. However, for many users it has become unwieldy over time,…