{"id":443,"date":"2012-04-16T06:59:05","date_gmt":"2012-04-16T12:59:05","guid":{"rendered":"http:\/\/cbateman.com\/blog\/?p=443"},"modified":"2012-05-09T21:36:34","modified_gmt":"2012-05-10T03:36:34","slug":"of-web-sites-and-web-apps","status":"publish","type":"post","link":"https:\/\/cbateman.com\/blog\/of-web-sites-and-web-apps\/","title":{"rendered":"Of Web Sites and Web Apps"},"content":{"rendered":"<p>The web was supposed to work like this:<\/p>\r\n\r\n<p>You start with carefully and\u00a0semantically\u00a0marked-up content. Everybody can consume this: search engines, screen readers, feature phones, text browsers, etc.<\/p>\r\n\r\n<p>Next you layer on the styles. They don&#8217;t need to look the same in every browser; you can add cool stuff for newer browsers, and the older ones will never know what they&#8217;re missing.<\/p>\r\n\r\n<p>Finally you add some\u00a0<a href=\"http:\/\/en.wikipedia.org\/wiki\/Unobtrusive_JavaScript\">JavaScript<\/a>\u00a0for\u00a0rich functionality and engaging interactions.<\/p>\r\n\r\n<p><a href=\"http:\/\/www.alistapart.com\/articles\/understandingprogressiveenhancement\/\"><img decoding=\"async\" src=\"http:\/\/cbateman.com\/blog\/wp-content\/uploads\/2012\/04\/m-m.jpg\" alt=\"Layers of a peanut m&amp;m\" \/><\/a><\/p>\r\n\r\n<p>This strategy has been guiding our web development practices for quite a while now.\u00a0<a href=\"http:\/\/www.alistapart.com\/articles\/understandingprogressiveenhancement\/\">Progressive enhancement<\/a> for the win, right?<\/p>\r\n\r\n<p>Maybe. Something new has been growing the past few years.<\/p>\r\n\r\n<h2>Web Apps and Client-side MVC<\/h2>\r\n\r\n<p>The difference between a web app and a web site might not be obvious to the average user, but to a web developer, it&#8217;s huge. Web apps are definitely in the minority, but they&#8217;re growing rapidly, and we now have more JavaScript MVC frameworks <a href=\"http:\/\/documentcloud.github.com\/backbone\/\">out<\/a>\u00a0<a href=\"http:\/\/emberjs.com\/\">there<\/a> <a href=\"http:\/\/knockoutjs.com\/\">than<\/a> <a href=\"http:\/\/javascriptmvc.com\/\">you<\/a>\u00a0<a href=\"http:\/\/yuilibrary.com\/yui\/docs\/app\/\">could<\/a>\u00a0<a href=\"http:\/\/angularjs.org\">possibly<\/a> <a href=\"http:\/\/sammyjs.org\/\">shake<\/a> <a href=\"http:\/\/sproutcore.com\/\">a<\/a> <a href=\"http:\/\/batmanjs.org\/\">stick<\/a> <a href=\"http:\/\/spinejs.com\/\">at<\/a>.<\/p>\r\n\r\n<p>A new application framework called Meteor\u00a0was recently released, and the first of their <a href=\"http:\/\/docs.meteor.com\/\">core principles<\/a>\u00a0neatly sums up what makes a web app different from a web site:<\/p>\r\n<blockquote><p><em>Data on the Wire<\/em>. Don&#8217;t send HTML over the network. Send data and let the client decide how to render it.<\/p><\/blockquote>\r\n<p>There&#8217;s something pretty compelling about about this kind of approach. It makes richer interactions possible, and if you&#8217;re building a sophisticated application it might be the only way to stay scalable. \u00a0But it&#8217;s a decidedly far cry from progressive enhancement.<\/p>\r\n<h2>What to Do<\/h2>\r\n<p>As usual, there&#8217;s never one right answer for\u00a0every situation. You&#8217;ll need to think about\u00a0who your audience is, how they&#8217;ll best accomplish their goals, and where you want to go with it. If you want to build the cutting-edge new hotness, an app will be perfect. If you want a site that works on as <a href=\"http:\/\/blog.responsivenews.co.uk\/post\/20004971477\/v1-0\">many devices<\/a> as possible, progressive enhancement is probably a better <a href=\"http:\/\/blog.responsivenews.co.uk\/post\/18948466399\/cutting-the-mustard\">approach<\/a>.<\/p>\r\n\r\n<p>In any case, front-end development continues to\u00a0<a href=\"http:\/\/rmurphey.com\/blog\/2012\/04\/12\/a-baseline-for-front-end-developers\/\">evolve<\/a>\u00a0as more coding moves from the back-end to the front. Keeping up with it all is tough, so your best bet is to get out there and start building some COOL STUFF.<\/p>","protected":false},"excerpt":{"rendered":"<p>The web was supposed to work like this: You start with carefully and\u00a0semantically\u00a0marked-up content. Everybody can consume this: search engines, screen readers, feature phones, text browsers, etc. Next you layer on the styles. They don&#8217;t need to look the same in every browser; you can add cool stuff for newer browsers, and the older ones will never know what they&#8217;re&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-443","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/posts\/443"}],"collection":[{"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/comments?post=443"}],"version-history":[{"count":52,"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/posts\/443\/revisions"}],"predecessor-version":[{"id":582,"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/posts\/443\/revisions\/582"}],"wp:attachment":[{"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/media?parent=443"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/categories?post=443"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cbateman.com\/blog\/wp-json\/wp\/v2\/tags?post=443"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}