17 ms·
These kinds of static site generators are really nice because they enable better support for smarter interactive components in articles. Things like graphs or i
by preommr 7y ago
These kinds of static site generators are really nice because they enable better support for smarter interactive components in articles. Things like graphs or interactive demos to showcase something (e.g. user input delay on an article about ui design and responsiveness).
Vue is a particularly good choice for these kinds of applications because it's a lot more incremental and comes builtin with things like reactivity so there's no need for an external dependency for state management.
Like a complete app is:
---
import Vue from "vue/dist/esm.js";
app = new Vue({el: "#app", template:"<div>{{name}}</div", data: ()=>{{name: "john"}};
---
No jsx, no babel transpiler nonsense, no redux/mobx,
It's also possible to completely forget about vue and do something like
---
let data = app.$data;
data.name = "adam";
---
This is so nice because you don't even have to think about the fact that you're using a framework, it's all taken care of for you. No setState(...) nonsense. The tradeoff is that there's magic (which I don't think is bad because in vue's case it's pretty straightforward once you get to learn it) but that's a separate discussion because I don't think that magic matters for very small simple cases like this.
- onion2k 7y agoMDX[1] enables you to embed working JSX (eg React components) directly in your Markdown files. It doesn't need to be a separate file; you can just write the code in to the content file and it'll render an interactive component. One quite useful aspect of this is that you can have example code and a working example next to each other driven by the same content. I'm not sure that's actually a good thing, but it does exist. [1] https://github.com/mdx-js/mdx https://github.com/mdx-js/mdx
- lukevp 7y agoYou can also write react without jsx or using any transpilers if you want, and for small apps there's no need for redux, there's great state management with functional components and hooks. I am not familiar with Vue but I like the setState or the useState hook with the delegate because it makes it clear that data access and change propagation aren't synchronous.
- anderspitman 7y agoDoes Vue use Proxy objects for the reactive state magic? I implemented something similar and that's what I ended up using.