Skip to content

Commit 17d5686

Browse files
author
Vlad Balin
committed
Update readme.md
1 parent 269aa1e commit 17d5686

File tree

1 file changed

+20
-21
lines changed

1 file changed

+20
-21
lines changed

examples/todomvc/readme.md

Lines changed: 20 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ technique.
77

88
## Comparison and Analysis
99

10-
Solution appears to be twice shorter than with common React approach,
11-
and is on par with Angular.
10+
Solution appears to be much shorter than other React solutions,
11+
and is on par with Angular, Ember, Meteor, and framework-free jquery solution.
1212

1313
![TodoMVC SLOC size comparison](SLOC-comparison.jpg)
1414

@@ -17,37 +17,36 @@ putting everything in a single LOC. :) It's something more interesting.
1717

1818
### JSX is twice smaller than usual
1919

20-
So, why?
20+
So, how could that be? Because, we're doing something significantly different from commonly known React technique:
2121

2222
1. We're using [smart React Links](https://github.com/Volicon/NestedReact#two-way-data-binding) for [two-way data binding](/docs/databinding.md).
23-
2. Due to (1), we can describe the most of UI with [components defined as stateless functions](https://facebook.github.io/react/docs/reusable-components.html#stateless-functions)
23+
2. Due to (1), we are able to describe the most of UI with fast and lightweight [components defined as stateless functions](https://facebook.github.io/react/docs/reusable-components.html#stateless-functions), introduced in React 0.14.
2424

25-
These two techniques in combination will save you half of the work in JSX, and make it much cleaner.
26-
Remember - the best code is the code you avoided to write. :) You might wonder how it looks like.
25+
These two techniques in combination will save you half of the work in JSX, and make it look much cleaner.
26+
Remember - the best code is the code you avoided to write. :)
27+
28+
Since our links are framework-neutral and available as [separate dependency-free package](https://github.com/Volicon/valuelink),
29+
any React system can benefit from this style. You might wonder how it looks like.
2730
Typically, like this:
2831

2932
![](pure-components.jpg)
3033

31-
Since our links are framework neutral and available as [separate dependency-free package](https://github.com/Volicon/valuelink),
32-
any React system can benefit from this style.
33-
3434
### JS (data layer) is 2-3 times smaller
3535

36-
Our data layer size is several times smaller than
37-
in other React examples following facebook's suggestions for "good architecture".
38-
Still, we have same "unidirectional data flow", and ["pure render"](https://github.com/Volicon/NestedReact#props-specs-and-pure-render-optimization)
39-
optimization. For free.
36+
The reason it's shorter is that it's _not_ flux, _not_ something strange and immutable, but [_classical mutable models_](https://github.com/Volicon/NestedTypes). Thus, it takes the same size as in Backbone, Angular, Ember, etc.
4037

41-
And the more complex application will become, the more noticeable this difference in size will be.
38+
But it's not _that_ naive and simple mutable models you dealt with before. They kinda smart enough to _give you features you could expect from flux_:
4239

43-
Reason is that our data layer is mostly defined with declarative spec.
44-
All you have to do, is to describe the structure of your data,
45-
and use our smart Links to [bind it to UI](/docs/databinding.md).
46-
It will work most of the time, [no matter, how complex your data are](https://github.com/Volicon/NestedTypes/blob/master/docs/RelationsGuide.md).
40+
- Unidirectional data flow.
41+
- ["Pure render"](https://github.com/Volicon/NestedReact#props-specs-and-pure-render-optimization) optimization.
4742

48-
In TodoMVC, however, data layer is rather rudimentary to see the full power of approach, so
49-
we're on par with other conventional OO data layers, such in react-backbone,
50-
Angular, or Ember.
43+
Not to mention, that they are [very fast](http://slides.com/vladbalin/performance#/). NestedReact uses [NestedTypes]([https://github.com/Volicon/NestedTypes]) model framework, which is designed to handle collections of 10-50K elements smoothly and in general is order of magnitude (10x) faster than backbone.
44+
45+
The more complex application will become, the more noticeable this difference in size will be.
46+
Reason is that in NestedTypes case the data layer is mostly defined with declarative spec.
47+
All you have to do, is to describe the structure of your data,
48+
and use our smart Links to [bind it to UI](/docs/databinding.md).
49+
And it will work this way 90% of the time, [no matter, how complex your data are](https://github.com/Volicon/NestedTypes/blob/master/docs/RelationsGuide.md).
5150

5251
## Resources
5352

0 commit comments

Comments
 (0)