当前位置:首页 » 网页前端 » pwa前端黑科技
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

pwa前端黑科技

发布时间: 2023-02-18 02:11:48

1. 快毕业了,很多人都不推荐做前端,前端业内最真实情况是什么样的

一、从个人发展角度——前端是个比较“难积累经验”的领域

如何判断一个行业对个人发展是否有利?

最简单的就是从身边的人做对比,随着时间的积累,个人发展能否得到提升,让我觉得不安的是,一个工作了五年的腾讯前端工程师,跟工作两年的前端工程师,却很难有技术能力上的差异。

前端变化快,新技术新概念多,但也代表前端技术不稳定。这也是为什么知乎上的前端普遍都很“焦虑”。每次问及前端,都必须声明自己碾压活在底层的“切图仔”。

二、行业壁垒——对于普通人来说,前端天花板不高

很多人说现在的前端已经模块化,工具化,规范化了,有Webpack、Parcel、Eslint、React、Vue、Angular、PWA、Puppeteer、Electron各种技术等等,前端已经是一个非常工程化的东西了,区别于用jQuery的切图仔了!所以前端特别有竞争力!还有其他答主说前端入门很难,高级就不容易了!

其实前端还是一个相对比较新的行业,互联网发展早期(1995年~2005年)是没有专业的前端工程师的。随着互联网的发展,到了2010年,互联网开始全面进入移动时代,前端工程师的地位越来越重要。而前端的前景也十分的好。

前端薪资:有越来越高的趋势

前端开发依旧是刚需,所以你想要做web前端,是完全可以的,以上的回答给你参考

2. 前端和后端的区别是什么

前端开发主要做的是用户所能看到的前端展示界面;后端开发主要做的是逻辑功能等模块。其实主要区别体现在以下两个方面:知识结构与实现和工作职责。

1、知识结构

(1)展示的方式不同

前端指的是用户可见的界面,网站前端页面也就是网页的页面开发,比如网页上的特效、布局、图片、视频,音频等内容。前端的工作内容就是将美工设计的效果图的设计成浏览器可以运行的网页,并配合后端做网页的数据显示和交互等可视方面的工作内容。

后端是指用户看不见的东西,通常是与前端工程师进行数据交互及网站数据的保存和读取,相对来说后端涉及到的逻辑代码比前端要多的多,后端考虑的是底层业务逻辑的实现,平台的稳定性与性能等。

(2)所用的技术、技能与工具不同

前端开发,就是要创造上面提到的网站面向用户的部分背后的代码,并通过建立框架,构建沉浸性的用户体验。为了实现这个目标,开发需要熟练运用下列语言、框架、工具库:

后端开发者使用这些工具编写干净、可移植、具有良好文档支持的代码来创建或更新Web应用。但在写代码之前,他们需要与客户沟通,了解其实际需求并转化为技术目标,制定最有效且精简的方案来进行实现。

(3)所用技术不同

前端开发用到的技术包括但不限于html5、css3、javascript、jquery、Bootstrap、Node.js 、Webpack,AngularJs,ReactJs,VueJs等技术。

后端开发 以java为例 主要用到的 是包括但不限于Struts spring springmvc Hibernate Http协议 Servlet Tomcat服务器等技术。

2、工作职责

前端工程师主要的工作职责分为三大部分,分别是传统的Web前端开发,移动端开发和大数据呈现端开发。Web前端开发主要针对的是PC端开发任务;

移动端开发则包括Android开发、iOS开发和各种小程序开发,在移动互联网迅速发展的带动下,移动端的开发任务量是比较大的,随着5G标准的落地,未来移动端的开发任务将得到进一步的拓展;大数据呈现则主要是基于已有的平台完成最终分析结果的呈现,呈现方式通常也有多种选择,比如大屏展示等。

后端工程师的主要职责也集中在三大部分,分别是平台设计、接口设计和功能实现。平台设计主要是搭建后端的支撑服务容器;接口设计主要针对于不同行业进行相应的功能接口设计,通常一个平台有多套接口,就像卫星导航平台设有民用和军用两套接口一样;功能实现则是完成具体的业务逻辑实现。

(2)pwa前端黑科技扩展阅读

前端和后端的应用范围

1、PC (Personal Computer) 即个人电脑。

目前电脑端仍是前端一个主要的领域,主要分为面向大众的各类网站,如新闻媒体、社交、电商、论坛等和面向管理员的各种 CMS (内容管理系统)和其它的后台管理系统。

2、Web App 是指使用 Web 开发技术,实现的有较好用户体验的 Web 应用程序。

它是运行在手机和桌面端浏览中,随着移动端网络速度的提升,Web App 为我们提供了很大的便利。此外近两年 Google 提出了一种新的 Web App 形态,即 PWA(渐进增强 Web APP) 。

3、WeChat (微信) 这个平台,拥有大量的用户群体,因此它也是我们前端开发另一个重要的领域。微信的公众号与订阅号为市场营销和自媒体从业者,打造了一个新的天地。

4、Hybrid App (混合应用) 是指介于 Web App、原生 App (主要是 Android 或 iOS )之间的 App,它兼具原生 App 良好用户交互体验的优势和 Web App 跨平台开发的优势。

5、Game(游戏),HTML5 游戏从 2014 年 Egret 引擎开发的神经猫引爆朋友圈之后,就开始一发不可收拾。不过现在游戏开发变得越来越复杂,需要制作各种炫丽炫丽的效果,还要制作各炫丽于 2D 或者 3D 的场景。

6、Desktop桌面应用软件,就是我们日常生活中电脑中安装的各类软件。早期要开发桌面应用程序,就需要有专门的语言 UI (界面) 库支持,如 C++ 中的 Qt 库、MFC 库,Java 的 Swing、Python 的 PyQT 等,否则语言是没办法进行快速界面开发。

7、Server Node.js 一发布,立刻在前端工程师中引起了轩然大波,前端工程师们几乎立刻对这一项技术表露出了相当大的热情和期待。看到 Node.js 这个名字,初学者可能会误以为这是一个 Java 应用,事实上,Node.js 采用 C++ 语言编写而成,是一个 Java 的运行环境。

3. web前端主要做的是什么工作

Web前端可以做的工作,可以分为以下几点:


1、Web前端是什么意思

Web前端是网站前台部分,运行在PC端,移动端等浏览器上展现给用户所浏览的网页。

用我们的话来说,前端就是网页给访问网站的人看的内容和页面,Web前端开发意思就是这些内容的制作,也就是代码的实现。

Web 前端开发三大技术 html,css,js

还运用大量的 js 库,可以将前端的交互效果做得更加炫酷,除了基本语言,还要掌握各种开发工具的应用。Dreamweaver:,Sublime,HBuilder等都是比较热门的工具。


前端开发需要掌握的能力很多,知识范围很广,要付出的代价很多。不过,前端的前途也是相当光明的,前端现在正在走向工程化发展,无论权是大小公司企业,对前端开发的需求都是越来越大了,也越来越专业了。


3、朗沃教育Web前端课程做什么


Web 前端除了最基本的 html,css,js 还有大量的技术内容,也会运用到一定的框架,而朗沃教育的 WEB 前端开发一般会学到这些内容。

  • HTML/CSS 基础和高级

  • JavaScript 基础语法和高级应用

  • Node 服务端开发

  • Web前端框架开发(React 技术栈,Vue 技术栈)

  • 移动端开发(React Native,跨端开发框架之微信小程序开发,Flutter,PWA 等)

  • 前端运维(Docker 与 Linux 基本操作等)

详细课程请浏览朗沃教育Web前端课程。


WEB前端是什么?零基础可以学吗?初期阶段只是了解一些Web前端基础内容,后面会涉及到一些Web前端交互的内容,再涉及到服务器的一些知识,最后再学习Web前端的三大框架,再加上一些前端项目。

4. Web前端开发的核心技术有哪些

1.开发语言

HTML发展历史有二十多年,历经多次版本更新,HTML5和CSS3的出现又是一次革新,有些人认为前端开发要掌握的技能简单,不就是制作网页 嘛,其实不然,web前端需要掌握的核心语言xHTML+CSS+Java,Java作为最难的语言之一,许多编程高手也不敢妄 自菲薄自封精通。由于Java与html的差异性,以及静动态分开处理的一些好处。在大公司编写静态效果和动态效果往往是分开由不同的人完成 的。小公司因为需要压缩成本,就要求每个人会的越多越好,如果您想往项目经理发展,能懂一两门**语言,绝对是锦上添花!

2.浏览器兼容性

互联网目前主流浏览器有IE6789,Firefox,Chrome,Opera,Safari,遨游,包括国内主流的搜狗,腾讯 TT,360,the World等等;从内核上讲主要有IE的,遨游版IE,safari,firefox以及opera的,这些都是大家常见的,如果你身边有老网虫喜欢收藏 浏览器,你翻翻他的硬盘,相信几十款肯定是有的(或查看前端社区中的浏览器大全)。每种内核对代码的解析是不完全一样的,即使同样内核也可能存在很大差异,如IE和遨游版的IE。不说非主流的浏览器,就主流的浏览器要做到完全兼容,也并非易事,需要长时间的积累和测试,需要前端开发工程师对前端开发的热爱和激情。

目前移动互联网的发展趋势也不容小觑,将慢慢占据互联网的主要份额。移动互联网最突出的好处是方便和及时,试想一下,走在某地风景很好,拍下来后自 动分享给各路好友,因此手机上的浏览器兼容也看刻不容缓,现在手机上的浏览器也是纷繁复杂,主流的UCWEB,safari,IE,3G门户的,以及 symbian低端机的“残缺儿童”,包括国外流行手机我们不知道的一些浏览器,更糟糕的是这些浏览器解析因为手机硬件的不同,每个浏览器得到的结果都是 完全不同的。

3.hack技术

由于不同的浏览器对CSS的解析认识不一样,因此会导致生成的页面效果不一样,这个时候就需要针对不同的浏览器写不同的CSS,这个过程叫CSS hack。虽然我们写代码都要求按照标准,不写hack代码,但实际工作中为了兼容主流浏览器,hack代码是免不了的,所以这也应该是每个前端开发人员 必备的技能。

4.业内标准

目前Web前端开发中提到最多的就是W3C标准,这是一系列标准的集合,代表了互联网发展的方向,也代表了前端开发的一种信仰。写的代码都要100%通过标准验证,为通过标准验证而感到自豪,会有效推动互联网的快速发展。

5.开发工具

目前比较流行的是Dreamweaver, 其曾经风靡一时,到现在也没有退出历史舞台,证明DW还是有很大优势的,尤其是针对初学者,其强大的提示功能可以帮助我们很快的熟悉并掌握网页布局,但现 在更提倡的是纯手写代码,既体现技能方面的卓越,也可有效避免使用DW等工具产生的冗余代码。

5. 前端黑科技之PWA

PWA(Progressive Web App),即渐进式web应用,这种应用可以像常规网页一样加载,它采用了本地应用程序的外壳,不需要下载就可安装再用户的主屏幕上,大大减少内存的负担,给予用户良好的交互体验。

PWA包含的核心功能及特性有:

1、Web App Manifest

2、Service Worker

3、Cache API 缓存

4、Push&Notification 推送与通知

5、Background Sync 后台同步

6、响应式设计

PWA的优势:

1、无需安装与下载,只需要输入网址就可以可以将app的快捷方式放置桌面,全屏运行,与原生app无异

2、能够在各种网络环境下使用,即使网络很差或者断网的情况下,也不会显示undefind

3、具有推送消息的能力

4、本质上是一个网页,没有app的各种启动条件,能够快速响应用户指令

PWA存在的问题:

1、目前阶段支持率不高,浏览器对技术支持还不够全面,各大厂商还未明确支持PWA

2、依赖的GCM服务在国内无法使用

3、微信小程序的竞争

6. pwa的出现会对移动端原生开发造成什么影响

结论是毫无影响。

原因分析

  1. PWA 其实是在普通的移动 Web App 上加持很多新的 Web 技术以期望达到 Native App 的体验。

  2. 虽然国内 Android 设备占大头,但是国产手机厂商多多少少都修改过系统内核,大多数 Android 手机都没有原生的 Chrome 浏览器。而国产的手机浏览器恐怕对支持 PWA 兴趣不大,毕竟把自己的 KPI 和用户日活时间提高比较重要。

  3. PWA的系列特性和要求,决定了这是只能在Google的光环下进行探索的无线端体验增强技术,国内环境目前来讲,要在生产环境实践的话还颇为困难。其实PWA涉及的技术对于前端工程师来讲并不陌生,比如ServiceWorker等。

7. 现在前端发展怎么样

在React和Vue等框架出现后,前端在代码开发方面的复杂度已经基本得到解决,再加上Node解决前后端分离,前端技术栈本身其实已经非常成熟。因此业内人士普遍认为,未来几年前端本身的开发技术应该不会有大的方向变化,但是将会呈现出四大发展趋势:
第一个趋势:入口应用会小程序化。
类似腾讯、阿里、滴滴、美团这样作为入口的应用,会自己做自己的一套小程序体系,在自己的app内通行。这里的意思不是说大家都会去用微信小程序,而是会效仿微信小程序这套体系,搬到自己的app内。
主要原因是,这些入口应用容纳自己公司各类业务线,已经臃肿不堪,使用原生开发迭代效率跟不上,使用HTML又难以做到高性能,因此使用类似小程序的方案,可以做到畅享HTML多年来积累的开发模式,同时裁撤大量平时用不到的API,降低渲染页面的复杂度。这个趋势会涉及到移动端开发。
第二个趋势:Web前后端融合为全栈开发。
Node.js已经给前端开发很好地开了个头,这个头就是让前端人员了解HTTP协议的细节,了解常规的API开发。我相信很多人已经看明白了,为什么我们要做前后端分离,这里面主要原因除了代码开发部署上的分离,还有一部分是让不懂HTTP协议的人不要在接口层瞎鼓捣,因为这里面细节太多了,你都不了解HTTP缓存,你怎么知道哪个API的HTTP header应该用什么呢?
因此了解HTTP协议的前端,会慢慢吃掉这部分后端开发的任务,而了解HTTP协议的后端,也会因为三大框架开发模式的成熟而学会前端开发。进而,这两类人演化为全栈开发。
第三个趋势:营销类页面小程序化。
这个指的就是大家平时在微信里看到的各类营销网页,因为主要入口在微信,因此变成微信小程序。这个大家比较好理解吧,就不多说了。小程序现在可能BUG多,功能跟不上,但是要替代这类网页可能也就是2年不到的时间。
第四个趋势:PWA、WASM代表的HTML内的技术改进。
这个能影响到的范围看起来很大,但其实场景比较有限,主要是排除掉上面说的1和3之外的空间。空间就在于这两大技术目前都没有成熟的最佳实践,还需要探索。

8. 2020年前端最火的技术是什么

我认为最火的技术有三个:TypeScript、Vue3.0、JAMStack

原因:

1、TypeScript 是一门基于 JavaScript 基础之上的编程语言,很多时候我们都在说它是一个 JavaScript 的超集,或者叫扩展集。所谓超集,其实就是在 JavaScript 原有的基础之上多了一些扩展特性。多出来的呢,实际上就是一套更强大的类型系统,以及对 ECMAScript 新特性的支持。而且它最终会编译为原始的 JavaScript。

相比较于 Flow,TypeScript 作为一门完整的编程语言,它的功能更为强大。生态也更健全、更完善。特别是对于开发工具这一块,微软自家的开发工具对 TypeScript 的支持都特别友好。

2、Vue 是“一个用于构建用户应用程序的渐进式框架”。它的设计非常灵活,可以将单个 Vue 库集成到其他项目中,也可以完全使用 Vue 构建复杂的项目。Vue 通常被视为一个易于理解和实现的框架,它支持纯 HTML 模板,而 React 需要使用 JavaScript 定义来 DOM 元素。

速度更快是 Vue 目前的主要卖点之一,Vue 以其渲染速度而闻名,与其他框架一样,Vue 使用虚拟 DOM 来渲染组件。为了加速渲染过程,必须减少虚拟 DOM 的工作负载。通过编译时间提示、组件快速路径、单态调用、优化 slot 生成等手段来达到提速目的。

体积小

目前,Vue 的体积已经很小了(压缩后 20KB)。由于进行了摇树优化(消除非重要代码),3.0 的预计大小约为 10KB(压缩后)。主要是移除了对 Vue 项目来说不是很重要的库,可以通过 import 语句来使用它们,而不是把它们打包在主 src 代码中。

可维护性

Vue 3.0 将从 Flow 转到 TypeScript,同时又非常重视兼容性易用性,不喜欢使用 TypeScript 的用户仍然可以使用纯 JavaScript。Vue 3.0 提供了更好的模块化,从而变得更加可定制和灵活,还提供了透明性,开发人员可以深入到源代码中。编译器重写是最令人兴奋的功能之一,不仅带来了更好的 IDE 支持,而且可以创建源码映射,如果存在运行时错误,它将给出错误对应的文件位置和行号。

面向原生

Vue 3.0 将与平台无关——它将运行纯 JavaScript,并且在其主构建中不会假设使用诸如 Node.js 之类的东西。这种灵活性使构建 Web、iOS 或 Android 应用程序变得更容易。面向原生使 Vue 更像是 React 的替代品。

易用性

公开 Reactivity API——新的变更允许开发人员显式创建反应式对象和自定义重渲染 hook。3.0 还解决了 Vue 用户经常抱怨的一个问题:什么时候以及为什么要重新渲染组件?3.0 提供了一个 renderTriggered 事件,人们可以通过它查看是什么触发了更新。这个出色的功能将使 Vue 更加透明。

3、JAMstack是指使用JavaScript、API和Markup构建的技术堆栈,JAM是JavaScript、API和Markup的简称,前面第一个字母缩写,JAMstack一种基于客户端JavaScript,可重用API和预构建Markup的现代Web开发架构

1. 更好的性能:为什么要在部署时生成页面时等待页面动态构建?当谈到最小化第一个字节的时间时,没有什么能比通过CDN提供的预构建文件更好。

2. 安全性更高:将服务器端进程抽象为微服务API,可以减少攻击的表面区域。您还可以利用专业第三方服务的专业知识。

3. 更便宜,更容易扩展:当您的部署相当于可以在任何地方提供服务的一堆文件时,扩展就是在更多地方提供这些文件的问题。CDN是完美的,通常包括扩展他们的所有计划。

4. 更好的开发者体验:松散耦合和控制分离允许更有针对性的开发和调试,并且为站点生成器扩展选择CMS选项消除了为内容和营销维护单独堆栈的需要。

所以我认为最火的技术应该就是这三个。

9. 2021年的前端框架选择 Angular vs React vs Vue

每个前端开发人员都听说过三个用于构建 Web 应用程序的框架:React、Vue.js和Angular。

React 是一个 UI 库,Angular 是一个成熟的前端框架,而 Vue.js 是一个渐进式框架。

它们几乎可以互换使用来构建前端应用程序,但它们并非 100% 相同,因此比较它们并了解它们的差异是有意义的。

每个框架都是基于组件的,并允许快速创建 UI 功能。

然而,它们都有不同的结构和架构——所以首先,我们将研究它们的架构差异以了解它们背 后的哲学。

React 不强制执行特定的项目结构,正如您从下面的官方“Hello World”示例中看到的那样,您只需几行代码即可开始使用 React。

React 可以用作 UI 库来渲染元素,而无需强制执行特定的项目结构,这就是它不是严格意义上的框架的原因。

React Elements是 React 应用程序的最小构建块。它们比 DOM 元素更强大,因为 React DOM 确保在发生变化时有效地更新它们。

组件是更大的构建块,定义了在整个应用程序中使用的独立且可重用的部分。它们接受称为 props 的输入并生成元素,然后显示给用户。

React 基于 JavaScript,但它主要与JSX (JavaScript XML)结合,这是一种语法扩展,允许您创建同时包含 HTML 和 JavaScript 的元素。

您使用 JSX 创建的任何内容也可以使用 React JavaScript API 创建,但大多数开发人员更喜欢 JSX,因为它更直观。

Vue.js 核心库只关注视图层。之所以称为渐进式框架,是因为您可以使用官方和第三方包(例如Vue Router或Vuex )扩展其功能,将其转变为实际框架。

虽然 Vue 与 MVVM(Model-View-ViewModel)模式没有严格关联,但它的设计部分受到了它的启发。使用 Vue,您将主要在 ViewModel 层上工作,以确保以允许框架呈现最新视图的方式处理应用程序数据。

Vue 的模板语法让您可以创建 View 组件,并将熟悉的 HTML 与特殊指令和功能相结合。这种模板语法是首选,即使原始 JavaScript 和 JSX 也受支持。

Vue 中的组件很小,是自包含的,并且可以在整个应用程序中重复使用。带有扩展名的单文件组件(SFC).vue包含 HTML、CSS 和 JavaScript,因此所有相关代码都位于一个文件中。

SFC 是在 Vue.js 项目中组织代码的推荐方式,尤其是大型项目。需要使用 Webpack 或 Browserify 等工具将 SFC 转换为可用的 JavaScript 代码。

在本文中,我讨论的是 Angular 2,而不是现在称为 AngularJS 的框架的第一个版本。

AngularJS,原始框架,是一个MVC(模型-视图-控制器)框架。但是在Angular 2 中,与 MV*-patterns 没有严格的关联,因为它也是基于组件的。

Angular 中的项目被组织成模块、组件和服务。每个 Angular 应用程序至少有一个根组件和一个根模块。

Angular 中的每个组件都包含一个模板、一个定义应用程序逻辑的类和元数据(装饰器)。组件的元数据告诉 Angular 在哪里可以找到创建和呈现其视图所需的构建块。

Angular 模板是用 HTML 编写的,但也可以包含带有特殊指令的Angular 模板语法,以输出反应性数据和呈现多个元素等。

组件使用 Angular 中的服务来委托业务逻辑任务,例如获取数据或验证输入。它们是 Angular 应用程序的独特部分。虽然 Angular 不强制使用它们,但强烈建议将应用程序构建为一组可以重用的不同服务。

Angular 内置于 TypeScript 中,因此建议使用它以获得最无缝的体验,但也支持纯 JavaScript。

React 是最受欢迎的 JavaScript 项目之一,在 GitHub 上拥有 16 万颗星。它由 Facebook 开发和维护,并在他们的许多项目内部使用。此外,根据BuiltWith的使用统计数据,它为超过 200 万个网站提供支持。

在三个框架中,Vue在 GitHub上的 star 数最多,有 176k。该项目由前 Google 员工 Evan You 开发和领导。据BuiltWith 称,这是开源社区中一个非常强大的独立项目,被超过 100 万个网站使用。

Angular 是由 Google 开发的,但令人惊讶的是它并没有用于他们的一些旗舰产品,例如搜索或 Youtube。它经常用于企业项目,并基于BuiltWith的数据为超过 97,000 个网站提供支持。

它是三个框架中星数最少的,在 GitHub 上有 68k 星。然而,当从 Angular 1 切换到 Angular 2 时,他们创建了一个全新的代码库,而不是继续AngularJS项目,该项目也有 59k 星。

在开发应用程序时,开源包可以为您节省宝贵的时间。不仅如此,它们通常比定制组件和封装更好,因为它们经过了实战测试。

查看可帮助您更轻松地创建新功能的现成组件、主题和其他工具的可用性非常重要。

许多前端应用程序依赖全局状态管理来存储信息,例如谁登录和其他用户设置。

最流行的 JavaScript 状态管理项目是Rex。大多数开发人员使用Rex的官方 React 绑定,这些绑定由 Rex 团队维护。

由于 React 的流行,查找输入组件和现成的元素非常容易。它们都只是在 Google 或 GitHub 上搜索即可。

React 生态系统还包括React Native,它允许您从用 React 编写的单个代码库构建原生 iOS 和 Android 应用程序。因此,React 也可以成为使用 Web 技术构建移动应用程序的绝佳选择。

React 是 MERN 堆栈的一部分,其中包含 MongoDB、ExpressJS、React 和 NodeJS。这种组合的伟大之处在于,单一语言——JavaScript——为整个应用程序提供动力。

尽管 Rex 可以在 Vue 中使用,但没有官方绑定。但这不应该让您担心,因为Vuex是专门为 Vue 应用程序制作的官方状态管理库。除了与 Vue 很好地集成之外,使用 Vue 的开发人员工具进行调试也很容易。

在 Vue 的早期,很难找到现成的组件。随着社区的发展,您可以使用各种输入组件和高级元素来加快开发速度。

对于移动应用程序开发,有一个名为Weex 的新兴项目。Weex 由阿里巴巴开发和使用,但不如 React Native 成熟和强大。更重要的是,由于该项目在中国开发和使用较多,因此很难找到英文文档和解决问题的方法。

Vue 与 Laravel 集成得很好,这就是为什么它们经常一起使用。Laravel 提供完整的JavaScript 和 CSS 脚手架,以支持在新项目中使用 Vue。

对于 Angular 中的状态管理,您可以使用NgRx项目。它的灵感来自 Rex,但它是专门为 Angular 创建的。

与 Vue 和 React 的情况一样,您可以将许多现成的组件导入到您的项目中。与 Angular 略有不同的是,Angular Material项目中有许多官方组件。这是 Google 的一个官方项目,为 Angular 应用程序提供 Material Design 组件。

您可以使用NativeScript在 Angular 中构建跨平台移动应用程序。它也支持 Vue,但 Angular 支持更成熟。

Angular 是着名的 MEAN 堆栈的一部分,它将 Angular 与 MongoDB、ExpressJS 和 NodeJS 相结合。与 MERN 堆栈类似,它的前端和后端都完全依赖 JavaScript。

Angular、React 和 Vue 都可用于开发渐进式 Web 应用程序,也称为 PWA。

PWA 不是移动应用程序,而是 Web 应用程序,智能手机用户可以将其添加为主屏幕的快捷方式,并提供类似于原生移动应用程序的外观和感觉。

您还可以为每个框架找到高级模板和预制应用程序,但 Angular 和 React 比 Vue 提供更多高级选项。

在选择框架或库时,您还需要考虑性能。

在许多情况下,您不必担心性能,尤其是在构建小型项目时。然而,项目的范围和复杂性越大,性能就会(并且将会)成为一个问题。

重要的是要注意,在 Web 性能方面,开发质量和遵循最佳实践比框架的选择更重要。

但由于存在一些性能指标和差异,我将研究它们并解释每个指标如何影响您的开发工作。

JS 框架基准测试的结果表明,它们在大多数基准测试中都表现得相当好,例如在表中创建或附加行。

正如你在上面看到的,Vue 在选择行时比 Angular 和 React 慢得多。另一方面,Angular 和 React 在交换行方面效率不高。

这些是渲染基准中唯一的实质性差异 - 在大多数情况下,不会产生明显的结果。由于选择行是比交换行更常见的功能,我想说这个基准测试将 Vue 排在第三位,仅次于 Angular 和 React 并列第一。

在内存和启动时间方面,React 和 Vue 得分很好,但 Angular 稍慢。Angular 启动一个基本脚本可能需要 150 毫秒,并且需要更多内存才能运行。

谷歌 Chrome 实验室的Perf Track显示了来自数千个网站的生产数据。这些统计数据受许多其他因素的影响,而不仅仅是选择的框架,让我们看看数字。

与 Angular 相比,Vue 和 React 网站在这个指标上的排名更高,Angular 需要更多时间来启动并向用户呈现内容。

在渲染完整页面的三个框架中,Angular 也是最慢的,只有 27% 的 Angular 网站得分在可接受的范围内。

对于所有三个框架,超过 80% 的网站都在第一次输入延迟的可接受范围内,这显示了用户可以与页面交互所需的时间。

迄今为止,最轻量级的应用程序是使用 Vue 开发的应用程序,68% 的 Vue 应用程序加载的 JavaScript 不到 1MB。另一方面,Angular 和 React 应用程序往往具有更大的代码大小。

您可以从这些数字中看到趋势,但您不应该太快得出结论。例如,对于最后一张图,可以解释为 Vue 用于开发更轻量级的应用程序,而 Angular 用于更大的项目。

统计数据可以帮助指导您做出正确的决定,但您不能使用它们来证明一个框架比另一个更快或更好。

对于更高级的应用程序,使用的前端框架应该能够执行一些提高性能并且可以更好地扩展的任务。

两项关键技术是服务器端渲染 (SSR) 和虚拟化。

React 支持使用官方ReactDOMServer包进行服务器端渲染。对于虚拟化,您可以使用名为React Virtualized的流行第三方工具。

Vue 中也支持服务器端渲染以及官方的SSR 包。此外,您还可以使用基于 Vue 构建并支持 SSR的Nuxt.js框架。

不幸的是,Vue 中的虚拟化选项并不是那么强大。在我看来,Vue Virtual Scroll List是虚拟滚动的最佳解决方案,但它有点问题,不如 React 和 Angular 的选项稳定。

Angular 拥有SSR的官方Angular Universal包,以及用于虚拟滚动和高效渲染大型列表的官方组件。

学习这些框架有多容易?

要回答这个问题,我们需要查看每个框架的复杂性及其引入的概念。

在最基本的用例中,React 是三个框架中最不复杂的。那是因为你只需要导入库,然后你就可以用几行代码开始编写你的 React 应用程序。

但是除了 Hello World 示例之外,大多数 React 应用程序都是基于组件的,而不仅仅是在页面上呈现一些元素。

一些开发人员对 React 感到奇怪或困难的一件事是,学习 JSX 是一条单行道。您也可以使用原始 JavaScript,但由于大多数 React 开发人员使用 JSX,学习它几乎是不可避免的。

这是使 React 的学习曲线变得更陡峭的主要因素,但除此之外,对于了解 JavaScript 并理解 Web 开发概念的开发人员来说,它是一个易于学习的库。

Vue 的设置比 React 稍微复杂一些。你可以将它用作一个库来定义你可以在整个 HTML 中使用的组件——但与 React 类似,这不是大多数项目的构建方式。

大多数 Vue 项目都有一个命名的根组件App.vue和一些用于显示各种内容的子组件。

说到语法,你唯一需要学习的新东西就是 Vue 的模板语法,如果你了解 HTML,这很容易掌握。基本的指令,如v-if和v-for有条件的渲染和列表的渲染,很容易理解即使是初学者。

此外,Vue 的单文件组件将所有前端代码保存在一个地方,便于组织新项目。

在我看来,Vue 是最容易学习的,因为它的简单和直观的语法。

Angular 拥有三者中最复杂的项目结构,而且由于它是一个成熟的前端框架,因此它依赖的概念更多。

除了组件,Angular 还支持模块和服务。它希望您以特定的方式编写和设计代码库,从而使您的项目在扩展时更易于维护。

至于语法,由于 Angular 最适合与 TypeScript 配合使用,因此在构建 Angular 项目时了解 TypeScript 非常重要。

与 Vue 一样,您还必须熟悉类似 HTML 的语法,以便您可以开始使用 Angular 编写新的 UI 功能。

在我看来,Angular 对于普通开发者来说是最难学的,因为它更复杂并且依赖于 TypeScript。

许多开源项目和框架逐渐被遗忘并无人维护。您是否应该担心我们在这里讨论的任何框架?

尽管我们无法完全预测会发生什么,但正在进行的开发工作是这些项目 健康 状况的良好指标。人气和增长也是预测项目寿命的重要指标,所以让我们来看看每个框架。

React v17.0已经发布,但令人惊讶的是,它没有为开发人员提供任何新功能。

主要的变化是这个新版本可以更容易地升级 React 本身。您可以将 React 的某些部分从旧版本升级到新版本,而无需升级整个项目。

如果您的应用程序依赖于随新版本更改或弃用的功能,您可以保留旧版本以保持此功能有效。此更新使 React 成为一个很好的长期选择,因为它可以更轻松地与新版本保持同步。

React 的每周 npm 下载量自去年以来增长了 44% 。从绝对数量来看,它仍然是三个项目中下载量最大的。

Vue 3 已于2020 年 9 月发布,它解决了 Vue 2 在大型项目中存在的许多严重问题。它引入了受React Hooks启发的Composition API,可以更轻松地跨组件重用逻辑。

整个项目用 TypeScript 重写,提高了新 Vue 项目对 TypeScript 的支持,同时也使项目更易于维护。

Vue 3 是一个急需的升级,使 Vue 更适合大型项目。

Vue 的每周下载量自去年以来增长了 87%,使 Vue 成为相对而言增长最快的框架。如果 Vue 能够保持这种增长速度,那么它肯定会很快超过 Angular。

Angular 最近推出了Ivy 编译器。它减少了构建时间,优化了资产,允许更快的测试,并总体上改善了开发人员的体验。

Angular 团队每年发布两次重大更新,其中可能包含新功能,或者只是让框架跟上新浏览器版本的速度。

自去年以来,Angular 的每周下载量增长了约 50% ,因此它仍然是一个受欢迎的项目。

Angular、React 和 Vue 都处于非常活跃的开发阶段。他们定期发布新版本并维护现有版本。由于在每种情况下当前的支持水平都很高,因此您可以安全地使用这些框架中的任何一个。

需要注意的是,Angular 的增长没有以前那么快,而 Vue—— 尽管它是最近开始的——似乎增长了很多。

如前所述,我们无法预测哪些框架会长期保持相关性,但每个项目背后都有一个伟大的社区,并且在不断发展。

我这篇文章的目标是解释架构差异,分解每个框架的优点和缺点,并在适用的地方进行比较。

在进入一个新框架之前,有几件事情需要考虑。

首先,在选择新技术时,您团队的经验可能是一个决定性因素。

同样,您必须考虑您所在地区可用的人才,以便您可以为您的项目聘请开发人员。

最后,当涉及到项目本身时,复杂性和范围也会影响您对框架的选择。

通过考虑所有关键差异,我希望您可以决定哪个是最适合您的目标和需求的前端框架。

(本文由闻数起舞翻译自Aris Pattakos的文章《Angular vs React vs Vue 2021》,转载请注明出处,原文链接:https://athemes.com/guides/angular-vs-react-vs-vue/)