You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@couchdb.apache.org by Mikeal Rogers <mi...@gmail.com> on 2010/08/30 20:49:00 UTC
New Futon using sammy.js
About a month back I started a little experiment to see what Futon would
look like with sammy.js
http://github.com/mikeal/couchdb/tree/sammy
What started as a small experiment has turned in to a complete rewrite. As I
moved things over to a new url and code structure using sammy I also started
fixing and improving all the sticking points I didn't like about Futon.
The divergence is getting really large and I'm starting to think that rather
than continue to rewrite each section what I should really do is just
prepare what is there, converting the older pages to just work in the new
structure without taking the time to improve and rewrite them, and getting
it in to trunk. Once it's in trunk it'll make it a lot easier for me, and
other people, to bite of a chunk and improve it.
Here are the goals of the rewrite.
Increase CouchDB Transparency
- All Futon urls follow the url structure of CouchDB. /_utils/#/dbname ==
/dbname and so on.
-- When generating queries (alldocs, views) the querystring is added to the
current url making it trivial to translate in to an actual CouchDB query
- Expose all features of CouchDB to Futon
-- View size info
-- Changes page
-- Database info on DB page
-- _all_docs query in db page
Performance
- Single page app so it never reloads the sidebar/topbar
- Parallelized requests when applicable
- Remove all synchronous XHR calls
- Inline "paging", loading the next 20 (or user defined) entries in a table
now happens inline, paging elements are only on the page when more items
exist.
- Reduce the number of requests for content. (less js and html pages)
- Batch additions and creation in the DOM.
Ease of development
- Sammy.js provides a very straightforward way to do routes and replace the
main content for a single page app.
- Adding a new page is as easy as adding a new route and js function.
- Remove abstractions.
-- Giant frameworky "futon" instances are gone.
-- State is kept in closures on the route handler for the page.
-- Far less uses of jquery.couch.js, just straightforward jquery.ajax calls.
- Eventually it'll be very simple to add a new toplevel section to the main
index page that won't effect 3 other files and pages.
The primary long term goal is to make it easier to learn CouchDB using
Futon. Exposing more data, providing a better query builder, etc, are all on
the TODO list. The new structure just makes it easier to work on and add new
functionality without sacrificing performance.
Mobile browser support is also on the long term TODO list.
Right now about half the pages work, mostly because they've been rewritten,
I still need to go through and make the old pages work in order to get it
merged but I figured the sooner I started getting feedback the better.
Some screenshots:
http://grab.by/69k5
http://grab.by/69k9
http://grab.by/69k9
http://grab.by/69ke
http://grab.by/69kg
http://grab.by/69kh
-Mikeal
Re: New Futon using sammy.js
Posted by mi...@free.fr.
ouhahou this rocks. I hope that will make it in trunk.
Regards,
Mickael
----- Mail Original -----
De: "Mikeal Rogers" <mi...@gmail.com>
À: dev@couchdb.apache.org
Envoyé: Lundi 30 Août 2010 20h49:00 GMT +01:00 Amsterdam / Berlin / Berne / Rome / Stockholm / Vienne
Objet: New Futon using sammy.js
About a month back I started a little experiment to see what Futon would
look like with sammy.js
http://github.com/mikeal/couchdb/tree/sammy
What started as a small experiment has turned in to a complete rewrite. As I
moved things over to a new url and code structure using sammy I also started
fixing and improving all the sticking points I didn't like about Futon.
The divergence is getting really large and I'm starting to think that rather
than continue to rewrite each section what I should really do is just
prepare what is there, converting the older pages to just work in the new
structure without taking the time to improve and rewrite them, and getting
it in to trunk. Once it's in trunk it'll make it a lot easier for me, and
other people, to bite of a chunk and improve it.
Here are the goals of the rewrite.
Increase CouchDB Transparency
- All Futon urls follow the url structure of CouchDB. /_utils/#/dbname ==
/dbname and so on.
-- When generating queries (alldocs, views) the querystring is added to the
current url making it trivial to translate in to an actual CouchDB query
- Expose all features of CouchDB to Futon
-- View size info
-- Changes page
-- Database info on DB page
-- _all_docs query in db page
Performance
- Single page app so it never reloads the sidebar/topbar
- Parallelized requests when applicable
- Remove all synchronous XHR calls
- Inline "paging", loading the next 20 (or user defined) entries in a table
now happens inline, paging elements are only on the page when more items
exist.
- Reduce the number of requests for content. (less js and html pages)
- Batch additions and creation in the DOM.
Ease of development
- Sammy.js provides a very straightforward way to do routes and replace the
main content for a single page app.
- Adding a new page is as easy as adding a new route and js function.
- Remove abstractions.
-- Giant frameworky "futon" instances are gone.
-- State is kept in closures on the route handler for the page.
-- Far less uses of jquery.couch.js, just straightforward jquery.ajax calls.
- Eventually it'll be very simple to add a new toplevel section to the main
index page that won't effect 3 other files and pages.
The primary long term goal is to make it easier to learn CouchDB using
Futon. Exposing more data, providing a better query builder, etc, are all on
the TODO list. The new structure just makes it easier to work on and add new
functionality without sacrificing performance.
Mobile browser support is also on the long term TODO list.
Right now about half the pages work, mostly because they've been rewritten,
I still need to go through and make the old pages work in order to get it
merged but I figured the sooner I started getting feedback the better.
Some screenshots:
http://grab.by/69k5
http://grab.by/69k9
http://grab.by/69k9
http://grab.by/69ke
http://grab.by/69kg
http://grab.by/69kh
-Mikeal