Cell 一个自建构的web应用程序框架（cellphone）

Cell 一个自建构的web应用程序框架（cellphone）

Cell

A self-constructing web app framework powered by a self-driving DOM.

PhilosophyTry NowHow is it different?RulesHow does it work?What problems does it solve?

Philosophy

Cell has one and only one design goal: Easy.

Easy to learn: There is NO API to learn. You just need to remember 3 rules.Easy to use: You just need a single HTML file with a single

Here's the generated DOM tree, as viewed in Chrome inspector:

There Is No Framework

A couple of things to note from the code:

There are no framework classes to inherit and extend from.There are no API method calls.There are no HTML body tags.All we have is a single JSON-like variable.The DOM just builds itself without you running any function.

There are only 3 rules

Cell has no API. 100% of your code will be vanilla Javascript, and there is no framework method or class to implement.

To use Cell, you simply define a variable that describes the DOM content and behavior.

When you follow the 3 rules below, Cell turns it into HTML.

Rule #1. Attributes map 1:1 to DOM attributes by default.

When you define a Javascript object, its attributes map 1:1 to DOM attributes. So,

var node = { id: "container", class: "red"}

maps to:

Rule #2. Use 7 special keywords to declare the cell structure

For example,

var el = { $cell: true, $type: "div", $components: [ { $type: "span", $text: "Javascript" }, { $type: "span", $text: "objective-c" }, { $type: "span", $text: "ruby" }, { $type: "span", $text: "java" }, { $type: "span", $text: "lisp" } ]}

becomes:

Rule #3. Use the "_" Prefix to Store Data and Logic on an HTML Element

Cell lets you store data and application logic directly on HTML elements.

To define a variable on an element's context, simply prepend your attribute name with "_". Cell will treat it as data and make sure it doesn't affect the view.

el = { $cell: true, $type: "button", type: "button", $text: "Get next item", onclick: function(e) { this._next() }, _next: function() { this._index++; this.$text = this._items[this._index]; }, _index: 0, _items: ["javascript", "objective-c", "ruby", "java", "lisp"]}

Here we use _items to store an array, _index to store an integer counter, and _next to store a function that will run this element by incrementing _index and iterating through _items.

How it works

1. Cell is a Single Function that Creates a DOM Tree.

When Cell loads, it first looks for all Javascript variables that have a $cell key.

When it finds one, it takes that blueprint object (called a "Genotype" in Cell) and creates a DOM tree ("Phenotype") from it.

2. Self-driving DOM

So far this is just a static DOM tree. To make it dynamic, you need to write a program that "remote controls" these HTML elements.

Normally Javascript frameworks maintain a separate centralized data structure and application context (Model-View-Controller or some variation) that synchronizes with and controls HTML elements dynamically.

Cell takes a decentralized approach. It creates a DOM tree where each element is self-aware (It can contain an entire Model-View-Controller environment of its own) and can therefore "drive" itself autonomously (Internally called "Nucleus").

Instead of having a central master application control the DOM, Cell directly injects application context into each relevant HTML element so they can run on their own, independent from the outside world.

Learn more about the underlying architecture here.

What problems this solves

1. There is No God (There is No Framework)

Cell has no overarching framework that powers each and every corner of your app.

Normally web app frameworks maintain a central "Model-View-Controller" architecture (or similar) which takes care of everything throughout the app's lifecycle.

Cell works differently. It just creates the DOM and then goes away, because each HTML element it creates can self-drive itself with its own model-view-controller. Instead of controlling the DOM remotely with a framework's API, with Cell you control it directly and natively.

2. There are No Middlemen

Nowadays, just to make a simple web app you need to learn all kinds of middlemen technologies.

These tools were born out of necessity as web apps became more complex. But if you take a fundamentally different approach, you may not need them at all.

Here are some of the reasons why these middlemen have been necessary, and why Cell doesn't need them.

1. Frameworks have a class you have to inherit or extend.

Normally web app frameworks let you use their API by extending or inheriting from their class. Cell has no class and no API method.

2. Frameworks depend on other libraries.

Most web app frameworks depend on other complex libraries (Don't forget to npm install before doing anything!) Cell doesn't depend on any library.

3. Frameworks introduce dependencies.

Just by choosing to use a framework you have already lost the war against dependency. From then on, you need to use npm install for every frontend Javascript library you need to use. Cell frees you from this loop and lets you use frontend Javascript libraries with simple