Reactjs + Angularjs for performance improvement?

I have tried Angular repeat, reactJS and mythril and I see good performance upgrade when using mythril compared to reactJS. Did anyone have experience in using mythril with ionic and is there any bottleneck that should be known before going down mythril’s path?

I’m facing some performance issues…
I applied many good practices for performance and added bindonce almost everywhere but there is still some lags…

If someone has a feedback on ReactJS, Mythril or some tips to get native performance, I will be very pleased !

I have tried Mithril for one for the module which is like Facebook feeds. I can see good performance improvement with that in my app even in older hardware.

Also applying “visibility:hidden” to feeds which are out of viewport also improved the performance. I am still trying to figure out best way to handle out of viewport feeds, because if it is applied during scroll event, page scrolling is not smooth. I have to do it after the scroll complete event.

Thanks for your feedback.

How easy it was to try Mithril in your app ? (time to experiment in one view…)

Did it improve your view transitions ?

@loicknuchel, I have used mithril component inside ionic view and integrated some events from mithril to ionic.

I was new to both React and Mithril, but I created sample apps with both of them pretty quickly.

Some resources for you to start:
http://lhorie.github.io/mithril/getting-started.html - default TODO app
http://lhorie.github.io/mithril/auto-redrawing.html - redraw strategy during clicks or events
http://stackoverflow.com/questions/25831074/mithril-with-angularjs - For integrating angular and mithril
http://lhorie.github.io/mithril-blog/index.html - this has different issues faced and some interesting topics

Thanks a lot !!!

I’ll try this soon :slight_smile:

If you have some sample app to share, it would be really helpful I think.

Currently it is hardwired into my app. I will create a simple version and will send it to you .

Thanks a lot !!!
I really appreciate that :smiley:

I am interested in performance suggestions with ReactJS/Mithril as well.

I have an app that will grab anywhere from 1000 - 2000 list items. Each list item has some conditional logic to display specific ionic icons which adds an extra watcher, as well as 3 item-options.

So I have two concerns… Loading the Dom, and performance while watching the dom and scrolling…

For watching, of course angular 1.3 bind once will help with the static values, but even with that I know I’m going over the suggested 2000 ng bindings. I am looking into collection-repeat as well although I have a filter and there seems to be a few issues with this in beta 14

As far as loading, I’m looking at approaches (ionic collection-repeat, reactjs, mithril) and through reading it seems as though Mithril is the fastest option… I would like to implement the fastest way possible giving users the best experience possible

I only need this for 1 view in my app. Can I easily plug in Mithril or reactjs into a single view and have angular/ionic control the rest of the app? Or is it a all or nothing type of deal with the view layer? Any suggestions will be appreciated @adam @ethan @martingg88 @loicknuchel @saravcts .

Thanks!!

1 Like

Mithril seems to be faster after comparing reactJS and angular lists. I compared using chrome profile and had some good numbers. But I had lots of interactive components in my list like showing a dropdown on click, posting a comments and more. All those actions were implemented using angular and it was becoming difficult to integrate both these frameworks.

Also after angular 1.3 bind once, i feel there is some improvement in rendering my view, so I am not using Mithril as of now. I will give it a try again and see if there is any additional helpers in using mithril with angular.

Hope this might help you.

Thanks @saravcts ! I have been playing with react and although I haven’t run any specific benchmarks, the performance is noticeablly better/faster! I used ng-react to connect my controller with the items I want to substitute ng-repeat. Im going to get Mithril going and see which offers the best performance.

@djett how did it go? I have an app that uses collection-repeat and wish it was a little smoother. Have you tried collection-repeat? Which solution did you end up settling on?

@Tom I enjoyed using reactjs via ng-react. I have complex rendering on my ion-items so I used ng-react to get full control over what parts of the item get re-rendered and when. I had defined react components exposed as angular factories and fed them to ngreact. Although I dont have any specific benchmarks, the initial load time was really fast!

The problem I had was that my list can contain anywhere from 800-1500 items, and there was a little lag during scrolling with that many items in the ion-list. (each item having item-options dynamically created (had just used the item-options css classes since I couldn’t use the actual ionic directive in react) and also parts of the item that can cause a rerender on click).

So even with react, I had to look for other solutions for virtual dom, or inifinite scroll in order to achieve what I was looking for. Then the new collection-repeat in rc0 came out and BAMMM problem solved… Using the new collection-repeat with angular 1.3 bind-once, my scrolling is smooth as can be even with 1500 items in the list.

Are you using the new and imporived collection-repeat? Or the collection-repeat in beta14 and under?

@djett I didn’t know there were improvements to collection-repeat. I’ve using beta14, sounds like it’s time to upgrade. Thanks.

@Tom the new collection-repeat has improved significantly. I would recommend upgrading to the latest (rc1)

@djett Some frames you can see. The collection-repeat is not enough by now.

1 Like

After a lot of test the problem is the js scroll. It causes a lot of lag in the lists. When will we able to use native scroll in collection-repeat? @perry By now the solution is use ng-repeat with overflow-scroll=true (native scroll) in the specific view.

Try react native. It is a great tool. Come angular2, you can render reactive native components instead of the DOM. Something big will happen soon. JS devs will rule!

@siddhartha the implementation of the listview of react native is not fast. You can see many comments in GitHub about that.

2016 AngularJS VS. ReactJS Survey Results! See here: http://blog.testproject.io/2016/09/01/front-end-development-unit-test-automation-trends2/