Native + Html 5 mobile application development practices Netease blog Android Client

Project history: it takes three months. After interaction, front-end design, development, and testing, the Netease blog Android client is coming soon, at that time, the majority of bloggers who use Android phones can write logs, moods, comments, and recommendations anywhere.

As early as the end of last year, the technical team began to investigate the technical feasibility, finally selected native combined with Html 5 hybrid development method, and released the first feasibility example at the end of March this year.

At this time, the following practical results have been accumulated:

Self-developed JS mobile web Framework (mwf) for mobile clients)

Mwf framework includes: Basic Library (node operations, touch events, etc.), control library (event scheduling, cache, ajax engine, template engine, etc), Mobile Library (notification, file processing, geographical location, etc)

◆ Patched Phonegap Framework (patch Based on Phonegap)

Fixed issues such as skip, Focus, soft keyboard processing, Fixed position, and Click latency for Fling events. For details, refer to BKJIA's exclusive topic: cross-platform mobile web Application Framework PhoneGap development Introduction)

◆ Native Util (Tool class added to project requirements, such as Message notification and menu)

Then, starting in March April, this technology began to be applied to blog Android products. After the collaboration of colleagues in the team, the current product is prototype as follows:

Hybrid development of Native + Html 5

Function Overview]

Netease blog Android V1.0 function Overview:

◆ Basic features such as "Publish logs, mood, and image logs:

◆ "Browsing personal center dynamics, others' blogs, logs, moods, albums" and other basic reading functions:

◆ Basic blog operations such as "recommendations, comments, messages, and various Message Centers:

Technical Analysis]

◆ Client-server interaction

The blog client can be understood as a chrome browser (webkit engine). The interaction with the server adopts the dwr data method commonly used in web development, this makes it easier for web developers to smoothly develop mobile clients and give full play to the role of browser debugging tools.

◆ Client data cache (Html 5)

Considering the valuable traffic and offline accessibility of mobile devices, the product caches the data accessed by users locally, data will be retrieved from the cache by default in subsequent use. Data will be retrieved from the server only when the user explicitly refreshes it.

Locally stored cache processing is integrated in the self-developed mwf framework, and two optimizations are made for Local Storage.

◆ Real-time notification of messages (Html 5)

The real-time two-way push technology WebSocket is used in user interaction operations (such as comments, messages, follow-up, and add Boyou scenarios) and is presented to users using native extended interfaces, the application of this technology greatly improves the user interaction experience.

Notification

◆ Native Extension)

The interaction between the client and the mobile phone (such as taking photos and notification bars) is implemented using the js api exposed by phonegap.

Photograph

File Upload

Notification ringtone settings

◆ Css3 applications

Attachment (Team android beta version): unzip and installAndroidblog-0.9.1.7beta.apk

Androidblog-0.9.1.7beta.rar (550.31 K)