{"id":1723,"date":"2014-01-15T00:00:00","date_gmt":"2014-01-14T23:00:00","guid":{"rendered":"https:\/\/wwwneu.strehle.de\/tim\/weblog\/archives\/2014\/01\/15\/1678\/"},"modified":"2014-01-15T00:00:00","modified_gmt":"2014-01-14T23:00:00","slug":"1678","status":"publish","type":"post","link":"https:\/\/www.strehle.de\/tim\/weblog\/archives\/2014\/01\/15\/1678\/","title":{"rendered":"Simpler DAM UI: Single page Web app?"},"content":{"rendered":"<p>One of the more technical decisions when building our <a href=\"\/tim\/weblog\/archives\/2014\/01\/15\/1677\">simpler DAM system user interface<\/a>: Should we build it like a Web site, i.e. as a set of interlinked but independent Web pages? Or as a fancy, Ajax-powered \u201csingle page Web application\u201d that you load just once, with all further interactions taking place within the same page?<\/p>\n<p>The last times we had to decide this, we went with what was fashionable: DC4 lived on a single page that consisted of various frames. DC5 was a Web site with different pages. The current DC-X UI is a single page app (SPA).<\/p>\n<p>Pros of an SPA: Faster and smoother, no need to wait for a full page reload (and JavaScript, CSS, HTML don\u2019t have to be parsed again). State (like \u201cmenu bar expanded\u201d) can be kept in local variables, no need to pass it between pages. You can push notifications onto the page, knowing that the user will spend some time there. Read: Matt Johnston \u2013 <a href=\"http:\/\/tallpixels.com\/lets-make-single-page-web\/\">Let\u2019s make a single page Web<\/a>, or Steve Souders \u2013 <a href=\"http:\/\/www.stevesouders.com\/blog\/2012\/09\/06\/keys-to-a-fast-web-app\/\">Keys to a fast Web app<\/a>. It\u2019s also interesting how <a href=\"https:\/\/blog.twitter.com\/2012\/implementing-pushstate-for-twittercom\">Twitter<\/a> and <a href=\"http:\/\/37signals.com\/svn\/posts\/3112-how-basecamp-next-got-to-be-so-damn-fast-without-using-much-client-side-ui\">Basecamp<\/a> built their Web apps.<\/p>\n<p>Cons: Way harder to develop. Takes longer to load initially. More fragile, possibly breaking on clients with little RAM or CPU power. Issues with links and browser back\/forward buttons. SEO broken because search engines won\u2019t run all your JavaScript. Read: Swizec Teller \u2013 <a href=\"http:\/\/swizec.com\/blog\/single-page-web-apps-the-worst-of-both-worlds\/swizec\/5538\">Single page web apps: the worst of both worlds<\/a>.<\/p>\n<p>For a good overview of the pros and cons, see Steven Willmott \u2013 <a href=\"http:\/\/www.3scale.net\/2012\/12\/the-death-of-the-web-page\/\">The Death of the Web page<\/a>.<\/p>\n<p>My take: It\u2019s better to start with regular Web pages, because their development takes much less time (enabling an agile, incremental development process). Moving to a single page app later is totally possible (the other way round is way harder). And initial load time as well as working links are important for casual usage (they don\u2019t have the DC-X UI open all day) and Web interoperability.<\/p>\n<p>What do you think?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>One of the more technical decisions when building our simpler DAM system user interface: Should we build it like a Web site, i.e. as a set of interlinked but independent Web pages? Or as a fancy, Ajax-powered \u201csingle page Web application\u201d that you load just once, with all further interactions taking place within the same [&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-1723","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\/1723","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=1723"}],"version-history":[{"count":0,"href":"https:\/\/www.strehle.de\/tim\/wp-json\/wp\/v2\/posts\/1723\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.strehle.de\/tim\/wp-json\/wp\/v2\/media?parent=1723"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.strehle.de\/tim\/wp-json\/wp\/v2\/categories?post=1723"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.strehle.de\/tim\/wp-json\/wp\/v2\/tags?post=1723"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}