Comments (6)
Hi there @jolafrite and thanks for the feedback! :-)
- That is a good point! Yeah, I will definitely consider this
- Hm, I currently do not have any code to share on that, but I can create one. Give me a few days and I will create a demo app
- Well, if we put React JS in here there really is not much Angular left :-) React JS is also quite large, 130 kb, add angular on top of that which is another 130 kb. But please discuss this further if you want. This is more of a principle to me, might be lots of scenarios I am not thinking of :-)
from flux-angular.
To learn about flux I played around with colors. I think it's a little bit more complex than the todo list.
Colorflux: http://embed.plnkr.co/dZhigG/preview
I learned a lot and of cause it's not perfect. As always there is much room for improvements and discussions. Looking forward for your opinion... Have fun!
from flux-angular.
@SuperheroicCoding Thanks for your code, I will definitely have a look
@christianalfoni Maybe integrate ReactJs is not the best thing to do.
From this library I was interested by the virtual dom part.
So when you have a long list with a lot of watchers, how do you handle that ?
from flux-angular.
Hi @jolafrite ,
Virtual DOM is awesome! But the Angular team has done a pretty good job with Angular too. They will probably switch to a virtual DOM for next release :-)
You mean if you have like 100 items and 5 different controllers is grabbing that on each change? Technically flux-angular will deep clone the list of 100 items 5 times. That is of course not very performant, but remember that you use exports to grab that list. You rarely want to grab all 100 items 5 different places. Maybe you only grab one of them, 10 first etc. That way it is quite performant.
The alternative is using immutability. I am looking into it, but there are some challenges. Like with immutable-js it is a lot more performant to do the current cloning that e.g. immutable.fromJS(items);. What you really want to achieve is just returning the list in an immutable wrapper, but then you can not use it directly in a template.
A different approach is to only change the reference of objects and arrays in the trees if they update. That will avoid the two way databinding from triggering and making sure you will have to specifically grab that new state form the store. The problem though is that the new list will be shared by all controllers fetching it. If they were to mutate the list the two-way-databinding would trigger and cause unexpected behavior.
The plan is to try it out. Create an immutable API for the store. Something like:
store.('MyStore', function () {
return {
items: [{label: 'foo'}, {label: 'bar'}],
addItem: function () {
this.push('items', {label: 'banana'});
}
};
})
Running that code will of course push the new object into the array, but it will also change the array reference on items by doing e.g. a items = items.slice(0)
. Whats nice about this is that it can also automatically trigger an event based on the first argument. So a push to "items" will trigger an "items" event. Kinda nice. What is a bit unclear now is if Angular does any mutations to the arrays/objects, which I think it does. There is this crazy $$hash property that seems to be added. This would then be shared across all controllers that have grabbed the array/object. And that sucks :-)
So I thought I would just implement this as a BETA API on top of the current API and let people try it out with caution. If it works it will be a hell of a lot faster than the cloning :-)
from flux-angular.
Cool I will give it a try.
I'm also quite impatient to see your demo app
from flux-angular.
Hi,
Just wanted to let you know that I have been working on a lib: https://github.com/christianalfoni/immutable-store and an article using that lib to use Angular in a pretty cool way. Will invite to a discussion as soon as the article is out :-)
It will also have the TODOMVC demo app included.
from flux-angular.
Related Issues (20)
- example: MyStore is not defined HOT 2
- Cannot call dispatch while another dispatch is executing HOT 2
- flux-angular IE8 problems HOT 2
- immutable-store deprecated, other options? HOT 8
- Export "flux" module name in commonJS module. HOT 1
- Suppress webpack `Critical dependencies` warning message HOT 3
- $listenTo a store in a nested directive that have an isolate scope HOT 4
- $listenTo never updates the scope
- Emit custom event from each store HOT 1
- browserify the src is unsuccessful HOT 8
- controllerAs HOT 2
- No digest after server data was retrieved. HOT 6
- Best Way to object update in a collection HOT 1
- Dependency of angular HOT 1
- (Ignore, created issue on accident, apologies)
- Some $listenTo callbacks run outside of the digest cycle when Baobao is in asynchronous mode HOT 2
- Latest releases are not available via NPM HOT 2
- webpack2 report error HOT 2
- Question: How to map const action to function helpers? HOT 2
- QUESTION: How to attach store from another module? HOT 1
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 flux-angular.