Measuring Ionic Angular Performance on an M1 MacBook Pro

This article is part of the Ionic Framework / Capacitor / Stencil Advent Calendar 2021 Advent Calendar 2021.

I Bought an M1 MacBook Pro

I bought the much-talked-about M1 MacBook Pro for the speed boost. After weighing the options, this is what I ended up with.

https://www.yodobashi.com/product-detail/100000001006677803/

Once I decided on an M1 MacBook Pro, there were hardly any choices left. By the way, Yodobashi Camera gives 5% points back, so you earn 14,990 points on this purchase. A good deal.

My previous MacBook Pro (Intel) was a 15-inch model fully loaded on CPU and memory, which I bought for ¥457,704.

Small and medium-sized businesses have a special rule called the "special case for immediate expensing of small depreciable assets acquired by small and medium-sized enterprises," but that only covers up to ¥300,000, so of course I had to depreciate it. Four years—the depreciation period. Too long. And holding fixed assets means more paperwork every year...

So this time I wanted to aim for immediate expensing and capped the budget at ¥300,000. At that point, the candidates narrowed to these two:

• 14-inch, 10-core CPU / 16-core GPU / 16GB unified memory / 1TB SSD storage — ¥299,800
• 16-inch, 10-core CPU / 16-core GPU / 16GB unified memory / 512GB SSD storage — ¥299,800

Anything else exceeded ¥300,000, so I ruled it out. I also ruled out cheaper configs because I did not want to compromise the development experience.
For storage, I was using about 600GB, and I did not want to worry about disk space while developing, so I wanted 1TB. That made the 14-inch model the only choice.

Measuring Build Times and More

If you are buying a MacBook Pro for Ionic Angular development like me, you probably end up with a similar choice, so I will record Ionic Angular build times here. I hope this helps if you are thinking about upgrading from your current machine.

First, create a project with ionic start. This time I chose the blank template for angular. Let us measure ionic serve first. For this article I only had Chrome open, and I started after esm2015 compilation had finished. My ionic info environment is as follows.

Ionic:

   Ionic CLI                     : 6.18.1 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.9.1
   @angular-devkit/build-angular : 12.1.4
   @angular-devkit/schematics    : 12.2.13
   @angular/cli                  : 12.1.4
   @ionic/angular-toolkit        : 4.0.0

Capacitor:

   Capacitor CLI      : 3.3.2
   @capacitor/android : not installed
   @capacitor/core    : 3.3.2
   @capacitor/ios     : not installed

Utility:

   cordova-res : not installed globally
   native-run  : 1.5.0

System:

   NodeJS : v16.13.1 (/usr/local/bin/node)
   npm    : 8.1.2
   OS     : macOS Monterey

Apparently I have to do this manually with a stopwatch. I will stop when the browser opens and first meaningful paint completes.

Subjectively, I feel the bottleneck more in browser rendering than in the time until the browser (CLI) opens. Manual timing adds some variance, but about 10 seconds seems fair.

Next, run npm run build. The CLI prints the time, so I used that.

Let us also do a production build: npm run build -- --prod.

That was roughly the speed I saw. Not bad for 16GB of memory.

Summary

Going full spec without worrying about depreciation is an option too, but if you are an Ionic/Angular user considering a MacBook Pro upgrade within the depreciation limit, try running similar measurements locally and see whether an upgrade would actually feel faster.

See you next time.