After responding to the previous post concerning performance, I thought it would be fruitful to get a sense of the Ionic team’s thoughts on integrating reactjs.
Posts like this (http://davidandsuzi.com/ngreact-react-components-in-angular/) indicate there’s quite a bit of performance gains to be had. Would handling rendering of some of the core framework pieces, like animations, ng-repeat, scrolling, etc., via reactjs, make sense, or be something the team would consider working on?
This looks very promising!
Yeah react looks great, and I like how its just concerned about the “V” of MVC. Performance is one of our top priorities, so we’ll definitely be researching something along these lines, especially for the list directive. Without diving into it too much, I’m not certain if we’d use React itself, or do something similar. Either way, I’d like to keep it as angular as possible without resorting to any hacks to make them play nice. To be continued…
Additionally, angular 2.0 (which is being worked on now) will have a huge emphasis on performance, especially mobile. They are building their own whole benchmark framework to make sure angular performs at 60 FPS on all modern mobile & desktop browsers.
They will release more info on it soon.
I went a little into the possibilities of using ReactJs with AngularJs and the two can be used very nicely together. Using ReactJs to render greatly improves rendering performance. Rendering a list of 1500 items with native AngularJs ngRepeat 1300ms and the same list with AngularJs and reactjs 200ms. So a performance increase of 85%. You can read more here http://www.williambrownstreet.net/blog/2014/04/faster-angularjs-rendering-angularjs-and-reactjs/
I’ve tried to implement React into ionic and the performance is really fast enough. However, I’m facing one issue that the React will replace all the dom elements in tags so it also remove the ionic scroll bar as well. do you have any idea about this?
Here is my implementation:
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
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
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 .
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.