I Ching ☯️

My friends and I used to start the day by playing the I Ching¹. Beyond the ritual, the Book of Changes is an ancient Taoist text offering meditative frameworks for virtue, inner strength, and systemic integrity.

To recreate that experience digitally, I engineered my own I Ching application. The technical objective was strict: build a clean, ad-free, deterministic engine using pure web technologies. The core logic treats the generation of hexagrams as a pure function, resulting in a lightweight, offline-first application initially utilizing React and Service Workers for persistent state.

Technical Constraints & Features

• Classic Richard Wilhelm interpretations (scraped from web) ☯️
• Extremely lightweight client footprint. Time to Interactive (TTI) < 3s over throttled 3G. 🎉
• Full PWA specification and offline caching.
• Perfected Lighthouse² scores over 90/100 consistently. 👌
• Ad-free, tracking-free, and open-source.

Architecture Evolution & Lessons Learned

The most critical learning phase of this project involved hitting the ceiling of Client-Side Rendering (CSR). When I began, I presumed rendering on the client via React was performant enough, as it was a recommended SPA practice at the time. However, the limitations became obvious: bloated bundle outputs, degraded execution on lower-tier mobile hardware, and a solid impenetrable wall on Lighthouse performance metrics around 70%.

Achieving a perfect score required a paradigm shift in how the application was delivered. I executed a sizing audit to strip away dependencies and optimize the First Contentful Paint (FCP).

I now advocate for strict dependency diets and minimize client-side rendering. My current applications favor Island Architectures³—leveraging hydration only where interactivity is explicitly required. Furthermore, this project drove me to abandon heavy bundlers like Webpack and core-js in favor of standard Native JavaScript Modules, embracing the zero-build web platform with web-components.

Footnotes