search

phymooc / learn-svelte

0 stars 0 forks source link

Svelte #1

Open phymo opened 3 years ago

phymo commented 3 years ago

Why svelte https://2020.stateofjs.com/en-US/technologies/front-end-frameworks/
https://risingstars.js.org/2020/zh#section-framework
https://svelte.dev/blog/svelte-3-rethinking-reactivity
https://svelte.dev/blog/virtual-dom-is-pure-overhead

phymo commented 3 years ago

Pros:

  1. write less code.

React: 

import React, { useState } from "react";
export default () => {
  const [a, setA] = useState(1);
  const [b, setB] = useState(2);
  function handleChangeA(event) {
    setA(+event.target.value);
  }
  function handleChangeB(event) {
    setB(+event.target.value);
  }
  return (
    <div>
      <input type="number" value={a} onChange={handleChangeA} />
      <input type="number" value={b} onChange={handleChangeB} />
      <p>
        {a} + {b} = {a + b}
      </p>
    </div>
  );
};

Svelte:

<script>
  let a = 1;
  let b = 2;
</script>

<input type="number" bind:value={a} />
<input type="number" bind:value={b} />

<p>{a} + {b} = {a + b}</p>
  1. no virtual DOM.
  2. truly reactive
phymo commented 3 years ago

Cons: 在大型项目中包体积的现状并不乐观，Svelte借助着运行前编译将整个framework按需打包可以有效减少包体积，但编译产物本身是没有优势的，当一个页面UI交互越复杂，编译产物会越大，加上对framework依赖越多，整体包体积的优势就荡然无存了；除此之外，我们转换器为了抹平差异又给编译增加了一定复杂度，所以在编译产物体积的优化上还存在很大的空间。

作者：阿里巴巴淘系技术 链接：https://www.zhihu.com/question/53150351/answer/1675399482 来源：知乎 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

No major backing (yet)

Vue.js and Angular are strongly backed by Google, while React is backed by Facebook. Svelte doesn’t have a major company behind it at the moment, hence it is still low in popularity among companies and developers.

Small community

Because Svelte is quite new, it doesn’t yet have the kind of big community and developer fans that other frameworks enjoy.

Tooling and packages support

When it comes to developer tools and packages, there are currently limited options available for Svelte developers to choose from. But as the community grows and more developers start to find Svelte amazing, this problem will fade out. image

phymo commented 3 years ago

作者：尤雨溪 链接：https://www.zhihu.com/question/31809713/answer/53544875 来源：知乎 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

1. 原生 DOM 操作 vs. 通过框架封装操作。

这是一个性能 vs. 可维护性的取舍。框架的意义在于为你掩盖底层的 DOM 操作，让你用更声明式的方式来描述你的目的，从而让你的代码更容易维护。没有任何框架可以比纯手动的优化 DOM 操作更快，因为框架的 DOM 操作层需要应对任何上层 API 可能产生的操作，它的实现必须是普适的。针对任何一个 benchmark，我都可以写出比任何框架更快的手动优化，但是那有什么意义呢？在构建一个实际应用的时候，你难道为每一个地方都去做手动优化吗？出于可维护性的考虑，这显然不可能。框架给你的保证是，你在不需要手动优化的情况下，我依然可以给你提供过得去的性能。

2. 对 React 的 Virtual DOM 的误解。

React 从来没有说过 “React 比原生操作 DOM 快”。React 的基本思维模式是每次有变动就整个重新渲染整个应用。如果没有 Virtual DOM，简单来想就是直接重置 innerHTML。很多人都没有意识到，在一个大型列表所有数据都变了的情况下，重置 innerHTML 其实是一个还算合理的操作... 真正的问题是在 “全部重新渲染” 的思维模式下，即使只有一行数据变了，它也需要重置整个 innerHTML，这时候显然就有大量的浪费。

phymo commented 3 years ago

  1. Svelte 的编译风格是将模板编译为命令式 (imperative) 的原生 DOM 操作。比如这段模板：

    <a>{ msg }</a>

    会被编译成如下代码：

    function renderMainFragment ( root, component, target ) {
var a = document.createElement( 'a' );

var text = document.createTextNode( root.msg );
a.appendChild( text );

target.appendChild( a )

return {
    update: function ( changed, root ) {
        text.data = root.msg;
    },

    teardown: function ( detach ) {
        if ( detach ) a.parentNode.removeChild( a );
    }
};
}

    可以看到，跟基于 Virtual DOM 的框架相比，这样的输出不需要 Virtual DOM 的 diff/patch 操作，自然可以省去大量代码，同时，性能上也和 vanilla JS 相差无几（仅就这个简单示例而言），内存占用更是极佳。

phymo commented 3 years ago 
npx degit sveltejs/template my-svelte-project
cd my-svelte-project
npm install
npm run dev
phymo commented 3 years ago

生命周期钩子：

  1. onMount:
  2. beforeUpdate:
  3. afterUpdate:
  4. onDestroy:
phymo commented 3 years ago

syntax:

  1. {}
  2. $

  3. if #each #await #key

  4. props
  5. on
  6. bind
phymo commented 3 years ago

Store (built-in):

  1. writable
  2. readable
  3. derived
  4. get
phymo commented 3 years ago

SSR: Svelte framework has its SSR implementation called Sapper.

mobile: Svelte Native

phymo commented 3 years ago

compile and reactivity: https://blog.kalan.dev/2020-04-19-svelte-%E2%80%94-%E6%98%AF%E4%BB%80%E9%BA%BC%E8%AE%93%E6%88%91%E9%81%87%E8%A6%8B%E9%80%99%E6%A8%A3%E7%9A%84%E4%BD%A0/ https://lihautan.com/compile-svelte-in-your-head-part-1/

phymo commented 3 years ago

(Primitive JS instructions)

function append(targe, node) {
  target.appendChild(node);
}
function insert(target, node, anchor) {
  target.insertBefore(node, anchor || null);
}
function detach(node) {
  node.parentNode.removeChild(node);
}
function element(name) {
  return document.createElement(name);
}
function text(data) {
  return document.createTextNode(data);
}
function space() {
  return text(" ");
}
function attr(node, attribute, value) {
  if (value == null) node.removeAttribute(attribute);
  else if (node.getAttribute(attribute) !== value)
    node.setAttribute(attribute, value);
}
function children(element) {
  return Array.from(element.childNodes);
}
function custom_event(type, detail) {
  const e = document.createEvent("CustomEvent");
  e.initCustomEvent(type, false, false, detail);
  return e;
}
phymo commented 3 years ago

https://medium.com/dailyjs/a-realworld-comparison-of-front-end-frameworks-2020-4e50655fe4c1 image