Just like the "Making a better server" thread started by Zach, I've been
thinking about how we can make the front-end better.
Lately many people have been wondering about how we might scale/perform better.
IMO one of the best things we can do is the following (credits to Nico, hope I
explain it correctly).
We currently have quite a lot of deep dependencies (widget A depends on widget
B which depends on widget C, ...)
Since that is the case, you'll see the top navigation pretty fast but it takes
a while before a widget within a page is loaded.
The suggestion would be to go to the deepest level and then render everything
going up the tree.
When that is finished, we could send everything in one request to the client.
It would basically take server side template rendering to the next level.
Some things we can do on the front-end to make it better (without server
changes):
(Warning - Some things on this list may hurt your feelings ^^ [1])
Performance:
1) Use image sprites + don't allow other images on hover
2) Only use JavaScript when necessary
We're currently using JavaScript for things we could be doing in CSS
and abusing it for other things
a) Hovers should be done in CSS
b) Don't add click events & hovers to divs, only to anchor tags
c) Don't add workarounds for bugs in the back-end
d) Use CSS relative positioning instead of binding to the
window.resize() and using global absolute positioning in JavaScript.
e) Use CSS only dropdown menu's [2]
3) Remove all the polling - no setTimeout or setIntervals (also the ones in
plug-ins)
4) Use tools like Speed Index [3], Speed tracer and YSlow
Avoiding bugs:
1) Remove all the global variables
Most of these are exposed by plug-ins that we use but some of them are
ours.
We shouldn't allow plug-ins that expose those and in our own code we
should remove the ones that we have.
2) Remove the JSHint custom options
3) Remove unused legacy code (e.g. chat/unused api functions), images and
CSS
4) Add more QUnit tests
5) Run QUnit tests on every commit - the long anticipated test server
6) Keeping it DRY - never! allow any copy/pasting going on (neither in
CSS/JavaScript or HTML) - e.g. the error pages (jsp/html versions)
7) Extend the current API - provide functions like `isUrl` which is used by
several widgets
8) Don't use plug-ins that use document.write or do external requests (e.g.
addthis plug-in)
Accessibility:
1) For every :hover, we should have a :focus (CSS)
2) As mentioned in the performance section, no JavaScript hovers (if it's a
design need, we need to redesign) -> for instance activity buttons only showing
on hover
3) Provide a drop target area
Feel free to agree/disagree and to add your own thoughts and items.
-- Christian
[1] http://www.flickr.com/photos/codepo8/2051752263/
[2] http://www.cssplay.co.uk/menus/new-dropdown.html
[3]
https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index_______________________________________________
oae-dev mailing list
[email protected]
http://collab.sakaiproject.org/mailman/listinfo/oae-dev
