HTML5移动应用开发为什么需要引入前端工程化

使用HTML5和Javascript开发的移动应用,和典型的现代Web前端项目一样,有着大量的Javascript,HTML和CSS代码,因此前端工程化在HTML5移动应用开发中同样有着重要意义,可以避免大量重复性的工作,提供效率和质量,优化产品的性能。

目前前端工程化比较通用的框架主要有国外的grunt,gulp,百度的F.I.S等,这些框架基本上都是基于Node.js实现的(百度的F.I.S最早是基于PHP开发的,后来切换到Node.js)。Node.js对前端工程师有着非常强的亲和力,有各种基于Node.js的压缩、优化、校验工具,有着极高的运行性能,有强大的npm包管理工具,这些特点让Node.js成为前端自动化和辅助开发工具的首选平台。前面我们介绍的Cordova,Ionic框架的命令行脚本程序都是基于Node.js开发的。

对于移动Web项目来说,前端网页性能的优化(主要是指各种文件的压缩处理,CDN缓存,图片质量优化)非常重要,因为现在移动上网的流量费还是很昂贵,移动带宽普遍还是达不到PC带宽的水平,4G网络还没有普及,还有很多用户会通过3G,GPRS或不稳定的WiFi网络访问我们的移动网站。如果移动网站优化的不好,用户会花很长的时间(15秒以上)才能打开网站,同时浪费大量的流量,结果就是造成用户的大量流失。

对于移动Web产品,CSS和Javascript文件的压缩和合并,静态文件的CDN缓存,文件缓存问题和文件Hash版本处理,HTML5离线缓存等工作,都是需要优化的方向。这些优化工作我们每次更新产品时都需要做,如果手工操作必然会浪费大量的人力成本,并且容易出现疏漏导致的错误,因此我们引入了一系列工具来自动化这些工作,这就是前端工程化。

对于HybridApp开发来说,我们同样需要压缩合并CSS和Javascript文件,删除不必要的文件,以便减小App安装包的文件大小,为用户节省下载的流量;另外还需要对js进行混淆,提高安全性;针对不同的平台修改相关的代码,更好的支持跨平台。这些工作都可以通过前端自动化工具完成,提供研发效率和质量。

HTML5移动应用开发和传统的Web前端开发一样,都是使用Javascript作为主要的开发语言,因此在开发javascript程序时使用的自动化脚本工具都可以使用,目前这些工具都是基于Node.js平台实现的,借助Node.js的异步非阻塞特性,与传统的shell脚本相比,这些工具非常方便。这些前端自动化工具包括Grunt,Gulp,FIS等,后面会重点介绍Gulp的应用。

更多的理由,欢迎大家讨论补充。

时间: 2024-12-15 07:17:19

HTML5移动应用开发为什么需要引入前端工程化的相关文章

论前端工程化

在不知道什么时候,突然有人提起前端工程化这东西,一开始觉得又是某个大神故意提起的高深词汇,专门来吓唬人的. 继而我疯狂查找了很多的资料,在接近二十篇的相关资料,每一篇文章都写得神乎其神,大有唯我独尊的意味,但每篇看下来,总感觉不对经--就是大家都把自己一套比较规范的开发套路充当出前端工程化,前端工程化变成了前端优化,让人看了,"对啊,这样做规范多了,优化不错啊,巴拉巴拉",但又觉得工程化不应该只是这些,像缺什么,让人看得云里雾里,似懂非懂.这种文章虽不算误人子弟,但讳莫如深,妖魔化了前

论前端工程化(转载)

在不知道什么时候,突然有人提起前端工程化这东西,一开始觉得又是某个大神故意提起的高深词汇,专门来吓唬人的. 继而我疯狂查找了很多的资料,在接近二十篇的相关资料,每一篇文章都写得神乎其神,大有唯我独尊的意味,但每篇看下来,总感觉不对经--就是大家都把自己一套比较规范的开发套路充当出前端工程化,前端工程化变成了前端优化,让人看了,"对啊,这样做规范多了,优化不错啊,巴拉巴拉",但又觉得工程化不应该只是这些,像缺什么,让人看得云里雾里,似懂非懂.这种文章虽不算误人子弟,但讳莫如深,妖魔化了前

谁妖魔化了前端工程化

在不知道什么时候,突然有人提起前端工程化这东西,一开始觉得又是某个大神故意提起的高深词汇,专门来吓唬人的. 继而我疯狂查找了很多的资料,在接近二十篇的相关资料,每一篇文章都写得神乎其神,大有唯我独尊的意味,但每篇看下来,总感觉不对经--就是大家都把自己一套比较规范的开发套路充当出前端工程化,前端工程化变成了前端优化,让人看了,"对啊,这样做规范多了,优化不错啊,巴拉巴拉",但又觉得工程化不应该只是这些,像缺什么,让人看得云里雾里,似懂非懂.这种文章虽不算误人子弟,但讳莫如深,妖魔化了前

(近万字)一篇文章带你了解HTML5和CSS3开发基础与应用-适合前端面试必备

作者 | Jeskson 来源 | 达达前端小酒馆 HTML5和CSS3开发基础与应用,详细说明HTML5的新特性和新增加元素,CSS3的新特性,新增加的选择器,新的布局,盒子模型,文本,边框,渐变,变形,动画效果等.HTML5的介绍,常用的元素和属性,表单相关元素和属性,CSS3新添加的选择器,CSS3新的属性. 了解HTML5,和现在主流的浏览器的,与基本语法. 在使用HTML5之前,w3c希望用XHTML来替代HTML,因为HTML与XHTML相比,XHTML是一种更加严格,更加规范的HT

转载:WEB前端开发实用HTML5开发框架和开发工具

HTML5 在不同的领域让网页设计更强大的.快速,安全,响应式,互动和美丽,这些优点吸引更多的 Web 开发人员使用 HTML5.HTML5 有许多新的特性功能,允许开发人员和设计师创建应用程序和网站,带给用户桌面应用程序的速度,性能和体验.这篇文章整理了25款优秀的 HTML5 框架和开发工具可以帮助你开发项目更快,更容易. Sonic Sonic 是一个很小的 JavaScript 类,用于创建基于 HTML5 画布的加载图像.更强大的是提供了基于现成的例子的创建工具,可以帮助你实现更多自定

HTML5 file API加canvas实现图片前端JS压缩并上传 (转载)

一.图片上传前端压缩的现实意义 对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅,同时大大降低了网络异常导致上传失败风险. 最最重要的体验改进点:省略了图片的再加工成本.很多网站的图片上传功能都会对图片的大小进行限制,尤其是头像上传,限制5M或者2M以内是非常常见的.然后现在的数码设备拍摄功能都非常出众,一张原始图片超过2M几乎是标配,此时如果用户想把手机或相机中的某个得意图片

web前端开发教程系列-4 - 前端开发职业规划

前言 关于我:小天 1). 架构师,项目经理,产品经理 2). 中间件研发 3). VPCC 云计算基础平台管理 4). 智慧旅游 5). 智慧教育 6). 一次失败的创业体验(爱邂逅网) 一. 在开始规划职业之前,应该充分认识自己从事的行业,结合自己的价值观,树立合理目标,持之以恒 二. 人生阶段 1. 30岁之前: 2. 30岁以后:慢慢开始登上这个社会的大舞台,你这时候的目标就应该是一些具体的成就了,是做这些事情的副产品的时候了 三. 展望未来,个人认为在以下的前端技术领域,会产生较大的机

[IOS_HTML5]各种JS框架介绍--用HTML5/CSS3/JS开发Android/IOS应用

现在人人都想成为安卓/IOS应用开发工程师.其实,安卓/IOS应用可以用很多种语言来实现.由于我们前端开发工程师,对HTML5/CSS/JavaScript的网络编程已经相当熟悉了.所以,今天大家将会认识到一些利用前端语言来开发安卓/IOS应用的工具. 在文章的末尾,也介绍了使用JAVA.C#.Lua以及AS3来开发安卓应用的工具. 希望大家都能找到适合自己的开发工具!祝大家开发安卓/IOS应用一切顺利! PhoneGap 开发语言: HTML, CSS, JavaScript 开发工具: Ph

Html5 Egret游戏开发 成语大挑战(一)开篇

最近接触了Egret白鹭引擎,感觉非常好用,提供了各种各样的开发工具让开发者和设计者更加便捷,并且基于typescript语言开发省去了很多学习成本,对于我们这种掉微软坑许久的童鞋来说,确实很有吸引力,在开发中最浪费时间就是设计和调试的阶段,js的语言过于自由,自由到有时候写错了都不知道,但typescript可以使用开发IDE帮助排错和调试,不得不说确实很有效率,在这之前,我在egret论坛里发了几个小游戏做练手,最近的一个<疯狂猜歌名>在素材齐备的情况下,仅用了不到1天的时间完成了开发,以