FourSquad/SevenAtOnce — Issue #1: redesign the app to a more generic and less spaghetti one
Author: llabball
Created: 2012-01-14 14:54:07+00:00
State: open

# why

Our code looks much more complex than other evently web apps with the same or higher level of functionality. This is a normal development state in this context: there are so many possible solution paths that all reaches the goals. At the end everyone wishes a readable and clean structured codebase and the sum of the many good ideas should value more than simply the sum of all particular code snippets.

# what
The redesign begins with the index.html.

## DRY
Dont repeat yourself! Have a look at the current code state inside the body tag and the corresponding JavaScript section to initialize the apps:

```html

Seven at once

Hello tailor! What's your name?

sadasdasd

```

```js
$.couch.app(function(app) {

$("#WidgetLogger").evently("logMessages", app);
$.evently.connect("#WidgetFacebook", "#WidgetLogger", ["doDebug"]);
$.evently.connect("#WidgetGoogle", "#WidgetLogger", ["doDebug"]);
$.evently.connect("#WidgetTwitter", "#WidgetLogger", ["doDebug"]);
$.evently.connect("#WidgetXBox", "#WidgetLogger", ["doDebug"]);
$.evently.connect("#WidgetXing", "#WidgetLogger", ["doDebug"]);
$.evently.connect("#WidgetFlickr", "#WidgetLogger", ["doDebug"]);
$.evently.connect("#WidgetEbay", "#WidgetLogger", ["doDebug"]);

$("#search").evently("search", app);
$("#WidgetFacebook").evently("networkSearch", app, [{"service" : "facebook"}]);
$("#WidgetGoogle").evently("networkSearch", app, [{"service" : "google"}]);
$("#WidgetTwitter").evently("networkSearch", app, [{"service" : "twitter"}]);
$("#WidgetXBox").evently("networkSearch", app, [{"service" : "xbox"}]);
$("#WidgetXing").evently("networkSearch", app, [{"service" : "xing"}]);
$("#WidgetFlickr").evently("networkSearch", app, [{"service" : "flickr"}]);
$("#WidgetEbay").evently("networkSearch", app, [{"service" : "ebay"}]);

$.evently.connect("#search","#WidgetFacebook", ["doSearch"]);
$.evently.connect("#search","#WidgetGoogle", ["doSearch"]);
$.evently.connect("#search","#WidgetTwitter", ["doSearch"]);
$.evently.connect("#search","#WidgetXBox", ["doSearch"]);
$.evently.connect("#search","#WidgetXing", ["doSearch"]);
$.evently.connect("#search","#WidgetFlickr", ["doSearch"]);
$.evently.connect("#search","#WidgetEbay", ["doSearch"]);

});
```
A lot of repeating code is shown. Its easy to see that every new service will effect a four line addition. To DRY this it should updated to a more generic approach. **The service names in the widget initialize code line** `$("#WidgetEbay").evently("networkSearch", app, [{"service" : "ebay"}]);` **are the keys**. The service names should get a place where the app starting process can iterate over and pass them dynamically in the viewport - the search widget can probably be a very good and easy to understand home for that logic.

## other things
The **headline** shows the internal name of the project and that not seems to be a big a value for the users - IMHO obsolete. Also it causes display issues on small device screens.

The **search widget** looks quite smart. Its unique and seems not to cause any problems. But the is one little thing: To implement a start event for the search process when the user hits the key on the text input there were two ways:

* observing every keystroke to be the key
* observing the browser native submit events of forms

The second way is much more efficient because not *every* keystroke must controlled - simply subscribing to a browser event and waiting to be triggered. The problem is now that the browser native submit event description is provided on form tags not input tags. In result the search widget code references to a part of the DOM thats outside the control of this code (evently/search/_init):

```javascript
$("form").submit(function() {
console.log("We search for flies and try to catch them");
$("#search").trigger("doSearch",[{"searchterm":$("#me").val()}]);
return false;
});
```
The elements `$("form")` and `$("#me")` aren't children of the widget DOM root node. *The search widget DOM root node should be the form tag*.