How eLong’s Mobile Front‑End Framework Solves Performance, Animation & Modularity Challenges

Background

In 2015, mobile internet grew rapidly; eLong’s mobile hotel bookings accounted for 65% of total room nights, up from 48% six months earlier, raising the demand for a high‑performance mobile front‑end framework.

Challenges

Mobile front‑ends face higher expectations for traffic, response speed, and touch experience. Key pain points include large code bundles, inefficient animations, and lack of reusable development patterns.

Code size: loading unnecessary plugins can add tens of kilobytes, noticeably slowing mobile load times.

Animation efficiency: PC‑oriented JavaScript animations must be replaced by CSS3 hardware‑accelerated effects on mobile.

Technical debt: ad‑hoc development leads to duplicated effort for each business feature.

Opportunities

New platform capabilities such as iOS 8 Safari extensions and Android L’s Chromium‑based WebView enable richer native integration. Emerging frameworks like clouda+, BlendUI, Rachet, and AngularJS help build high‑performance H5 apps.

Optimization Practices

First‑Screen Rendering

Server‑side rendering is used for the initial view, while subsequent screens are populated via API calls and client‑side templates, reducing white‑screen time and improving cacheability. eLong’s Java back‑end renders Freemarker templates, which are pre‑compiled into JavaScript templates for the front‑end.

Routing and Page Transition

Pages are loaded with core.addPager(), which fetches JSON data or injects pre‑rendered HTML. CSS3 animations handle transitions, and cached templates allow zero‑wait navigation.

define(['/src/js/core.js'], function(core){
    core.router.add({
        "list": { lindex:2, tpl:"list", url:"/huoche/list" },
        "order": { lindex:3, tpl:"order", url:"/huoche/detail" },
        "entry": { lindex:1, tpl:"entry", url:"/huoche" }
    });
});

Modularization & Build Automation

RequireJS implements AMD for JavaScript module management, while Sass provides a modular CSS language. Grunt automates linting, bundling, and minification.

require([
    'src/js/core',
    'entry/huoche/js/route',
    'entry/huoche/js/index',
    'entry/huoche/js/list',
    'entry/huoche/js/order'
], function(core){
    // application initialization
});

iOS 9 Enhancements

Support for HTTP/2 reduces network latency and HTTPS overhead.

Expanded CSS3 layout features (scroll‑snap, feature queries, media‑query interactions) improve animation smoothness.

Business Line Example

Conclusion

The rapid evolution of mobile front‑ends presents both challenges and opportunities; by embracing server‑side rendering, modular architecture, and modern web standards, eLong’s framework aims to deliver fast, responsive, and maintainable mobile experiences.

Source: 51CTO