Mofei Projects in 2017: Everything Is a Miracle

2017 was a heavy year, mostly in a good way. It started with a road trip in New Zealand in March, moved through weddings in May and June, and later squeezed in a trip to Thailand. When New Year's Day 2018 rolled around, my social feeds were full of the usual "goodbye 2017" posts, but I mostly just wanted to wait until the Spring Festival to sit down and write this properly.

One quiet weekend, I originally planned to work on Bookost. Then I realized I should probably stop and look back at what I had actually built over the last year before starting something new.

So let's get into it.

Unconventional Projects of 2017

Over time, I found myself caring less about how to decorate a room and more about how the foundation is built. How do you make the building rise faster? How do you balance cost and efficiency? It was the same at my actual house renovation—I caught myself complaining to the contractor: "Industrial power clearly needs 380V, why does the bureau only give us 220V and expect the site to figure out the rest?"

Software feels much the same. So here are the tools I built last year.

1. Marine (Intercom System)

Github Link: https://github.com/huiyan-fe/marine

Marine was built to solve a very specific headache: passing data between different modules in React.

At the time, React's built-in data passing felt awkward for what we were doing, but jumping straight into Reflux or Redux felt like overkill. The learning curve was too steep for the immediate problem. So I wrote the simplest Flux-style solution I could think of. The goal was just to keep the API clean and the data flow natural.

What surprised me most was that, without any promotion, external teams actually picked it up and started using it.

Under the hood, Marine is basically a Pub/Sub model. You create an object, it stays globally available, and it exposes a few global methods to move data around quickly.

Here’s what it actually looks like:

1.1 Listening

You can listen via Store.on in any file.

// Import Store
import { Store } from 'marine';
// Listening to the hello channel of Demo Action
Store.on('Demo.hello', StoreDate =>{
    console.log(StoreDate.data)
});

2.1 Sending Data

You define it with Action.def:

// Import Action, Store
import { Action } from 'marine';
// Define an Action named Demo
Action.def('Demo');

Then just trigger it from anywhere:

// Import Action, Store
import { Action } from 'marine';
// Dispatch message
Action.Demo.emit('hello', 'Hello Marine');

It's a small tool, but it solved the exact friction point I was hitting. We also got the unit test coverage over 99.999%, which meant I could actually trust it in production.

Overall Rating: ★★★★★

Complete Documentation: ★★★★☆
Completion Rate: ★★★★★
Stability: ★★★★★

2. Keeler (Automatic Scaffolding System)

Github Link: https://github.com/huiyan-fe/keeler

Keeler exists because I got tired of the modern frontend build mess. Starting a new project usually meant losing two days to:

1. CSS Compilation: PostCSS, SASS, LESS
2. ES Transpilation: Babel
3. Bundling: Webpack, Gulp, Rollup
4. Template Parsing: JSX
5. Release config: asset hashes, image compression, etc.

It was tedious. Keeler was my attempt to make all of that invisible.

Usage:

# 1. Initialize
keeler -i
# 2. Install dependencies
npm install
# 3. Run the project
npm run dev

Three commands and you get a working environment with React, PostCSS/Sass, and Webpack. It forces the browser open and hot-reloads when you change a CSS or JS file.

If you want to add a page, you don't even need to touch the Webpack entry config. I set Keeler up to scan for files named *.entry.jsx and *.entry.css and inject them into the HTML automatically.

keeler add pagename

One actual technical challenge was compile times. On a multi-page app (say, PAGEA, PAGEB, PAGEC), waiting for Webpack to bundle everything just to check a CSS tweak on PAGEB is agonizing. Keeler handles that by letting you isolate the build:

PAGE=PAGEB npm run dev

Someone on the team who used Windows also helped add Windows compatibility, which made the tool actually viable across the whole team.

Overall Rating: ★★★★☆

Complete Documentation: ★★★☆☆
Completion Rate: ★★★★☆
Stability: ★★★☆☆

3. Visual (Canvas Rendering Library)

Github Link: https://github.com/zmofei/visual

Visual was built on top of Baidu Maps' open project "Polaris". It provides core canvas rendering—points, lines, areas, arcs—and handles the mouse interactions like selecting, moving, and resizing. The idea was to build a generic tool library that we wouldn't have to rewrite every time a project needed custom map overlays. It's not totally finished, but the foundation is solid.

Overall Rating: ★★★☆☆

Complete Documentation: ★★★☆☆
Completion Rate: ★★★☆☆
Stability: ★★★☆☆

4. Visualization (IoT and Ads)

Github Link: Internal.

2017 also dragged me deep into data visualization. It's an area full of steep learning curves and industry hype, which probably needs its own post. But here is the short version of what we shipped:

• Traffic Visualization at Intersections

Rendering hundreds or thousands of vehicle trajectories at a single intersection without dropping frames. It looks impressive when it works.

• Real-time Traffic Lights

Syncing the visual state with live intersection data. I wrote about the specific implementation in another post.

• Mapv-editor

A project with plenty of internal friction and detours. The demo is here and it's open source: https://github.com/huiyan-fe/mapV-editor.

@2018

I was going to write something motivational for 2018, but working through this list made me realize I'm mostly just tired. So let's skip the slogans.

I still need to do my day job well, and I'd like to get a few side projects off the ground.

Actually, here is what I’ve been quietly building on weekends lately:

1. Bookost

If you have books on your shelf that you read once and will never touch again, or a book you think someone else needs to read, Bookost is meant to solve that.

2. iTrace

I tested a bunch of GPS trackers for trips but wasn't happy with them. I found one app that played like a game of "World Fog" and barely drained the battery, but it locked my data in—no exports allowed. So I'm just building my own power-efficient GPS logger.

We'll see what actually gets finished this year.

“There are no others in the world, only miracles.” — Huang Canran, Collection of Miracles