reflux and angular

[reflux]

reflux and angular

[spoike]

I'm intrigued over people that use Reflux for other things than React and I find it very interesting that you're circumventing AngularJS's dirty checking. Keep us posted with more info and if there are any particular challenges you get in to with AngularJS.

One of the challenges that I've found with AngularJS in comparison with React is rendering performance. I've been out of the loop with AngularJS and I don't know if there are any good ways to batch DOM usage in AngularJS (like React does with it's virtual dom implementation) to avoid unnecessary reflow calculations in the browser and other performance bottle necks.

[unoriginalscreenname]

So far, my experience with this has been very good inside angular. I've been experimenting with it in the context of directives, and i've found it to be pretty solid. However, there are a couple things i've noticed:

I'm using it with socket.io and the angular-fullstack base. What i found is that when socket.io syncs the response from the server with the data in reflux, it causes angular to actually re-build the dom object. This actually can work in your favor, depending on what you are doing... i think that behavior might simulate how react does it. HOWEVER, it can cause problems if you are depending on data in the scope to persist. In that case, you can use "track by" in your ng-repeat, and updates to the object will cause a digest instead of re-build.

In the case of directives, i believe that integrating Reflux gives me the ability to control dirty checking performance. if you look at how i did the directive up there:

    var Completed = RefluxThingStoreService.listen(function(status, payload){
        if(status==='created') {
            var thing = element.children('.progressBar');
            thing.remove();
        }
        scope.$digest();
    }); 

When the data store updates, i can attach functionality to those actions and then run $digest() on that individual scope only if the parameters are met. This basically saves me from having to drop things onto the scope and create new watchers. now, i haven't tested this, but i'd be interested to find out if this is a good way to do things for performance.

Anyway, those are some initial thoughts.

[LongLiveCHIEF]

@ericmcgregor any more insights on this topic since September?

[wbuchwalter]

Would be interested in a follow up too!

[unoriginalscreenname]

For the most part, it was really successful. Granted, this was never a
production application, but it really helped to simplify things.
Integrating into Angular was pretty effortless, i just simply returned a
store/actions from a angular.factory so i could inject it in the typical
angular fashion.

In terms of alerting angular to updates, that was pretty straight forward
as well. For the most part a $scope.$digest() would get the job done
inside of a listener callback. Binding actions on my controllers really
simplified things for me as well.

i'm trying to think what some of the gotchas were... but i'd have to go
back and take a look. there's probably a smart way to hook into Angulars
digest cycle with something like this and fully integrate it into the scope
and controllers. But overall, it's just like using Reflux. it's nice to
be able to hook into actions, especially inside of directives, and have the
UI respond.

On Fri, May 29, 2015 at 12:46 PM, William Buchwalter <
[email protected]> wrote:

Would be interested in a follow up too!

—
Reply to this email directly or view it on GitHub
#66 (comment).

[LongLiveCHIEF]

I'm doing a bit of refactoring, and wanted to keep your experiences in particular in mind. Being able to apply reflux to an angular app (when it's primarily used by react users) is a good measure of cohesiveness.

[wbuchwalter]

Based on @ericmcgregor feedback, I started integrating reflux in a fairly large angular/TypeScript application, some hacks are needed to make it work, but it's pretty interesting this far.

[fernandogmar]

Guys +1 to this idea ;)

I was just wondering @ericmcgregor why you use scope.$digest(); instead of scope.$evalAsync();

Angularjs $apply, $digest, and $evalAsync