前端er们如何最快开发h5移动端页面?

摘要:
因此,它总结了移动终端H5最快发展的最佳方案。web移动终端的发展应注重简化,以满足基本业务需求,设计应尽可能扁平化。前视图层angularjs或react作为框架,node作为中间层,js处理从后端接口获取的数据并操作渲染模板文件,这相当于在MVC中完成控制器层的工作。底层是数据库和后端。
声明在前:本文原创,一字一字手打,转载还请消息M我一下,求伸手党手下留情。
 
一直以来对web移动端的东西做的比较多,总是在做确从来没总结过,于是想对移动端的框架选择到相关技巧,进行一个归纳。首先声明,我也是只萌新,不是大神,肯定会有写得不够严谨的地方,欢迎指正~互相交流,若有忍不了的地方,求轻喷,轻喷,喷.....
 
以下为正文:
 
互联网已经进入2.0时代,手机应用井喷式爆发,不少公司和个人都必须考虑到用户在web移动端的体验,但是相对PC,移动端有许多兼容设配问题。所以总结了一下最快开发移动端H5的较优方案。
 
在web移动端开发要以精简为主,满足基本业务需求,设计尽可能扁平化。这样就兼顾了性能又不影响美观,会极大的提高用户体验。
首要推荐最基础的库-Zepto,它非常的轻,只有10K,语法和jquery也很相似,极大的降低了移动端开发的门槛,简直是新入门级小白的福音啊!
 
zepto的API:http://www.yyyweb.com/ctools/demo.php?t=http%3A%2F%2Fzeptojs.com%2F&h=15000&c=&n=zeptojs
 前端er们如何最快开发h5移动端页面?第1张
 

h5之于APP:

现如今H5的出现可以让移动端的web做到全平台适配,实现一套代码多个平台适用,但是也会造成低配系统的用户操作卡顿,乃至一些bug,所以就要在不同系统做相应的适配。
1、IOS系统内存管理十分优秀,可以在IOS上做最优体验,用一些H5新技术有能hold住。
2、 Android系统下,用户手机配置相差太大,所以只能选择兼容较低配置的的交互及渲染方式。
 
当然目前,最优方案就是原生+H5的混合式应用,用原生语言做外壳和交互效果,保证用户操作上有一个流畅的体验。用嵌套的H5渲染内容,可以使内容保持即时的更新迭代,即时响应,再也不需要用户每次更新SDK。这就是现在最流行的App开发模式---HybridApp。
 

单位-rem:

这里说一个开发细节,就是在移动端用什么做单位的问题。一般来说,常用单位就是px,em,rem,在移动端我的选择是,用rem做图片,宽高的单位,用px做文字的单位,这样做的好处就是无论设备是安卓还是IOS,大屏还是小屏,都能很好的适配,同时文字看起来也不会太大,非常好的解决了移动端适配难得问题。即使在PC网页或横屏pad中打开,我们只要给所有元素的最高父级设max-640px;整个页面在width为640px以内进行缩放, 也不会样式因屏幕大小改变而错乱了。
例如m.taobao.com 淘宝的首页在PC端下:
 前端er们如何最快开发h5移动端页面?第2张
 
由于每个公司前端开发团队的规模和实力不尽相同,所以,在不同团队中的应用也是有区别的,下面是给出的一些建议:
 

初级前端团队(1-5人)

·  首先,可以自己配一个集成环境,可以是XAMPP,集 Apache+MySQL+PHP+PERL为一体的集成包,能够轻易地安装原本复杂的各软件。
·   MVC模式组织代码。
·   库的选择还是Zepto,简单易用,好吃不贵,只要10K你就能获得在PC端用Jquery写代码的体验。至于模块化神马的就算了,毕竟人手不够,开发任务又比较重,还是以完成需求为第一目标。
 
总结:xampp+zepto+rem+CDN
 

中级前端 团队(5-20人):

·Zepto可以作为库,用sea.js进行模块化管理,backbone.js作为基本MVC架构,用于分离数据。underscroe.js做为前端模板引擎。
这个时期团队也会有几个牛人了,可以为整套系统搭建一个半自动化的开发模式,减少不必要的重复工作,交由机器去完成,让开发人员专注于代码 。从此
有了基础的“前端架构”的概念。
 
总结: zepto.js+sea.js+backbone.js+underscroe.js+rem+CDN
 

大厂前端团队(20人以上):

这个阶段自不必多说,大神遍地走,那还不是想搞什么就搞什么,逼格得有,还要引领前沿技术,不仅要满足业务需求,在性能,SEO,安全,代码架构和质量等等细节要求上追求完美。
前端View层,angularjs或react作为框架,node.js作为中层,处理从后端接口拿来的数据,操作渲染模板文件,相当于干了MVC中controller层的活,底层就是数据库和后端(可以是java、php、phyton等)。grunt或gulp为自动化管理工具。css预处理(sass/less )。用CDN存放大量静态文件也是必不可少的。
 
总结: angularjs或react+node.js+sass/less+grunt+rem+CDN
 
最后说一句,没有最NB的框架和语言,只要合适场景和用户需求的就是最好方案。
 
目前思路有点混乱,想到哪儿就写到哪儿了,后期会持续做更新补充。。。

免责声明:文章转载自《前端er们如何最快开发h5移动端页面?》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇如何在Java应用中提交Spark任务?eventUtil下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

在Linux下如何使用磁带机

本文链接地址:http://www.ttlsa.com/html/1081.html 1.识别磁带机备份单元 RedHatLinux支持许多不同类型的磁带设备。 通常情况下, SCSI磁带设备将被命名为/dev/st0,/dev/st1或/dev/nst0,/dev/nst1等等 IDE磁带设备将被命名为/dev/ht0,/dev/ht1或/dev/nht...

C语言之生产者与消费者模型

多线程并发应用程序有一个经典的模型,即生产者/消费者模型。系统中,产生消息的是生产者,处理消息的是消费者,消费者和生产者通过一个缓冲区进行消息传递。生产者产生消息后提交到缓冲区,然后通知消费者可以从中取出消息进行处理。消费者处理完信息后,通知生产者可以继续提供消息。 要实现这个模型,关键在于消费者和生产者这两个线程进行同步。也就是说:只有缓冲区中有消息时,...

前端框架现状调查

转自:前端框架现状调查        Ashley Nolan是来自英国食品速递公司JUST EAT的一名资深Web UI工程师。为了了解整个前端开发社区当前的知识和使用水平,他发起了一个面向前端开发人员的调查,问题涉及CSS、“任务执行器(Task Runner)”、JavaScript等方面。前期,他收到了649份回复。近日,参与者数量达到了1044。...

高可用rabbitmq集群服务部署步骤

消息队列是非常基础的关键服务,为保证公司队列服务的高可用及负载均衡,现通过如下方式实现: RabbitMQ Cluster + Queue HA + Haproxy + Keepalived3台rabbitMQ服务器构建broker集群,允许2台服务器故障而服务不受影响,在此基础上,通过queue mirror实现队列的高可用,在本例中镜像到所有服务器,即...

[转贴]软件产品测试标准

[转贴]软件产品测试标准 软 件 产 品 测 试 标 准 国际标准 •  ISO/IEC 17025 General requirements for the competency of testing and calibration laboratories •  ISO/IEC 14598 Software Engineering-Product...

adb 命令

Android 调试桥 adb ( Android Debug Bridge)是一个通用命令行工具,其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利,如安装和调试应用。 Tips: 在 android_sdk/platform-tools/ 中找到 adb 工具,然后根据其具体的路径配置好环境变量。然后启动cmd 输入...