Introduction

What level of experience can an excellent front-end engineer achieve while dancing with shackles?

These web apps are my top ten selections from a year of operating the online application store for the Yunjie browser. While I considered my colleagues' opinions, this list is also strongly subjective, reflecting my personal preferences regarding the design, implementation, and value of a "web application." Of course, you might see this as my award to the developers or teams of these outstanding web applications, as a somewhat picky product manager representing the "Yunjie browser." If you're still pondering whether the web experience can rival that of native applications (which has long been the case on PCs), take a look at these well-designed web apps; they might provide you with more real-world references.

I will introduce these web apps one by one, explaining why they hold their respective ranks and including a screenshot. At the end of the article, I will include a video made by my colleague, demonstrating these web apps in action, all within the iOS version of the Yunjie browser.

Note:

1. All opinions, views, and comments in this article were published on January 4, 2016. Keep in mind that the web can be updated at any time; the web apps I mention below may differ from what you see now;
2. The time frame is for products launched in 2015 or officially launched on HTML5 in 2015;
3. All are domestic web apps or primarily target the domestic market;
4. The original title was "Top 10 Web Apps of 2015."

Main Body

Tenth Place: "720 Cloud"

When I first encountered "720 Cloud," I was quite shocked; it provided me with a panoramic and VR experience right in the browser. Until recently, only Mozilla's AFrame framework allowed ordinary developers to quickly create VR scenes, so "720 Cloud" was technically ahead of its time.

Why does "720 Cloud" rank only tenth in my opinion? Because their list page is extremely unfriendly to mobile devices, offering a rather "casual" responsive design. Of course, the experience on the panoramic page is crucial, but the list page is equally important; this level of responsiveness is practically a bug.

Ninth Place: "Yummy"

"Yummy" is a community aimed at young women in the new era. As of today, the community sections are divided into "Recommendations," "Live Broadcasts," "OO," and "Toys." For me, this community acts as a "vaccine against male chauvinism," and frequent use can prevent it. Beyond the product's positioning and functionality, its primary colors of black and dark rose provide a sense of hidden security. It is developed based on Angular, and the scrolling appears to be purely implemented in JS, featuring pull-to-refresh and infinite scroll. However, the performance of this pure JS scrolling is not ideal. Personally, I have always been against using pure JS scrolling solutions; in fact, "Yummy" has done quite well. The reason it ranks ninth is due to a bug: in places requiring login, it would directly jump to the login box, and before the login box, there was a redirect, causing a redirect loop when trying to return to the previous page, making it impossible to go back to the page that required login. It seems they have fixed this bug.

Eighth Place: "Comic Home"

"Comic Home" boasts a large number of excellent original comics, and its mobile web design is very clean, providing a good reading experience that generally aligns with mobile user usage patterns. The downside is that it has not implemented SPA and lacks sufficient and meaningful animations.

Seventh Place: "BusyWeek!"

"BusyWeek!" is a work by an independent developer, open-sourced on GitHub, created by a non-computer science major @Huxpro. Besides the basic "Todo list" functionality, its experience is very much like a native application. Through its source code, you can see that this is a Vue project, achieving backend-less development through LeanCloud (only a server.js for rendering frontend code). Developers interested in learning more can read the project's source code. The downside of "BusyWeek!" is that the use of the "navigation drawer" is quite irregular: sometimes it shows a login box, sometimes a sync box, and sometimes a filter. It's important to know that the "navigation drawer" as a container component primarily serves to switch the interface in the middle, rather than as a popup or to update the interface state. Of course, you could argue that "standards are dead, but scenarios are alive," but I believe that while standards can be broken, they shouldn't be completely violated; otherwise, users accustomed to those standards will feel confused.

Sixth Place: "Oxygen"

"Oxygen" is an app focused on recommending women's underwear, and its web experience is also excellent, largely maintaining the design language of its native app, allowing purchases directly on the web. The downside, similar to "Comic Home," is that it has not implemented SPA. The essence of this issue is whether to use server-side rendering or client-side rendering, or which parts should be server-side rendered and which should be client-side rendered. I hope to write a separate article to discuss this in the future.

Fifth Place: "Flipboard China"

"Flipboard China" has consistently received high ratings in our online application store, ranking quite high. Besides its content, its excellent experience is also a key factor. The sliding and reading experience on the mobile web version of "Flipboard China" is outstanding, which I attribute to its thoughtful experience design, CDN, optimized HTTP requests, and its application of GPU acceleration. Notably, "Flipboard China" is developed based on the recently popular React framework.

Fourth Place: "Anitama"

"Anitama" is a media site for anime, and its web version is of high quality. Upon opening, it presents an interesting "almanac," allowing users to switch between "weekly" and "daily" views. When clicking the bottom tab bar, there is a ripple effect similar to Material Design. Additionally, its <meta> and <link> tags are exceptionally complete, making it highly friendly to mobile devices. It includes common tags like viewport, apple-touch-icon, mobile-web-app-capable, as well as Google Chrome-compatible manifest, theme-color, and Edge-compatible msapplication-TileColor, making it a textbook example of how to write the <head> for mobile HTML5 applications.

Third Place: "Shimo"

"Shimo"'s slogan is "The most beautiful online collaborative document," described as "supporting multiple users to edit and comment on documents simultaneously, allowing you to easily collaborate on writing, discussion, meeting notes, and information sharing." "Shimo" has powerful features, enabling real-time collaboration through WebSocket, and it can sync with all other clients on the web version. Although the mobile web version currently has limited functionality, the core features of "collaborative editing" and "inviting collaborators" work perfectly.

Second Place: "Yidian Zixun"

As a news reading web app, "Yidian Zixun" is nearly flawless. All news layouts are indexed by crawlers and then processed, with all interface transitions smooth (or designed to feel smooth), clear layouts, and a balance of compliance with standards and original thought.

First Place: "Muzzik"

"Muzzik" is a music sharing community. If I'm not mistaken, its pronunciation is the same as "music," with the slogan "The best era's music stories, the worst era's comfort." "Muzzik" achieves a universal interface for both PC and mobile through responsive design. The overall design scheme reveals a strong personality, which should reflect the individuality of their user base as believed by their designers. The music playback solution uses the widely supported new Audio() method in mobile browsers, creating an HTMLAudioElement in memory without mounting it to the DOM. Developer friends might be curious about which MV* solution the champion uses; the answer is Angular.

Video Demonstration

The article can be reproduced, but please credit the author: "Yunjie Browser" team.