Web Development

5 usage ideas for Angular pipes thumbnail

Pipes are a useful feature in Angular. They are a simple way to transform values in an Angular template. There are some built in pipes, but you can also build your own pipes. A pipe takes in a value or values and then returns a value. This is great for…

Tips & Tricks for Reducing Server Load thumbnail

At Lucid, we have a service-oriented architecture. One of these services is a font service that is responsible for serving font data based on family and unicode range and checking permissions for user-uploaded fonts. We didn’t expect the font service to have particularly high load1 (load is the average number…

WebAssembly Overview: So Fast! So Fun! Sorta Difficult! thumbnail

WebAssembly was first described to me as “a way to run C++ on the web,” which was technically vague enough to ignore, despite my love of both C++ and the web. I heard about it again later at the 2016 Chrome Dev Tools Summit, and I decided to check it…

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…