About Archives RSS Kinopio
Sep ’23 The Hybrid Architecture of Kinopio for iOS
kinopio
engineering

Using Kinopio iOS running on my scratched up iPhone 12 mini

A couple months ago I was in Bali, Indonesia for a wedding and had lunch with Lucas, the developer of Futureland where I did some contract work last year. He asked me when the Kinopio iOS app was coming so I shared my apprehension about having to spend months on app development only for it to be rejected by app store review at the last minute.

Having gone through a similar rejection situation with his own app, Pagi, and having built the Futureland iOS app, he felt pretty confident that he could do Kinopio iOS. So when I got back home, we started planning things out in a space,

We decided what the app should do and how it should work, with the goal of keeping scope low and maintainability high for this first version. After we’d settled all the hard questions of what we were building in the space, I summarized the conclusions into a Notion doc and we got to work.

Fortunately, because Kinopio was designed to be touch friendly from the beginning it already worked well on mobile Safari. So the plan was to adopt a hybrid architecture where the native app would be a container for a WKWebView where the Kinopio website would live.

To enable the native app to send messages to the webview (and vice-versa) we built a bridge between the two worlds using plain old postMessages. So the Kinopio webview can say something like postMessage.send({ name: 'updateBackgroundColor', body }) and the native app can take action and send messages back to the webview in a similar way.

This postMessage bridge allows for native-only features like haptic feedback when touching content, as well as syncing the pixels above the webview with the dynamic background color behind the webpage:

The background color of the app slowly cycles between different shades. This video is sped up by over 70x

We also added share sheets and widgets to quickly capture new thoughts and URLs. In the spirit of simplicity, the share sheet also uses the same kinopio.club/add page that the browser extensions use.

Regardless of platform, part of this whole programming-as-craft thing for me is getting the most out of doing the least. Which usually means using basic technologies that are easy to understand, debug, and maintain.

Anyways, 7 annoying app store rejections later (which I’ll skip talking about here for the sake of my mental health), I’m happy to be able to tell you that Kinopio iOS is now live 🎊.

I hope using it feels like an extension of your hand and mind, like it already does for me. Swipe-to-scroll and pinch-to-zoom, press and hold to paint-select and drag cards around.

Download Kinopio iOS on the App Store


Comments…

Comment added. Because this is your first comment, it is awaiting moderation. After being approved, future comments will be posted immediately (シ_ _)シ
(シ_ _)シ Something went wrong.
Please try again or email me

Or, discuss this post on Hacker News


Subscribe to the RSS feed,
Follow updates on Mastodon or Twitter/X.

If you liked this, you might also enjoy The Lo-Fi Art and Human Tools Era Digging Into PlantStudio, a Bit Late Towards a Better Whiteboard

Subscribe to New Posts by Email

 
Subscribing…
Subscribed
Error

I make Kinopio, the thinking canvas for whiteboarding, research, moodboards, and note-taking that works how our brains work.
No sign up required.

Connect your Thinking →