{"id":1626,"date":"2013-03-14T00:00:00","date_gmt":"2013-03-13T23:00:00","guid":{"rendered":"https:\/\/wwwneu.strehle.de\/tim\/weblog\/archives\/2013\/03\/14\/1575\/"},"modified":"2013-03-14T00:00:00","modified_gmt":"2013-03-13T23:00:00","slug":"1575","status":"publish","type":"post","link":"https:\/\/www.strehle.de\/tim\/weblog\/archives\/2013\/03\/14\/1575\/","title":{"rendered":"Building a new UI from scratch: JavaScript components"},"content":{"rendered":"<p>I\u2019m currently investigating a new architecture for our Web app user interfaces. My JavaScript skills had been badly-neglected, now I\u2019m trying to catch up and form opinions on how to build elements that are reusable across pages and different UIs. Here\u2019s my (still emerging) rule set:<\/p>\n<p>Build components, not pages.<\/p>\n<p>Components can consist of other components.<\/p>\n<p>Components communicate exclusively through events (fully decoupled, as in <a href=\"http:\/\/twitter.github.com\/flight\/\">Twitter Flight<\/a>).<\/p>\n<p>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.<\/p>\n<p>Make sure multiple instances of the same component can live independently on the same page (think two list views).<\/p>\n<p>Don\u2019t make assumptions about the HTML structure. Leave it up to the individual component to use data attributes, IDs or CSS classes for identification.<\/p>\n<p>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\u2026).<\/p>\n<p>There will be components with no corresponding HTML (think an auto-refresh timer) and components that affect HTML in multiple places.<\/p>\n<p>Send Ajax calls to a clean and powerful JSON API (I\u2019m looking into <a href=\"http:\/\/json-ld.org\">JSON-LD<\/a>), and offer that same API to external developers.<\/p>\n<p>P.S.: Why don\u2019t I use one of the existing JavaScript frameworks? Well, we\u2019re building products which we install at various clients\u2019 sites and which we\u2019re going to support and extend for years. Betting on someone else\u2019s framework for the next years can be risky (we\u2019ve been burned by YUI 2 already). We\u2019re happily using libraries like jQuery, but prefer building the framework ourselves.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I\u2019m currently investigating a new architecture for our Web app user interfaces. My JavaScript skills had been badly-neglected, now I\u2019m trying to catch up and form opinions on how to build elements that are reusable across pages and different UIs. Here\u2019s my (still emerging) rule set: Build components, not pages. Components can consist of other [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_share_on_mastodon":"0"},"categories":[1],"tags":[],"class_list":["post-1626","post","type-post","status-publish","format-standard","hentry","category-weblog"],"share_on_mastodon":{"url":"","error":""},"_links":{"self":[{"href":"https:\/\/www.strehle.de\/tim\/wp-json\/wp\/v2\/posts\/1626","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.strehle.de\/tim\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.strehle.de\/tim\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.strehle.de\/tim\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.strehle.de\/tim\/wp-json\/wp\/v2\/comments?post=1626"}],"version-history":[{"count":0,"href":"https:\/\/www.strehle.de\/tim\/wp-json\/wp\/v2\/posts\/1626\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.strehle.de\/tim\/wp-json\/wp\/v2\/media?parent=1626"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.strehle.de\/tim\/wp-json\/wp\/v2\/categories?post=1626"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.strehle.de\/tim\/wp-json\/wp\/v2\/tags?post=1626"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}