Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>The way in which I would do this is 3 fold.</p> <ol> <li>Encapsulate javascript in small well-defined classes within namespaces</li> <li>Javascript classes should have HTML they require "injected" into them as dependency allowing <a href="https://stackoverflow.com/questions/300855/looking-for-a-better-javascript-unit-test-tool">out-of-browser unit testing</a></li> <li>Move as much client-side functionality to server as possible and use a concept known as AHAH</li> </ol> <p><strong>Javascript name-spacing</strong></p> <p>This can be achieved easily and has been covered in other posts such as this <a href="https://stackoverflow.com/questions/13021/is-there-a-concise-way-to-do-namespacing-in-javascript">Is there a &quot;concise&quot; way to do namespacing in JavaScript?</a></p> <p><strong>Small encapsulated classes</strong></p> <p>Javascript code, just like server-side code should be well encapsulated with small cohesive classes and methods. Each class lives in a separate file, named along with the namespace it is in, eg: MyCompany.SomePackage.MyClass.js. Excessive HTTP requests to each file can be saved via <a href="https://stackoverflow.com/questions/841253/javascript-good-tool-to-minify-jquery-based-js-files">combining and minifying</a> these class files at build time.</p> <p><strong>Dependency Inversion in Javascript</strong></p> <p>So effectively instead of selecting the elements you require to work with inside your class, like this:</p> <pre><code>var MyNamespace.MyClass = function() { var elementINeed = $('#IdOfElementINeed'); } </code></pre> <p>You would inject it as such:</p> <pre><code>var foo = new MyNamspace.MyClass($('#IdOfElementINeed')); var MyNamespace.MyClass = function(incomingDependency) { var elementINeed = incomingDependency; } </code></pre> <p>This technique lends itself well to testable javscript and seperation of concerns through <a href="https://stackoverflow.com/questions/386885/is-there-a-javascript-mvc-micro-framework">MVC style</a> layering of your code.</p> <p><strong>AHAH and Client-side simplification</strong></p> <p><a href="http://www.xfront.com/microformats/AHAH.html" rel="nofollow noreferrer">AHAH</a> is quite an old technique that has been around for quite some time in web-development, although is making a resurgence amongst web aficionados for its pure simplicity. However, the philosophy must be bought into at more than the architectural technique level and it must be used as a replacement for all your client side javascript eg: validation, showing/hiding dynamic content, calculations etc</p> <p>Where you may used to have attached an onClick event with client-side complexity:</p> <pre><code>$('#someElement').click(function(){ // insert complex client-side functionality here, such as validating input // eg var isValid = $(this).val() &lt; minimumCommentLength; // update page based on result of javascript code // eg $('#commentTooLong').show(); }) </code></pre> <p>Now you would simply trigger an ajax request back to the server to get the new HTML and simply replace all or some of the elements you are interested in as such:</p> <pre><code>$('#addCommentButton').click(function(){ $.ajax({ url: "/comment/add", context: document.body, success: function(responseHTML){ $('body').html(reponseHTML); }}); }) </code></pre> <p>Obviously this is a trivial example, but when used effectively, ANY javascript event on the page, simply fires off the identical ajax request and HTML replacement, greatly reducing the amount of client-side code required. Moving it to the server where it can be effectively tested.</p> <p>AHAH nay-sayers, will argue that this is not a performant way to run a web-site, however I have used and seen this technique on sites with 56k modem access and also massively scaled public web-sites. The result is of course slower, but you can still produce sub 100 millisecond round trips, which is practically instant to humans.</p>
    singulars
    1. This table or related slice is empty.
    1. POHow would you organize a large complex web application (see basic example)?
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USCommunity
    1. USXian
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POHow would you organize a large complex web application (see basic example)?
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTBountyClose
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    1. COThanks, these are all really great points. I have seen AHAH being used to simplify the client side development for a website greatly and at the same time it makes it extremely easy to have an API strategy without too much overhead. Simply having multiple entry points such as `/comment/add.json` or `/comment/add.xml` which return a JSON or XML response respectively is simply a matter of adding more views.
      singulars
      1. PO
      1. USAnurag
    2. CO@Anurag When thinking about REST, you'd make a single /commend/add endpoint, which understands how to deal with `Accept: text/xml` or `Accept: application/json` headers.
      singulars
      1. PO
      1. USbukzor
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload