首页 > 其他分享 >大前端突围之路:从RN跨平台到大前端全栈统一

大前端突围之路:从RN跨平台到大前端全栈统一

时间:2023-04-14 12:04:34浏览次数:34  
标签:前端 跨平台 技术 React 全栈 开发 RN

本文首发自「慕课网」,想了解更多IT干货内容,程序员圈内热闻,欢迎关注"慕课网"!

作者:FE大公爵|慕课网讲师


前言

不知不觉,在大前端领域也混迹十年了,一路的经历不敢说「饱经风霜」,也是非常丰富了.还记得职业生涯的第一个项目是基于Android2.2的应用开发,那时候虽然手机性能低劣,开发方式原始,但是看着第一个项目打造成型,心里还是充满了喜悦和成就感。

大概是在2015年、16年时期,移动开发技术进入了井喷时期,几乎每天都能在论坛看到「新世界」,那时候才发现自己会的越多就,不会的就更多。时至今日回头看,一路的感想和思绪很多,个人之见,抛砖引玉,摘几个话题和大家分享分享。


大前端突围之路:从RN跨平台到大前端全栈统一_技术栈


背景

大前端当下内卷愈演愈烈,各种技术风起云涌,无数小伙伴感慨「别学了,跟不上了!」。在我们身边也经常会看到各种焦虑,不管是做移动端开发的,还是做前端开发的,都在卷与被卷的过程中,而这中卷似乎进入到一种畸形的状态,就是比谁会的技术多。在招聘中经常会看到在简历专业技能一栏写满一排,从安卓到IOS,从前端到后段。但是真的问起来,都是浅尝辄止。

所以我们不禁要问:真的需要一个人会那么多技术吗?

答案是否定的,但是又不能这么简单的回答这个问题,因为我们要结合这个时代的背景来看。

打工者卷,本质上是企业卷,移动互联网进入高峰期,互联网企业的生存竞争愈发激烈,圈内经常说互联网创业公司18个月决定生死,企业在这么快节奏的竞争中必须要提高效率,适应变化。而研发技术作为互联网企业的核心自然首当其冲。所以研发技术就被迫要求提高效率,适应变化

带着这个结论再来看大前端技术演变就不难看出,这些年整体的趋势就是两个关键词:
统一、融合。融合是为了统一,统一是为了提效,这其中最值得讲的就是跨平台技术。

谈谈跨平台

所谓跨平台,简单的理解就是用一套代码开发出可以运行在多个平台之上的应用程序,以移动端为例,RN和Flutter只需要开发一套代码,就可以编译出两个安装包,分别运行在安卓和IOS两个系统上,相当于本来需要两个开发团队,现在只需要1个(并不完全是)。另外的方案还有微信小程序,它走了另外一条不同的路线,寄生于超级应用内的运行环境,只开发一个应用包,通过超级应用实现跨平台。另外还有国内快应用,虽然不支持IOS,但是本质上也是跨越平台的统一方案。

跨平台技术的应用使得移动端研发效率得到极大的提升,虽然没有真正达到效率翻倍,但至少是50%以上的提升。并且一套代码相比于两套代码,也大大降低了业务快速变化之下的维护成本。

在「跨平台」这个概念之上,还有另一个更大的概念:大前端全栈。

大前端全栈

统一、融合」之路不局限于安卓IOS两个移动平台,而是想推广到整个大前端:安卓、IOS、小程序、web、PC桌面、穿戴设备。

如果能把所有的这些端全部统一开发技术和开发语言,那曾经每个端都需要一个单独的开发团队就有可能合并成一个整体团队,这是非常理想化的情况。当下我们非常清楚还远远没有达到这个程度,但是我们可以朝着这个趋势演进,如果有一天真的实现大前端全栈统一,那这个行业的效率将极大的提升。

RN的优势

回到移动端,在众多移动端跨平台技术之中,为什么说首推RN呢?RN到底有何独到之处。从今天的主题出发,分两个方面讲:

1、开发效率

一方面因为其快速高效的开发模式,迎合了现在互联网公司追求短平快、高人效的需求。React的JSX语法比Flutter要简洁高效很多,而且JS语言也笔Dart要更加灵活,适用面更广,使用人群更广。React函数式编程得到普及后,模板代码更少,代码复用更加容易,RN的开发效率得到了更近一步的提升。

2、统一之路

另一方面是因为RN更有利于大前端全栈统一理想的落地。JS在ES6之后已经非常成熟,相比Flutter的Dart语言应用更广,学习更快,群众基础更广。另外RN基于React,其在语法、开发范式上几乎一样,除了Dom元素不同,Context、HOC、memo等技巧的应用一模一样,甚至工具类、状态管理都可以共用。所以RN工程师可以非常低成本的转向React开发。另外Taro小程序框架已经非常成熟,使用React开发小程序也几乎没有门槛。再说桌面端,Electron-React已经有了非常成功的大厂级应用,这对于其他想选择Electron的人来说就有了信心。相对冷门的穿戴设备开发,RN也已经有了非常成功的尝试和突破。

所以,基于React的大前端统一技术栈已经看到了希望,移动端、web、小程序、桌面端、穿戴设备,如果未来可以真正打通一套技术栈,那么底层基建、上层封装、业务解决方案都将可以共建、共享。

收尾

技术的发展应该是让人更加轻松而不是更加累,软件开发技术也一样,推动大前端技术栈统一可以去内卷化。对企业而言,多种技术栈意味着维护多套基建,招聘多套「人才」,对于个人而言,学得越杂就越难精深,统一技术栈才能在有限的精力下创造更多的价值。


欢迎关注「慕课网」帐号,我们会一直坚持内容原创,提供IT圈优质内容,分享干货知识,大家一起共同成长吧!

本文原创发布于慕课网 ,转载请注明出处,谢谢合作

标签:前端,跨平台,技术,React,全栈,开发,RN
From: https://blog.51cto.com/u_15771948/6189849

相关文章

  • 前端小知识点扫盲笔记记录8
    前言我是歌谣放弃很容易但是坚持一定很酷今天继续对前端知识的小结命令模式宏命令<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="......
  • 原生JS修改输入框value,并触发前端框架改变内部管理的响应式数据
    背景有时候,我们需要在一个网站上重复地执行某些操作,例如:输入>查询>输入>查询······这时候,我们可以写一个js自动化脚本执行这些操作,来保护我们的手指关节,以及键盘鼠标。对于大多数网站来说,使用web框架如vue进行开发,这些框架使用内部的响应式系统来管理数据,针对input元素,v......
  • 前端(三)
    前端(三)分组和嵌套divp{#嵌套(空格跟着是嵌套)color:red;}divp,p{#分组(逗号隔开是分组)color:red;}伪类选择器a:link{/*默认*/color:red;}a:hover{/*鼠标悬浮*/color:blue;}a:active{/*鼠标左键点击不松......
  • 前端H5使用html5QrCode实现扫一扫识别二维码
          Vue版本:npminstallhtml5-qrcode<template><divclass="index"><!--扫一扫--><divclass="scan"v-if="isScanning"><divclass="scan-box"><divid=&qu......
  • 关于前端基础数据结构的问题
    常用的数据集采用数组的好处,当然对于前端新人来很容易混淆,如下的数据是数组(js的数组本就是特殊的对象,因此又叫数组对象)由于这缘故很多网上的叫法五花八门所以下面的数据结构很容易混淆,以为这是数组对象(其实这样叫没错,只是理解成是真对象(js的数组也是对象的一种,先区别一下免得混淆......
  • 纯前端仿GPT流式打字效果的js库,类似通义千问或者其他AI界面的打字效果
    因为GPT以及国内各大模型的发布,很多官网都设计的是,仿造流式打字效果,下面这个js库就能轻松实现。typed.js  具体实现代码参考下面:<spanid="subTitle"></span><scriptsrc="https://unpkg.com/[email protected]/dist/typed.umd.js"></script><script>vartyped=......
  • 2023年就业卷,卷,卷!前端面试怎么准备?
    本文首发自「慕课网」,想了解更多IT干货内容,程序员圈内热闻,欢迎关注"慕课网"!作者:张轩|慕课网讲师大多数开发者应该都经历过跳槽和面试,这也是我们工作生活中必须要经历的一部分,那么在每次面试中你是否发挥到了真实的水平,是否留下过很多遗憾,很多次因为自己的心态而没有发挥到最佳状态,......
  • JAVA返回前端时候bean转json时首字母、第二个字母大写会自动变成小写的问题
      后台bean是privateStringuName;但是前端生成的json是uname会自动变成小写 如果我们只是个别的几个的话,只需要加个注解@JsonProperty("uName")privateStringuName; 这样就可以了......
  • 批量上传GPT知识库,前端elementui的upload上传组件,后端Golang的上传接口实现
    为了实现批量上传GPT的知识库并且功能,那么这个上传组件就必不可少,需要能把文档上传到服务器中。前端部分,我是采用的cdn引入的形式,引入的elmentui。该框架是有上传组件的,可以参考我的用法:action部分就是上传接口,其他三个是上传之前的处理,上传成功和失败后的回调函数......
  • 一对多订单前端写法
    $.ajax({url:"/orders/show_order",type:"GET",dataType:"JSON",success:function(json){$("#test").empty();console.log("删除成功!");$.each(json.data,function(key,value){......