移动前端开发和Web前端开发的区别有哪些

介绍

本篇内容介绍了“移动前端开发和Web前端开发的区别有哪些”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

<强>回顾:前端发展史

<强> ?强阶段一:刀耕火种

十多年前的前端,开发者还在为兼容IE6而头疼,框架上jQuery是老大,有追求的前端开发可能会使用Zepto。js以减少网页体积。这个时候,前端页面主要还是以PC为主,这个时候根本没有移动前端的概念,在小小的手机屏幕上流量的页面则是以纯文本为主。

移动前端开发和Web前端开发的区别有哪些

?阶段二:工程化

移动前端开发和Web前端开发的区别有哪些

在2011 ~ 2014年之间的历史阶段里,模块化的思路占为主导。当时为了进行资产资源加载器的设计,就制定了模块化的协议规范。当时比较流行的模块化协议就是AMD (RequireJS), CMD (Seajs为代表),KMD(想吻你为代表)。在淘宝、天猫,想吻你应用的很火,所以KMD主导天下;在支付宝及外部社区,Seajs应用的很火,所以CMD主导天下,玉伯大大的名气和威望也在前端圈里特别高;而AMD在国外比较流行,但渐渐也被后来出现的CommonJS规范削弱了气势。

?阶段三:移动化

随着3 g, 4 g的发展和iOS和Android手机在市场的普及量大增,PC业务主战场也逐渐过渡到移动端。前端的思维模式由PC转向了移动端,并向应用程序的用户体验看齐。移动端的HTML5协议支持不完善,前端的生产配套不全,Android的屏幕碎片化,所以那个时候的前端开发移动端页面适配的痛苦要远远超过电脑时代。

移动前端开发和Web前端开发的区别有哪些

?<强> 阶段四:框架化

在前端社区,角,反应,Vue, RN(本地)反应这样的MV *框架一个接着一个出现,让前端接受了数据驱动思想的洗礼之外,还借助RN完成了移动端的体验升级,包括后来的Weex,颤振。

在这个阶段,前端开始有了终端的底层架构组,开始构思前端页面在移动终端上的加载性能和用户体验表现。在阿里巴巴内部,为了解决多端复用的问题,伸展借助VDOM打通WebView和Weex两端,一套代码跑天下。

移动前端开发和Web前端开发的区别有哪些

?阶段五:垂直化

随着初代iPhone的发布,大屏幕手机逐渐变成了主流,移动端的需求开始爆发。在淘宝天猫,每年双十一的移动端成交额逐年攀升,并逐渐占领绝对领先地位。前端的领域也随着这种趋势逐渐细分,按照场景可以简单分为移动(无线)前端开发和中后台前端开发。

移动前端开发面向的是消费者端的Web与轻应用业务场景,在这个场景下,淘系经过多年的营销活动沉淀,逐渐形成了移动端独特的,轻量级的解决方案,以及模块维度的,面向运营的页面搭建系统。

中后台前端则是面向企业ERP、CRM、OA等偏后的业务场景,如商家后台等系统。在这个场景下,借助飞冰,融合设计等中后台物料,形成可视化的中后台搭建解决方案,为业务的前端,开发或产品角色提供一站式中后台生产解决方案。

<强>移动前端:混合技术的前世今生

曾几何时,移动客户端开发和前端开发是两条没有交集的平行线,但现在我们越来越拥抱两者的合作产物:混合式(动力)应用开发,或者用最近比较火的一个概念——大前端技术。

从技术的表现形式思考,本质上客户端开发与前端开发都是终端技术,它的特点是直接面向用户UI编程。

?同是UI编程,我们面对的痛点是什么?

<强>传统Web前端技术的技术局限性

1,资源加载:HTML、javascript、CSS,图片等静态资源存放于远端的服务器,需要动态的异步拉取,再拉取数据进行展示,初始化效率上比本地慢的多

2,渲染机制:在浏览器的设计中,JS的执行和页面的布局,油漆都在同一个主线程,无法并行化,再加上JS的性能赶不上AOT语言,执行复杂逻辑时导致的卡顿通常会阻塞UI,再加上冗长的渲染管线,导致浏览器的渲染体验在等量对比本地时并不占优势。

3页面切换:在浏览器中并不存在路由的概念,这导致页面间的切换体验完全依赖于浏览器壳提供的能力,在页面切换的时候会反复加载。当然前端社区中也出现了单页面应用的概念,但是多个页面的资源也显著增加了JSBundle的体积,也使页面的开发更加复杂化了。

移动前端开发和Web前端开发的区别有哪些