之前的文章中，我们分享过一个新兴的前端框架：Svelte。还对比了它与 Vue 和 React 不同之处。...今天，我们就接着分享一个专为 Svelte 打造的移动端组件库：STDF STDF 简介 Svelte 是一个新兴的前端框架，组件库不多，今天介绍 STDF 算是不可多得的一个组件库了。...同时，Tailwind 又是一个优雅的 CSS 框架。STDF 是结合两者的优点而打造的高质量组件库。...STDF 代表一个使用简单、体积轻量、设计友好、开发快速的组件库。 PS:不知道为什么？...由于Svelte 是近年来新兴的一款前端框架，目前生态还不是特别丰富，使用的小伙伴不太多，资料相对少些。另一个问题是，STDF 组件主要用于移动端，面向 C 端用户。
因此我其实一直在等一个比较全面的机会去了解 React 这个框架，想知道它为什么会这么火爆，跟 Vue 的差别是什么？...在我们常见的框架中： • React 属于应用级框架 • Vue 属于组件级框架 • Svelte 属于元素级框架 三种框架用的内部实现不太相同，接下来会讲述一下它们可能用到的一些技术。...应用级框架和组件级框架，需要使用 VDOM 配合 Diff 算法，计算出 UI 中变化的元素。...组件级框架，如 Svelte，由于可以直接精准的找到 UI 变化的部分，不需要 Diff，则可以直接不使用 VDOM 技术 AOT 预编译优化 现在前端框架一般都有编译这一步骤，用于： • 代码转换，如...Svelte 是一个极致的编译时框架，是一款重度依赖 AOT 的元素级框架。
因此我其实一直在等一个比较全面的机会去了解 React 这个框架，想知道它为什么会这么火爆，跟 Vue 的差别是什么？...在我们常见的框架中：React 属于应用级框架Vue 属于组件级框架Svelte 属于元素级框架三种框架用的内部实现不太相同，接下来会讲述一下它们可能用到的一些技术。...应用级框架和组件级框架，需要使用 VDOM 配合 Diff 算法，计算出 UI 中变化的元素。...组件级框架，如 Svelte，由于可以直接精准的找到 UI 变化的部分，不需要 Diff，则可以直接不使用 VDOM 技术AOT 预编译优化现在前端框架一般都有编译这一步骤，用于：代码转换，如：ts 编译为...Svelte 是一个极致的编译时框架，是一款重度依赖 AOT 的元素级框架。
这意味着你不需要为框架所消耗的性能付出成本，并且在应用程序首次加载时没有额外损失。你可以使用 Svelte 构建整个应用程序，也可以逐步将其融合到现有的代码中。...你还可以将组件作为独立的包（package）交付到任何地方，并且不会有传统框架所带来的额外开销。发展趋势开发者满意度从2019年开始, Svelte出现在榜单中。...Svelte 特点No Runtime —— 无运行时代码React 和 Vue 都是基于运行时的框架，当用户在你的页面进行各种操作改变组件的状态时，框架的运行时会根据新的组件状态（state）计算（diff...svelte 生成的是命令式的dom创建过程，虚拟 dom 的框架生成的是虚拟 dom 结构创建的过程（vdom 渲染函数）。...在基于虚拟 DOM 的框架里，虚拟dom到真实dom的转换过程，被封装在运行时里，所以每个组件虚拟 dom 创建过程仅仅是数据结构的表述，更为紧凑，代码产物也就比较少。
由于框架、库只提供了部分底层的原生实现，所以当你需要一个组件类的话，它得有一些 Props，然后你可以通过 Props 来传递数据，返回 VDOM 节点。 最重要的是，你可以构建任意复杂的系统。...最后，一个职责范围大且成型的框架会使得引入一些底层新想法的成本更高，因为太多的地方都要保持其一致性。 然后当你想尝试用一个底层想法的时候，它会影响到你项目中的每个组件（牵一发而动全身）。...2、JSX / VDOM 缺点 ? 目前，VDOM 本身成本真的很高。 想一想，当我们刚出来的时候，很多人都认为，这不是很慢吗？答案是 Yes，我们很慢，但速度却足够快！...将 SVELTE 与 VDOM Diff 算法所做的事情相比较的话，它只有到达一定量级才会更快。...相比之下，基于 VDOM，结果是你只需要一行，而这（一行）只是一个返回 VDOM 结构的表达式。 如果在运行时编译，则会产生运行时编译成本。
这意味着你不需要为框架所消耗的性能付出成本，并且在应用程序首次加载时没有额外损失。 你可以使用 Svelte 构建整个应用程序，也可以逐步将其融合到现有的代码中。...你还可以将组件作为独立的包（package）交付到任何地方，并且不会有传统框架所带来的额外开销。 发展趋势 开发者满意度 从2019年开始, Svelte出现在榜单中。...Svelte 特点 No Runtime —— 无运行时代码 React 和 Vue 都是基于运行时的框架，当用户在你的页面进行各种操作改变组件的状态时，框架的运行时会根据新的组件状态（state）计算...svelte 生成的是命令式的dom创建过程，虚拟 dom 的框架生成的是虚拟 dom 结构创建的过程（vdom 渲染函数）。...在基于虚拟 DOM 的框架里，虚拟dom到真实dom的转换过程，被封装在运行时里，所以每个组件虚拟 dom 创建过程仅仅是数据结构的表述，更为紧凑，代码产物也就比较少。
它可能在应用程序的较大部分的全局级别上，也可能是单个组件上。 以简单的计数器为例。 它保留的计数即为状态。 我们可以读取状态并写入它以增加计数。...reducer 是一个将一个状态转换为另一个状态的函数。 React 和 preact 使用了这种模式。 它适用于与 vDOM 一起使用，我们将在后面描述模板时进一步探讨。...并非每个框架都使用其 vDOM 使状态完全响应性。 例如，Mithril.JS 在组件中设置的事件之后从状态更改中更新； 否则，必须手动触发 m.redraw()。...在像 React 和 Preact 这样重新运行组件函数的框架中，这允许在其依赖的状态不变时再次选择组件的一部分。...对于其他框架，情况正好相反：它允许你将组件的部分与响应性更新相关联，同时缓存前一个计算。
目录 1 前端框架怎么你了？ 2 前端框架的发展史 3 前端框架为何要引入“复杂度” 4 为什么当下这么多主流框架？...接下来我们重点从前端框架来看下复杂度增加的原因及利弊，在此之前我们先了解下前端框架的发展历史，弄清楚前端为什么会发展到现在这样。...第一种研发成本非常大，第二种无论性能还是体验都比较一般。那是不是鱼和熊掌不能兼得呢？ 既要研发成本低，又要性能体验好，其实使用现代前端框架是一个合适的方案。...这样设计的好处是，降低了使用者的学习成本和心智负担，让框架的灵活性极高。...Svelte 就是那个推翻虚拟 DOM 垄断的框架。Svelte 创新的提出了基于编译的方式，来解决对 DOM 操作的封装。 为什么 Svelte 要采用编译来解决这一问题呢？
资料参考：以 React 为例，说说框架和性能（下）[6] | 新兴前端框架 Svelte 从入门到原理 三、从架构演变看不断进击的 React 都做过哪些优化？...基于时间分片的增量更新需要更多的上下文信息，之前的vDOM tree显然难以满足，所以扩展出了fiber tree（即Fiber上下文的vDOM tree），更新过程就是根据输入数据以及现有的fiber...[20] Svelte 对固有模式的冲击 当下前端领域，三大框架React、Vue、Angular版本逐渐稳定，如果说前端行业会出现哪些框架有可能会挑战React或者Vue呢？...很多人认为Svelte 应该是其中的选项之一。 Svelte叫法是[Svelte], 本意是苗条纤瘦的，是一个新兴热门的前端框架。...Svelte 的核心思想在于『通过静态编译减少框架运行时的代码量』。
svelte 没有 react / vue 这些框架的繁文缛节，摒弃了 virtual DOM（因此简化了很多因为引入 VDOM 而导致的额外代码），可以让你很快进入到狂暴的开发模式。 ?...最近，Rich 新推出了 SvelteKit，是 svelte 下的开发框架（可以认为是 sapper 的下一代）。...svelte + tailwindcss 使用起来非常舒服，构建小项目足矣。tailwind 在刚诞生之际，是令人大开眼界的项目，如今很多框架或多或少都借鉴了它处理 CSS 的方式。...每个组件的代码，都可以通过 copy & paste 加上小量的调整就可以完成。...因为 quasar 使用了 material UI 且提供了非常丰富的组件，所以，你几乎不需要考虑 UX 的问题，需要什么界面，找现成的组件，稍稍改变其参数即可。
svelte 当时还是一个相对年轻的框架，只是使用在个人兴趣的项目，尝尝鲜的话还可以，但如果运用在公司内实际的项目，需要进行充分的调研，确保框架的使用成本及风险，收益。...产物体积小 svelte 框架的运行时非常小，仅仅 18K，在组件数量不多的场景下，其构建产物要明显优于 vue3，react等框架。很适合轻量级的项目。...这种方式对于初学者很友好，只需要知道如何编写网页，就可以平稳的过渡到 svelte 。学习成本很低。...2.3、缺点 编译产物代码冗余 svelte 编译输出的组件代码相较于 vue，react 等框架还是稍微冗长了些。 比如编写一个很简单的组件如下： Hello world!...结构创建的过程（vdom 渲染函数）。
AngularJS AngularJS 的最初目标是扩展 HTML 词汇，以便设计师（非开发人员）可以构建简单的 Web 应用程序。这就是为什么 AngularJS 最终采用了 HTML 标记的原因。...这使得React知道何时应该对vDOM进行脏检查。这样做的好处是，与每个异步任务都运行脏检查的AngularJS不同，React只有在开发人员告诉它要运行时才会执行。...因此，尽管React vDOM的脏检查比AngularJS更耗费计算资源，但它会更少地运行。...Svelte Svelte使用编译器实现了响应式。这里的优势在于，有了编译器，语法可以是任何你想要的。你不受JavaScript的限制。对于组件，Svelte具有非常自然的响应式语法。...但是，Svelte并不会编译所有文件，只会编译以.svelte结尾的文件。
的面试题，但一直没有太在意。直到今天在写一个文档时，突让想到要把“为什么需要 Virtual DOM ？”也写进去，待我流畅的写好答案，略一思索——漏洞百出！...得益于 Virtual DOM Tree 总是在内存中， diff 算法功能可以更强大（比如组件移动，没有完整的 Tree 结构是不可能实现的） diff 算法能减少 DOM API 调用，显然是存在设计和性能优势的...所以把跨平台当做 Virtual DOM 的优势，其实是不正确的，但我们或许应该去思考下他们为什么会这么认为。...我们也提到了 Virtual DOM 真正的优点是其抽象能力和常驻内存的特性，让框架能更容易实现更强大的 diff 算法，缺点是增加了框架复杂度，也占用了更多的内存。...[4] svelte:https://github.com/sveltejs/svelte
React 是基于 vdom 的前端框架，组件 render 产生 vdom，然后渲染器把 vdom 渲染出来。...state 更新的时候，组件会重新 render，产生新的 vdom，在浏览器平台下，为了减少 dom 的创建，React 会对两次的 render 结果做 diff，尽量复用 dom，提高性能。...不需要，SSR 的时候就没有 diff，每次都是 vdom 渲染出新的字符串。 那为什么浏览器里要做 diff 呢？...因为 dom 创建的性能成本很高，如果不做 dom 的复用，那前端框架的性能就太差了。 diff 算法的目的就是对比两次渲染结果，找到可复用的部分，然后剩下的该删除删除，该新增新增。...总结 react 是基于 vdom 的前端框架，组件渲染产生 vdom，渲染器把 vdom 渲染成 dom。
新框架的出现一般遵循： 一个新的「主意」 + 现有技术的排列组合 最近2年，最受欢迎的「主意」便是Svelte带来的「重编译时」概念了。...毕竟，生态才是前端框架最重要的部分。 本文要讲的，就是个很可能制约Svelte生态发展的因素。...前端框架生态中很重要的一环，便是组件库的丰富程度了。 为了一个好用的组件库换框架是常有的事。 所以，为了减少开发者编写复杂组件的成本，VUE保留了「虚拟DOM」。...Svelte永远闭上的门 作为和VUE一样采用「模版语法」的框架，Svelte选择「重编译时」道路。 这就意味着他永远抛弃了「虚拟DOM」，也抛弃了「虚拟DOM」带来的灵活性。...我们可以大胆的推测，编写复杂组件的成本： React < VUE < ... < Svelte 总结 如果一个框架只是概念新奇，会得到一时的关注。
react 和 vue 都是基于 vdom 的前端框架，我们先聊下 vdom： vdom 为什么 react 和 vue 都要基于 vdom 呢？直接操作真实 dom 不行么？...这就是为什么要有 vdom，是它的第一个好处。 而且有了 vdom 之后，就没有和 dom 强绑定了，可以渲染到别的平台，比如 native、canvas 等等。 这是 vdom 的第二个好处。...就像 vue3 也有了函数组件一样，组件的形式并不重要。 基于 vdom 的前端框架渲染流程都差不多，vue 和 react 很多方面是一样的。...而 vue 是通过对状态做代理，get 的时候收集以来，然后修改状态的时候就可以触发对应组件的 render 了。 有的同学可能会问，为什么 react 不直接渲染对应组件呢？...总结 react 和 vue 都是基于 vdom 的前端框架，之所以用 vdom 是因为可以精准的对比关心的属性，而且还可以跨平台渲染。
而 Svelte 受到 Hooks 的影响推出了 Svelte 3。其实 Svelte 3 的整个的组件 编译的这个逻辑是由 React Hooks 启发而来的。...为什么呢，因为很多时候我们的大型项目中的逻辑复用都是在我们一个组件，写着写着发现这个组件变得很臃肿，我们才开始考虑要把逻辑开始重新组织、抽取复用。...那么 Svelte 由于他的语法只能在组件内使用，这就使得把逻辑挪到组件外成为一个 代价相当大的行为。并不是一个简单的说把这部分逻辑复制出去，而是需要进行一次彻底的重构。...而不像 Svelte 组件中的这个语法呢，即使你完全不了解它底层如何运作，你也可以几乎可以 0 成本的上手。那么这就是一个长期的可维护性和一个初期的上手成本之间的一个平衡和和取舍。...那这个策略就导致同等的这个组件源码之下 Svelte 每个组件的编译输出会更臃肿。
) 组件使用各自框架的在线 SFC 编译器进行单独编译 Vue: sfc.vuejs.org @3.1.4 -> todomvc.vue.js Svelte: svelte.dev/repl @3.38.3...Svelte 组件 比 vue 3 组件 大 70%， 换句话说如果一个 100k 大小的 Vue 组件，Svelte组件可能就只有 101k，而不是170k !）...对于项目来说，当编写的组件大于19个组件（SSR模式为 13个组件）Svelte 的优势与 Vue3 相比就不存在了。...Svelte选择最小的运行时，但具有较重生成的代码的成本。Svelte 可以进一步改进其代码生成来降低代码输出吗？Vue可以进一步改善tree-shaking，使基线(运行时框架)变小吗？...还有一点，非运行时的框架，对于首屏的渲染也是有一个极大的帮助，你可以将首屏组件进行拆分，非运行时的首屏组件其实是非常小的，这对移动端来说非常的友好，因为毕竟使用 SSR 对应服务端还是有一定的压力要求的
本文将会为大家分析一下Svelte火起来的原因，并且通过使用Svelte去搭建一个简单的书店应用（bookshop）来帮助大家快速入门这门框架。 Svelte为什么会火?...要想知道Svelte为什么会火，首先得看看React和Vue这些框架存在什么问题。 big runtime - 大的运行时 React和Vue都是基于runtime的框架。...Svelte这个框架与Vue和React之间最大的区别是它除了管理组件的状态和追踪他们的渲染，还有很多其他有用的功能。例如它原生支持CSS scope和CSS animation。...如果你用React或者Vue是需要引入第三方库来实现同样的功能的，而第三方依赖的引入会给开发者增加学习和维护的成本。...对于Svelte框架，export一个变量就是将这个变量指定为当前组件的一个外部参数 - props。
当然，一些有潜力的框架同样值得关注，这里举一个例子：Svelte。之所以推荐它，是因为它位居某乎高赞回答，诸多大佬对于 Svelte 的实践进行了热烈讨论，今年它的关注度不可谓不高，值得大家学习。...Svelte 是一个组件框架，核心思想在于“通过静态编译减少框架运行时的代码量”，相较于 React 以及 Vue 等它最大的区别是编译时与运行时，在构建时会将组件转换成高效率执行的命令代码，使得更新...Svelte 可以单独使用，也可以与其他框架结合使用来生成 Web 应用程序。...当然，目前看来 Svelte 也有潜在问题： 虽然在简单的 DEMO 里面代码量确实非常小，但同样的组件模板，操作生成的代码量会比 VDOM 渲染函数要大，多个组件中会有很多重复的代码。...Svelte 在大型应用中的性能还有待观察，尤其是在大量动态内容和嵌套组件的情况下。 Svelte 的编译策略决定了它跟 VDOM 绝缘。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
