Comments (3)
I'm sure they'll appreciate it! While I'm not a contributor I think I can answer your question in part.
First off cell is designed to work directly with the DOM. Cell's job is to give you a way to manage state on DOM elements with the ability to redraw child elements with a minimal diff'ing when changing the _
and $
properties of a cell you request a new animation frame so you draw everything at the same time. But the key take away here is that Cell is a DOM creation pattern. It's JSON api lets you declaratively create DOM elements in a consistent way. So if I understand you're first question the answer is yes. Changing stateful values on an element can allow for changes to be applied together in a single patch.
To your second point. Yes, React uses a virtual DOM to track target DOM state from prior DOM state. This is a huge win in many regards (especially from the perspective of functional programming) but it has it's drawbacks which are covered some in the README.md. Cell gives you a some what a similar interface with $components
where you can set the attribute with your JSON cell schemas and you'll redraw the DOM but there is no virtual DOM.
As for JSX, I personally fell it detracts from your ability to do more abstract function composition with the JSON structures. Regardless of my opinion, someone has been playing around with the idea referenced in #115 https://github.com/devsnek/to_cell
from cell.
@monkingxue thanks! I'm glad cell feels like a cute kitten haha, and thanks @kingoftheknoll for the thoughtful answer. I'll just add a couple more points since most have been addressed by @kingoftheknoll .
Regarding "don't change the DOM directly", yes that is true and cell does not directly change the DOM directly. Internally each node maintains a data structure called Genotype
, which is where all the data is actually stored. And there's another module called Nucleus
, which functions as a proxy whenever you try to access the node.
So for example when you do something like this:
{
$cell: true,
$init: function(){
this._counter++;
}
}
You are not directly updating the _counter
variable on the node. The trick is the Nucleus
module abstracts out the setter and getter so that while it looks like you're directly touching the DOM, it always goes through the proxy and never touches the DOM directly.
And Nucleus
also queues up all these Genotype
variable updates and batch updates them on every tick, which gets rid of all the reflow problems you mentioned.
And I agree with @kingoftheknoll that JSX limits the power of what you can do with Cell. By using pure Javascript there's no distinction between model, view, and controller anymore and you can do some seriously clever stuff.
But then again, at the end of the day, the real power of Cell is that it's natively pluggable to anywhere so you can use the to_cell module by @devsnek and you can even use handlebars https://play.celljs.org/items/1mQfq1/edit There are probably other cool ways of doing this that I'm not aware of.
from cell.
@kingoftheknoll thank you soooooooooo much about your response!
from cell.
Related Issues (20)
- Define a variable's attribute using another attribute of itself HOT 1
- Devise a way to express CSS in cell HOT 1
- $update not fired when components have a $init defined HOT 2
- Cell Native? HOT 5
- Safari Issues HOT 2
- Assigning $text from component won't update DOM. HOT 4
- $update not being triggered/called HOT 1
- ES6 functions HOT 1
- Distinguish between SVG <text> elements and normal text HOT 1
- Scoped CSS HOT 1
- Break out createElementNS(Hardcoded) into Monkey-Patchable Function - GeneReader ? HOT 1
- Can you share an example with react components?
- Suggestion : Limiting complexity of inter-cell dependency HOT 1
- js-framework-benchmark
- Select multiple and attribute order
- Handy way to get cell components
- Injecting CellJs via external file HOT 1
- Using web components with Cell
- mutation of a cell HOT 1
- Development Moved to https://github.com/jasonelle/jasonelle HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from cell.