精华内容
下载资源
问答
  • 前端技术
    千次阅读
    2022-03-24 09:39:29

    参考博文:node.js是前端还是后端? - 知乎 (zhihu.com)

    一、概念

    • 前端是指浏览器的执行环境。相反的后端是指服务器的执行环境。
    • 前端技术则是指浏览器端的应用开发技术,包括HTML, CSS, 浏览器JS,Flash,Activex, Applet 等技术。
    • 前端技术栈是指所有辅助前端技术运行的技术,包括前端技术本身,但是又不完全与前端技术本身相同。
    • 前端工具是前端技术栈里的一部分,但是又不属于前端技术。如nodejs

    二、node.js

                    在前端开发里的作用主要还是工具的作用。主要表现在以下方面:

    • 构件开发流程
      主要是将前端的开发过程变的简化,自动化。这类软件主要有gulp, yo, grunt.
    • 构件项目文件
      主要作用是将前端的代码组织起来,包括html, css, js都组成起来,并打包完成。这类工具主要有webpack, browserify, require.js, uglify等

            通过上述的几个功能,就可以通过node.js将前端的代码组织起来,然后通过node的工具软件,将node.js的代码转化成前端的js代码。所以在这种意义上来讲,可以认为:

    •         node.js的开发是前端开发。但是不表示node.js本身是前端。
    •         node.js是以工具的形式,参与到前端开发之中。
    •         node.js的作用就相当于是JAVA的GWT。

            它最终生成的是前端的JS,但是不能说Java属于前端(至少目前还不是),所以虽然前端开发对于node.js的依赖非常的强,但是node.js并不属于前端,node.js只是大量的参与了前端工具链的工作,并提供了更多,更好的前端工具

    更多相关内容
  • web前端技术方案web前端技术方案
  • 2022年前端技术发展趋势

    万次阅读 多人点赞 2022-07-25 14:30:49
    最近,字节跳动技术团队公布了一份关于2022年前端技术的发展趋势预测,总结了新的一年前端技术可能发生的6个变化,下面我们来参考一下。

    最近,字节跳动技术团队公布了一份关于 2022 年前端技术的发展趋势预测,总结了新的一年前端技术可能发生的6个变化,下面我们来参考一下。

    1,前端新标准

    2014 年 10 月 28 日,W3C 正式发布 HTML5.0 推荐标准让前端技术蓬勃发展。虽然 HTML6.0 目前处于提案阶段,但是社区已经开始有了一些零星的讨论,所以可能它离我们并不太远。2022 年,可能 HTML6 并不会推出,但是可能会有更多利于用户体验的提案出现。

    Web1.0到2.0的转变,极大地改变了前端技术,Web3.0时代,可能是去中心化,可能是物联网,可能是人工智能,值得每个前端开发去关注。

    2,框架、工程与体验

    前端框架
    在 StackOverflow 的“最受欢迎的 Web 框架”调查中,除去 SSR 渲染框架和 jQuery,上榜的前端框架共有 5 个:
    在这里插入图片描述

    可以看到,React,Vue,Angular 依然是强势铁三角向前发展。在 2022 年 Vue3 会成为 Vue 的默认版本,React 18 也会发布正式版本,从目前社区关注度来看, Vue3 源码 Github star 27k+, React 18 WG Github star 3.9k+,且在 npm 的下载量上,新版本下载数目都比较可观,所以很有可能今年尝试和使用的人会变得更多。

    打包器

    打包器大概可以分为传统编译和ESM 混合编译,而由于 ESM 混合编译类打包器依赖于其他打包器,所以理论上 NPM 下载量永远不可能超过其依赖。同时 ESM 混合编译今年整体表现平平。

    UI 框架

    由于模块化CSS、摇树、MVVM 的流行,UI 框架的选择其实没有那么举足轻重了,针对自己选用的框架选择一个符合项目风格的 UI 即可。UI框架方面,预计今年也不会有黑马闯入和变动。

    3,搭建智能平台

    3.1 低代码平台

    2021 年开年以来,低代码行业被不断关注,也引发了众多企业的热议与调研。

    低代码发展初期,厂商的类型多样化,传统软件厂商、互联网大厂均涉及低代码领域,通用型厂商相对垂直型厂商应用场景更加广泛,因此厂商数量更多。但随着市场成熟,通用类型厂商竞争加剧,垂直型厂商在细分的领域将会呈现优势明显趋势,可以进一步挖掘用户场景,提升产品能力和用户满意度。及早布局低代码产业生态,多维度拓展厂商优势,才能在未来占据高地。

    3.2 AI 与图形化的探索

    人工智能作为跨时代技术在各个领域大放异彩,近些年 AI 能力在前端领域的尝试与应用带来新一轮的技术革命。

    阿里的 imgcook 可以通过识别设计稿(Sketch / PSD /图片)智能生成 React、Vue、Flutter、小程序等不同种类的代码,并在同年双 11 大促中自动生成了 79.34% 的前端代码,智能生成代码不再只是一个线下实验产品,而是真正产生了价值。
    在这里插入图片描述

    2022 年随着低代码和图形化技术的逐步完善,二者会相互完善和成就彼此。使用者通过 AI 实现页面的还原然后再通过低代码平台对页面进行调整,整个过程基本上不写什么代码就可以完成整个页面的搭建,搭建页面也会变得特别简单。

    4,跨平台技术

    随着从 PC 时代向移动互联网时代演进,原生客户端因为自身天花板的原因也在逐渐向跨平台方案倾斜,当然这得益于跨平台方案的明显优势。对于开发者而言,可以做到一次开发多端复用,这在很大程度上能够降低研发成本,提高产品效能。但是,移动端的跨平台技术并不是仅仅考虑一套代码能够运行在不同场景即可,还需要解决性能、动态性、研发效率以及一致性的问题。

    4.1 React Native Or Flutter

    React Native 是以 Web 技术开发原生移动应用的典型框架。但是与众多基于 Html 的跨平台框架相比,Flutter 绝对是体验最好,性能与构建思路几乎最接近原生开发的框架。

    Flutter 目前虽然有着跨端最好的性能和体验但是关注人数和 React Native 不相上下。React Native 由于先出优势加上 React 的影响力导致目前很多 APP 都已经进入存量阶段,少有新的 APP 出现,所以在没有足够的收益情况下,大部分 APP 是不会进行技术变更的。所以在 2022 年,如果两者都无重大的技术变更,除了对 Flutter 关注的人会逐渐变多,两者大概不会有什么比较大的转变。

    4.2 小程序

    目前主流小程序平台有 10 多家,包括腾讯的微信小程序、QQ 小程序;阿里的支付宝小程序、淘宝轻店铺;字节跳动的头条小程序、抖音小程序;百度小程序等;不同平台的实现标准各不相同,开发者需要学习不同平台的开发规范做定制化开发。

    在这里插入图片描述

    所以在 2019 年 9 月 12 日阿里巴巴主导发起并联合 W3C 中国及国内外厂商起草了 MiniApp 标准化白皮书(MiniApp Standardization White Paper),旨在制定共同标准减少平台差异,并成立了相关工作组。

    截至目前产出了 lifecycle、manifest、packaging 等几篇文档,但从目前来看各平台对这些标准的实现度还很低,并未实现统一,所以这么来看标准化的路看着还很长。在当下,解决跨平台开发问题最有效的手段是使用转换框架进行转换。

    随着一些跨端框架(Uniapp、Taro)的出现部分跨端转换器基本已不再维护。我们接下来了解其他一些跨端转换器相关的内容:

    • wept: 微信小程序实时运行工具,目前支持 Web、iOS 两端的运行环境;
    • hera-cli: 用小程序方式来写跨平台应用的开发框架,可以打包成 Android 、 iOS 应用,以及 H5;
    • weweb-cli: 兼容小程序语法的前端框架,可以用小程序的写法来写 web 应用

    跨端这项技术并非为了完全替代原生开发,针对每个场景我们都可以用原生写出性能最佳的代码。但是这样做工作量太大,实际项目开发中需要掌握效率与优化之间的平衡,跨端的使用场景并不一定是项目级别的,可以是业务级甚至是页面级的。

    跨端的优势在于能让我们在书写更有效率的代码、拥有更丰富的生态的同时,还带来了不错的性能。

    5,泛前端

    “前端开发”的发展历史像是一直在找寻自己的定位;从切图仔、写 HTML 模板的“石器时代”,到前后端分离、大前端的“工业时代”,再到现在跨端技术、低代码的“电气时代”。前端研发的职责一直在改变,同时前端研发需要掌握的技术也在迭代更新。

    5.1 Serverless

    从语义上来理解, serverless 即无服务架构,但是无服务器的说法仅仅是一种概念上的强调,无服务架构仍然在某处存在有服务器,只是开发者无需再像传统开发一样去关注这些基础设施,而是将精力更聚焦在业务实际的逻辑代码之上。

    对比传统的服务器托管方式,使用 serverless 架构开发,开发者无需多关注可用性、扩缩容、监控告警以及安全漏洞等等问题,只需要负责 Faas 层的代码来处理业务逻辑即可。

    5.2 全栈

    “全栈开发者”是指“同时掌握前端、后端以及其他网站开发相关技能的开发者”。全栈开发者能够胜任产品开发的全流程,从前端到后端,从架构设计到代码落地,从自动化测试到运维等。对于公司来说,全栈工程师可以减小公司的用人成本,减少项目沟通成本;对于个人来说,拥有全链路技术有益于技术的闭环,扩展全局思维,提升个人能力和价值。

    5.3 DevOps

    DevOps(Development 和 Operations 的组合词)是一种重视“软件开发人员(Dev)”和“IT 运维技术人员(OPS)”之间沟通合作的文化、运动或惯例。透过自动化“软件交付”和“架构变更”的流程,来使得构建、测试、发布软件能够更加地快捷、频繁和可靠。可以把 DevOps 理解为一个过程、方法与系统的总称。

    6,5G场景带来的新趋势

    5G 的到来对于技术研发工作者的我们而言意味深远。它的出现是数据传输速度、响应速度和连接性的一次巨大飞跃。

    5G 将与超高清视频、VR、AR、消费级云计算、智能家居、智慧城市、车联网、物联网、智能制造等产生深度融合,这些都将为前端技术的发展带来新的增长和机遇。

    6.1 WebAR & WebVR

    元宇宙概念火爆全球,目前的 WebAR 和 WebVR 技术距离实现元宇宙的愿景似乎还很遥远,但借助于以 URL 的格式进行传播的优势,通过社交媒体分享形式进行推广,WebAR 和 WebVR 无疑是用户接触到元宇宙门槛的最便捷的方式,不需要购买昂贵的 VR 设备,不需要安装 APP,通过手机网页就可以进行体验。在 5G 技术逐渐普及的当今,现有的一些体验问题,例如:3D 模型体积较大,初次资源加载耗时长之类的问题也能够得到一些缓解。

    在这里插入图片描述

    那么,问题来了:前端人在这块能够做些什么?从技术上来讲,需要我们通过机器学习算法,实时地将虚拟图像覆盖到用户屏幕,并且和真实世界中的位置进行对齐,结合 WebRTC 技术实现网页浏览器实时获取和展示视频流,再利用 WebGL 的能力,进行 3D 人物模型加载,渲染和播放动画。

    6.2 Web 3D

    随着 5G 技术发展,视频加载速度会非常快,简单的实时渲染会被视频直接替代。复杂的可以通过服务器渲染,将画面传回网页中,只要传输够快,手机的性能就不再是问题。

    降低 web 3D 研发成本应该是将来的一个重要发展路线,随着技术门槛的降低,会吸引更多感兴趣的人加入促使其正向发展。所以 Web 3D 可能会朝着平台化的方向发展,能提供简单高效的工具将成为核心竞争力。

    6.3 WebRTC

    WebRTC 是一项实时通讯技术,它为前端打开了信息传递的新世界大门,对于绝大多数前端开发者来说,对于信息的传递还局限于 XMLHttpRequest,升级到全双工大家会用到 WebSocket ,对于能力闭塞的前端来说,WebRTC 无疑拓宽了前端的技术门路。

    展开全文
  • 前端技术规划与战略:2022

    千次阅读 2022-01-19 00:31:34
    最近几年,因为前端没啥有意思的东西好玩的,主要精力就在工作相关的后端架构咨询和设计上。只是,刚好最近在编写知识管理元框架 Quake ,应用了一些算是比较新的架构思想,特别好玩。所以,这篇...

    最近几年,因为前端没啥有意思的东西好玩的,主要精力就在工作相关的后端架构咨询和设计上。只是,刚好最近在编写知识管理元框架 Quake ,应用了一些算是比较新的架构思想,特别好玩。所以,这篇文章结合一些公司的前端架构需求,社区上的一些趋势,以及自己的探索编写出来的。

    回顾 2021 规划

    开始之前,先回回顾一下我在年初写的《前端规划:我的 2021 前端技术战略》,总体上有四个关键要素:

    • 前端架构治理。主要的点是:大型前端应用、规范之旅。

    • 微前端“普及”。主要的点是:微前端框架成熟、

    • 低代码平台的返璞。主要的点是:重塑用户体验、构建开发者体验。

    • 超越前端。主要的点是:Serverless 一体化、重回跨语言前端(如 Rust 等)。

    总体上来看,基本上和今年的趋势大差不差了(明明还是差很多的)。所以,如果让我去规划 2022 的话,它可能是这样的。

    1. 元宇宙的前端:复兴的前端 3D 世界。

    6 年前,我在玩 VR 探索前端可能性的时候,写了一系列的相关文章,比如那篇《Oculus + Node.js + Three.js 打造VR世界》,还有《JavaScript 在 VR 世界的应用》,总体上,我并不看好普通的前端开发往 VR 世界扩展,它多数是一些图形学相关的知识,需要上手成本会略高一点。

    不过,如果一定要的话,可以参考一下我上个月写的《从 Codecity 到元宇宙:元宇宙的软件形态会怎样的?》。只是从某各意义上来说,元宇宙和狭义上的 Web 前端没有多大的关系,除了技术,我们还需要这么一些知识:

    1. 构建 3D 世界的能力,如结合 Three.js 来进行与 VR 的交互。

    2. 将物体从物理世界复刻虚拟世界。即数据孪生。

    3. 从平面软件到物体建模。

    4. 接入虚拟化与沉浸式。

    所以,如果想做计划储备那就需要:游戏编程、数字孪生、交互设计、协作模式。总体来说,关系不大,它可以构建一个快速的 MVP。

    除了对于元宇宙本身来说,企业对于虚拟形象的热门化,也会带动前端在 3D 世界的发展。

    2. 无组件架构:新的可复用模式

    虽然,我玩微前端玩得很早,一直觉得微前端(MicroFrontend)这名字不好,只是也懒得去纠结。与现有的遗留系统迁移使用的微前端模式相比,我更看好诸如于 ComponentLess 这样的组件模式,有点类似于 Serverless 之于 NanoService。使用更细粒度的 Web Component 组件,可以构建出更小的应用,易于替换与解耦设计。

    回到案例上, 在构建和设计 Quake 应用的时候,我们就是这么玩的:

    • Web Component 作为基础。使用了基于 Web Component 作为应用的基础,在这个基础上套娃(wrapper)了 React 框架的组件、Vue 框架的组件、Angular 框架的组件……。

    • 组件级别的封装。我可以用 React 中的某个框架,可以用 Angular 中的某个框架,只需要封装为 Web Component 即可。

    • 无限套娃模式。可以在 A 组件调用 B 组件,B 组件还可以调用 A,然后无限死循环了。

    • 随意可抛弃式。

    所以,就孕育出了无组件的定义:

    无组件(Componentless)架构是一种架构模式,它是指大量依赖于三方组件(运行时依赖的组件而非编译时依赖的组件,即编译即服务)或暂存容器中运行的自定义代码的前端应用。应用的三方组件如同三方 API 服务一样,可各自独立发布、独立部署,应用无需重新编译、构建和部署。

    3. 低代码及其细化策略

    从模式上来说,在低代码社区里,低代码平台已经初步分为(可以是阶段,也可以是方向):

    • nocode 无代码:不需要写代码就能做出一个应用。

    • lowcode 低代码:仅需写少量代码就可以做出一个应用。

    • procode 专业代码:应用所有的代码都需要开发人员编写。

    对于三种不同的方式,成熟的低代码都有自己的方案。不同公司有不同的策略:在一个平台上支撑三种不同的方式,又或者是在三个平台上支撑三中不同的方式,只是会复用三种不同的基础设施。这些并不重要,重要的是在实现会发现:多数的低代码平台太复杂了,还需要进一步地拆分。

    4. 开发者们的体验

    今年与越来越多的小伙伴们交流起了开发者体验,于是开源了电子书《开发者体验:探索与重塑》(https://dx.phodal.com/)。从趋势来说,在开源继续热火朝天的 2022 年来说,开发者体验应该会成为人们研究该领域的一个新趋势。原先我们假定的是:开发团队应该关注于开发者体验。然而,从国内的实践情况来看,所有与这个平台、工具、SDK 等相关的利益相关者们,都应该关注于开发者体验。尤其是,相关的最高管理者,他们决定了相关项目的 KPI/OKR。

    无论如何,在设计 KPI 的时候,记得:从协同价值出发、以过程改进为核心,引入适当的不可量化指标。

    不过,在写 2021 年规划的时候,我也同样预测了这个趋势。所以,我并不确定他会不会如预期一样。只是呢,在未来的几年里,它是一种不可避免的趋势。

    5. 更好的遗留系统迁移

    对于大部分公司而言,人们对于前端遗留系统的预期是:不花费大量的时间和精力,只需要它能 run 起来,在未来几年后一起重写(这个事可能不会发生)。所以,在 2021 年里,我尝试去扩展遗留系统迁移的方式。

    在 IE 逐渐被淘汰之后,在前端遗留系统的迁移上,我们会有更多的选择,诸如于采用下一代 Web 组件化 Web Components。因此,我们可以采用诸如于领域元组件的方式 —— 它是一个包含特定领域组件(业务场景)的集合。其内部包含了一系列的组件,依赖于输入的领域元数据或者领域特定语言,构建出适用于特定领域的组件。

    当然了,原先的微前端架构、花式构建(组件式构建、拆分式构建)依旧是试用的,只是现在有了更多的方法了。

    6. 有限的改进前端工具

    从 2021 年的趋势来看,已经有越来越多的前端工具,使用 Rust 和 Golang 等 “更快” 的语言编写。所以,这个趋势依旧会在 2022 年继续。毕竟,凡是用 JavaScript 写的,都可能用 Rust 重写一遍。

    只是从个人的体验来说,这种改进方式是有限的,前端应用的构建慢多数是因为前端项目代码量大导致的。所以,除了改进前端工具之外,还有一种出路是减少代码的编译。

    7. 前端元框架

    继续上面的话题,作为一个架构师,跳出具体框架和具体技术栈来考虑问题,便会发现好多事件特别好玩。先前的主要源泉来自于 2018 年构思的:《前端下半场:构建跨框架的 UI 库》,以及去年构思的《Yiki:元微前端框架》。

    过去,我一直构建一个基于 Web Component 的 UI 库,后来太懒了。所以,我就继续用 Ionic 的组件库,配合上上面提到的 NanoComponent,搭建一个 Web Component 路由,我们就可以构建一个全新的前端架构模式。基于此,还可以构建出一个适用于前端框架的元框架。框架本身是用来解决问题,提供生产力的,但是前端框架太多就是个问题。

    这个有待于在 2022 年里,再想想怎么搞。

    8. 探索前端 + AI 的方向

    市面上当前流行的 Design to Code,Product to Code,个人觉得是把牛刀用到了吃鸡上:说不上是有意义的创新。说是在降低工作量,但是可能投入远比这多的工作量 —— 远不如 DSL 来得靠谱 + 可迁移。

    我一直在思考有没有更创建的前端(边缘侧) AI 方向,但是没有想到。我相信聪明的社区会有更多的答案。

    9. DSL as Core

    最后一点,就是过去我一直在玩的东西,DSL as Core。回到这个思想来看的话,我觉得什么设计转代码是不合理的,KPI 思想下的产物。理想的模式,应该是 DSL 生成设计 + DSL 生成代码,类似于 unflow 的思想。这样一来,我们就可以无更顺畅的将业务需求转为设计,并实现它的自动化 所以,在 Quake 中是这么玩的,通过 DSL:

    ---------------------------------------------------------------
    | Calendar(flow("show_calendar"), 12x) |
    ---------------------------------------------------------------
    | Network(<graph-network>, 4x) | Timeline(flow("show_timeline"), 8x) |
    ---------------------------------------------------------------

    就可以生成以下的页面:

    a05f479daa9f750403a802c29eecd862.png

    当然了,上面的 flow 是来自于 DSL,类似于: from('todo','blog').to(<quake-calendar>).filter('created_date > 2021.01.01 AND created_date < 2021.12.31')会自动生成对应的 JavaScript 代码,又或者是任意的后端代码。它可以从数据库中读取 todo 和 blog,然后渲染到 <quake-calendar> 组件中。

    随后,只需要为这些 DSL 创建一个配置页面,就可以实现低代码或者无代码。这种模式并不适合于常规的业务开发, 但是非常的好玩:我需要有 CRUD API,还有组件,我就能提供无限的可能性。

    10. 构建组合式架构

    简单来说,就是提供一个机制来快速组装应用,无论是微前端还是 Componentless 都是相同的目的。这也是我最近正在探索的东西,详细的内容可以年后用一篇文章来探索。

    其它

    和 2020、2021 年相比,相信 2022 年会出现更多好玩的前端技术。

    展开全文
  • 2020 年前端技术发展盘点

    万次阅读 多人点赞 2021-03-30 08:36:09
    但是在 2020 年里面前端技术的发展依然没有停止脚步。 而我们作为前端开发者,必定需要对技术的更新换代有所了解。虽然我们不需要去学习所有新出来的技术。但是时刻保持 “了解” 和 “理解” 这些技术是有必要的。...


    2020 年已经结束,这一年里面因为疫情,生活和工作中大家都有受到一定的影响。但是在 2020 年里面前端技术的发展依然没有停止脚步。

    而我们作为前端开发者,必定需要对技术的更新换代有所了解。虽然我们不需要去学习所有新出来的技术。但是时刻保持 “了解” 和 “理解” 这些技术是有必要的。

    了解这些新的技术和趋势,有效让我们成为更好的开发者,同时在我们日常工作中,这些知识有效帮助我们去解决工作中的技术问题,或者在一个问题中看到更多的解决办法和可能性。

    这篇文章盘点了 2020 年里面,关于前端的一些新技术、它们的发展和趋势

    但是我们并不需要所有都去深入了解,我们的重点应该放在这几个方面:

    • 了解” 这个东西是做什么的
    • 理解” 这个东西是为了解决什么问题的
    • 知道” 这个东西可以怎么使用(使用场景)

    「1」微前端 (Miro frontends)

    “微前端” 应该是我们 2020 年里听的最多的一个前端技术。现在非常多的大厂都在尝试这个新技术来解决大型前端项目中的问题。

    虽然我们前端开发中有模块化(modular)的组件(components),但是它相比后端的 “微服务” 是大有不同的。

    在了解 “微前端” 之前,我们先给没有接触过后端的同学科补一下后端的 “微服务” 知识。

    微服务是什么?

    微服务是一种开发软件的架构和组织方法,其中软件由通过明确定义的 API 进行通信的小型独立服务组成。这些服务由各个小型独立团队负责。

    上面的专业术语不好理解的话,我们也可以这么理解。微服务 —— 也就是把单独一个业务写成一个独立的服务,有独立的服务器、接口体系、并且有一个单独的团队进行开发与维护。

    就比如,淘宝的订单和用户两个 “模块”。一开始这些模块我们可能都会设计在一起的。这样开发起来需要的开发资源和时间就相对比较小。毕竟微服务不是一个 5 - 6 人团队可以 hold 得住的。

    等业务变得非常庞大的时候,随着功能和数据的不断在扩大和延伸。这个时候订单和用户模块都变得非常的复杂。这个时候就需要我们把这两个模块单独的拆离出来开发和维护。因为,如果我们不拆离出来,每次改这些模块的一个小功能,都会涉及很多影响。我们就会发现这个系统越来越难迭代,改一个功能或者 bug 都会开始变得非常的困难。

    这个就是为什么后端提出了微服务这个概念,为了解决大型应用的维护难题。把业务解耦、隔离、独立化就是解决方案。

    既然后端会遇到系统复杂程度过高的情况,自然前端的业务和交互也会越来越复杂。所以最后前端也需要和后端一起建立 “微服务化” 的体系。

    微前端是什么?

    微前端的起源和后端一样,就是一个模块因为业务和功能的持续发展,导致模块内容的代码越来越复杂,越来越庞大,同时就会造成与其他业务有不可避免的互相影响的关系。

    就是这些模块与模块之间的关系,让我们的系统变得越来越难以维护,大大减低了开发的 “敏捷性”。

    那么怎么办呢?我们就让一个大型的 app 的业务,按模块拆分成一个一个小的 “服务” 模块。这些小的模块会与后端的接口一样,放在单独的服务器上运行,同时也会有单独的小团队进行专门的开发和维护。

    这种微型的独立前端架构体系和系统就叫做 “微前端”。

    每个 “微前端” 应用的开发团队,拥有整个应用的生命周期中的自主性。这就包块独立开发、独立版本号管理、独立测试、独立打包、独立渲染、独立更新、独立部署。

    在上面的图中,我们就可以看到微前端在一个研发中心里的组织架构。每一个微前端团队都会负责一个独立的业务模块。每一个模块都会有他们自己的核心业务。与其他业务的功能其实是相对独立的,但是业务的流程上他们就会通过数据流、交互流、接口等方面串联起来。

    最终用户所体验到的系统,其实跟我们普通的应用没有什么区别。但是大型应用的开发和维护的角度来看,就获得了非常多的好处。

    微前端的好处

    • 自主性 —— 可以对每一个微前端应用进行独立的开发、部署、维护和扩展,而不影响其他微前端应用的功能。
    • 专用性 —— 每个微前端应用都是针对一组功能而设计的,并专注于解决特定的问题。如果开发者逐渐将更多的代码增加到一项微前端应用当中,从而让这个微前端应用变得复杂时,那么我们可以将其再次拆分成多项小的微前端应用。
    • 敏捷性 —— 微前端是由若干个小型独立团队形成的一个组织,这些团队负责自己的微前端应用。每个团队在小型而易于理解的环境中进行开发,并且可以更独立,更快速地工作。这个缩短了开发周期的时间。
    • 灵活扩展 —— 通过微前端化应用,我们可以独立扩展组件和功能来满足其他应用的需求。这使团队能够适当调整基础设施需求,准确的衡量功能成本,并在服务需求激增时保持可用性。
    • 轻松部署 —— 微前端支持持续集成和持续交付,可以轻松和放心的尝试新的想法,并可以在无法正常运行时独立回滚某一个应用。由于微前端应用直接都是独立的,所以问题只会发生在自己的应用当中,所以我们可以大胆的试验,更轻松地更新代码,并缩短新功能的上线时间。
    • 技术自由 —— 微前端架构不遵循 “一刀切” 的方法。团队可以自由选择最佳的工具或者框架来解决他们的具体问题。也就是说一个微前端应用可能是用 Vue,然后另外一个可能是用 React 也不是不可以的。因此,构建微服务的团队可以自行选择最佳的工具或者框架。
    • 可重复使用 —— 将前端应用划分成明确定义的模块,让团队可以将功能用于多种目的。专为某项功能编写的前端模块可以用作另一项功能的构建模块。这样应用程序就可以自行引导,因为开发者可以创建新的功能,而无需从头开始编写代码。
    • 弹性 —— 前端应用独立增加了应用程序应对故障的弹性。在整体式架构中,如果一个组件出现故障,可能导致整个应用程序无法运行。通过微前端的拆分架构,应用程序可以通过降低功能而不导致整个应用程序崩溃来处理总体服务故障。

    微前端案例

    我们了解了微前端是什么,并且它有什么用。那么我们来看看一个微前端在实际开发场景中是怎么样的。

    这里幻想一下,我们有一个博客的主页。主要的功能就是为了展示我们的文章内容。当然一个博客其实很简单,在正常开发场景下,也不会给它做微前端的架构设计。

    但是如果我们真的想把它做的更强大,那也是可以的:

    • 首先当用户进入我们的首页,可以看到文章的列表,并且用户可以通过关键词来搜索文章。同时也可以通过分类、标签来搜索。更复杂一点的话,我们还可以根据阅读量,热度(通过算法计算热度)来排序和搜索。
    • 每一篇文章必然会有一个详情页,每个详情页都需要展示文章的详细文本。如果我们想加大难度的话,我们还可以根据标签和用户日常的文章浏览记录,来推算用户会对其他什么文章感兴趣。这个时候我们就可以加入相关推荐的文章列表了。
    • 博客必然就会有博主的介绍页(About)、文章分类页(Categories)和文章标签页(Tags)。

    当然这个还不是很复杂,但是当我们继续往这个博客平台加入更多的功能,比如最后做成 CSDN、掘金、知乎这样的平台的时候,那么微前端就有必要了!

    微前端集成方法

    好,如果真的有那么一天,我们变成一个很大的博客平台。那么我们要怎么运用微前端呢?其实集成方法有很多种:

    • 服务器端模板组合 (Server-side template composition)
    • 构建时集成 (Build-time integration)
    • 通过 iframes 在运行时集成 (Run-time integration via iframes)
    • 通过 JavaScript 在运行时集成 (Run-time integration via JavaScript)
    • 通过 Web 组件在运行时集成 (Run-time integration via Web Components)

    我们这里就不一一去讲解了,如果我们真的哪一天遇到一个场景需要我们用微前端去解决我们的技术难题时。我们再去深入学习微前端即可。这里主要的目的是让我们了解清楚微前端是什么能解决什么,它是怎么解决的即可。

    其实所有的集成方法,都围绕着一个很自然的设计模式 —— 一个应用里面的每一个页面都是一个 “单独的” 微前端应用。而在每一个页面中都会有一个“单独的应用容器(single container application),而它的作用就是:

    • 渲染页面公共头部(headers)和脚步(footers)
    • 解决 “横切关注点(Cross-cutting concern)”,比如身份验证和导航
    • 把多个微前端应用放在一个页面之中,并且告诉每一个微前端应用在什么时候和在哪里渲染到页面上。

    大概的页面设计如下:

    注意我们这里只讲到微前端的皮毛,其实微前端最核心并不在前端,更多的难点都是在 “云服务器”。如果没有服务器架构、部署、测试和后端接口等等的支撑,微前端是很难以实现的。所以在一般公司的应用场景,其实根本用不上微前端。如果用不上,了解到这里其实已经可以了。到用得上的时候再去深挖更多的知识即可!


    「2」原子设计 (Atomic Design)

    原子设计也是在 2020 年里面提到的非常多的一个概念。不过这个更多只是一个概念,并不是一个纯方法论。

    这个概念是 Brad Frost 提出的,他用化学中的原子组成来分析和拆解一个 web 应用的组成成分。里面包换原子(Atoms)、分子(Molecules)、生物体(Organisms)等。

    比如一个搜索分子(Search Molecule)就是由 input-text(输入文本)+ button(按钮)+ label(标题)等原子所组成。然后这些分子组合起来就会变成一个生物体(Organism)。

    而生物体(Organism)就会生存在我们页面的布局模版之中,而这些就可以具体化成一个页面,最后显示给到我们的用户。

    Brad Frost 把我们前端的组件和界面的设计抽象成化学中的原子组成结构。让我们更加清晰的去理解一个页面、一个组件、一个元素的组成方式。

    其实这个概念,可以让我们用一个全新的角度去看待模块化 UI(modular UI)。这种思维方式让我们更深入的理解一个组件的作用和 API,从而在设计组件的时候会更加的清晰和高效。

    一个简单易懂的表示图:

    原子(Atom)是什么?

    原子是物质的基本组成部分。而在组件设计中,原子就是一个组件的最小元素单位,一个组件都是用多个原子所组成的。

    在 web 界面中,原子就可以是:HTML 标签

    • 表格的 label
    • 输入框 input
    • 按钮 button

    原子单独使用是没有任何意义的,一般都是需要组合其他原子一起使用才能真正发挥它们的作用。

    分子(Molecule)是什么?

    当我们把原子(Atoms)结合在一起时,事情开始变得更加的有趣。分子(Molecule)是一组结合在一起的原子,是化合物中最小的基本单位。每一个分子都有自己的特性,是我们设计系统的支柱(Backbone)。

    比如,一个表格标题、输入框、按钮等元素,它们单独使用时没有太大用处的。但是如果我们把它们组合在一起,变成一个表格。这个时候它们就可以使用了。

    在我们用原子组合分子时,我们需要遵循一个原则:“只做一件事,并且做好”。(这个听起来是不是有点像设计模式里面的:“单一职责”?是的,就是这个意思。)虽然分子可能很复杂,但根据经验,他们相对而然都是一些简单的原子而组成的,主要是为了可复用性而生。

    生物(Organism)是什么?

    分子可以作为我们组建界面的积木。我们可以把分子组合在一起来建立一个生物体(也就是我们的一个界面)。生物体是用一组分子组合而成的,而组成的生物体是界面的其中一部分,它有相对复杂,独特的特性。

    就比如上图,我们在组合了一个网页 logo 部分的分子。然后我们把搜索分子和 logo 分子再组合在一起,就变成了界面上头部(生物体)的部分(header organism)。

    这个就会开始变得越来越有趣了,生物体不是一个固定的组件,它是用多个分子所组合而成。不同的生物体可能存在使用相同的分子或者原子,但是他们的作用都是有所不同的。

    就比如,我们的 logo 和文章图片两个不同的分子,他们都使用了 img 图片标签这个原子。但是这个 img 原子是放在了两个不同职责的分子里面,一个是用在头部作为 logo 展示的,一个是用在文章列表用来展示图片的。

    所以在组建分子和用分子组件生物体的时候,我们创建的组件必须是独立的、可移植、可重用的

    模版(Templates)

    有了分子组成的生物体(Organism)后, 我们就可以用这些生物体来组建我们的界面模版。这里我们就可以打破化学的类比,拥有对用户和最终输出更有意义的东西。

    模版主要是由多个生物体缝合在一起而形成的页面。在这里,我们开始看到组件和模块的设计开始融合在一起,可以看到布局之类的东西开始有所体现了。

    模版是非常具体化的,它为所有的这些相对抽象的分子和生物体提供了上下文。模版阶段也是用户可以开始看到设计界面的地方。根据这个设计的创作者 Brad Frost 的使用经验,模版一开始是 HTML 线框,但随着时间的推移,它的保真度会逐渐提高,最终成为可交付的产品。

    页面(Pages)

    页面(pages)是模版的特定实例。这里,占位符内容被真实的、有代表性的内容所取代,以准确地表现方式描述了用户最终将要看到的内容。

    页面是最真实的,因为它们是最有形态的,它通常是大多数人在开发过程中花最多时间来处理和优化的部分。

    页面这个阶段非常的重要,因为这里是我们测试设计系统有效性的地方。在上下文本中查看一切,是我们能够回头来修改我们的分子(Molecules)、生物体(Organism)和模版(Templates)的阶段。

    页面也是测试模版变化的地方。例如,我们可能想清楚地表达包含40个字符的标题最终展示到给用户是什么样子的,但是也想演示340个字符是什么样子。当用户的购物车中有一件商品应用了折扣的时候,商品的展示会是怎么样的。这些实际的情况会影响我们如何循环和构建我们的应用。

    为什么用原子设计理念?

    我们简单理解了原子设计后,我们就可以问问,为什么要用原子设计呢?

    其实答案很简单,我们平时去设计一个应用的时候,即使我们没有意识去使用这种思维方式,但是我们一直都是以这种方式在设计的。

    原子设计为设计系统提供了一种清晰的方式轮(概念为主),团队成员(开发者、产品经理、设计师等)能够通过实际看到的,摆在他们面前的步骤来更好地理解设计系统的概念。

    原子设计赋予我们从抽象到具体的能力。正因如此,我们可以创建促进一致性和可伸缩性的系统,同时在最终的页面中显示内容。

    重点是通过组合而不是解耦的方式来构建应用。我们在一开始就创造了一个系统,而不是在事后才去挑选模式。


    「3」封装样式和 Shadow DOM

    组件开发最重要的一个方面是封装(Encapsulation)—— 就是能把标记(markup)和行为隐藏起来,并与页面上的其他代码分开,这样不同的部分就不会冲突,代码也可以保持整洁。

    而要做到这样,Shadow DOM API 就是关键。它可以将一个隐藏的、独立的 DOM 附加到一个元素上。

    Shadow DOM 允许将隐藏的 DOM 树附加到常规的 DOM 树中——它以 shadow root 节点为起始根节点,在这个根节点的下方,可以是任意元素,和普通的 DOM 元素一样。

    这里,有一些 Shadow DOM 特有的术语需要我们了解:

    • Shadow host:一个常规 DOM节点,Shadow DOM 会被附加到这个节点上。
    • Shadow tree:Shadow DOM内部的DOM树。
    • Shadow boundary:Shadow DOM结束的地方,也是常规 DOM开始的地方。
    • Shadow root: Shadow tree的根节点。

    我们可以使用与常规 DOM 一样的方式来操作 Shadow DOM —— 例如,添加一个子节点、设置属性、以及为节点添加自己的样式,或者为整个 Shadow DOM 添加样式。

    与普通 DOM 不一样的是,Shadow DOM 内部的元素始终不会影响它外部的元素(除了 :focus-within),这为封装提供了便利。

    其实 Shadow DOM 并不是一个全新的东西,它已经被浏览器使用了很长一段时间了。浏览器用它来封装一个写元素的内部结构,以一个有着默认播放控制按钮 <video> 元素为例。

    我们所能看到的只是一个 <video> 标签,实际上,在它的 Shadow DOM 中,包含了一系列的按钮和其他控制器。Shadow DOM 标准允许我们自己的元素(custom element)维护一组 Shadow DOM。

    这种方式也常常被认同为是组件样式封装的最佳解决方案。

    基本用法

    首先我们可以使用 Element.attachShadow() 方法来将一个 shadow root 附加到任何一个元素上。

    这个方法接受一个配置对象作为参数,这个对象有一个 mode 属性,它的值可以是 open 或者 closed

    let shadow = elementRef.attachShadow({mode: 'open'});
    let shadow = elementRef.attachShadow({mode: 'closed'});
    

    open: 表示可以通过页面内的 JavaScript 方法来获取 Shadow DOM, 例如使用 Element.shadowRoot 属性:

    let myShadowDOM = myCustomElem.shadowRoot;
    

    但是如果我们把 Shadow root 附加到一个自定义元素(Custom element)上,并且把 mode 设置为 closed,那么我们就不可以从外部获取到 Shadow DOM 了 —— myCustomElem.shadowRoot 将会返回 null

    其实浏览器中的 <video> 就是这样的,里面就包含了一个不可访问的 Shadow DOM。

    如果你想将一个 Shadow DOM 附加到 custom element 上,可以在 custom element 的构造函数中添加如下实现(目前,这是 shadow DOM 最实用的用法):

    let shadow = this.attachShadow({mode: 'open'});
    

    将 Shadow DOM 附加到一个元素之后,就可以使用 DOM APIs 对它进行操作,就和处理常规 DOM 一样。

    var para = document.createElement('p');
    shadow.appendChild(para);
    

    详细的使用方式,可以直接去看 MDN 的 《使用 shadow DOM》。


    「4」TypeScript 的崛起

    最近也有不少文章讲的好像 TypeScript 要一统整个前端江湖。有报告统计,80% 的开发者承认,他们想在下一个项目中使用或者学习 TypeScript。

    虽然 TypeScript 还是有它的缺点的,但它让代码更容易理解(对于习惯编写面向对象的同学,确实好理解,但是不熟悉面向对象的同学,就有点难受了)。并且 TypeScript 有利于快速实现,上生产后的 bug 也更少。

    那么我们应不应该转 TypeScript 呢?在决定之前,我们还是冷静一下,看看使用 TypeScript 的优缺点,然后根据我们自己团队的技术情况再做选择才是合理的。

    使用 TS 的好处

    1. 代码更容易理解

    很多时候当我们在看一段代码中的一个函数,我们都会问以下问题:

    1. 这个参数是可以接受那些的呢?
    2. 函数会返回什么值呢?
    3. 它需要什么外部数据呢?
    4. 它做了什么可以把输入参数变成输出的返回值呢?

    在动态类型语言中,通常很难回答前三个问题。

    但是在像 TypeScript 这样的静态类型语言中,我们可以立即从 IDE 和编译器中得到上述的所有问题的答案。 不再需要查看整个代码库,不断地向我们的同事提出问题,或者在生产上出错误的风险。

    2. 更容易,更快的实现代码

    当我想要实现一个新的功能或者组件,我们的工作流大概是这样子的:

    1. 初始化组件函数,建立它的构造函数的参数,编写剩下的代码。
    2. 如果它需要任何外部或复杂的数据(如用户或文章),那么就要将它保存在我们自己的内存中,并在代码中使用它。
    3. 将组件放入你的应用中,并将 props 传递给它。
    4. 然后就是测试这个组件,手动或者使用单元测试(这里我们需要确保它能接收到该有的 props,并且它能正常工作。)
    5. 如果有什么地方出现了 bug,那么就要回到我们的代码,试着找到哪里出了问题。再回到第 1 步。

    上述是在使用 JavaScript 的开发流,那么如果我们用的是 TypeScript 的话就会变得更简单,更高效了:

    1. 初始化组件函数,定义它的类型,并且实现它。
    2. 如果它需要任何外部或复杂的数据,直接查找它们的接口并复用它们(全部或部分)。
    3. 将组件放入你的应用中,并将 props 传递给它。
    4. 就是这样!(如果在调用者和被调用者之间正确地匹配了类型定义,那么一切都应该能够完美地工作。现在唯一需要测试的是组件的实际业务逻辑。)

    是不是简单很多了?这个也是为什么 TypeScript 出现低级错误概的率会更少的原因。

    3. 代码容易重构

    在开发中,我们肯定是会有很多代码在编写后,都需要我们去重构的。但是因为往往都涉及太多的东西和文件,所以我们开发者一听到一个项目需要重构代码基本都是这样:

    在 TypeScript 中,这类重构的事情变得不那么可怕。往往一个重构只需要轻轻在 IDE 中按一下 “重命名符号(Rename Symbol)” 命令即可。

    在动态类型语言中,同时重构多个文件时,我们能得到的最好的帮助就是使用RegExp 进行搜索和替换。

    而在静态类型语言中,不再需要搜索和替换了。使用IDE命令,如“查找所有出现的情况”和“重命名符号”,可以看到应用程序中特定的函数、类或对象接口属性的所有出现情况。

    如果我们想稍微改进我们的构建系统、重命名组件、还是修改对象或者删除废弃的属性,我们都不必担心破坏任何东西。TypeScript 会帮助我们找到重构后的这些相关联的东西的用法,重新命名它,并如果在我们重构后出现了类型不匹配的情况,它就会发出编译错误的警告。

    4. 更少的 bugs

    做了多年的前端开发,我们都知道如果有一个人在我们旁边,当我们拼写错变量名、使用了一个不一定会是 null 的值、或者传了一个对象类型参数给一个接收数组类型的函数的时候,能提醒一下我们,那么我们就可以省下 50% 的排错时间。

    很高兴的告诉大家,这个好基友就是 TypeScript。

    多谢它,现在想编写一个 bug 也变得相对难了。当我们的代码打包的时候,我们可以大概知道我们的代码是可以运行的通的。

    5. 更少的样板测试

    当我们确定我们传的参数是对的,那么我们就不用去测试所有地方调用了某个方法是否会报错,对方有没有用对参数,用对类型,用对我们提供的方法。

    少了这些的顾虑,我们就可以更多的集中在编写业务逻辑的单元测试,而不是代码的语法和准确性的保障测试。

    既然我们减少了检测代码中报错的问题,我们就可以花更多的时间来完成新功能和需求。这样我们的代码就不会很复杂,更不容易出错,更容易维护。

    6. 帮助开发者写更好的代码

    当我们在编写静态类型语言时,首先我们要思考,我们需要的数据类型是怎么样的,然后想我们想产出的数据又是怎么样的。这个过程就需要在我们坐下来开始写代码之前就要想清楚。

    其实还有很多同学在开始实现一个功能和需求之前,缺乏了思考和分析。没有认真的思考过整个代码如何编写和逻辑的思路、实现的方法、数据的类型、函数的结构等。但是对于老司机程序员来说,很多都是先思考然后才去动键盘的。

    那么 TypeScript 就会要求我们遵循这种好的开发思维。它鼓励我们在坐下来实现功能和代码之前,先要考虑清楚我们要实现的功能的接口类。

    TypeScript 的缺点

    说了那么多 TypeScript 的优点,我们也来讲讲它的缺点。

    1. 需要编译步骤

    如果我们是开发 node.js 后端的开发者,使用 TypeScript 确实会变得比较麻烦。因为我们需要先编译了 .ts 的文件,然后才能在 Node 上去运行。

    当然如果我们有一个好的打包工具链,这个问题还是可以解决的。但是确实会给 Node.js 后端的同学带来本来没有的麻烦。

    不过相对前端开发者来说,这个并不是任何问题。因为现代的前端开发流程,我们都会把所有的前端代码通过 webpackgrunt 等打包工具来编译我们的代码。

    那么 .ts 文件在这个过程已经自动的帮我们编译过来了。所以我们不需要做任何附加的步骤。顶多也是在打包工具中使用 npm 多安装一个编译插件。

    2. 设置起来有点困难

    不可置疑,这一点确实是事实。比如,在普通 Next.js 和使用 TypeScript 的 Next.js 之间,使用了 TypeScript 我们就要附加 Node.js 服务器、webpack 和 jest test 测试工具。

    还有,当我们需要添加一个像 React、Redux、Styled-Components 等 library 的时候,我们都要为他们附加 typedefs。(比如 @types/styled-components,不过有一些包本身就自带有 TS typedefs 文件)

    但我觉得这些问题并不大,因为在长期开发和维护一个项目的过程中,安装依赖包和设置一个 TypeScript 项目,相对比我们平时编写算法和业务逻辑的频率,其实是非常微小的一部分。基本上这些繁琐的事情都是一次过搞好就行,如果还是觉得繁琐,做一个 toolchain 工具,每次需要操作这些重复的事情的时候,直接用工具帮我们构建即可。

    那要不要用 TypeScript 呢?

    TypeScript 固然是好,毕竟 Vue 3 的重构中也在很多语言中最后选择了 TypeScript 作为他们的核心语言。

    所以 TypeScript 的好处是显而易见的。但是任何的技术选型都要看我们自己所在的团队和公司。如果有 10 个开发者,9 个都不会 TypeScript,并且都不太愿意去学,或者公司根本给不到时间让我们团队去学习新的语言。

    那么选择换这个语言就不是最佳的选择。

    没有最好的技术,只有最合适当下使用的技术。


    「5」Web 组件

    Web 组件就是前端的未来。 为什么呢?

    因为纯 web 组件与任何的前端框架无关,他们可以在没有框架或者使用任何框架的情况下工作。

    因为这些组件更加不受 “JS 疲劳(JavaScript Fatigue)” 所控制,并且大部分浏览器都是支持的。

    因为它们的包大小和消耗是更有优势的,加上 VDOM 渲染拥有令人震惊的能力。

    这些组件提供了自定义元素、一个 Javascript API (允许我们定义一种新的 html 标记)、html 模板来指定布局,当然还有 Shadow DOM(本质上是特定于组件的)。

    这里解释一下什么是 JS 疲劳 —— 就是当我们想学习前端的时候,第一个接触的语言必然就是 JavaScript,但是一旦开展学习后,就会发现这个水是真的深,一大窜的其他关联知识就会如同潮水一样扑面而来。包括,前端框架、Node.js、UI 框架、浏览器知识、工具链等等。学习前端一开始确实是一个非常疲劳的一个领域。

    当我们思考未来 UI 开发,以及模块化、可重用性、封装性和标准化的原则时,组件(化)时代应该是怎么样子时,web 组件就会浮现在未来的蓝图上。

    想了解更多关于组件化的知识,可以前往我的组件化系列文章:

    这个系列还在持续更新中~


    「6」状态管理:再见 Redux?

    无论是 React 的 Redux 还是 Vue 的 Vuex 其实都是特别难搞的大魔头。尽管随着前端变得越来越模块化,在应用程序中的全局状态管理变得越来越难以控制。但是状态管理(State Management) 像 Redux 和 Vuex 的实用性和实用性使他们成为许多团队的首选解决方案。

    所以我们在 2020 年之后可以和 Redux 说再见了吗?不,不完全可以。

    然而,在前端框架中开始出现内部状态管理体系(如 React hook、Context-API 等),未来很有可能会废除掉对框架以外的状态管理的依赖。

    像 Mobx,一开始这些类型的技术还很少被采用,但是由于它们面向组件和可延伸性的特性,仅仅在 2020 年这一年内,它们开始变得越来越流行,让我们开发者可以探索更多的选择。

    想了解更多,可以去了解一下 MobX 的官方文档。

    MobX 是一个经过战火洗礼的库,它通过透明的函数响应式编程(transparently applying functional reactive programming - TFRP)使得状态管理变得简单和可扩展。MobX背后的哲学很简单:

    • 任何源自应用状态的东西都应该自动地获得。
    • 其中包括UI、数据序列化、服务器通讯,等等。

    「7」ESM CDN

    ES 模块就是在浏览器使用模块时的标准,而 ES 模块就是被 ECMAScript 所标准化的。使用 ES 模块,你可以很容易地将功能封装到模块中,这些模块可以通过 CDN 来使用。

    随着 Firefox 60 的发布,所有主流浏览器都将支持 ES 模块,Node mteam 正在努力向 Node.js 中添加 ES 模块的支持。此外,WebAssembly 的 ES 模块集成也将在未来几年内推出。


    「8」渐进式网络应用(PWA)

    渐进式网络应用也叫 Progressive Web Apps —— 它利用最新的技术将网页和移动应用程序结合起来。可以把 PWA 想成一个使用 web 技术的网站,但是行为和感觉是一个应用程序(APP)。最近在浏览器、服务的可用性 worker、Push APIs 的发展与进步,允许了用户在桌面安装 web 应用程序,甚至接收推送通知和离线工作。

    由于 PWA 提供了亲密的用户体验,而且所有的网络请求都可以通过 service worker 被拦截。因此,必须将应用托管在 HTTPS 上,从而防止 “中间人” 攻击,这也意味着更好的安全性。

    当然,PWAs 仍然有局限性,它们不能完全替代本地应用。(不过,它们真的需要那么做吗?)特别是,由于本质上是网页,PWAs 不能使用大多数硬件功能,如 NFC 和蓝牙。然而,并不是所有的应用程序都需要这些功能。

    不过 PWAs 开发起来更快、更容易、更便宜,这就是为什么它们在 2020 年成为开发的趋势,并且在下一年肯定会继续成为趋势的原因。


    「9」WebAssembly (WASM)

    JavaScript 很棒,但是也不是没有缺点。 JavaScript 是存在性能问题的。所有解析型语言都面临同样的问题,而 WebAssembly 是解决这个问题的最新途径。

    WebAssembly 最好的一个点是,它并不是一门全新的语言。我们可以用自己喜欢的语言来编写,然后将其编译成 WASM 文件,以便在浏览器中运行。WebAsssembly 目前支持的语言有 C/c++、Elixir、Python、Go、c#/.Net 和 Java。

    WebAssembly 不是最近才有的,它已经上市好几年了。但它发展的迅速,提供了越来越多的选择。默认情况下,现在所有主流浏览器都支持它,如果程序员 能拥有它是一件非常有益的事情。


    「10」可访问性(a11y)

    可访问性,也叫 Accessibility —— 这是 web 应用层序开发中最重要的东西之一。我们相信可访问性,应该是每一个网站开发者的任务列表中的首要任务,不仅是新网站,而旧网站的更新也是一样。

    可访问性(或 a11y)是一个计算机系统对用户的 “方便性” 的考量原则。网站应该能在各种设备上正常运行。但它们应该适用于各种“障碍”和“残疾”的用户。A11y 通常指软件和硬件的可访问性。

    在网页开发方面,可以透过以下途径达成易读性:

    • 更大或可自定义的字体大小
    • 可选的高对比度的页面
    • 支持语音合成/文本到语音的转换
    • 视频字母
    • 所有语音都附有文本
    • 导航语音识别
    • 纯语言文字
    • 突出重要部分
    • 一致的导航和尽可能少的步骤
    • 简化授权(但不牺牲安全性)
    • 用键盘导航,而不是鼠标/触控板
    • 语义 HTML

    a11y 这个名字来自于 “accessibility” 中有 13 个字母,所以在 “a” 和 “y” 之间有 11 个字母。但如果你仔细看,a11y 看起来像 “ally” 这个词 —— 意思是朋友、助手、拍档的意思。

    「11」JavaScript 框架 (Frameworks)

    最后我们来讲一下 2020 年中一些我们可以关注的前端框架。

    Gatsby.js

    Gatsby 是一个 SSG,全称是 Static Site Generator静态站点生成器)。如果我们认为静态站点已经成为过去,反而它们是全新的技术趋势。

    GatsbyJs 最大的优点之一是它不需要传统的服务器;它与 BYOC(Bring Your Own Content —— 自带内容)一起工作,可以基于 CMS、CSV、API 和 markdown 文件中的数据构建网站。Gatsby 还使用一种高端 API 查询语言 GraphQL 来构建数据层。

    掌握 GatsbyJs 要求开发者了解 React Native 和/或 GraphQL,但我们不需要马上就有深入的知识 —— 我们可以同时学习 Gatsby + React Native + GraphQL,也就是边学着做 Gatsby 边学习 React 和 GraphQL。

    因为 GatsbyJs 是一个 SSG,所以它非常适合开发电子商务网站。这个基于 React 的生成器,可以帮助我们在一瞬间就能加载完网站。我们这里说的不是秒,而是毫秒级的加载速度。任何电子商务企业所有者都知道,有时页面加载时的延迟,会对客户是否购买产品产生很大的影响。这个也适用于其他类型的网站。

    Vue 3 - One piece

    2019 年的 6 月底,Evan You(尤雨溪)和 vuejs 背后的团队发布了一个关于 Vue 3 框架的新迭代的 RFC(征求意见 —— Request For Comment),在社区中遇到了相当多的否定。但是最后这个事实证明,这些负面的反馈并没有那么影响 Vue 3。

    一些 web 开发者陷入困境,因为 Vue.js 突然有了一个基于函数的组件 API(Component API)来取代大部分人已经熟悉的对象 API。然而,这并不完全正确,新的基于函数的组件 API 是对排序的补充,如果我们愿意,我们是可以与传统的对象 API 一起使用的。

    Vue 3 组合 API 中的新语法具有更好的逻辑性,有助于更好的代码结构。一些开发者甚至说它稍微缩短了代码。而且 Vue 3 架构可以作为 Vue 2 的插件使用,只需要使用 Vue Composition(组合式) 库即可。

    然后在 2020 年 9 月 18 日,Vue 3 的正式版发布了,命名为 One Piece(这个名字很多同学一看就知道来源于海贼王)。

    Vue 3 带来的新特性

    1. 性能

    • 双向相应原理由 Object.defineProptry 改为基于ES6 的 Proxy,这样使颗粒度更大,速度更快,从而消除了之前存在的警告;
    • 重写了 Vdom,突破了 Vdom 的性能瓶颈;
    • 进行了模块编译的优化;
    • 进行了更高效的组件初始化逻辑;

    2. Tree-Shaking 支持

    支持了 tree-shaking(剪枝):像修剪树叶一样把不需要的东西给剪切掉,这样 Vue 3 的体积就变得更小了。

    因为有了 tree-shaking,vue 3 中的模块只有需要的时候才会被打入到包里。优化后, Vue 3 打包出来的体积将会是原来的一半(仅 13kb)。就算我们把所有的功能都引入了,打包出来也只有 23kb,依然还是比 Vue 2.x 更小。

    有了这个,像 keep-alivetransition、甚至 v-for 都是可以按需引入了。

    3. Composition API

    其实 Composition API 的灵感来自于 React Hooks, 它是比 mixin 更强大的存在。它可以提高代码逻辑的复用性,从而实现与模版的独立性;同时函数式的编程代码的可压缩性更强。

    另外,Reactivity 在 Vue 3 中独立开来,意味着 Vue 3 的响应式模块可以与任何其他的框架相组合使用。

    4. Fragments

    不再限制 template 只有一个根结点。并且 render 函数也支持返回数组,有点像 React 中的 React.Fragments

    5. 更好的 TypeScript 支持

    Vue 3 拥有更好的类型推导,使得 TypeScript 的支持变得非常好。

    6. 自定义 Renderer API

    实现了用 DOM 的方式进行 WebGL 编程。


    Svelte.js

    Rich Harris 在 2019 年的 JSConf EU 上发布,Svelte(中文意思是 “苗条”)与 Vue相似又不同。类似的是,它也是一个组件架构。然而,与 Vue 不同的是,Svelte 的组件编译器是在构建时(Build Time)运行的。这使得我们可以只加载需要展示目前 APP 的组件。我们不需要使用任何的虚拟 DOM(Virtual DOM)。

    Svelte 使用一套简单的语法,使开发者能够从标记访问变量,而不是使用每个框架都不一样的状态包装器(state wrapper)。这就使得 Svelte 成为 web 开发新手的一个近乎完美的框架(就是非常好上手)。而对于有丰富经验的开发者来说,Svelte 意味着可以更快地编写代码,从而获得更高性能的网站。

    在它发布之后的一年里,Svelte 经历了许多的重大改进和更新,最终形成了许多开发人员现在所说的,最简单和最漂亮的框架之一


    「12」CSS 框架

    框架就是为了使一切变得更简单,其中包括被众多历史遗留困扰的 CSS。让我们看看 2020 年里 CSS 中流行的技术。

    Houdini CSS

    在最新的 web 发展趋势中,Houdini(取名于著名的魔术师 Harry Houdini)是一个非常独特的框架。基本上,Houdini 是一个 API 集合,为开发者提供了对 CSS 对象模型的访问。这个意味着,如果你需要 CSS 中还没有的样式,没有必要用 JavaScript 去修改或者覆盖。我们直接使用 Houdini CSS 架构,就可以编写被浏览器视为 CSS 并被解析的代码去操作样式。

    使用这种方式可以使解析花费的时间更少,开发者不需要等待浏览器提供商扩展的 CSS,设计可以变得更加易于定制和更独特。

    不过还有一个问题:并不是所有的主流浏览器都支持 Houdini。但是现在我们只能等待这个框架被所有主流浏览器支持。

    Bulma

    Bulma 是现代的行业趋势之一。他是用 Sass 扩展构建的,基于 CSS 灵活的框布局模块,或也被称为 Flex 布局。 Flexbox 是一个经常用于构建响应式网站的模块。

    Bulma 是一个免费的开源 CSS 框架,它提供了一系列由社区创建的主题,这些主题都遵循这一个原则,就是尽可能的少写样式。由于使用了 Sass 构建,它实现起来非常简单,而且可以自定义。由于 Bulma CSS 代码的简单性,用它构建的网站通常与所有浏览器兼容,几乎没有问题。目前,它是开发者中最流行的 CSS 框架之一,而且看起来在 2021 年里面还是会保持这一个地位。

    Tailwind

    Tailwind CSS 框架已经存在一段时间了,但是在 2020 年才得到更高的关注度。

    如果我们看谷歌的热度趋势图,我们可以看到 Tailwind CSS 的热度还在持续的往上升。

    Tailwind 的特别之处在于它不是一个 UI 工具包,这使它与其他 CSS 框架不同。它没有内置的 UI 组件,相反, Tailwind 提供了一组部件(英文叫 widgets)来快速的开发出 UI 组件或者界面,而这些部件是使用一系列的 class 工具叫 Atomic CSS 。这意味着我们可以按照自己的需求从头开始构建或者自定义开发 UI 组件,而不被其他 CSS 框架提供的主题和样式所限制。

    不过,我们需要熟悉这套 Atomic CSS 工具,这就使得对开发者来说使用 Tailwind 会更有一点挑战性和学习曲线。好的一面就是,它会给我们最自由的 UI 开发体验,并且可以快速实现 UI 组件样式和易于维护。


    总结

    在 2020 年里面,前端领域依然在高速发展中。新的技术在不停的涌出,已有的技术和框架也在不断的更新迭代。随着技术的发展,前端这个领域在 2021 年里面依然会继续以光速发展。

    很多在前端领域的同学在很多群里都会说 “不要再更新啦,不要再出新的框架啦,学不动了~

    所以我们真的所有的新技术都要学吗?并不是的,重点是我们不要为了技术而技术,而是为了解决问题而学一门新技术。我觉得这个很值得我们深思的。

    我反而觉得,重点不是框架那个以后发展更好,而是了解每个框架为什么存在,当下有什么问题导致有了这些框架,以后可能会有什么问题,可能需要什么东西来解决。

    说到这里很多同学就会问,“那么我们应该往哪个方面发展呢“ ?

    我觉得月影老师说的可以参考:

    ”基础和底层知识,基础和底层知识,基础和底层知识。”

    因为所有框架也好,新技术也好。我们也不确定以后会出来什么,最后哪个可能会一统天下,或者那个会默默的隐退江湖。

    所以重点是我们需要学习,保持可以快速上手任何框架和技术的能力。其实无论是 Vue,React,Angular 还是 Flutter。底层不都是 JavaScript 吗?甚至 Node.js 也是。然后更底层呢?不就是计算机基础知识吗?如果我们这些学通透了,那么以后出来什么各种花样,难道我们不能在一周内学会吗?(可能不能一周内,但是快速上手还是可以的嘛)

    基础知识还有像数学,这些都是永世不会变的知识。而往往这些知识都是我们开发者的基础。而这些基础才是我们真正能适应这个技术高速发展的时代。也是这些基础让我们不会害怕任何的变化。因为我们拥有可以适应任何变化的能力。

    我们需要关注前端每年的发展、热点、和趋势。但是不需要盲目的跟风,甚至去深入学习新的东西。更多是观望这些科技的发展,了解它们,当我们需要用到它们的时候再去深度学习它们,解决我们当下在项目中遇到的问题。这个才是正确的方向和心态。

    我是来自《技术银河》的三钻,一位正在重塑知识的技术人。下期再见。


    开源项目推荐

    Hexo Theme Aurora

    最近博主在全面投入开发一个可以 “迈向未来的” Hexo 主题,以极光为主题的博客主题。

    如果你是一个开发者,做一个个人博客也是你简历上的一个亮光点。而如果你有一个超级炫酷的博客,那就更加是亮上加亮了,简直就闪闪发光。

    如果喜欢这个主题,可以在 Github 上给我点个 🌟 让彼此都发光吧~

    主题 Github 地址:https://github.com/auroral-ui/hexo-theme-aurora
    主题使用文档:https://aurora.tridiamond.tech/zh/



    博主开始在B站直播学习,欢迎过来《直播间》一起学习。

    我们在这里互相监督,互相鼓励,互相努力走上人生学习之路,让学习改变我们生活!

    学习的路上,很枯燥,很寂寞,但是希望这样可以给我们彼此带来多一点陪伴,多一点鼓励。我们一起加油吧! (๑ •̀ㅂ•́)و


    专栏推荐

    小伙伴们可以查看或者订阅相关的专栏,从而集中阅读相关知识的文章哦。

    • ⛳️ 《2021年总结》 — 一个一线战场中的开发者,回归到学习的学堂中。一开始这个过程确实遇到了挺多困扰的。一开始无法静心下来学习,因为学习底层的知识确实需要静下心来学。但是坚持了一段时间后,又会发现自己会爱上学习,爱上深挖这些知识。

    • 📖 《前端进阶》 — 这里包含的文章学习内容需要我们拥有 1-2 年前端开发经验后,选择让自己升级到高级前端工程师的学习内容(这里学习的内容是对应阿里 P6 级别的内容)。

    • 📖 《数据结构与算法》 — 到了如今,如果想成为一个高级开发工程师或者进入大厂,不论岗位是前端、后端还是AI,算法都是重中之重。也无论我们需要进入的公司的岗位是否最后是做算法工程师,前提面试就需要考算法。

    • 📖 《FCC前端集训营》 — 根据FreeCodeCamp的学习课程,一起深入浅出学习前端。稳固前端知识,一起在FreeCodeCamp获得证书

    • 📖 《前端星球》 — 以实战为线索,深入浅出前端多维度的知识点。内含有多方面的前端知识文章,带领不懂前端的童鞋一起学习前端,在前端开发路上童鞋一起燃起心中那团火🔥

    展开全文
  • 前端技术选型

    千次阅读 2022-04-24 17:29:22
    本文主要介绍前端技术选型。 文章目录前言名词手机端 前言 前端技术选型 名词 名词 说明 大前端 手机、web、pc等客户端 native开发 原生开发语言,安卓或IOS等都有专属的平台框架来做应用 混合开发 ...
  • ‍‍大家好,我是校长。最近,字节跳动技术团队公布了一份关于 2022 年前端技术的发展趋势预测,总结了新的一年前端技术可能产生的6个变化,让我们一起来借鉴参考一下吧。01前端新标准2014...
  • 如何写前端技术方案文档?

    千次阅读 2021-12-26 00:27:35
    大厂技术高级前端Node进阶点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群前言百度百科对计算机软件的的定义为:“计算机软件( Software,也称软件)是指计...
  • 元宇宙相关的前端技术

    千次阅读 2021-11-08 01:16:02
    大家好,我是 漫步,今天带来一篇文章带你了解哪些跟元宇宙相关的前端技术。喜欢记得关注我并设为星标,方便及时收到更新。资本热词:Metaverse7 月 28 日 扎克伯格表示,该公司正在组...
  • 前端技术架构与工程》之性能笔记

    万次阅读 多人点赞 2020-06-14 15:17:55
    前端技术架构与工程》之性能 前言: 《前端技术架构与工程》这本书真的越看越有味。目前写了部分这本书的笔记,共分为三部分做笔记,已写了两篇如下。 《前端技术架构与工程》初次笔记 《前端技术架构与工程》之...
  • 解密阿里前端技术体系

    千次阅读 2020-01-28 13:27:57
    作者 |奶爸码农编辑 | 张之栋、王文婧 前端框架的不断变化,对不同行业产生了诸多的影响。目前,前端的发展趋势究竟是什么样的?为了解更多的前端趋势相关内容,让我们跟随本文,看一下像阿里...
  • 以下2022年中高级前端养成指南,收藏起来,从开工第一天起,立下全新的计划和目标,愿你在虎年龙腾虎跃、虎虎生威
  • Vue前端技术

    千次阅读 2019-10-31 17:16:28
    TIP 前端技术栈 ES6、vue、vuex、vue-router、vue-cli、axios、element-ui 后端技术栈SpringBoot、MyBatis、Spring Security、Jwt
  • 前端技术体系与发展计划

    万次阅读 多人点赞 2020-06-03 15:05:53
    因为我是做前端技术培训的,这么多年下来也有了很多的学生,有的还在学习中,有的已经工作了两三年了。 最近和很多已经工作了的同学聊天,发现大家都遇到了很多的问题或者说是烦恼。整理了一下,大体可以分为两个大...
  • 2021-11-05前端技术

    千次阅读 2021-11-05 11:32:18
    前端技术栈一、Node.js二、Webpack三、Koa2五、MongoDB五、Vue 全家桶Vue:Vuex:Vue Router:Vue CLI:Vant: 目前前端主流技术栈 一、Node.js 服务器端的 JavaScript 运行环境,不管哪种前端开发,都必不可少的...
  • xx 应用 前端技术栈全览图

    千次阅读 2022-03-19 15:02:12
    前言: 无 介绍: 依据目前使用技术栈整理 详见附图
  • 物联网平台:前端技术选型总结

    千次阅读 热门讨论 2021-05-25 13:28:52
    结合当前流程的主流前端技术框架应用情况考虑如下: 前端开发技术选型可采用vue3.0+typescript+elementUI(组件库)+html5+vuex(状态管理)作为核心的开发技术.采用npm+nodejs:进行前端包管理 采用webpack/yarn:进行...
  • 面向后端的前端技术分享

    千次阅读 2021-05-19 00:53:57
    点击上方“前端开发博客”关注公众号回复“2”加入前端群作者:九旬来源:SegmentFault 思否社区目的分享日常开发工作中常遇到的问题提升工作效率,编写易维护的代码了解前端技术的趋势T...
  • 2020年大前端技术趋势解读

    千次阅读 2020-12-30 08:30:00
    导Lead语如今的前端早已不再拘泥于满足页面展示,而是开始延展到通过全栈来闭环产品。这表明前端已经有能力透过业务深入产业,继而影响商业结果。这种表象的改变背后是本质的转变,从更为宏观的角...
  • 分享 30+ 个常用的前端技术知识点

    千次阅读 2022-05-24 00:03:21
    前端要会打组合拳,复盘30+技术点打出的功能一、前言tips:总结。①会用才算学到,能灵活运用打组合拳是学会的标志之一。②每一个技术点都值得优写优学,当他们组合在一起可能会有惊喜。③要用的时候能想到,想到的...
  • 前端技术干货文章(收藏)

    千次阅读 2020-06-29 23:06:25
    让你受益匪浅的前端技术干货系列 这是一个凝聚了很多优秀前端开发者心血的精选技术干货列表,希望你能从中学习提升前端开发技术。如果觉得这个系列有收获,欢迎推荐给朋友。 有新内容加入后,这个列表每月将...
  • 前端技术简介

    万次阅读 多人点赞 2016-10-18 16:08:09
    这条路线是本人从前端技术初学者开始,到开发了绿叶学习网、广州智能工程研究会网站、毕业选题系统、大量在线工具等项目以及阅读大量技术书籍之后的的心血总结。当然,这条路线也是一个建议,并非强硬。 接下来...
  • 前端技术难点

    千次阅读 2020-04-09 10:39:07
    1、前端安全:CSRF、XSS、sql注入 2、前端性能优化:serviceworker、性能分析 3、服务端渲染:nextjs、express、静态资源缓存 4、node中间层的目的:服务端渲染、SEO、内网接口访问、多接口并发、跨域等 5、...
  • 前言最近几年微前端一直是前端界的热门议题, 它类似于微服务架构, 主要面向于浏览器端,能将一个复杂而庞大的单体应用拆分为多个功能模块清晰且独立的子应用,且共同服于务同一个主应用。各个子...
  • 如何进行合适的前端技术选型

    千次阅读 2019-09-27 13:10:00
    适合自己(团队)的技术栈才是好技术栈 引言 前端技术几乎每天都有新事物冒出来,技术也是由时尚来驱动了,我们常常臣服于时尚,面对快速的变化常常让我们感觉局促不安,开始焦虑,唯恐错过了些什么。如何打破这种.....
  • 前端规划:我的 2021 前端技术战略

    千次阅读 2021-01-25 20:58:00
    去年我画了一张架构图,在介绍整个前端的趋势,今年依旧是这张「云研发路线图』开头。整体来看,从大的趋势上没有太大的变化。这里并不考虑某些特定的技术,而是从总体上(战略)层面来看待问题。所以...
  • 你可以在这里学习一些面试所需的内容,还有前端技术大佬免费详细讲解! 5.11-5.13网易独家面试集训 3天前端直播课 0元学习 5月11日-5月13日 ,每晚8点 5月11日: 前端必备:从源码中学会思维和技巧 1、源码有哪些...
  • 2019 年web大前端技术趋势分析

    万次阅读 2019-08-29 22:53:57
    2019 年对于大前端技术领域而言变化不算太大,目前三大技术框架日趋成熟,短期内不大可能出现颠覆性的前端框架 (内心 OS:出了也学不动了)。 本文结合个人和团队经历对 2019 上半年做个技术总结,将各类技术框架 / ...
  • 30个前端技术分享主题

    万次阅读 多人点赞 2019-03-01 11:21:27
    这是我们团队前30期的前端内部技术分享主题,我做的是第1、10、19期的分享,仅供大家参考

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 610,000
精华内容 244,000
关键字:

前端技术