苗条和棱角分明比起来怎么样

如果你问任何认识我的人,他们会说我最喜欢的应用开发框架是Angular。虽然我也喜欢React和Vue,但Angular对我来说就像家一样。在使用Angular时,我觉得自己的工作效率最高,对自己编写的代码也最自信。但是探索其他技术和扩展你的知识总是好的。带着这个想法,我想试着学习SvelteJS当我用电容器.那么,Angular开发人员是怎么看待slvelte的呢?

入门流程

当你开始使用Angular时,我们鼓励你在开始新项目时使用Angular CLI。Angular CLI是一个集启动应用、构建应用和在开发应用时添加新特性于一体的工具包。该工具包为任何开发人员提供了坚实的基础。slvelte(据我所知)不提供这种功能。相反,它们提供了一个带有Rollup配置的简单入门模板。基于他们的网站,如果您想开始,您可以简单地使用sveltjs /模板并克隆项目通过degit

NPX degit sveltejs/template my- slvelte -project CD my- slvelte -project NPM install NPM run dev

通过运行这段代码,您可以得到一个只有一个“hello world”组件的基本项目。

这并不一定是一个1:1的比较,因为与Angular这样的东西相比,slvelte的范围是非常不同的。虽然Angular显然是一个应用框架,但slvelte更接近于一个UI工具包,比如React。虽然你可以用slvelte构建一个应用,但你需要把不同的库、包等放在一起,才能得到与Angular类似的东西。slvelte团队心满意足地凑在一起SvelteKit这是一个用于构建由slvelte支持的应用程序的框架。尽管slveltekit很有趣,但这并不是我的应用程序的重点,所以我在这里就不再赘述了。

不考虑Angular/ slvelte之间的差异,比较两者可以发现一些显著的差异。在使用slvelte时,一旦您克隆并设置了模板,您就可以随心所欲地自定义工具。想用不同的东西替换Rollup插件吗?想要自定义输出和捆绑过程?slvelte将为您提供完整的Rollup配置,并且希望您知道如何配置它。

另一方面,Angular将这些抽象了出来,所以你并没有真正直接处理底层工具。Angular这样做是为了给所有用户提供最佳的体验。如果你想换出一个在构建链中使用的工具,不深入到Angular的构建过程中是无法完成的。

这两种方法都有它们的价值,但是很高兴知道我可以很容易地打乱构建过程。

语法和语义

在Angular中,有一个简单的语法来处理组件的事件和道具:

  • (道具):通过用方括号将道具名称括起来,道具可以有动态绑定。
  • (事件):事件绑定可以通过将事件名用圆括号括起来来实现

slvelte对此也有类似的语法

  • 支持= {val}:通过将值用花括号括起来,道具可以具有动态值。
  • : eventname = {func}事件绑定可以通过使用:前缀后跟事件名称。

这让我很容易理解日期是如何传递的。

真正的变化是处理动态标记或内容。例如,如果你想在Angular中动态渲染一些内容,语法就会使用这个* ngIf语法。

我只会在"condition"的值为true时渲染。< / div >

在slvelte中,语法略有不同

{#if condition} 
我只会在"condition"的值为true时渲染。< / div >{/如果}

这种“块”语法虽然不同,但在多次使用之后非常容易掌握。

这里最大的收获是,Angular和slvelte之间的语法是不同的,它们有相同的语义。这意味着有一种方法来做属性绑定,一种方法来做事件绑定。因此,如果你想从Angular进入slvelte,一旦你了解了它的语法,你就会感觉如家一般。

组件结构

结束这个比较,让我们看看组件是如何结构的。对于Angular开发者来说,我们很习惯看到这样的东西:

@Component({selector: 'app-root', templateUrl: 'app.component.html', styleUrls: ['app.component.scss'],})导出类AppComponent {constructor() {}}

对于Angular来说,组件基本上就是一个类。有趣的是@ component它告诉Angular编译器接受模板和样式传递,创建一个组件,并使用类作为逻辑。slvelte有类似的概念,但基于标记使用了不同的语法。

为我们的AppComponent,在slvelte中,我们可以这样写:

<!——app . slvelte——>  
Hello {name}!< / div >

这种方法与构建Vue组件的方式非常相似,而且这种单文件组件模式在其他框架中非常流行。我们不需要为模板、样式和JavaScript创建多个文件,只需要一个文件来保存所需的所有部分。我仍然对单文件组件持观望态度,但我知道人们为什么喜欢它们了。当您需要构建一个组件时,能够停留在一个地方而不必跳转到多个文件,这是非常好的。

想在另一个组件中使用一个组件?在Angular中,我们有这个selector键@ component装饰器,我们在模板中使用它。但是对于slvelte,我们可以只导入组件并使用文件名作为标记名。

<!——app . slvelte——>  

我真的很喜欢这个,因为它使作曲超级快。我不需要发现组件标记,只需导入文件并使用其名称作为标记!

潜水深

虽然我们还没有讨论Angular和slvelte之间的所有区别,但很明显,slvelte有很多独特的特性,可以让它在某些项目中变得很有吸引力。在构建我的新应用程序时,我将继续讨论这个问题,所以请关注本系列的更多内容。下次见,编码愉快!

注册爱奥尼亚通讯以获得最新的新闻betway东盟体育app和更新!

明显的回复

  1. @mhartington

    很酷的东西。我也做了同样的尝试,试图用他们的启动器将苗条和爱奥尼亚结合起来。betway东盟体育app我使用CDN -这似乎是最简单的方式,确实与barebone苗条,这工作得很好。当然,进口可能更好。

    另一个用户进行了一些集成—特别是在注册组件的初始化代码上。看看他的东西GitHub - raymondboswellbetway东盟体育app /离子模态复制.尤其是App.svelte。

    比较可能不需要只在语法上进行。我想,我们不想做一个关于a和B的语法的酷性的框架讨论。

    作为一个Angular的家伙,我相信使用Angular CLI搭建脚手架真的很酷,而且在生产力方面有很大的不同。在这里,苗条的套件也发挥了作用。如果这对我脑海中的一些项目很有效,我肯定会考虑切换,因为苗条的语法几乎太简单了。

    一个系列的苗条套件作为“成为新的生产力套件苗条”(也由vite提供动力)结合了爱奥尼亚,将是伟大的。betway东盟体育app

    首先,我已经遇到SSR集成不能立即工作,所以只有与SPA模式,苗条的套件和似乎离子工作得很好。betway东盟体育app也许在全局样式的工作将需要级联涟漪效应等到其他组件。

    接下来,将很好地看到细长套件路由器如何与选项卡和其他路由器相关的东西在爱奥尼亚。betway东盟体育app在萨珀,这一切进展得并不顺利。即使是普通的苗条,也需要做一些小的调整才能让它发挥作用。

    期待爱奥尼亚专家将如何为sveltekit和爱奥betway东盟体育app尼亚制定HOWTO !

    汤姆

  2. 我会说,我是瞄准苗条+离子,只是苗条+电容器。betway东盟体育app微笑:

  3. 小编辑,我是说,目标苗条+离子。betway东盟体育app

Baidu