Nipster-style page design with table with sortable columns
xmojmr opened this issue · 7 comments
There is a site for NPM package search with design that seems very usable to me. If applied to component.io it would improve the site by few thousands of percents.
You can click on the columns to sort the table the way you need it.
Awesome functionality, after it loads. Problem is on my 1.5Mbps connection, it took about 30 seconds to load the entire package list, during which I thought the search didn't produce any results.
It seems to me that big part of this delay is caused by the packages.json database that is downloaded to the client. 2.8 MB gzipped, over 8 MB unzipped, ~70000 records, even more MB when loaded into the RAM in the browser. No local cache. Nipster does not use any server backend. All the database processing is done on the client.
In case of component.io the response time might be better as the number of components (don't know how many of them there are) is smaller
Still it seems to me that looking for few seconds at rotating hour glass with ability to find what I need afterwards is better then nearly immediate display of page that does not help much
I have some ready to play with protype of the nipster-style design based on jQuery DataTables and using the crawler.js as database source.
You can take a look/fork at
→ http://xmojmr.github.io/component.io/ ←
It is a proof of concept not suitable for merging.
I have opened this issue as response to "component.io needs a redesign! Please let us know if you're interested in contributing!" in the readme. Is any component.io site owner interested?
As of today site http://component.xmojmr.cz version 1.0.1 is ready to be used as replacement of the component.io site with some added value (e.g. searching through the 2460 records registered in the component-crawler database (cache refreshed every 2 hours) using tag filters or author filters). The project is based on the original Nipster-design, powered by some PHP data pump script. I'm hosting it on my own domain. If someone cares I can provide instructions for hosting it elsewhere
@xmojmr I like the functionality quite a bit! IMO, the ui could use some work though
also, I think the site should be built with components ;)
@stephenmathieson
1. usability of the component.io site was very low at the time when I opened this issue. It was impossible to find anything without knowing ahead what exactly you are looking for
2 yes, my site could use some UI work. I'm not a UI designer. However, from the point of usability&UI I gave it quite some thought and it is a working compromise between simplicity/features. I'm coming from Windows desktop applications background so perhaps my view does not fit yours. Any improvement tips are welcome in project's issue tracker. I've weighted the need for perfection against the requirements of the site's users (JavaScript developers). For them it is more then enough and much better than a Linux command line.
3 if the component.io site is meant to be just a toy proof of concept and usability does not matter then ok (yes I read issues with lengthy discussion about the site's url structure with no UML design and no deliverables and no implementation). My site is build using my build tool that handles minification, url validation, template inheritance using nunjucks and stylus. If the site was powered by a JBoss server with NHibernate backend and provided the services it would be just fine (from my perspective), everything node.js was not my goal. Some time ago there was a everything NASM then there was a everything FASM, I have seen more of those everything... my lesson learned is get the work done using any tools that fit
4 first I opened the issue as a request for help, offered a simple way to go as the component.io did not work for me. Then I made a working prototype and then I settled on running it myself - as there was no response from the site owner for 2 month - despite the fact that front page readme says "component.io needs a redesign! Please let us know if you're interested in contributing!"
5 actually I do not quite understand your point. What is the follow-up action that you suggest? What should be my next move and what should be component.io site owner's next move?