2017, a year filled with continuous highs, has passed. This year started exceptionally strong, kicking off with a self-driving trip in New Zealand in March, followed by weddings in May and June, and the handover of new homes in my hometown. In the following months of August and September, I traveled to Thailand with my hardworking partners, and lastly, pretended to visit Lake Baikal. It was so exhilarating that by New Year's Day 2018, the perfect time for a yearly summary, while scrolling through social media filled with "Goodbye 2017," I could only plan to sit down and write something during the Spring Festival holiday.
On a rare weekend, I originally planned to devote my time to Bookost (Who is Bookost? I won't tell you!), but it seemed that a voice in the void suggested I pause and take a look at the scenery behind me before moving forward. However, as a detached, stubborn, and cunning Scorpio male (== Is that me????... Whatever, the internet says this about Scorpios), I of course could only graciously ... accept such an unreasonable suggestion, after all, it's my own idea????.
Having taken such a light-hearted detour, let's get straight to the topic. If your time is limited, I suggest you skip the above text and start reading from here, although I know you've already read the previous part (this is what they call being cunning????????)....
Perhaps due to various reasons (and yes, I mean age, but you could also interpret it as increased boldness????...), during the busy brick-moving process of the past, I unconsciously shifted my focus from how to perfectly decorate a room according to the plan to how to construct an entire building. How can the whole building rise faster and more stably? How can the construction costs and efficiency of various apartment types be harmonized for high efficiency? Sometimes, I even vent to the uncle at the construction site, saying: “Industrial electricity obviously requires 380v, why does the power supply bureau only provide 220v, and sometimes even expects the site to generate its own power?”
So in this summary, aside from the meticulously done renovation work, let’s talk about what else I’ve done:
Github Link: https://github.com/huiyan-fe/marine
Marine was initially developed for data transmission between different modules in React.
The reason for writing it was React’s data passing mechanism was quite cumbersome, and tools like reflux and redux had a steep learning curve (I won't tell you that at that time I wasn't very adept at reflux????), so I implemented the simplest version of flux based on my understanding. The goal was to make the API clean and ensure the data transmission felt seamless.
I feel lucky that, without any promotional efforts on my part, some external users from companies appeared, which is enough to make me happy like a child (→????). Thank you to these wonderful people.
Strictly speaking, Marine is a Pub/Sub model; when creating an object, Marine will keep it globally and dynamically append some snazzy global methods to meet the user's pursuit for speed.
Here’s a simple usage example:
You can listen via Store.on in any file; simple enough, right? (In fact, there are more interesting syntactic sugar methods in the documentation.)
// Import Store
import { Store } from 'marine';
// Listening to the hello channel of Demo Action
Store.on('Demo.hello', StoreDate =>{
console.log(StoreDate.data)
});
Similarly, you can define it in any file via Action.def:
// Import Action, Store
import { Action } from 'marine';
// Define an Action named Demo
Action.def('Demo');
Then, in any file, you can invoke it using Action[defined name]:
// Import Action, Store
import { Action } from 'marine';
// Dispatch message
Action.Demo.emit('hello', 'Hello Marine');
Thus, the listening callback in the first file will be called, and your data will be reliably passed to the corresponding module. Isn’t it magical? Regardless, I find using it very pleasant, and this project has comprehensive unit tests, achieving over 99.999% coverage at the time of writing, so it can be used with confidence.
| Content | Rating |
|---|---|
| Complete Documentation | ★★★★☆ |
| Completion Rate | ★★★★★ |
| Stability | ★★★★★ |
Github Link: https://github.com/huiyan-fe/keeler
Keeler was created primarily to address the build configuration issues of modern frontend engineering. What typical build steps would a modern frontend project generally have?
Aside from the items listed above, there might be many other unlisted aspects. The problem it causes is that when starting a new project, you may spend a long time (1-2 days? Or get stuck halfway through, extending the time) configuring tools. The birth of Keeler is to solve this problem!
# 1. Initialize
keeler -i
# 2. Install dependencies
npm install
# 3. Run the project (to publish, use npm run build)
npm run dev
After executing the above three commands, you will get a fresh environment with React.js + postcss(sass) + webpack, which will automatically open the corresponding page in your browser for previewing. Any file modification (like CSS, JS) will automatically refresh in your browser.
Of course, if you want to add a new page (usually you need to add HTML, CSS, JavaScript, then link CSS and JS in HTML, which is not difficult but tedious), you simply need to execute the command:
keeler add pangename
Additionally, when using webpack, you would have to keep configuring entry files. In the keeler system, even though we use webpack, you will no longer need to configure webpack entry files because keeler automatically scans for all files like *.entry.jsx, *.entry.css and adds them to the compilation entry configuration. So to add a new compilation entry, just name it using entry.**. Interestingly, the js and css will be automatically included in the html, eliminating the need for you to configure HTML to include css and js.
Lastly, if your project has many pages, a full compilation may take a long time, but often during development, you will focus on just one page. Waiting for the compilation of other pages can feel like a slow suicide, and keeler can also address this issue. For multiple pages like PAGEA,PAGEB,PAGEC, typically running npm run dev would compile these three pages, but if you only need to compile PAGEB, just run:
PAGE=PAGEB npm run dev
Furthermore, I want to mention that since most of our team members use Mac computers during development, Windows has had minimal testing. I want to thank a new team member for her contributions in implementing support for Windows, allowing keeler to run correctly on Windows.
| Content | Rating |
|---|---|
| Complete Documentation | ★★★☆☆ |
| Completion Rate | ★★★★☆ |
| Stability | ★★★☆☆ |
Github Link: https://github.com/zmofei/visual
Visual is built from the latest open project from Baidu Maps called “Polaris” (see project introduction link), providing basic rendering functionality including the ability to draw points, lines, areas, circles, arcs, and complex graphics on a canvas, with the capability to easily select, move, and resize these shapes using the mouse. The initial design intention was to remove Visual from project requirements as much as possible and create a generic tool library. Of course, we also follow this standard to gradually enhance this project. Although this library does not have particularly complete functionalities, I am optimistic about its future development potential.
| Content | Rating |
|---|---|
| Complete Documentation | ★★★☆☆ |
| Completion Rate | ★★★☆☆ |
| Stability | ★★★☆☆ |
Github Link: Can't tell you (actually not on github????)
In addition to the previously listed projects, during the crazy year of 2017, I also made bold attempts in visualization, which is quite complex (including learning curves, industry demand, bubbles, etc.), and we should discuss this separately when we have time.
A brief list of what I’ve done:
This can display hundreds or thousands of vehicles' trajectories at the same intersection or stretch of road, which does look quite impressive~
This can display real-time traffic light status according to the actual situation of the intersection. An article in my blog mentioned the details of implementing this feature.
This project has had a lot of ups and downs, so I won't say much here. Check this link: mapv. Additionally, this is indeed an open-source project, and here’s the project link: https://github.com/huiyan-fe/mapV-editor.
In 2018, I originally wanted to prepare some motivational quotes, but now I’m so tired I don't even know what I am writing????, so just pretend I’ve already gained some motivation~
I still need to finish my main job properly, and during my spare time, I would also like to launch a few side projects or apps, at least to "get things rolling"????.
By the way, I’ll quietly reveal what I have been working on during the weekends of the past 2-3 months.
On your bookshelf, are there some books that you might never read again after a first read? Or is there a book that you particularly want to share with others? Bookost is here to help you resolve that issue.
If you’re a travel enthusiast like me, iTrace might become your handy assistant. A long time ago, I wished for a device to record my tracks at any time, and back then, I bought several GPS trackers. One day, I suddenly discovered an app similar to a game called “World Fog,” which can record your tracks in real time, and surprisingly, it only uses about 10% battery in a full day on iPhone~ Unfortunately, this app only supports importing but does not support exporting. Because of this reason, I decided to create a useful, power-efficient GPS recording app.
“There are no others in the world, only miracles.” — Huang Canran, *Collection of Miracles*
