diff --git a/_posts/2023-10~12/2023-12-30-virtualdom-2.md b/_posts/2023-10~12/2023-12-30-virtualdom-2.md index 6ac06b5..7cb558e 100644 --- a/_posts/2023-10~12/2023-12-30-virtualdom-2.md +++ b/_posts/2023-10~12/2023-12-30-virtualdom-2.md @@ -93,90 +93,5 @@ render(helloTemplate('foo', 'bar'), document.body) ### 其他 -[Ember Glimmer]() +[Ember Glimmer](https://zhoukekestar.github.io/notes/2024/01/09/ember-glimmer.html) -# 编写 DOM:HTML 的进化 - -### 模板语言时代 - -* JavaScript Template Eengine - * [mustache](https://github.com/janl/mustache.js) - - ![](https://cloud.githubusercontent.com/assets/288977/8779228/a3cf700e-2f02-11e5-869a-300312fb7a00.gif) - - * [handlebars](https://handlebarsjs.com/zh/) -* Handlebars -* JSX -* Template - - - -# Virtual DOM 核心作用 - -![image](https://github.com/zhoukekestar/notes/assets/7157346/9db66f3b-d2f0-4797-b407-e1e1862e1c88) - -from: -* https://auth0.com/blog/face-off-virtual-dom-vs-incremental-dom-vs-glimmer/ -* https://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html - - - -* DSL vs JSX -* Ecosystem - * Three.JS - * -* - -> The big improvements that React brought to the mainstream were componentization, and popularizing declarative rendering. -> https://news.ycombinator.com/item?id=34621279 - -> For some reason I thought the virtual DOM was a native feature of the browser -> https://news.ycombinator.com/item?id=34633339 - -# VDom is not just VDOM - -> Note that a virtual DOM is pure overhead if you already have a real DOM to work with. -> https://news.ycombinator.com/item?id=34616031 -> - - -# Steps - -* diff - * https://github.com/Matt-Esch/virtual-dom/blob/master/vtree/diff.js -* patch - - - -# Diff Alogrithm - -### RTED - -> RTED requires O(n2) space as the most space-efficient competitors, and its runtime complexity of O(n3) in the worst case is optimal. - - -# Virtual DOM 简写 - - 使用 JSX 简写 - - -# References - -* https://news.ycombinator.com/item?id=34612162 -* https://svelte.dev/blog/virtual-dom-is-pure-overhead -* https://github.com/mbasso/asm-dom -* https://github.com/patrick-steele-idem/morphdom -* https://zhoukekestar.github.io/notes/2017/08/07/webcomponents-demo.html -* https://zhoukekestar.github.io/notes/2017/08/07/beyond-framework.html -* https://github.com/WebReflection/hyperHTML -* https://github.com/AFASSoftware/maquette - -* https://en.wikipedia.org/wiki/Virtual_DOM - * https://svelte.dev/blog/virtual-dom-is-pure-overhead - * https://auth0.com/blog/face-off-virtual-dom-vs-incremental-dom-vs-glimmer/ - - -* [RTED: A Robust Algorithm for the Tree Edit Distance](https://vldb.org/pvldb/vol5/p334_mateuszpawlik_vldb2012.pdf) -* [Minimal Edit-Based Diffs for Large Trees](https://dl.acm.org/doi/pdf/10.1145/3340531.3412026) -* [Detecting Changes in XML Documents](https://people.cs.rutgers.edu/~amelie/papers/2002/diff.pdf) -* [Google String diff-match-patch](https://github.com/google/diff-match-patch) diff --git a/_posts/2024-01~03/2023-12-30-jvm.md b/_posts/2024-01~03/2023-12-30-jvm.md index 7b21e1c..0fe3ee2 100644 --- a/_posts/2024-01~03/2023-12-30-jvm.md +++ b/_posts/2024-01~03/2023-12-30-jvm.md @@ -1,11 +1,11 @@ --- layout: post -title: "再谈 Virtual DOM(二)" -date: 2023-12-30 +title: "JVM" +date: 2024-01-05 tags: [note] --- - + [mini-jvm](https://github.com/guxingke/mini-jvm) * [Toy JVM by Go](https://github.com/zserge/tojvm/blob/master/vm.go) @@ -13,4 +13,3 @@ tags: [note] * https://github.com/tdiant/TinyJVM * https://github.com/Anilople/javajvm * https://github.com/guxingke/mini-jvm -* diff --git a/_posts/2024-01~03/2024-01-09-ember-glimmer.md b/_posts/2024-01~03/2024-01-09-ember-glimmer.md index a87fbeb..e49abce 100644 --- a/_posts/2024-01~03/2024-01-09-ember-glimmer.md +++ b/_posts/2024-01~03/2024-01-09-ember-glimmer.md @@ -1,6 +1,6 @@ --- layout: post -title: "lit SSR" +title: "Ember Glimmer" date: 2024-01-09 tags: [note] --- diff --git a/_posts/2024-01~03/2023-01-10-virtualdom.md b/_posts/2024-01~03/2024-01-10-virtualdom-3.md similarity index 80% rename from _posts/2024-01~03/2023-01-10-virtualdom.md rename to _posts/2024-01~03/2024-01-10-virtualdom-3.md index fb8eaa2..2f937ca 100644 --- a/_posts/2024-01~03/2023-01-10-virtualdom.md +++ b/_posts/2024-01~03/2024-01-10-virtualdom-3.md @@ -1,12 +1,14 @@ --- layout: post -title: "再谈 Virtual DOM(二)" +title: "再谈 Virtual DOM(三)" date: 2024-01-10 tags: [note] --- - 接上次 [再谈 Virtual DOM(一)](https://zhoukekestar.github.io/notes/2023/12/20/virtualdom.html) + 接上次 +* [再谈 Virtual DOM(一)](https://zhoukekestar.github.io/notes/2023/12/20/virtualdom.html) +* [再谈 Virtual DOM(二)](https://zhoukekestar.github.io/notes/2023/12/30/virtualdom-2.html) # 编写 DOM:HTML 的进化 @@ -86,21 +88,27 @@ ServerSide Template Engine 因为页面大部分是前端的领域,而且随着 [前后端分离](https://www.google.com.hk/search?q=frontend+backend+separate) 的兴起,此方式受到了广泛的欢迎。 + 但本质上,JSX 已不再是模板语言,而是 JS 代码。所以,灵活性和模板语言已不可同日而语,其灵活性所带来的问题,也导致其优化的上限。 -* https://github.com/facebook/jsx +* [facebook/jsx](https://github.com/facebook/jsx) ### Template Literals & Tagged templates -* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates -* +```js +// Template Literals +`Hello ${name}` -# Virtual DOM 核心作用 +// Tagged templates +html` +