choko
choko copied to clipboard
Front-end performance improvements
Right now our front-end rendering performance is far from ideal. Here are some simple things (some not so simple) we can do to improve it:
- Currently we render the layout everytime the context changes. We need to change it to only render the layout when there is an actual layout change.
- We need to figure out a way of rendering only the panels that are added to a region and remove the ones that are not in the current context.
- We could allow pages and panels (maybe through forms, buttons and actions) to invalidate the state of some panels.
- Add two-way binding so forms and lists are aware of each other on the page, and editing an item reflects changes automatically if the item is being shown elsewhere on the page.
We can also consider using AngularUI Router for having states.
:+1:
Yeah we definitively must give an attention to this issue. I agree that AngularUI can help for achieving the 4 goals for the 0.1 first version.
Either way, ReactJS with it's virtualdom and, the state oriented architecture seems the right way for the 0.2 version.
There's also this Angular Routing module that seems interesting:
http://dotjem.github.io/angular-routing/ https://github.com/dotJEM/angular-routing
The problem with UI Router as in it current production release is that it doesn't support lazy loading of states. It's possible in 0.3.x through $stateNotFound event:
https://github.com/angular-ui/ui-router/wiki#state-change-events
I'll figure out if it's possible to depend on the 0.3 version. Will also test Angular Routing as an alternative.
Bindonce also can help, since we may not need to keep watching everything.
This library from Yahoo can help with sharing states between server and the browser and could be used to replace the current mechanism for serving page state:
https://github.com/yahoo/express-state
Yahoo folks are using it with Flux and React.
Items 1 and 2 were already implemented.