Get best of the week

现在该忘记React并升级到Svelte吗？

每年，都会发布JavaScript状态研究报告，其中总结了检查JavaScript生态系统当前状态的调查结果。这项研究涵盖了前端框架，服务器和移动开发，测试，面向开发人员的流行资源等等。

当然，其中的所有内容都围绕JavaScript。因此，如果您使用JS进行Web开发，强烈建议您看一下JavaScript状态（如果您尚未这样做的话）。

对我来说，JavaScript状态最有趣的结果之一是参与调查的人们对Svelte前端框架的意外关注。

在领先的前端工具的总体排名中（基于对框架的了解程度，对其的关注度和满意度的指标），Svelte位居第二。他在React之后紧随其后，领先于Vue.js，Preact，Angular和Ember等著名工具。
就年龄和软件开发范式而言，Svelte是一个相对较新的工具，这让我有些震惊。


根据JavaScript研究状况对前端框架进行排名

我知道很多人在这里会很生气，但是说React和Svelte并不是框架，而是库。我知道这一点，但是研究报告不是我写的，所以让我们结束关于此的术语问题。

我找到了一个Svelte模板项目的示例，并创建了一个小的Hello World应用程序。


左边是最简单的React项目。右边是一个类似的基于Svelte的项目，

尽管这个简单的项目很难进入工作状态，但是以前在React上写过书的人将需要一些时间来掌握Svelte。

值得花时间学习Svelte吗？也许我们只面临着另一种时尚事物，它会像出现时一样迅速消失？我建议找出来。

这项研究的目的


我想回答以下问题：“我是否应该停止浪费时间学习React并开始与Svelte打交道？”

我们将通过探索React和Svelte之间的根本差异来寻找这个问题的答案。这将使我们开始了解这些工具各自具有的独特品质。结果，我们将找出值得投资的人。

我们首先回顾每个库，然后讨论它们的优缺点，然后得出结论。

反应


在过去的几年中，几乎每个人都在谈论React。这个由Facebook创建的图书馆迅速捕获了Web开发的世界。现在，它是一个世界上排名第一的Web开发工具（事实是，对“第一”问题的答案取决于谁被问到这个问题）。

React库在很大程度上要归功于它周围的社区，如今它们的增长比以往任何时候都快。尽管没有迹象表明这种增长会放缓。

这是三个使该库特别有吸引力的功能：

  1. 声明性。
  2. 基于组件的应用程序结构。
  3. 易于集成到现有技术堆栈中。

React的声明性本质是允许您创建交互式用户界面的原因。程序员只需为每种状态设计应用程序的可视元素就足够了，然后其余的工作由React完成。这简化了对代码的阅读和理解，有助于调试。

其余的反应如何？通过使用虚拟DOM技术。在库的内部，在程序员编写的代码和实际DOM之间的中间级别上，确定需要更新DOM的哪些部分。借助这项技术，可以确保较高的页面渲染速度。

React库的设计使开发人员工具堆栈中使用的技术完全无关紧要。 React-frontend可以“拧”到任何东西。例如，基于Node.js，Ruby on Rails，Spring Boot，PHP 等的后端。该库在与之交互方面完全是中立的。

为什么有人称React为“库”，有人称React为“框架”？为了与React一起创建特定的应用程序，您需要使用其他库来控制应用程序的状态，进行路由以及与各种API进行交互。如果您使用创建一个React项目模板create-react-app -它没有框架可能期望的某些工具。

斯维尔特


Svelte是为了改变前端开发领域的情况而创建的工具。这是有关Svelte 3 的精彩视频，其中Svelte的创建者Rich Harris对此有趣而情感化地谈论。如果您尚未观看此视频，建议您看一下。

在本次演讲中，很好地介绍了反应式编程的历史，突出了反应式机制的传统实现中固有的缺陷，并提出了相应问题的解决方案。

Svelte的基础是可归因于React的优势。Rich Harris非常了解React内部的优缺点。

React会保持界面最新，并在浏览器中执行其他操作。 Svelte在项目的构建过程中完成了自己的工作。这是React和Svelte之间的主要区别。这就是Svelte文档所说的：“ Svelte在项目构建期间将您的应用程序转换为完美的JavaScript代码，而不是在运行时解释应用程序代码。”

Svelte不使用类似比较真实和虚拟DOM的技术。

Svelte编译器采用一个声明性组件，并将其转换为与DOM直接交互的高效，命令式，低级代码。

由于Svelte使用编译器而不是虚拟DOM，因此可以减少浏览器的负担，提高页面的速度，并方便浏览器的JS引擎收集垃圾。浏览器在执行页面代码时不必解决某些任务，从而提高了项目的生产率。

诚然，像React一样，Svelte使用以声明式风格编写的组件。React和Svelte之间的大部分差异是在他们构建Svelte项目之后开始的。

React和Svelte的优缺点


让我们谈谈所研究的库的优缺点。

React React的优势


  • 强大的社区支持。
  • 很多库用于测试基于React编写的代码。
  • TypeScript支持。
  • 优质的开发人员工具。
  • , .
  • React-.

▍ Svelte


  • , , Svelte.
  • - (HTML, CSS, JS).

    • JSX .
  • .

    • Svelte- 40% , React-.
  • ( ).
  • .

▍ React


  • DOM — .
  • .
  • .
  • - React.
  • JSX- .

▍ Svelte


  • ( React) .
  • TypeScript.
  • , , , .
  • , Svelte ( , ).


回到我们的问题：“我是否应该停止浪费时间学习React，并开始与Svelte打交道？”

老实说，我开始撰写本文，希望得出结论，即斯维尔特技术太年轻了，不值得在研究上花费很多时间。但是，当我弄清楚发生了什么之后，在我掌握了基础知识之后，我对所揭示的内容，所感受到的斯维尔特的那种动感都充满了兴趣和印象。

毫无疑问，Svelte项目具有非常好的性能。

斯维尔特（Svelte）背后的想法大胆而进取。 Svelte社区的规模正在增长。我确信前端工具的成功（以及它们的分布范围）在很大程度上取决于社区以及开发人员如何采用这些工具。

结果，我们可以说，如果Svelte以及与此库相关的所有事物继续以相同的速度发展，那么我们可以期待这项技术的广泛传播。

当然，Svelte才刚刚开始，所以我们还不知道这些问题，在实际项目中实施Svelte期间可能不可避免地会出现许多问题。我们不知道程序员将如何规避这些问题，图书馆开发人员将如何改进这些问题。

当React库首次出现时，它看起来像一个没有任何缺点的最新工具。但是，随着React的发展和传播，事实证明Web开发人员必须应对各种困难的情况，他们必须寻找解决方法和妥协方案。库本身的开发人员也必须努力改进它。

我确定斯维尔特（Svelte）正在等待同样的事情。毕竟，Web开发的世界非常不稳定。

如果您还不准备离开React，我建议您至少密切监视Svelte。这个库可以以比您想象的更快的速度成为强大的竞争对手。

亲爱的读者们！您如何看待斯维尔特？

More articles:


All Articles