Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Branch: master
Fetching contributors…

Cannot retrieve contributors at this time

40 lines (40 sloc) 7.042 kB
<!DOCTYPE html> <html> <head> <title>frontend-architecture-patterns.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> <script type="text/javascript"> if (window.location.hostname != '') { return; } var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-32602307-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + ''; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> </head> <body> <div id="container"> <div id="background"></div> <div id="jump_to"> Jump To &hellip; <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="code-equals-data-equals-code.html"> code-equals-data-equals-code.js </a> <a class="source" href="fontbomb.html"> fontbomb.js </a> <a class="source" href="frontend-architecture-patterns.html"> frontend-architecture-patterns.js </a> <a class="source" href="functional-programming.html"> functional-programming.js </a> <a class="source" href="index.html"> index.js </a> <a class="source" href="interview-problems-dependency-manager.html"> interview-problems-dependency-manager.js </a> <a class="source" href="js-flow-control.html"> js-flow-control.js </a> <a class="source" href="meebo-jquery.html"> meebo-jquery.js </a> <a class="source" href="reentrant-exceptions.html"> reentrant-exceptions.js </a> <a class="source" href="rsvp.html"> rsvp.js </a> <a class="source" href="theres-a-bluebird-in-my-heart.html"> theres-a-bluebird-in-my-heart.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">&#182;</a> </div> <h2>Front-end architecture choices</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">&#182;</a> </div> <p>People tend to evangelize particular tools or libraries or frameworks that
they love and work on, often without explaining the types of problems their
tool or library or framework is good (or bad) at solving.</p> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">&#182;</a> </div> <p>This is an attempt to concisely explain the trade-offs you might make, when
you are deciding how to build out html/js front-end code, in order to build
the right thing for the application and product goals at hand.</p> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">&#182;</a> </div> <ul>
<li>templating on client or on server (or both)
<ul><li>duplicate templating code doubles front-end work to build or change
features, and requires twice as much work to find all the bugs.</li>
<li>if you're building a heavyweight web app, you'll need to draw and
redraw a lot of templates on the client, so it might make sense to
keep the templating logic in pure JS.
<ul><li>if you render on the client, you'll have a huge wait for the first
page load (as seen in new twitter), since all that JS takes time to
download, parse, and execute. So it's a good idea to also be able to
render your JS code on the client, using either Rhino (Java stack)
or Node (C stack). Doing this also makes it possible to use your site,
at least in some limited way, without JS in the client.</li></ul></li>
<li>if you're building a page-oriented site, where JS is used mainly for
kewl visual effects and a little bit of interactivity, it's often simpler
to keep the templating logic on the server. If you need to render html
dynamically, you can fire an xhr with the data, and pull back the html
rendered by the server, then innerHTML that into the document.</li></ul></li>
<li>events vs callbacks
<ul><li>nested callbacks are the front-end equivalent of mind-bending multithreaded
server code with lots of state shared between threads: it's super easy to
write buggy code that's a nightmare to read later. If you're nesting more
than two callbacks deep, you should switch to using pubsub events.</li>
<li>if using events, central event registry vs objects directly Observing each other</li></ul></li>
<li>app state in DOM vs JS
<ul><li>again, comes down to whether you're building something light or heavyweight.</li></ul></li>
<li>dependency management
<ul><li>if you need to support mobile and desktop experiences, and your product is
well-established enough that you have the time to optimize download speed,
it's useful to have a very granular dependency system, so you can serve
the minimal needed amount of code to handset/tablet/desktop clients.</li></ul></li>
<li>just need DOM abstraction vs need DOM abstraction plus a widgeting framework
<ul><li>this is jQuery vs Bootstrap+jQuery vs YUI3/Dojo, going down the road from
tools well-suited for lightweight interactions or prototyping, towards
tools able to handle heavyweight reusability and standardization.</li></ul></li>
</ul> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> </tbody> </table> </div> </body> </html>
Jump to Line
Something went wrong with that request. Please try again.