There are 2 things that surprised me while using my iPad, but not immediately:
- No headphones jack
- No default calculator app
This short article is about number 2: how I developed a port of the iOS calculator for the iPad.
The port had to work on
iOS (iPad and iPhone), and any other browser ― Desktop or mobile.
Native, web, or PWA
Since we wanted a full-screen experience and an icon, I opted for a Progressive Web Application 1. This allows us to install the app and get an almost native feeling.
The language used to implement it has been
Typescript2, compiled with
No framework was necessary, since we wanted a small size, and the application is small enough.
The UI is extremely similar, but not pixel perfect. In some details, like the buttons, I have opted for simplicity instead of an exact match on the gliph 3.
There are other details where we tried to reproduce the original as exactly as possible:
- The short animations when you press a button.
- Reducing the size of the digits in display as you press more numbers.
Testing has been a priority for this project. While the port is for sure not perfect ― for starters, it only includes the vertical calculator without scientific mode ― it was a goal to keep it as close as possible to the original.
To make sure that it was as close as possible to the original, I added lots of tests.
23869, to be precise.
I started with tests to check the common operations and results. I wrote 2 kinds of test:
Whole state tests
These tests represent the entire state of the calculator:
- The first line in
outis the output.
- The following lines are the calculator buttons.
Tests representing the whole state were unnecesary to test certain properties, so soon I added a simplified version as well.
Inspired by Netflix’s Chaos Monkey, I programmatically generated random press tests to replicate the original implementation as well as possible.
By testing random sequences of button presses, we can find new tests, uncovering behaviours we were not aware of. ― J. Mejuto, Mejuto.co
A small program systematically generated all the permutations for sequences of a certain length, which we optimized.
The tests are defined in
json, and all kinds of optimizations applied.
- Any sequence of button presses ending in
AChas to output
An expression multiplied by
- A sequence without digits (just operators, like
% + - =) is
This allowed it to generate
23869 tests in a short amount of time.
The end result
In the end we got a pretty accurate calculator port that you can add to your ipad.
You can see more screenshots in the calculator’s product hunt page.