Would it be the right software engineering system to move from AngularJS-based to jQuery-based or hybrid implementation for webapp?

Question

I am presently working on an AngularJS-based chat webapp, and it polls the server for updates, and then renders them in what is pretty much a straight shot in AngularJS. The result looks appropriate for the maturity of the project, but it completely shuts down clipboard copying from the dialogue because it redraws the text for each polling interval and overwrites the relevant area of the screen with the most newly polled data.

I can see how to reduce this problem by more surgical DOM manipulations in jQuery, where there is one DIV for each completed chunk of data, only DIVs whose contents have actually changed are overwritten, and new DIVs are appended to the container rather than overall. And perhaps someone can point out how to make a more surgical AngularJS implementation so that updates to a small portion of the data rather than thrashing that area of the DOM when the data has been polled (<div ng-repeat="contribution in contributions" ...>).

However, I wanted to ask for the appropriateness of my approach. AngularJS obviates most of the need for specifying low-level DOM manipulations; if something surgical desired, would a good AngularJS programmer shift to something like jQuery that's more intended to allow low-level DOM manipulations, or does AngularJS offer facilities for more surgical updates so that DIV's whose contents are static are not redrawn?

I thought about asking this on StackOverflow, and it might be appropriate to ask there how to make a more surgical update so that if the user has begun selecting an area, things that are not going to be changed again don't get thrashed. However, I wanted to ask here. I know jQuery better than AngularJS, and it seemed appropriate to make a "Take a step back" question here about using AngularJS right.

Would an AngularJS programmer who knew jQuery do it with jQuery, do it with a more surgical version of AngularJS usage, or do something else? How do programmers who think in AngularJS handle a situation where they need finer-grained control than the default version allows?

Thanks,

Answer 1

Most of the time you can achieve your goal with any technology, so your question is "Should I stick with jQuery that I know well or take the time to learn AngularJS". If you are looking short term and are pressed to have a result quickly, use jQuery. Learning AngularJS or any new technology takes time but is a long term investment.

Regarding your whole screen being redrawn, this is a technical question more appropriate for StackOverflow.

First when polling for new contributions, you shouldn't update your data if there is no change. This will leave the DOM unchanged and allow copying.

Then we have to handle the case when new contributions are received. What you are probably doing at a given point is this:

$scope.contributions = updatedListOfContributions;

This effectively tells AngularJS to replace all the contributions. Instead, you should alter the existing list, using splice or push methods of the Array object.

$scope.contributions.push(newContribution);

See the Plunker that updates the list. Select the first two months before the timeout expires and you'll your selection remain unchanged after the update.

Finally, if you are building real-time applications, you shouldn't poll your server periodically as it is not scalable. If possible, use WebSockets that will update your contributions only when there are changes.