Why front-end engineering should be introduced to HTML5 mobile application development?

Why front-end engineering should be introduced to HTML5 mobile application development?

 

Mobile applications developed using HTML5 and Javascript have a lot of Javascript, HTML, and CSS code, just like typical modern Web Front-end projects, therefore, front-end engineering is equally important in HTML5 mobile application development. It can avoid a lot of repetitive work, provide efficiency and quality, and optimize product performance.

Currently, common front-end engineering frameworks include grunt, gulp, and Baidu F. I .S and so on, these frameworks are basically based on Node. js implementation (Baidu's F. I .S was first developed based on PHP and later switched to Node. js ). Node. js has a strong affinity for front-end engineers and various Node-based systems. js's compression, optimization, and validation tools provide extremely high running performance and powerful npm package management tools. These features allow Node. js has become the preferred platform for front-end automation and auxiliary development tools. The Cordova and Ionic framework command line scripting programs we introduced earlier are all developed based on Node. js.

For mobile Web projects, the optimization of front-end Web page performance (mainly refers to the compression processing of various files, CDN cache, and image quality optimization) is very important, because the traffic fee for mobile Internet access is still very expensive, mobile bandwidth is still below the PC bandwidth level, 4G network is not yet popular, and many users will pass 3G, GPRS or unstable WiFi network access to our mobile website. If a mobile website is poorly optimized, it takes a long time (more than 15 seconds) for the user to open the website, and a large amount of traffic is wasted. As a result, the user is greatly lost.

For mobile Web products, compression and merging of CSS and Javascript files, CDN caching of static files, file caching and file Hash version processing, HTML5 offline caching, and other work, they are all directions to be optimized. We need to perform these optimization tasks every time we update the product. manual operations will inevitably waste a lot of labor costs and may cause errors caused by omissions, therefore, we have introduced a series of tools to automate these tasks. This is front-end engineering.

For hybridgeapp development, we also need to compress and merge CSS and Javascript files to delete unnecessary files, so as to reduce the file size of the App installation package and save download traffic; in addition, JavaScript code needs to be obfuscated to improve security. Related code needs to be modified for different platforms to better support cross-platform. These tasks can be completed through front-end automation tools to provide R & D efficiency and quality.

Like traditional Web Front-end development, HTML5 mobile app development uses Javascript as the main development language. Therefore, all automated script tools used in javascript development can be used, currently, these tools are based on Node. js platform, with the help of Node. the asynchronous non-blocking feature of js is more convenient than traditional shell scripts. These front-end automation tools include Grunt, Gulp, and FCM. We will focus on the application of Gulp later.

For more reasons, you are welcome to discuss and Add.