收集两篇关于前端不错的文章

news2024/9/28 5:33:21

深以为然!

为什么我建议前端框架优先选 Vue 而不是 React

https://acejoy.com/2022/03/10/675/

我两者都用过比较长的时间。网上各种“为什么我选React放弃了Vue”或者“为什么我选Vue放弃了React”之类的文章很多,实际都没什么用,必须要真正上手做项目才会感受到它们的使用体验差别。因为有些文章本身就是带有倾向性的 – 听说过“布道师”这个职位名称么?

从我个人的使用体验看,选用Vue更省力省时间,用React明显麻烦的多。有人可能会争辩:React使用熟练一样很快!是,可是要注意,我这里说的不是绝对的开发速度,而是说同样的功能,使用Vue对比采用React,是指相对而言,哪个省事儿。用React,你得有足够的时间,足够的人力,足够的技能和耐心。用Vue开发成本低的多。

多方面粗略比较下,想起来了后面再补充:

使用难度

Vue框架是可以渐进使用的,开发门槛明显比React低很多。你可以直接在html文件中引入Vue的编译包,看下入门文档,稍微处理下代码入口就可以愉快的使用了,非常轻快。后续需要引入其它的组件、模块,也是比较容易的。它的设定更符合习惯,它没有发明太多的概念和独特的用法。Vue采用了清晰的三分法处理组件功能:结构 – template,功能 – script,表现 – style。这些概念符合开发者对html的习惯认知,理解起来毫不费力。

React不行,你至少得看完官方的一整套文档,这里:入门教程 ,然后在充满困惑和挑战中起步。别担心,后面等你爬的山还有很高。每个山头的路都很长,文档够你啃半天的。

究其原因,React框架并不是一个单纯的UI库,它创造了一个庞大的技术栈,里面充斥着各种新思想的试验品和废弃物。它发明了很多新概念,对Web技术的发展是有巨大贡献的,但是不等于说,里面的东西都是获得大家认可,都喜欢的。而且它也没什么标准一说,所有组件自由竞争。这是它的优点也是槽点。优点是总有新东西不断涌现,缺点是你需要学习和挑选。

因为是后起之秀,Vue的社区没有React的大,所以一些组件支持不如React的多,这个要承认差距。不过社区正在逐渐追赶中,差距在缩小。

设计思路

使用React,可以看做是,用户不断的修改、计算组件的状态,然后让状态从上到下流动下来,重新渲染出正确的界面的过程。因为React坚定的使用单向状态流这个模式。它是有好处的,只要状态一致,结果必然一致,可重复,非常可靠。问题在于使用过程并不怎么愉快。很多操作显得很机械、呆板,只因为规则规定如此。

状态管理是前端里面的重要内容。React的状态管理比较麻烦,redux没那么容易使用。自带的setState不是很简单么?哪里,这个小功能的坑是很多的,比如异步,比如更新后中途又被冲掉等等。

Vue的状态管理则容易很多,官方直接做了一个库,相对于React,估计10%的难度都没有。估计是跟作者开发使用过另外一个出名的前端框架:Angular有关系。Vue吸收了Angular的很多优点。

双向绑定功能是Vue的一个设计,一些其它前端库也有这个能力,但React是没有的。别小看这个小小的功能点,它影响很大。不信,你自己做一个表单,实际手把手的试一下,这个事儿带来多少的麻烦。保守的说,支持双向绑定功能,可以节省40%以上的代码量,而这些代码大部分都是机械代码,没有什么技术含量。有人说可以用别的方法模拟出来,但它毕竟不是官方的支持。

有个简单的例子,React表单输入,把输入转换成数字,这个事儿其实比想象的复杂,很容易出现bug,不信你试试看。Vue支持双向绑定,就不存在实现的需要。

**React倾向于使用受控组件,这大大加重了开发负担,特别是对于比较复杂的系统,更为明显。**所谓的“受控组件”,是自己管理这个组件的一切,包括行为、外观等等。相比之下,直接使用标准的HTML5组件 + CSS修饰,要容易的多。受控组件可以管理一切,但是你也得自己DIY一切,利弊自己体会。

使用React,你会发现总要不停的拆分组件,拆细,然后一堆参数传来传去。这个有好有坏。优点是拆细的组件可以实施单一职责,降低复杂度,缺点是管理麻烦。这在工程实践中,需要平衡的。

与React自创的jsx语法不同,Vue使用的是模板-Template模式。这个更符合通常的习惯。特别是以前做过后端模板开发会更为熟悉,它就是使用数据来渲染骨架里面的细节,得到可以展示的结果。React自创的jsx还有一套规则需要学习。

更进一步,React社区鼓吹“CSS-in-JS”。这个设计引发了很多争议,使用不是不可以,负担更加沉重。因为你无法按习惯的CSS模式编写样式了,需要按各种五花八门的实现规则来书写。这个地址有部分讨论:前端

还有一些UI框架,也是追随了React的模型,全部是受控组件,你需要熟悉框架的设定才能使用。而与此相对的实现是工具型。比如tailwind css。它的理念就是工具化,所有的设定都是用CSS Class实现。这个使用起来难度大大降低。

如果使用Vue,最容易选择的就是工具类UI框架。

React发展了很久,有一些历史包袱。比如最新的版本开始摒弃过去的React.Component实现模式,大力推广React.Hooks。我使用起来,感觉后者明显比前者优越,可是你又多了一个学习成本,外加一个选择困难症。

粗略估计,如果你的工程使用React实现,总体成本可能是使用Vue实现的5倍以上。计算方式:React的难度 + 组件开发难度 + UI框架使用难度 + CSS使用难度 + 其它杂项。

看到这里,可能读者会认为我一直在贬低React,鼓吹Vue,并不是这样。React足够伟大,它的创新足以在历史上留下浓重一笔,我非常的欣赏。但是别忘记,它是Facebook根据自己的需求,创造、开源、开发的,请记着这个起点。你的工程有Facebook大么?你有Facebook的工程能力么?恐怕没有几个能做到。同样的问题一样适用于谷歌。谷歌做出来的东西,即便很好,也未必适合所有人。它的起点是适合自己用。没有它的体量和工程能力,贸然使用往往跌入大坑。

为什么是 JavaScript?

https://acejoy.com/2017/05/17/248/

注:这是2015年写的文章,JavaScript还在疯狂的朝着各个领域进军。而JS自己,也在迅速的改进。更新的版本,具备更好的操作能力,更适应新一代环境的需求。想起那句话,不知道谁说的了:只要有足够的需求和时间,原本坏的也能改进成好的。拭目以待吧!

我从事软件开发的相关工作,已经有15年了。目前的工作,主要集中于Web和移动应用方面。在这么多年里面,我对javascript的态度可能会代表一大群程序员的看法:从一开始对js的不屑一顾到最后惊奇它的表现和潜力。

Javascript的创造者:Brendan Eich,在今年年5月份做了一个PPT,回顾了js语言的创造过程和这20年的发展、前景。地址在:http://brendaneich.github.io/ModernWeb.tw-2015/
10天设计完js的感受

在这里插入图片描述

Brendan Eich: 10天设计完js的感受

在2000年那会儿,我也从事过一段web应用开发。开发平台是Windows,主要使用Asp。那个时候的javascript,主要用途是检验页面输入数据是否正确,错误的时候,弹出个警告窗口。整个Web开发、应用环境,实际上都是十分简陋的。Web开发者看待javascript,估计就如同玩具一般。因为它能做的,真的是十分有限。如果你能找到2000年时候的有关js的IT图书,内容多半大同小异,充斥着告诉你怎么用js做个什么跑马灯,怎么制造烦死人的弹窗,如此这般。这些内容也进一步抑制了大家对js的期望。

后来,我转向C/C++,因为“真正的程序员使用C++”。这一转身就是很多年,我对js的印象,也就止于那点功用了。

这几年,因为种种变化,我又转回来了。这个时候再回顾Web开发,已经可以用天翻地覆来形容。相关的概念,层出不穷。发展出的各种技术、工具,五花八门,让人眼花缭乱。而且更要命的是,这些知识除了基础的几类,大部分都十分的不稳定,迅速发展、以疯狂的速度淘汰更新。今天还在用的工具,可能明天就有更新、更好的了。

为什么会这样,因为社会需要的热点在这里,需求推动。这个社会的生活、生产,逐渐转移到了网站上、移动端,这就是这些领域快速发展进步的主因。

这个时候再回头看当年的玩具语言 – javascript,早已今非昔比。它已经成长为网络时代不可或缺的前端顶梁柱。现在已经不可想象没有js的网站,是否还能正常运行。不仅如此,它的触角居然还深入到了后端服务,Node.js方兴未艾。一些新一代的产品,如MongoDB,甚至内置了js语言支持,作为应用交互的工具。

这是很多人都无法想象到的情景,包括我在内。对此,我不得不回过头看一下,思考javascript为什么会拥有现在的地位?

Javascript的总体设计有亮点,这稍后再说。但问题也很多,它是作者在10天内设计出来的。因为时间仓促,很多细节未及推敲、深思熟虑就推上了市场。未经打磨,以至于充斥了漏洞、糟粕。Douglas Crockford在《Javascript语言精粹》(英文名:Javascript: The Good Parts)里面提到:“Javascript中糟粕的比重超出了预期。”连Brendan Eich自己都说:”与其说我爱Javascript,不如说我恨它。它是C语言和Self语言一夜情的产物。十八世纪英国文学家约翰逊博士说得好:’它的优秀之处并非原创,它的原创之处并不优秀。‘(the part that is good is not original, and the part that is original is not good.)”

但是,似乎是在冥冥之中注定,Javascript在一开始就抓到了未来编程语言的方向:函数式编程。Crockford大叔说:”Javascript设计的最出色的就是它的函数的实现。它近乎接近于完美。…… 函数在javascript中是顶级对象,它是第一个成为主流的Lambada语言,它是披着C外衣的Lisp。”读过那本《黑客与画家》的人,都会记得作者的预言:Lisp才是语言的终极趋向。

这几年,函数式编程有流行的趋势。函数式编程并不是新发明,它的历史甚至比一些主流语言还早。因为性能和实现等问题,一直饱受冷落。而如今,计算机的硬件性能大大提高,改变了很多事物。原本不够经济的,变得可行;原本不够好的,在新条件下变得不错。鉴于函数式编程的优良特性和强大能力,它的流行其实并不意外。过程化->面向对象->函数式,这个应用开发范型发展趋势是可以预见的。这些年,脚本语言大行其道,使用Python/Ruby/PHP代替原本静态语言开发的应用比比皆是,传统的C/C++应用开始逐渐缩减到桌面应用、高性能服务器应用、驱动、系统接口等领域。因为大部分的应用的性能已经不是问题,CPU相对过剩,I/O、网速才是瓶颈。人们更重视开发效率。Javascript因为一开始就有这样的设计能力,把握住了技术的先机,紧随了这股浪潮。

运气也不可或缺。搞技术的会知道,世界上的编程语言至少也有个几百种。一种语言想获得认可并得到流行,光有好的技术设计是不够的,它还需要位置乃至契机。它要找到适合自己应用的领域,深深的扎下根来,并以此为基地,向外伸展。这个时间,有时候需要20年以上。比如PHP专注于Web开发,C对于系统开发不可缺少,因为接口都是C。Python在科学计算、网络编程有诸多应用。在2004年,Javascript得到了一次契机:Google推出了使用Ajax技术的Gmail邮箱,那堪比桌面的无刷体验,引发了业界轰动和模仿浪潮。Ajax的操作核心,就是Javascript。此后,js在浏览器中的地位变得十分稳固,已经成了事实标准。在2009年,基于Google强大V8 js引擎的Node.js出现了,它意味着js向其它领域开始进军,发挥它的语言威力。微软当年也宣称在服务器端可以内置支持jscript,不过这完全不可比。

网络时代的需要,Javascript捷足先登。浏览器一开始就绑定了js脚本技术,这让它取得先发优势。当年的浏览器大战后,微软的浏览器占据统治地位,IE里面是可以编写vbscript的,但微软在网络时代的停滞不前,丧掉了很多机会。因为网络带来的低成本信息交互以及更低的开发、部署成本,越来越多的产品基于浏览器做为界面。js在应用开发上,当仁不让。业界出于需求,制定了几版相关的技术标准,比如HTML、CSS、JS,都有了自己的位置和开发标准规范。相互紧密协作,融为一体。Web应用开始侵蚀以往的桌面应用。只要应用领域有足够的渴求,原本有很多不足的东西也会获得强大的推动力,把它改造的更好。

最后,借用Javascript创造者的话结尾 – My advice: always bet on JS.

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/175123.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Windows使用Paddle训练好的模型进行OpenVino推理引擎下的部署

目录一. Openvino下载二. 准备模型2.1 导出Paddle Inference模型2.2 转换为ONNX模型2.3 转换为ONNX模型2.3.1 获取部署代码2.3.2 环境准备2.3.3 编译一. Openvino下载 根据Paddle官方的描述,当前检测模型转换为openvino格式是有问题的,暂时只支持分割和…

docker部署常用服务器(redis,nginx,mysql,tomcat)

docker部署服务器docker部署redisdocker部署nginxdocker部署mysqldocker部署tomcatdocker部署redis 参考这篇博客,写的很详细 docker部署nginx 1.搜索镜像 docker search nginx 2.拉取镜像(不写版本默认拉取最新版) docker pull nginx 3.查看镜像是否拉取成功 docke…

Kafka-生产者基本使用

一、生产者原理 在消息发送的过程中,涉及到了两个线程——main 线程和 Sender 线程。 在 main 线程中创建了一个双端队列 RecordAccumulator。main 线程将消息发送给 RecordAccumulator, Sender 线程不断从 RecordAccumulator 中拉取消息发送到 Kafka B…

Ae 案例:制作粒子空间穿梭动画

本文介绍使用 Ae 插件 Stardust 制作粒子空间穿梭动画的一般方法与步骤。示例视频1、新建合成。持续时间:10 秒。2、新建纯色图层,命名为“Stardust”,然后添加 Stardust 效果。3、再新建一个纯色图层,命名为“Mask”。使用矩形工…

php宝塔搭建部署实战易优宠物用品网站源码

大家好啊,我是测评君,欢迎来到web测评。 本期给大家带来一套php开发的易优宠物用品网站源码,感兴趣的朋友可以自行下载学习。 技术架构 PHP7.2 nginx mysql5.7 JS CSS HTMLcnetos7以上 宝塔面板 文字搭建教程 下载源码,宝…

SpringBoot集成Swagger,前后端接口文档解决方案

一个不断在迭代的项目,Controller层与POJO层肯定会是经常变动的,在目前前后端分离的大环境背景下有一份接口文档可以极大减少项目组成员之间的交流成本,也能支持自动化测试,但靠人工维护该文档总是不够稳妥,因此我们可…

23.1.21打卡 CF-1782D Many Perfect Squares

Problem - D - Codeforces 题外话: 痛苦的 C大模拟写不出D题数论我是真菜没想到, 泪目 -------------------------------------------------------------------------------------------------------------------------------- 先抛开这题, 我们先探究下平方数的规律 1 …

容器虚拟化技术Docker(三)DockerFile、Docker部署微服务、Docker-compose容器编排、Docker监控

容器虚拟化技术Docker(三)DockerFile、Docker部署微服务、Docker-compose容器编排、Docker监控 不熟悉的docker的可以参考: 容器虚拟化技术Docker(一)简介、安装、常见命令、数据卷、安装常规软件 容器虚拟化技术Do…

QSslSocket::supportsSsl()返回false问题解决

1.问题的提出今天研究Qt官方自带的有关QSslSocket类用法的例子。该例子存放在Qt安装目录下的Examples\Qt-XX.XX.XX\network\securesocketclient其中XX.XX.XX为Qt的版本号,如:5.14.1。在main函数QSslSocket::supportsSsl()返回false,如下&…

浅析RecyclerView预加载RV-Prefetch 机制

浅析RecyclerView预加载RV-Prefetch 机制 UI渲染基本流程(UI-Thread,Render-Thread,SurfaceFlinger)(硬件加速开启) 当系统V-Sync信号来临时,会唤醒主线程,回调编舞者Choreographer#FrameDisplayEventReceiver#onVsync()开始这一…

HPC Game小结

PART 1 - 基础知识 一、文件读取 a. 二进制文件 mmap https://stackoverflow.com/questions/44553907/mmap-sigbus-error-and-initializing-the-file fread fwrite //readFILE* fi;if(fi fopen("input.bin", "rb")){fread(&p, sizeof(int), 1, fi)…

JVM调优实战——jvm常用参数及方法

一、创建会内存溢出的程序 pom&#xff1a; <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/ma…

Q_DISABLE_COPY、Q_DISABLE_MOVE、Q_DISABLE_COPY_MOVE用法详解及总结

1.前言在编程中&#xff0c;会用到某些资源&#xff0c;这些资源有的在整个应用程序期间是唯一的&#xff1b;是不能通过拷贝、赋值的方法存在多份的&#xff0c;如STL的std::unique_ptr指针指向的资源。现实中这样的资源有&#xff1a;文件指针、串口句柄等。试想如果存在多个…

TVM: End-to-End Optimization Stack for Deep Learning论文阅读

摘要 很多目前最为流行的深度学习框架&#xff0c;如 TensorFlow、MXNet、Caffe 和 PyTorch&#xff0c;支持在有限类型的服务器级 GPU 设备上获得加速&#xff0c;这种支持依赖于高度特化、供应商特定的 GPU 库。然而&#xff0c;专用深度学习加速器的种类越来越多&#xff0…

数据库系统概念 | 第四章:中级SQL

文章目录&#x1f4da; 连接表达式&#x1f407; 自然连接&#x1f407; 连接条件&#x1f955;natural条件&#x1f955;using 条件&#x1f955;on 条件&#x1f407; 内连接和外连接&#x1f955; 内连接inner join&#x1f955; 外连接outer join&#x1f343; 左外连接lef…

Web 应用渗透测试 00 - 信息收集

背景 这个系列写 Web 应用渗透测试相关的内容。此篇从信息收集开始&#xff0c;看一下 Web 应用端有哪些方面的信息值得渗透测试者去收集&#xff0c;能对后续的行动产生积极的影响。 Web 应用渗透测试 - 信息收集 security.txt 这个文件包含了网站的漏洞披露的联系方式。如…

Java面试题每日10问(18)

Miscellaneous Interview Questions 1. What are the advantages and disadvantages of object cloning? Advantage of Object Cloning You don’t need to write lengthy and repetitive codes. Just use an abstract class with a 4- or 5-line long clone() method.It is t…

二叉树的迭代遍历

二叉树的迭代遍历 前序遍历 基本思路 基本思路其实很简单, 使用递归遍历的时候, 一直是系统帮我们把其他数据压栈, 举个例子 > ans [5,4,6,2,1,null,null] 前序遍历的序列是: [5,4,2,1,6] , 栈的出入顺序是, 先入, 后出, 假如我们想要一个元素先出, 就要让它后入栈 基…

STC12驱动MLX90614红外测温模块在LCD1602显示

文章目录1、基本简介2、通信方式3、参考STC12例程参考文献1、基本简介 2、通信方式 通过芯片手册我们可以了解到这个模块的输出有PWM和SMBus方式&#xff0c;PWM长期做嵌入式开发的已经很熟悉了&#xff0c;那么什么是SMBus呢&#xff1f; SMBus&#xff08;系统管理总线&…

swift(3)

目录 while循环&#xff0c;repeat while循环 String基本操作 Array数组 Set集合 while循环&#xff0c;repeat while循环 import UIKitvar a0 while(a<5){print(a) }简单的while循环&#xff0c;我这一个循环下去&#xff0c;我playground直接被强制退出。 import UIK…