Svelte,一个不会消失的框架

前几天,在舒适的@sveltejs 聊天室中,他们向下一篇有关Svelte的“显示” 文章发送了电报链接,我感到非常高兴,因为他期待着一场有趣的技术战或至少是对别人的实践经验的有趣阅读。除了它总是很有趣和有用的事实外,在某些情况下(计划的假期和检疫)使我感到无聊,而类似的文章可能会使我的生活变得多样化。想象一下我的失望,您甚至无法想象...但是让我们开始做生意。



再次澄清一下,本文是对出版物“ Svelte,一个仍在消失的消失的框架”的回应

免责声明
, , -, . , - — , , « ».

尽管事实是原始文章的作者,亲爱的 动作52冠军显然处于抑郁状态,可能是由于自我孤立和全球危机所致,他直接写道:

action52champion:偏执狂,你说,你是对的。但是我的治疗师正忙着为冠状病毒受害者提供支持。他们需要它。因此,我必须宣布自己。

我仍然尝试使响应出版物变得有用,有趣并且最重要的是不要邪恶,以我对原始文章作者的采访的形式呈现一切。在此过程中,我将尝试回答一些关于Svelte作为工具的选择,在我国如何被准确实施以及今天发生了什么的常见问题。我会讲几个故事。因此,为了。

面试


关于我


action52champion: . : Angular, React, Vue. , - Svelte production-ready .

嗨,动作冠军,我很高兴来到这里,谢谢你邀请我!我的名字叫帕维尔·马利雪夫(Pavel Malyshev),我是所有那些使您不知所措的精彩文章的作者(即使其中大多数是翻译)。目前,我领导着下诺夫哥罗德一个小型工作室在Web和Smart TV领域的开发工作。

即使我们的一位读者没有关注Svelte,也许他们也可以从我在俄罗斯和独联体最大的IT会议上的报告中了解我,例如HolyJS,RIT ++,FrontendConf,DUMP,CSS-Minsk-JS,Yandex事件和俄罗斯联邦不同城市的各种杂烩。

我还恰好是RadioJS第54-55号,Web标准第170号,Devshahty第94号以及其他一些问题的英雄。除Svelte外,我还想谈一谈具有SSR,PWA,Web组件和SmartTV的同构Web应用程序。

, Svelte


action52champion: , , , .

好问题!事实是,我很幸运能够就我所监管的开发区域中的特定项目中将使用的某些技术做出单独的决策。另外,在我看来,我的技术水平和经验(超过13年)使该选择尽可能地平衡。

不幸的是,在IT公司中,做出这样的决定的人通常与开发过程和技术脱节,因此,即使其开发者的意见也没有指导,而是一些公认的决策选择和宣传。也就是说,他们的理由与您大致相同:“有三巨头,并且有很多现成的解决方案,然后您会怎么想。”

由于我们的工作室很小,我直接参与项目开发并编写代码,因此我会尽可能谨慎地选择技术,并且逐步,系统地但大胆地实施解决方案。

谈到Svelte,我在2017年选择的第一个项目是针对网站的嵌入式小部件。实际上,选择不是很大-要么是香草味,要么是将什么编译成香草味。甚至那时我们心爱的Vue的纯净形式也重约25Kb gzip,对于这样的项目而言,这是巨大的。

最终选择非常成功,最后得出的结论是,如果我们停在纯香草上并从头开始编写所有内容,那么我们很可能会错过最后期限,甚至可能会亏本。但是我们很幸运找到了斯维尔特,尽管那时还没有人真正了解他。

同年,完成项目后,我在Habr上写了关于Svelte的第一篇文章“ Magic Disappearing JS Framework”,与社区分享了一种新的有希望的工具。自然地,这篇文章受到了相当冷淡的欢迎,这一事实可以被以下事实所证实:一个具有代码示例和良好设计的或多或少的技术文章所收集的优点数比今天的亵渎“ vyser”少3倍。实际上,这是有关Svelte的第一批文章之一,而不仅仅是俄语。

关于付费文章以及什么是“利润”


action52champion:下次我被某人只是在涂鸦自定义帖子时感到困扰。

突然我想我花在斯维尔特社区发展上的部分时间实际上是由我的工作支付的。不确定我的材料是否应考虑定制?

似乎在一次采访中我说过,除了推广我在工作中使用的体面工具并帮助他的社区/开发人员外,我的间接兴趣是,Svelte程序员,他们的空缺出现在市场上,并且客户更忠于使用这项技术。当然,不仅如此,事实是使用Svelte可以使我们的工作更加轻松,并节省我们的时间和金钱。

好吧,我告诉你它是如何工作的。客户通常分为2类:

  1. - React/Vue/Angular/Ember/{ } — ,
  2. , .

不幸的是,通常首先要基于炒作/公关来做出第一个决定,当然,对于那些由公司(React / Angular)和/或强大社区(Vue +中文)支持的工具来说,这当然更强。

在我们的客户“我听说过的那些框架”列表中隐藏我们想要我们认为是最好的工具是没有道理的。并非因为我们是某种受虐狂或反派,并且我们想在周围做坏事,而是因为我们谦虚地认为,这是一个非常有价值的工具。苗条的解决方案既简单又有效。大多数情况下,我会惊恐地看着React项目,有时这些项目需要我们完成。即使是我自己一个非常美丽和喜爱的Vue也已经显得笨重。

总的来说,我认为“冰破了”,我们已经实现了目标。如果在2017-18年度仅针对第二类客户在Svelte上做一个项目是可能的,那么在2019-2020年,许多人都听说过Svelte并准备在其项目中使用它。几乎每天,人们,包括大型服务在内的各种公司的代表,都会在Telegram中通过个人聊天和Svelte聊天写信给我,并询问Svelte及其生态系统。亲爱的Action,我很高兴您给了我机会讲述这一点。

关于特定缺陷


action52champion:我不想比较Svelte和其他框架并克服其特定的缺点。您可以阅读本文以了解详细信息。

在这里,你是卑鄙的。据我了解,您没有Svelte的经验。在我看来,您甚至都没有通过该教程的官方网站来推理该主题。因此,我相信您根本无法做到这一点。如果我输错了,请写信给我,我准备在实践中进行测试,例如,与您一起下注。

反过来,我很愿意考虑一个特定的情况下,我已经在末尾提到斯维尔特的主要缺点这篇文章另外,在我们的电报聊天中可以找到很多实质性的评论我们那里没有审查制度,您可以就此主题写任何问题。

关于三巨头


action52champion: : , , — ( ) .. , , . . -. - 5 . . . . . .

您知道,您提出了一个有趣的话题。三巨头的项目是如此“成熟”吗?它们可以涵盖所有Web开发案例,回答所有“新挑战”吗?显而易见的答案是“不”,因为否则我们将不会看到越来越多的新解决方案的出现。

新解决方案出现好吗?肯定是的,因为时间在继续,新任务在不断出现,新的挑战就出现了。 10年前,我们只考虑台式机和驴子; 5年前,我们考虑移动设备;今天,物联网,嵌入式和可穿戴设备脱颖而出。

我了解,作为容易遭受抑郁症困扰的开发人员,您希望进度停止甚至放缓。为了使您的世界像毡靴一样简单-每种口味和颜色都有三大框架,而且您确切知道该怎么做。但是亲爱的行动,事实并非如此。

因此,不是第一波前端框架,现在的领导者也不会。顺便说一句,从这个意义上讲,我根本没有说Svelte一定是一个新的潮流工具。他确实做了很多思考,但与此同时,又使他更加适应现有的解决方案。我不知道他是否将在新的前端技术万神殿中占据领先地位,还是仅仅是它们出现的预兆,尽管我不排除这样的机会。

关于Vue


action52champion:我记得Vue如何在有棱角的反应下起飞并获得欢迎。是的,有PR,但是Vue不需要PR。他解决了其他框架膨胀和复杂性的实际问题。他接受了别人实现的东西,并以简约的形式实现了。他解决了一个特定的问题-其他两个框架的复杂性和怪异性。我不知道斯维尔特能解决什么真正的问题。他们网站上写的是善意声明。

我真的很喜欢这个故事。关于具有精美设计的高贵Vue如何意外地进入所有人的框架万神殿,并以其简洁明了的方式加以说明。我喜欢这个故事中的所有内容,只不过是一个神话。看一下:

这是Vue(2014)的代码:

var app = new Vue({
  el: '#app',
  data: function() {
    return {
       greeting: 'Hello',
       firstName: '',
       lastName: ''
    };
  },
  computed: {
      fullName: function() {
         return this.firstName + ' ' + this.lastName;
     }
  } 
});

这是Ractive(2012)代码:

var app = new Ractive({
  el: '#app',
  data: function() {
    return {
       greeting: 'Hello',
       firstName: '',
       lastName: ''
    };
  },
  computed: {
      fullName: function() {
         return this.get('firstName') + ' ' + this.get('lastName');
     }
  } 
});

如您所见,除了外观上的微小差异外,其余代码几乎相同。

也许您会说这是一所古老的学校,每个人都在SFC(2015)中写Vue:

<template>
<p>{{greeting}} {{fullName}}</p>
</template>

<script>
export default {
  data: function() {
    return {
       greeting: 'Hello',
       firstName: '',
       lastName: ''
    };
  },
  computed: {
      fullName: function() {
         return this.firstName + ' ' + this.lastName;
     }
  } 
};
</script>

<style scoped>
p { color: red; }
</style>

我会回答你,“月下没有什么新东西”(c) -Ractive(2014):

<p>{{greeting}} {{fullName}}</p>

<script>
component.exports = {
  data: function() {
    return {
       greeting: 'Hello',
       firstName: '',
       lastName: ''
    };
  },
  computed: {
      fullName: function() {
         return this.get('firstName') + ' ' + this.get('lastName');
     }
  } 
};
</script>

<style>
p { color: red; }
</style>

还有那个虚拟DOM或并行DOM我希望我没有完全弄糊涂你。我浏览了对原始文章的评论,并意识到您不了解虚拟DOM和影子DOM之间的区别,这显然来自于此评论:

action52champion:Shadow DOM是不是从美好的生活引入框架的。缺少它意味着Svelte肯定会慢一些,那里会有很多更新。

显然您也没有听说过Web组件,但您甚至都没有想到为什么需要虚拟DOM。没什么,但是您是一位优秀的面试官,为此您受到爱戴。

但我会继续。我们之所以在2015年搬到Vue的原因之一,是因为自2013年以来我们一直使用Ractive,因为缺乏“激进的传教士”,根本无法爆发并建立群众。同时,年轻的Vue与他类似,滴了2滴水,这是在一个具有高度凝聚力和面向民族的华人社区的支持下,已经开始在中东王国大肆宣传。事实证明,此举实际上是免费的,尽管我们失去了Ractive的一些炫酷功能,而Vue仍然没有。

这也是您应该学习的一课-最好的技术并不总是排在最前面。除了思想的质量和创新性之外,还有更多因素。必须有增长动力,无论是公司支持还是酷社区。那样,钻石就不会变成钻石。

我真的很喜欢Vue,并且我认为这是三巨头最适合我的乐器,但我客观地了解到我自己并不喜欢它,而是我所喜欢的那些想法。 Ractive的想法使我们迷失了方向。

Svelte在很多方面都是Ractive思想的追随者,并结合了Rollup中体现的思想(例如,极简主义,摇树等),这并不奇怪,因为所有这些工具都有一个作者

最近,Angular引入了类似于Svelte的AoT模板编译。您是否知道我第一次在哪里看到(甚至使用过)类似的东西,而这让我们在2013年就抛弃了可用于模板的那部分运行时?好吧,你明白了。

为什么这么久


action52champion:从实用的角度来看,一件事情很重要-框架解决实际业务问题的能力。从这个角度来看,如果您采用两个以相同方式解决问题的框架,但是其中一个框架具有更多的社区和生态系统,则选择后者是合理的。Svelte于2016年发布。Vue于2014年发布。相差2年。那些。Svelte可以考虑Vue的所有错误并成为最好的Vue,从而赢得观众和市场。但是他仍然是最主要的边缘人物,主要是因为他的赞美文章。

在回答问题之前,我会稍微纠正您的说法。实际上,Svelte于2017年发布。它的作者里奇·哈里斯(Rich Harris)在他的“没有框架的框架中谈到了他:我们为什么不早想到这一点?”仅在2016年末。

另外,Svelte 1更有可能是一种概念验证,在社区中以及与作者进行的交流中已多次讨论。尽管如此,我还是在第一个带有小部件的项目中使用了Svelte 1,并且在此任务下它运行完美。那时,我们继续编写Vue并在Ractive上支持项目。在Svelte 2上已经开发了第一个或多或少严肃的项目,其发布仅在2018年年中发生,我立即在相应的文章中写道

我要说的是,从第二版Svelte开始,原则上我开始有所进步。在此之前,我,作者,社区中的其他人都不曾特别谈论他。因此,由于您希望考虑年份,因此考虑Svelte的发布日期为2018年中期更为合适。评论中的

一些涟漪表明,Svelte的发布日期是Svelte 3的出现,该版本通常仅在一年前发布,并在今年取得了惊人的成绩。在这个主题上,您可以回忆起Angular和AngularJS-相同名称的两个不同框架。我个人认为所有这些计算都不过是愚蠢的民粹主义。

您可能想知道为什么我们没有在Svelte 1上编写更多项目,因为它是如此的漂亮。答案似乎很明显-当时确实很潮湿,仅适用于小部件之类的项目。我不能说我们完全放弃了它。在Svelte 1上还编写了一些内部项目,还在Ractive上重写了部分旧应用程序。这些成为虚拟DOM性能瓶颈的组件已成功重写为Svelte 1,并在项目中实现,使这些组件的性能提高了一倍。这也是一次非常积极的经历。

关于愚蠢和贪婪的前端


action52champion:对于刚进入前端的用户尤其如此。他经常开车兜风。所以:斯维尔特(Svelte)没有钱。也没有任何工作。最有趣的是-也不会有经验。

非常感性的措辞。由于某种原因,我认为您只是“为了钱而进入前端”的人之一,而且似乎是最近。

如果我弄错了,并且您是经验丰富的前端,那么也许您还记得几年前,同一Vue的工作也没有完成。乔布斯是零碎的,给开发者的钱比React,Angular甚至Ember少。同时,现在我们看到Vue已经占据了重要位置。对于Svelte,是否想要它也是不可避免的。

关于生态系统


action52champion: « » « , ». , , . ! 2020 — .


至于斯维尔特及其生态系统。立即值得注意的是,尽管表面上看起来很简单和极简,Svelte的功能非常强大。作为一个坚实的UI框架,它绝对具有创建现代UI所需的一切。这是为我的一份报告准备的内置功能的图表:



例如,在React中,什么都没有。尽管React是最受欢迎的UI框架,但就功能而言,它不过是模板引擎。

当然,外部生态系统仍然适度得多。但是,Svelte已经有大量现成的解决方案和各种组件的列表,您可以在此处找到并朝着与其他框架完全相同的方向发展。可惜的是,像你这样的人却在无意中试图抓住他的机会。另一方面,我记得几年前每个人都曾写过关于Vue的同一本书,大约6年前是关于React的,但都没有成功。无知总是永远只是无知。

关于“圣”


action52champion: , , — - . , 3 , . , , , , , . Svelte .

我不想深入探讨这个问题,以免得罪任何人。我只能说,经常因为Facebook公司发展问题的特殊性而“尖锐”批评同一反应堆。可以理解,Facebook主要是自己做出React,并不是所有对Facebook有利的决定都对您的项目有利,但是没有人要抱怨。

通常,React是一个适合许多项目的好框架,尤其是当您需要出色的Typescript支持时。但是他远非完美,他肯定需要其他选择。

关于各种各样的不同事物


动作52冠军: , Svelte . JS VueJS, Svelte. Vanilla JS , ? , ? - ? Virtual DOM, ? Write less code? ? , , , Vuejs React - , .

突击问题,太好了。

  1. 极简主义是可以实现的。当在解决方案的基础中设定了不同的原理时,就会出现问题。例如,由于其中包含大量样板,Reduh本质上不可能是简约的。同时,Storeon基本上遵循相同的原理,仍然保持简约。通常,所有现代框架都倾向于将其组件拆分为最小的单元。另外,您需要了解如何编写最具说明性和状态驱动的代码。
  2. 这不是Vanilla JS和Svelte之间的选择。Svelte-这是Vanilla JS,您无需编写,并且易于维护和开发很多倍。
  3. Typescript + — « », -. . TS. , Vue ? TS ± Svelte.
  4. , Virtual DOM. Svelte , change detection . .
  5. . . React Vue. 1.5 , .
  6. 由于您不喜欢Svelte文档中的示例。您可以从其他框架的文档中提出更严重的案例吗?

通常,为了简要解释Svelte的工作原理,我使用以下措辞:

Svelte允许您在易于开发和维护的源代码中编写高级声明性代码,并获得在运行时运行良好的低级命令式高性能代码。



而且这种方法甚至与Vue也有很大不同,在Vue中,SFC只是编写Vue.extend的一种更方便的方法。

关于社区


action52champion:Svelte拥有一个大型的俄语社区。我看不到他,我只看到传教士,每个宣教士都宣讲十句。

很高兴你问了这个。俄语社区以电报(@sveltejs),Sapper框架(@sapperjs),具有空缺(@sveltejs_jobs)和新闻(@sveltejs_public和新闻(@sveltejs_public的频道以及VK组(@sveltejs_ru的主要聊天代表
主要运动是在聊天中,已经有超过1500的人和活跃的战友们颇为刺激的骨架。




2月22日,我们在莫斯科举行的首次越野集会上有170多人,近一千名观众观看了在线广播。下一次混战原定于4月至5月在圣彼得堡举行,但大流行对我们的计划进行了调整。我希望一切都会很快解决,我们将继续。您可以在Svelte Russian聚会的官方页面上关注我们的聚会

让我们看看还有谁在谈论斯维尔特。例如,这是受人尊敬的Andrei Melikhov(Devshakhta)讲述了Yandex.Money如何使用Svelte:



在这里,是去年的HolyJS Piter上Andrei Sitnik(PostCSS / Autoprefixer等的作者)的字面意思
坦率地说,Svelte是迄今为止Javascript框架中最好的发明。我们不应该谈论钩子,我们应该谈论斯维尔特。”

尽管很可能是风景夸张,但他对Svelte的不断推文和转推丝毫不怀疑他的诚意。



当然,毫无疑问,我受人尊敬的面试官比我们所有人都聪明……尽管不,我对此表示怀疑。对不起,大声念头。

专业(不)意识


action52champion:级别的反驳-您只是无法弄清Svelte-通常超出了幽默范围。从事角度工作并做出反应的人无法弄清楚简单的Svelte吗?这里的重点可能在斯维尔特本身。或基本上没有什么可理解的,因为没有任何值得的。

看来我已经回答了类似的问题,但是由于您为我提供了这样的机会,因此我准备重复该问题。我个人在推广Svelte方面遇到的问题之一是,尽管在概念上有很大差异,但在视觉上它与三巨头框架过于相似。在Svelte 1/2中,尤其是当人们来到社区并接受Habr的评论时,这种感觉尤为明显,并真诚地不理解Svelte与Vue有何不同。确实,那时两者都与Ractive过于相似。随着Svelte 3的发布,差异变得更加明显,但这并不能完全解决问题。

这就是为什么来到Svelte的人们最经常采用与其他框架相同的方法,而没有意识到Svelte可以为相同的问题提供更优雅的解决方案。您甚至无法想象我们每天在聊天中都会考虑多少种此类情况,而大多数人会留下这样的评论:“怎么办?”


专业版(不)受欢迎


action52champion: « , 3 ?», . , . 5 , . - , . . , ( ). — , .


而你是一个挑衅者! )))尽管许多人会认为这是面试官的尊严,但我仍然认为您至少需要对该主题有一点了解,以免在他们的挑衅中显得愚蠢。

“亲爱的,你又睡过头了。” (c)参见StateOfJS 2018-在“其他库”中名列前茅的Svelte,并在最近的2019年稳步进入前端框架的主要资源库,同时以“兴趣”为准:



所以有进步。但是,也面临着对市场简单法则的绝对误解。当市场为“空”时,它也被称为“蓝色海洋”,那么就很容易占领它,尤其是在Facebook落后于您的情况下。当市场竞争激烈(猩红色的海洋)时,进入市场要困难得多。因此,随着时间的流逝,成为领导者开始需要更长的时间,这是合乎逻辑的,但这也表明了相反的情况-如果您可以在竞争激烈的市场中脱颖而出,甚至没有钱也没有公关,那么您的产品确实值得。

最后,看看有多少个框架/库/平台/ $ mol,但并不是所有的框架都可以与三巨头并驾齐驱。是的,至少他们只是在流行的IT资源上拥有自己的中心,并在Github上突出显示自定义语法。

斯维尔特(Svelte)已经拥有了所有这一切,但是当然不仅仅如此,而且还要感谢社区的工作。它已经足够流行,可以在MediumDev.to上找到大量文章,Youtube上获得大量培训和其他视频,以及许多现成的解决方案。不要自责,每个人都错了。

关于OSS


action52champion: Svelte . Svelte, , Svelte . , ? , . ? Who's using Svelte?.. - ? , , VueJS ?

正如我们已经发现的那样,自Svelte普及开始以来已经有2年,或者从其流行版本的发布开始已经有1年了,围绕它发生了很多事情,所以我认为这个问题很明确。

但是,重要的是要再提一件事:Svelte是一个纯粹的社区驱动项目,社区不希望与任何公司建立联系或联系。就在最近,社区中有人开始为框架的作者谈论Patreon,但是作者本人甚至停止了这些讨论。我了解许多人习惯于无偿使用OSS的好处,甚至向他们提出他们的业务需求。但是实际上,做OSS的人不会欠您任何东西,亲爱的,但是我们许多人可以参加OSS项目,并且不会愚蠢地根据他人的决定赚钱。

关于斯维尔特,那些相同的“不同”公司对我们的帮助也不同。例如,Mail.Ru在Svelte上的第一个俄语metapom帮助了我们很多。我们为美丽的办公室提供了设备,Cookie,并负责广播和录制的组织。谢谢Mail.Ru!

关于以下事实


action52champion:您确定推荐此框架的权利是否如此明确?前端是一个新人们每天都没有经验的领域。他们无法理解斯维尔特一文不值的程度。他们将看到赞美文章,聪明的家伙认真地谈论事件,编译器等的精彩转发。从学术的角度来看,有趣的是,从实践的角度来看,不是有趣的。他们会认为值得联系,他们会花费时间并且一无所有。并提供大量关于在Svelte上进行垃圾处理的奇妙文章的文章,这也可以在常规框架上完成,这给新手增加了一头大猪。

我最喜欢的问题!几乎像蛋糕上的樱桃。

是的,我确定我是对的,这就是为什么:

  • 我知道我在说什么。我在工作中使用Svelte,并在OSS中发布解决方案。
  • 我是技术选择的决策者,并对项目的成功负责。
  • 我有比较的东西。除了Svelte,我现在和过去都有很多框架的经验(Backbone,AngularJS,Ractive,Riot,Vue / Nuxt,React和LitElement)。
  • 我与也使用Svelte的人进行了很多交流,并经常帮助想要学习它的人。我听到了他们的问题,并尝试始终提供解决方案。
  • 我阅读了有关Svelte的报告,并准备好实质性地回答问题。

亲爱的动作冠军,感谢您邀请我并给我机会再次告诉您有关Svelte这样出色的框架!感谢您提出的深思熟虑,结构合理的问题和提出的主题。祝您一切顺利,并度过美好的一天!



P /秒


采访结束了,现在是Alaverdi。而且,亲爱的@ action52champio,您确定自己有责任归咎于不仅没有使用过而且还没有真正看到的乐器吗?您在Svelte的实际经验是什么,它是否至少具有其中一个框架?您不喜欢React,也不了解Vue。有角吗?不,我不这么认为。

在我看来,在您至少在某种技术资源上写一些东西之前,有必要适当地弄清楚它,而不是乱扔垃圾,这是有道理的,因为心理治疗师缺乏关注。给他打电话更好,你需要它。

更新:


我借此机会邀请大家参加Svelte作者的在线会议,他将回答从社区中收集到的最有趣的问题:
sveltesociety.dev

All Articles