Migrating from AngularJS to Elm

Andrey Koppel — Tue, 08 Sep 2020 06:27:57 +0000

What?

Hi! In this article I'll describe the tool and approach we took to migrate our code base from AngularJS to Elm. The goal is to share and to help anyone who could possibly have to go down the same route at any given moment.

Why?

AngularJS is in the Long Term Support period at the moment. December 31, 2021 is the official deprecation date for AngularJS. Development teams and businesses will have to make a decision of which technology to migrate existing AngularJS code base to. We have decided to migrate to Elm. There are many good articles describing why Elm is a good choice. I'll focus on the migration part only.

How?

There are various migration approaches like full rewrite from scratch and gradual migration, etc. A code base size may influence the migration strategy. Small code bases are very good for full rewrites. Full rewrites of bigger code bases are long and expensive. Depending on a current business situation the correct migration strategy may vary.

Our case

We had a relatively big code base with around 100k lines of AngularJS code, around 150 different pages and 8 frontend developers. The business is in a growth stage and it's important to maintain and deliver new functionality with improvements to the customers.

Gradual migration

We have chosen a gradual migration strategy. We want to reuse existing code as much as possible until we find a good time to do a full rewrite of a particular page. We want to write all new code in Elm. A good time for a full rewrite might be when significant changes are planned for a particular page or when a page is small enough for a fast migration. To be able to write new code in Elm we need to replicate the existing internal framework (shared functionality between all pages).

So the strategy is to reuse existing AngularJS pages, directives, components in Elm when possible to speed up the migration and write new code in Elm. Never reuse Elm code in AngularJS (e.g. by wrapping Elm code with components) to stop AngularJS code base growth. Instead do a migration of the page to Elm.

The tool

To reuse existing AngularJS code in Elm we have created and open sourced angularjs-custom-element service to wrap any directive/component with a custom element. It has few usage examples in readme. Custom elements can be used in Elm very easily.

Migration step 1 - Independent Elm programs

We started with an independent Elm program for each page. When AngularJS route changes a controller is initialized and an Elm program is embedded. On route leave an Elm program is destroyed. Here you can find details on how to destroy an Elm program.

Migration step 2 - One single Elm program

The next step was to combine all Elm programs into one single program. The first thing to do after AngularJS app bootstrap is to embed the main Elm program and not to render AngularJS page. The main entry point (an HTML element) for the main Elm program should be somewhere right after ng-app. Elm program will decide when to render AngularJS page. In Elm program we add a special case (usually a page constructor) to fallback to AngularJS page (via custom element for ng-view/ui-view). Global subscription for route changes is added and a current URL is sent to Elm program via flags or a flag that current page is AngularJS page is sent. An Elm program parses URL and renders appropriate page.

Migration step 3 - Elm is everywhere

AngularJS state router is removed. Elm manages all pages and routing. AngularJS app is bootstrapped when needed for existing legacy. A new custom element is created to bootstrap AngularJS page.

Summary

It was a very nice experience for us and we are happy with what we've got now. It's still a long way for us to rewrite all pages to Elm. But the ability to move fast and do a migration at the same time is key for us as a development team and for a business!

Thanks.

How I installed GuixSD on DigitalOcean

Andrey Koppel — Thu, 14 Nov 2019 05:32:50 +0000

Hi. Guix a functional package management tool. It can be used either on top of existing Linux distribution or as a part of Guix System Distribution (GuixSD). Which is quite interesting project for many reasons. DigitalOcean is a development cloud (DO for short).

In this post I'm going to share what I did to install GuixSD on DO. I'm very new to Linux thus I got some issues on the way and I'd like to get some help in order to solve them.

DO does not have GuixSD as available distribution. Thus there are two options how to install GuixSD.

Convert existing Linux distribution to GuixSD

However I got some issues on the last steps maybe because the post is from 2017 and things have changed, maybe there is other reason. Another thing is that it requires more knowledge about existing distribution to clean up after conversion. And being a noob in this area I decided to install GuixSD system from scratch.

Install GuixSD on DO from scratch

Reformat system installer

Guix provide a compressed ISO with system installer. DO has an option to upload custom image. It supports various formats but not ISO. Thus the first thing to do is to reformat installer image to a format which DO supports. I had VirtualBox installed already so I used it to convert the image.

# Download GuixSD installer
wget https://ftp.gnu.org/gnu/guix/guix-system-install-1.0.1.x86_64-linux.iso.xz

# Uncompress ISO
xz -d guix-system-install-1.0.1.x86_64-linux.iso.xz

# Convert ISO to VDI
vboxmanage convertfromraw guix-system-install-1.0.1.x86_64-linux.iso guix-system-install-1.0.1.x86_64-linux.vdi

Create DO droplet and install Guix system

Next step is to upload image to DO and create droplet from it.

When creating droplet DO provides /dev/vda as a main disk. DO boots the machine with installer stored in /dev/vda disk. When I followed installation instructions I was unable to reformat /dev/vda due to it being used by the system. I tried to check what part of the system exactly uses it, but could not find. There were no partitions/disks mounted, etc.. So this is one part which I'd like to understand if it's possible to reformat the disk which stores operation system and if yes how can I find out how it's used by the system.

The next thing I tried is to add additional volume and install Guix system on it.

When adding additional volumes DO provides /dev/sdX disks. Following installation instructions I was able to easily install GuixSD on /dev/sda disk. I created 3 partitions one for Bios boot (1M), one for Linux swap (8G) and one for Linux filesystem (the rest). I used bare bone system configuration to initialize GuixSD system.

Booting GuixSD

The next thing was to boot installed GuixSD.

As I understood DO uses /dev/vda as a disk to boot system from. So after previous step I got 2 disks one with installer and one with GuixSD installed. Probably it would be possible to instruct DO to boot from additional volume with GuixSd but that would mean I had to carry installer along the way. What I did is I cloned /dev/sda disk to /dev/vda disk with following command (keep in mind that size of the volume should match the size of the droplet disk).

dd if=/dev/sda of=/dev/vda bs=64M conv=sync,noerror status=progress

After reboot I was able to boot GuixSD from /dev/vda disk.

Conclusion

In the end it was a successful experiment though it felt like a workaround. I would like to know what I missed and if there is an easier way to install clean GuixSD on DO.

Thank you.

Forem: Andrey Koppel