这个应该是很多大厂前端基建团队做的事情,比如持续发布、版本控制、内部cdn建设等等。
大前端
这也是个在过去几年炒的很热的词,不过这个词不仅仅是炒作,它也实实在在的扩展了前端的能力以及现有的公司组织架构,比如据我所知有的公司移动端和前端就会划分到同一个团队管理,统称大前端团队。
nodejs
这个在前端工程化部分已经说过一些,这里再次提起是因为在工程化中nodejs扮演的角色是提供nodejs环境以及部分后端能力,而在大前端团队里是实实在在的存在nodejs工程师角色和nodejs项目的。比如说在前后端分离的过程中,部分公司(比如阿里淘宝)会发展出一个中间层的东西,这可以理解为是一个大前端团队维护的业务接口聚合层,前端写接口肯定是使用nodejs最顺手,而且nodejs生态也在蓬勃发展,比如早些年的TJ大神一人之力扛起半个nodejs生态圈,涌现了koa、express这样的基于中间件的开发库,再到后来阿里巴巴的egg,再到Nest.js,现在基本已经没有裸写nodejs api的了。
跨端
先说说手机端
首先,最直接的跨端就是在APP壳子里面套HTML页面来开发,这种方案也催生了很多hybrid解决方案,前端也需要去了解客户端的知识以及JavaScript Bridge的设计,同时也减少了APP客户端工程师的岗位?
然后,随着React生态蓬勃发展,Facebook开源了一个跨平台移动应用开发框架——ReactNative,它可以让你以React的前端语法来开发移动应用,本质就是虚拟DOM映射原生UI元素、通过bridge调用原生API,这种思路让前端的触手伸到了移动开发,也促成了大前端团队的建设。Vue生态也有阿里发起的Weex移动开发框架,原理类似。
再后来,Flutter出现了,它也是一个跨端的开发框架,准确来说它和JavaScript生态关系不大,使用Dart语言开发APP,并且有自己的跨平台自绘引擎来保证多端UI表现一致,但因为也是一种跨端的解决方案,所以也受到了大量前端工程师的关注和学习。
最后,还是要提一嘴小程序,这个技术方案其实是商业的产物,各个公司都想把内容和生态留在自家的APP里,所以从微信小程序开始(微信不是最早,但是发展的最好),阿里、百度、字节跳动等等这些公司都有了自家的小程序。
再说说桌面端
桌面端据我了解使用的比较多的是Electron,它可以让前端以JavaScript来开发出桌面应用,比如字节跳动的飞书桌面端就是使用Electron来做的。
总结过去
从过去这些发展的技术可以看出来,前端主要是在做统一化、工程化、生态化的事情,从早些年间的刀耕火种跨越到比较完善的工程化开发,前端的能力范围也得到了扩展,以前不能做的事情现在可以做了。
很多互联网公司的前端高p也是在这一波浪潮中晋升,得到了更好的职业发展。
分析现在
===============================================================
首先定义一下我说的“现在”是2020年左右。
现在基本上各大公司的前端工程化改造大体完成,各种改造方案、组件库都层出不穷,所以前端又有新玩法了。
Serverless
准确来说,Serverless并不是前端的技术领域,因为它解决的是让开发者不用关心服务器底层架构和运维工作,形成一种“无服务器”的假象。
那为什么这个技术在前端领域会受到追捧呢?
因为这个技术刚好解决了整个开发链条中前端缺失的能力,即服务端底层和运维能力。各个大公司的前端团队也都在尝试把Serverless落地,比如在知乎上就可以看到很多关于Serverless的布道。
NoCode和LowCode
在我看来,低代码(LowCode)和零代码(NoCode)产品,是前端对现有能力整合之后,对其他领域的一种扩张和赋能。其实各大公司在某些特定业务场景中早已经有相关的产品落地了,比如广告业务、电商运营的繁多的落地页需求可以使用零代码产品来解决,全程不需要代码参与。
那既然之前有,现在为什么又提起低代码和零代码呢?我觉得原因有两个:
之前解决的只是某些特定业务场景的问题,现在想把这种能力逐渐扩展到更多的业务场景,比如扩展到公司外部,来做toC的使用。
之前解决的只是页面级的问题,现在想解决应用级的问题。
总结现在
当然了,现在的讨论的比较多的、正在进行中的技术和解决方案肯定不止我说到的这两种,欢迎大家补充。
目前大公司的前端们也在结合业务在做这方面的事情,如果你所在的团队在做相关的事情,不如加入进去,不管是技术或职业发展,都会有比较好的收获。
展望未来
===============================================================
React Server Component
这个目前还在提案中,未来成熟之后极有可能改变前端的开发方式,前端React生态的范围又向服务度端扩展了,一波新的基础建设、技术方案可以考虑了。
Serverless大规模落地
按照现在社区以及各大公司内部的发展,Serverless应该会在2021有大规模的落地,运维岗位会进一步减少
NoCode和LowCode持续发展
低代码这个概念在2021年初因为钉钉发布会被再次带火,因为钉钉的使用量以及toB端市场有很多内部应用的搭建需求,所以它强调这个概念也不奇怪。
相信有像阿里钉钉这样的企业的推动,低代码和零代码会发展的更好。
不用焦虑
说了这么多,是不是更焦虑了?其实不用。
React核心成员Dan Abramov都大方承认了他并不了解Flex、Webpack等等技术,没试过Serverless等等“时髦”技术,很多你会的技术他不会,照很多招聘标准来看他还评不上阿里P7,但是这并不影响他能成为React核心成员,以及他在他自己擅长的领域的造诣。
所以,不用都会,选定一个自己喜欢的、能做出成绩的技术,深入下去吧!
最后
=============================================================
前端学习是一条漫长的道路,我们要学习的东西不仅仅只有表面的 技术,还要深入底层,弄明白下面的原理,只有这样,我们才能够提高自己的竞争力,在当今这个竞争激烈的世界里立足。
千里之行始于足下,愿你我共勉。
金三银四快到了,送给大家一个小福利,下面是我在工作之余整理的一些面试题,包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、react等等。
HTML 篇
图片中 title 和 alt 区别?
Html5 有哪些新特性、移除了哪些元素
浏览器是怎么对 Html5 的离线储存资源进行管理和加载的呢
行内元素有哪些?块级元素有哪些? 空(void)元素有那些?
canvas在标签上设置宽高 和在style中设置宽高有什么区别
浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢?
CSS 篇
CSS中link与@import的区别:
position的absolute与fixed共同点与不同点:
BFC 有什么用
清除浮动的几种方式
Css3 新增伪类 - 伪元素
IE盒子模型 、W3C盒子模型
display:inline-block 什么时候不会显示间隙?
行内元素float:left后是否变为块级元素?
由于内容较多,为了避免阅读体验仅展示部分面试题,完整版的面试题+解析,【点击我】免费获取。
JavaScript篇
js的各种位置,比如clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop的区别?
js拖拽功能的实现
异步加载js的方法
js的防抖
绕不过去的闭包
说说你对作用域链的理解
JavaScript原型,原型链 ? 有什么特点?
请解释什么是事件委托/事件代理
Javascript如何实现继承?
Vue
vue中 key 值的作用
Vue 组件中 data 为什么必须是函数?
vuex的State特性是?
介绍一下Vue的响应式系统
computed与watch的区别
介绍一下Vue的生命周期
为什么组件的data必须是一个函数
组件之间是怎么通信的
由于篇幅有限,只能分享部分面试题,更多面试题及答案可以【点击我】阅读下载哦~无偿分享给大家,算是一个感恩回馈吧
React
介绍Redux,主要解决什么问题?数据流程是怎么样的?多个组件使用相同状态如何进行管理?
React-Redux到react组件的连接过
Redux中间件是什么东西,接受几个参数
redux请求中间件如何处理并发
如何配置React-Router
路由的动态加载模块
React生命周期及自己的理解,以及V16对生命周期的修改
为什么使用虚拟dom?
浏览器
跨标签页通讯
浏览器架构
浏览器下事件循环(Event Loop)
从输入 url 到展示的过程
重绘与回流
存储
Web Worker
V8垃圾回收机制
内存泄露
reflow(回流)和repaint(重绘)优化
如何减少重绘和回流?
一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么?