I’m currently investigating a new architecture for our Web app user interfaces. My JavaScript skills had been badly-neglected, now I’m trying to catch up and form opinions on how to build elements that are reusable across pages and different UIs. Here’s my (still emerging) rule set:

Build components, not pages.

Components can consist of other components.

Components communicate exclusively through events (fully decoupled, as in Twitter Flight).

Because of the former rule, a simple event broker is the only required infrastructure. (Which helps keep JavaScript and CSS includes minimal.) Any plain JavaScript object can play along, no special interfaces needed. Third-party code (like Google Maps) can be easily integrated.

Make sure multiple instances of the same component can live independently on the same page (think two list views).

Don’t make assumptions about the HTML structure. Leave it up to the individual component to use data attributes, IDs or CSS classes for identification.

Leave it up to the component how HTML is generated (by server-side code on page load, fully through JavaScript code, a template engine, fetched from the server in an Ajax call…).

There will be components with no corresponding HTML (think an auto-refresh timer) and components that affect HTML in multiple places.

Send Ajax calls to a clean and powerful JSON API (I’m looking into JSON-LD), and offer that same API to external developers.

P.S.: Why don’t I use one of the existing JavaScript frameworks? Well, we’re building products which we install at various clients’ sites and which we’re going to support and extend for years. Betting on someone else’s framework for the next years can be risky (we’ve been burned by YUI 2 already). We’re happily using libraries like jQuery, but prefer building the framework ourselves.