前端领域的跨端开发方案（前端领域的跨端开发方案有哪些）

本篇文章给大家谈谈前端领域的跨端开发方案，以及前端领域的跨端开发方案有哪些对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。 今天给各位分享前端领域的跨端开发方案的知识，其中也会对前端领域的跨端开发方案有哪些进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、跨端开发面面谈之基于WebView的Hybrid开发模式
• 2、前端开发未来的发展前景怎么样?
• 3、web前端跨平台开发技术有哪些
• 4、闲鱼前端基于serverless的一种多端开发解决方案
• 5、web前端未来将会有什么样的发展趋势？

跨端开发面面谈之基于WebView的Hybrid开发模式

跨终端移动开发是近期准备总结的一个主题前端领域的跨端开发方案，作为这一系列的开始前端领域的跨端开发方案，首先简单说说基于WebView的Hybrid混合开发模式。

有过混合应用开发经验的同学前端领域的跨端开发方案，对基于WebView的Hybrid开发模式应该不会陌生。借助于原生端各平台的WebView组件，可以实现Native和JavaScript的双向通信，从而将Web App与Mobile App融合起来，开启混合开发的新模式。

基于WebView的Hybrid开发模式到如今已经非常成熟，不再是一个实验性新技术，而是广泛应用在各大厂商的平台型应用如微信、手Q中。

JSBridge作为连接Native和JavaScript的桥梁，是基于WebView的Hybrid开发模式中的关键点。
在前端领域的跨端开发方案了解其通信原理后，再来看JSBridge究竟是什么。从前端角度来看，可能会把JSBridge理解为业务开发过程中，以全局变量注入到WebView中，帮助调用原生API的JavaScript工具库。这样的理解不够准确，按照我的理解，JSBridge不是一个标准的规范，基于原生系统为WebView组件提供的能力，已经可以建立起WebView JavaScript bridge，即使不再做更高程度的封装，也可以完成从Native到JavaScript的双向通信了。

我们所说的JSBridge，是对底层通道的抽象封装，这一过程包括了原生和JavaScript两侧内容，在原生端需要考虑系统API差异，对上层调用提供统一接口，在JavaScript端需要考虑调用方式，请求管理等内容。JSBridge的设计实现已经是成熟技术了，其设计可以参考 In-depth Profiling of JSBridge 、 Hybrid APP架构设计思路 ，一个安卓端完整JSBridge实现可以参考 JsBridge实现 。

目前，基于WebView的Hybrid开发模式非常成熟，广泛应用于各类平台型App中。实现一个完善的JSBridge是在现有App中集成使用Hybrid开发模式的基础，在完成这一基础设施建设后，大家继续在各个方向深挖，在不同的维度不断优化性能和体验。

多数App的Hybrid部分做到上面部分，已经有了还不错的体验。在我的了解中，空间团队在上面基础上继续优化给出的是当前做的更好的方案。其主要流程如下图所示，详细内容可以参考 QQ空间前端工程师如何做首屏优化
除了在现有App中集成使用这一开发模式，还可以使用这一技术开发独立App。早期的PhoneGap、Cordova、现在的Ionic，是这一领域较为知名的开发框架。

我司前端技术栈曾以Angular为主，一些App也由前端团队基于Angular技术栈选型Ionic。初入团队曾维护过基于Angular 1.x的Ionic App，用于我司投资顾问服务客户的以IM为主、综合一些其他业务，可以算一个比较复杂的应用。

前端技术背景的同学，采用Ionic框架开发App的学习成本不高。开发过程中仍在沿用前端技术，写的仍是Web App,跑在原生WebView容器中。采用Ionic提供的组件库，可以快速搭建项目界面。其扩展原生的机制也比较方便，如有原生能力的需求，并且没有现成实现的，可以自行封装使用，不过这个过程就需要原生开发同学的参与了。在我们的上述App开发中，主要是安卓端消息推送模块由原生开发同学提供了支持，其余对原生能力的需求如拍照、相册访问等常见需求，都有现成方案。

然而，采用Ionic完成上述应用，也有明显不足的地方。首先是聊天列表方面，我们知道，如微信和QQ聊天窗口，这是一个异构的无限滚动长列表，在进入聊天界面时，一般只加载最近的一屏聊天数据，然后通过滚动加载历史消息。在原生端完成这一需求有各种常见手段，而仅靠Web端技术，在各种折腾后，效果都不尽如人意。其次是动画，这里的动画包括了换页动画和其他动画，流畅程度一般。最后是前端开发通病，要处理浏览器兼容性问题，crosswalk只是一个理论解决方案，其体积限制了几乎不会被采用。

Ionic不断迭代，新的版本中依赖新的Angular。新的Angular与Angular 1.x开发体验已经完全不同，如果你还不了解，可以阅读我们团队书籍 揭秘Angular 2 。新的Ionic的开发体验，相比以往也有提升，在其工具链中，提供了拖拽式项目生成工具
同时，Ionic pro提供的开发者工具，为应用整个生命周期提供了完善的支持平台，包括了以下功能，不过，使用需要付费。

站在当下来看，对于前端技术背景开发者来说，如果已有Angular基础，不希望引入过高学习成本，需要快速开发一个复杂程度不算太高、或者对应用性能不是特别敏感的跨终端App，选择Ionic依然是一个可行方案。

然而，既然你已经身在前端领域这样一个技术更迭日新月异的圈子里，还是应该使劲的折腾，关注跨端开发这个主题新的技术热点，接下来我也会继续谈谈在NativeScript、React Native、Flutter的一些体验，可以保持关注。

前端开发未来的发展前景怎么样?

Web前端开发前端领域的跨端开发方案，这已经发展多年的技术从最早的萌芽状态前端领域的跨端开发方案，发展到了今天的枝繁叶茂，各种技术的层出不穷也让开发者们不断地成长壮大。从最早的简单学习就能轻松应付，到今天的需要系统学习才能入职。那么，未来这项技术又将会走向何方呢?今天，千锋广州小编就和大家一起来看下。

小程序

作为目前前端最热门的方向之一，小程序自诞生之日起，就承担着重要的历史使命，其开发相对简便，无需安装就可使用的特性让一众APP开发者们如临大敌，毕竟如果这项技术得到了普及，APP或许就会被替代掉。

虽然发展势头迅猛，但是目前来看小程序想要在市场中拿到更多的份额或许还需要时日。厂商更新不积极，对超级APP平台的过于依赖，都是摆在小程序面前的棘手问题。所以，尽管小程序是Web前端开发未来的趋势之一，但是还是需要花费不少努力才能做到的。

跨端开发

得益于移动互联网的飞速发展，目前用户能够接触到的终端种类已经越来越丰富了，从最早的手机、电脑，到今天的电视平板等。万物互联这一概念将一众设备连接到了一起，而跨端开发，也就成了这一大趋势中受益最多的技术了。

目前较为成熟的跨端开发方案就数RN和fluter两种，其中RN已经有一段时间没更新了，进展速度缓慢，fluter使用的也相对较少。不过既然已经有了需求，那相信这些技术也会逐步跟上需求的成长速度。

Typescript

作为脱胎于JavaScript的一个超集，其到今天已经发展了有一段时间了，甚至已经有人猜想在未来typescript会取代JavaScript，尽管目前来看这是不可能的。但是它的出现，弥补了js的类型缺陷问题，也确实能够让Web前端开发变得更加轻松。所以，typescript在未来或许也可以在这个领域中占有一席之地。

5G

这虽然不是前端技术，但是它在未来的价值远高于前三个。如果说前三个是打造前端的技术，那么5G就是承载前端领域的跨端开发方案他们的载体。随着5G时代的深入发展，前端技术也必然会从中受益，实现更好的发展。

另外，目前5G还没有专属的应用场景，而Web前端开发，则是轻量化快速开发的代表，二者的结合将会碰撞出怎样的火花?前端领域的跨端开发方案我们拭目以待。

web前端跨平台开发技术有哪些

Web 流：也被称为 Hybrid 技术，它基于 Web 相关技术来实现界面及功能
代码转换流：将某个语言转成 Objective-C、Java 或 C#，然后使用不同平台下的官方工具来开发
编译流：将某个语言编译为二进制文件，生成动态库或打包成 apk/ipa/xap 文件
虚拟机流：通过将某个语言的虚拟机移植到不同平台上来运行

闲鱼前端基于serverless的一种多端开发解决方案

前端的发展太快了，前端框架和技术的发展也层出不穷，还包括不同智能设备的出现，对前端开发同学来说是个很大的跳转，简单列举下：

这样就滋生了一些问题，比如我要开发一个通用的页面，兼容不同的端侧和 小程序 ，显然目前是做不到的，我们只能开发多套页面去适配不同的场景，这样的话成本就太高了。

很多同学都在尝试解决这个问题，也催生了类似taro这样的多端统一开发框架，这是一个好的解决方案，但是比较被动，缺乏一定的扩展性。

这篇文章我们要探讨的是，看能不能换个角度去解决这个问题，提升开发效率。

ViewModel

当我们在开发一个页面的时候，不管用的是哪一种框架，通常都会抽象出一层viewmodel层，它主要有2个作用

从上图中我们可以看出，viewmodel是一段独立的通用代码逻辑，起到了承前启后的作用。它和view层关系更加紧密，因此通常会放在前端测。

既然viewmodel是独立的，那我们能不能把它放在后端呢？这样一个最大的好处就是viewmodel可以进行复用，不需要在重复编写，而且只需要改动一个viewmodel，就可以全量生效。

似乎是一个很美好的想法，但是这部分代码由谁去开发呢，总不可能寄希望于后端同学吧，当然只能是我们自己，也感谢于serverless架构的出现，让这件事情变成了可能。

有些同学可能会问，既然viewmodel后移了，那view呢？后续会考虑结合我们的ui2code技术，那真的就比较完美了。

什么是serverless

架构上，我们可以把serverless分为FaaS和BaaS。

FaaS是用于创建、运行、管理函数服务的计算平台，它支持多种开发语言，比如java、nodejs、dart等，这有利于不同端侧的开发同学介入开发。FaaS是基于事件驱动的思想，只有当一个函数被事件触发时才会占用服务器资源执行，不然都是无需占用服务器资源的。

BaaS提供了用于函数调用的第三方基础服务，比如身份校验、日志、数据库等，它是由服务商直接提供，开发者无需关系实现，直接调用即可。

业务落地

我们是通过gaia平台开发后端接口，gaia可以理解为上文提到的FaaS平台。

日常开发中有这样一个需求，下面是这个需求的一个页面。

因为这个页面上的数据比较多，先把它切分成一个个小的模块，后台返回数据的时候也根据模块来返回数据。

我们是根据viewmodel来设计接口，首先肯定有一个首屏数据接口；然后是页面上的交互，比如切换卡片、切换芝麻信用按钮，切换会引起页面数据变化，我们可以统一封装一个页面更新的接口；最后是一个开通的接口。

后端接口

前后端交互最重要的数据结构的设计，我们省略了中间的业务逻辑处理，看下接口的数据结构。

首屏接口返回的数据主要有几个特征：

更新接口的返回数据结构和首屏接口类似，但是入参有所不同，主要包括2个字段：

前端处理

从后端返回的数据可以看到，数据是及其详细的，无需我们做任何的业务逻辑处理，直接映射到页面即可。这样，前端已经变成了很薄的一层数据，没有任务的业务逻辑处理，变的很简单，当需要迁移到其他端时，只需要迁移视图层即可。当有任何的业务变动时，只需要修改后端的接口，就能生效。

收益与总结

通过具体的实践，我们发现，对于前端开发同学来说，变的简单了，开发效率有很大的提升，前端同学甚至都不需要去理解具体的业务逻辑，就能完成页面的开发。而且，提取的viewmodel可以复用到不同的端侧，设置还包括native端。我们还可以将viewmodel拆分成更小粒度的viewmodel，方便在不同的页面接口中进行复用。我们有同学还在FaaS侧基于redux的思想封装了一个通用的状态管理框架，规范了前后端的交互。

后面， 还有一些问题待我们去解决，比如开发成本、viewmodel的逻辑拆分、具体接口问题定位等。

闲鱼团队是Flutter+Dart FaaS前后端一体化新技术的行业领军者，就是现在！ 客户端／服务端java／架构／前端／质量工程师 面向 社会 招聘，base杭州阿里巴巴西溪园区，一起做有创想空间的社区产品、做深度顶级的开源项目，一起拓展技术边界成就极致！

*投喂简历给小闲鱼→ guicai.gxy@alibaba-inc .com

开源项目、峰会直击、关键洞察、深度解读

请认准 闲鱼技术

web前端未来将会有什么样的发展趋势？

趋势一前端领域的跨端开发方案：更加移动优先
响应式设计显然是目前Web前端开发领域的主要趋势之一前端领域的跨端开发方案，并且这一趋势在未来还将持续一段时间。虽然现在的响应式设计大部分还是以PC版优先，然而如果有一天我们把PC版放到比移动版次要的位置上，也没有什么好奇怪的。因为，目前许多Web前端开发者已经开始转向以移动优先方案来做他们的响应式设计和开发，这就象征着一个重大转变，值得我们跟进的。
趋势二：更多使用快速原型开发工具
众多Web前端开发者从2016年开始尝试使用快速原型开发工具，而在2018年将是这种技术真正爆发的一年。“UXpin、Webflow、Invision以及其它许多快速原型开发工具，让设计师不用写一行代码，就能为网站和服务快速创建低保真和高保真原型，便于设计师衡量它们的可用性和美观性。” Web设计师Jamie Leeson says如是说，“许多工具也允许你在浏览器中设计原型并从工具里真正启动网站自身。”
不管未来前端发展方向如何，可以肯定的是未来前端人才需求依旧很大。想学前端开发专业的机构也很多，你可以去线下试听课程了解一下，例如北大青鸟、南京中博软件学院、南京课工场等等都有试听课程的！ 关于前端领域的跨端开发方案和前端领域的跨端开发方案有哪些的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。 前端领域的跨端开发方案的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于前端领域的跨端开发方案有哪些、前端领域的跨端开发方案的信息别忘了在本站进行查找喔。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。