site/features.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Geddy - A Structured Node.js Framework</title>
    <meta name="description" content="">
    <meta name="author" content="">

    <meta name="viewport" content="width=device-width">

    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap.min.responsive.css">

    <link href="js/google-code-prettify/prettify.css" rel="stylesheet">
    <script src="js/google-code-prettify/prettify.js"></script>

    <style>

      @media (min-width: 980px) {
        body {
          padding-top: 60px;
        }
      }

      code {
        color: #777;
      }

      .navbar {
        box-shadow: 0px 0px 3px #000;
        border-bottom: 1px solid #999;
      }

      .code-box {
        padding-top: 28px;
      }

      .code-box .syntaxhighlighter {
        box-shadow: 0px 0px 3px #000;
        border-radius: 3px;
      }

      hr {
        border-color: #ccc;
        box-shadow: -1px 0 1px white;
      }

      .hero-unit {
        background-color: rgba(200, 200, 200, .5);
        box-shadow: 0px 0px 3px #bababa;
        border: 1px solid #EDEDED;
      }

      h4 {
        margin-bottom: 20px;
      }

      @media (max-width: 480px) {
        .hero-unit {
          padding: 20px 20px 30px 20px;
        }
        .hero-unit h1 {
          font-size: 32px;
        }
        .hero-unit p {
          font-size: 12px;
        }
      }
    </style>

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="images/favicon.ico">
    <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
  </head>

  <body style="background-image: url(http://subtlepatterns.com/patterns/whitey.png); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; background-position: initial initial; background-repeat: initial initial; " onload="prettyPrint()">

    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="i-bar"><i class="icon-chevron-down icon-white"></i></span>
          </a>
          <a class="brand" href="index.html">GeddyJS</a>
          <div class="nav-collapse">
            <ul class="nav">
              <li><a href="index.html">Home</a></li>
              <li class="active"><a href="features.html">Features</a></li>
              <li><a href="tutorial.html">Tutorial</a></li>
              <!--<li><a href="docs.html">Docs</a></li>-->
            </ul>
            <ul class="nav pull-right">
              <li><a href="http://github.com/mde/geddy">Get it on Github</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container">
      <div class="hero-unit">
        <h1>Features</h1>
        <p class="pull-right">Geddy has you covered</p>
      </div>
      <div class="row">
        <div class="span2 heading-box">
          <h3>Models</h3>
        </div>
        <div class="span4">
          <h4>A flexible data layer</h4>
          <p>Geddy lets you define reusable models for your data. It's got validation, instance methods, and static methods. It'll even stub out a model adapter for you to help you get your data slurped in.</p>
        </div>
        <div class="span6">

<!-- Model Example -->
<pre class="code-box prettyprint">
var User = function () {
  this.property('login', 'string', {required: true});
  this.property('password', 'string', {required: true});

  this.validatesPresent('login');
  this.validatesConfirmed('password', 'confirmPassword');

  // You can define methods for instances like this
  this.someMethod = function () {
    // Do some stuff
  };
};

User = geddy.model.registerModel('User', User);
</pre>

        </div>
      </div>

      <hr/>

      <!-- Views -->
      <div class="row">
        <div class="span2 heading-box">
          <h3>Views</h3>
        </div>
        <div class="span4">
          <h4>A templating system you already know how to use</h4>
          <p>Geddy uses EJS for templating. This means you get to use the same Javascript you know and love to create your templates. The syntax is very similar to ERB, so if you have experience with rails you should be able to jump right in.
        </div>
        <div class="span6">

<!-- View Example -->
<pre class="code-box prettyprint">
// view logic
&lt;% if (localVar) { %&gt;
  // do some stuff with that local variable
&lt;% } %&gt;

// display the value of a variable
&lt;%= user.login %&gt;

// just use regular js
&lt;% for (var i in user.posts) { %&gt;
  &lt;%= user.posts[i].title %&gt;
&lt;% } %&gt;
</pre>

        </div>
      </div>

      <hr/>

      <!-- Controllers -->
      <div class="row">
        <div class="span2 heading-box">
          <h3>Controllers</h3>
        </div>
        <div class="span4">
          <h4>Simple controllers</h4>
          <p>When you generate a resource, your controller is automatically filled with your basic CRUD actions. If you want to add more actions to your controller, just add a method onto the controller and add a new route. It's that easy.</p>
        </div>
        <div class="span6">

<!-- Controller Example -->
<pre class="code-box prettyprint">
var User = function () {
  this.index = function (req, resp, params) {
    this.respond(params, {
      format: 'html'
    , template: 'app/views/main/index'
    });
  };
};

exports.User = User;
</pre>

        </div>
      </div>

      <hr/>

      <!-- Content Negotiation -->
      <div class="row">
        <div class="span2 heading-box">
          <h3>Content Negotiation</h3>
        </div>
        <div class="span4">
          <h4>Automatic json and jsonp support</h4>
          <p>Geddy handles content formats for you - add a <code>.json</code> to your url, and you'll get json back. Add a <code>.js?callback=foo</code> to your url and you'll have a jsonp response. Awesome, huh?</p>
        </div>
        <div class="span6">

<!-- Content Example -->
<pre class="code-box prettyprint">
this.respondsWith = ['js', 'json'];

this.show = function (params) {
  // (Fetch some item by params.id)
  item = {foo: 'FOO', bar: 1, baz: false};
  this.respond(item);
};
</pre>

        </div>
      </div>

      <hr/>

      <!-- Process Clustering -->
      <div class="row">
        <div class="span2 heading-box">
          <h3>Process Clustering</h3>
        </div>
        <div class="span4">
          <h4>No code needed for clustering</h4>
          <p>Geddy automatically handles multi-process clustering for you. It works with 0.6.x and it's backwards compatible with node 0.4.x; scale your node apps across your server's core without any extra work.</p>
        </div>
        <div class="span6">

<!-- Clustering Example -->
<pre class="code-box prettyprint">
  // just set the number of workers in your config
  workers: 1

  // Geddy also handles process rotation
, rotateWorkers: true
, rotationWindow: 7200000
, rotationTimeout: 300000
</pre>

        </div>
      </div>

      <hr/>

      <!-- Metrics -->
      <div class="row">
        <div class="span2 heading-box">
          <h3>App Metrics</h3>
        </div>
        <div class="span4">
          <h4>Automatically Instrumented Controllers</h4>
          <p>With geddy, all your controller actions and requests are instrumented automatically. All you need to do is enable metrics in your config. hit up port 4001 /metrics to collect them periodically.</p>
        </div>
        <div class="span6">

<!-- Clustering Example -->
<pre class="code-box prettyprint">
// counters
var counter = new geddy.metrics.Counter;
counter.inc(1);

// timers
var timer = new geddy.metrics.Timer;
timer.mark();
</pre>

        </div>
      </div>

      <hr/>

      <!-- Generators -->
      <div class="row">
        <div class="span2 heading-box">
          <h3>Executable</h3>
        </div>
        <div class="span4">
          <h4>Generate your initial app and all it's resources</h4>
          <p>Use the <code>geddy</code> executable to generate geddy apps and resources. <code>geddy app test_app</code> will generate a geddy app called test_app in the test_app directory. <code>geddy resource user</code> will generate a Users controller, a User model, a bunch of associated views, and all the RESTful routes needed for CRUD operations on a User.</p>
        </div>
        <div class="span6">

<!-- Generators -->
<pre class="code-box prettyprint">
// generate an app
$&gt; geddy app test_app

// generate a new resource
$&gt; geddy resource user

// start your app
$&gt; geddy
</pre>

        </div>
      </div>

      <hr/>

      <!-- Bootstrap -->
      <div class="row">
        <div class="span2 heading-box">
          <h3>Bootstrap and jQuery</h3>
        </div>
        <div class="span4">
          <h4>Your app automatically works on mobile devices</h4>
          <p>Geddy gives you Twitter's Bootstrap on the front end so you can rapidly lay out your prototype. Plus, since responsive layouts are built right in, your app automatically works on mobile devices and tablets.</p>
        </div>
        <div class="span6">

<!-- Bootstrap -->
<pre class="code-box prettyprint" style="font-size: 90%">
&lt;script src=&quot;js/jquery.min.js&quot;&gt;&lt;/script;&gt;
&lt;script src=&quot;js/bootstrap.min.js&quot;&gt;&lt;/script;&gt;

&lt;link rel=&quot;stylesheet&quot; href=&quot;css/bootstrap.min.css&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;css/bootstrap.responsive.css&quot;&gt;
</pre>

        </div>
      </div>

      <hr/>

      <!-- Logging -->
      <div class="row">
        <div class="span2 heading-box">
          <h3>Logging</h3>
        </div>
        <div class="span4">
          <h4>Access, stdout, and error logs</h4>
          <p>Geddy automatically logs requests to an access log, and you can log anything you'd to stdout or a file. It supports 9 different log levels from debug to emergency.</p>
        </div>
        <div class="span6">

<!-- Bootstrap -->
<pre class="code-box prettyprint" style="font-size: 90%">
// info
geddy.log.info('Some info for you');

// warning
geddy.log.warn('A warning!');

// error
geddy.log.error('An error occurred');
</pre>

        </div>
      </div>

      <hr/>

      <!-- routes -->
      <div class="row">
        <div class="span2 heading-box">
          <h3>Routes</h3>
        </div>
        <div class="span4">
          <h4>Easy to use Routing API</h4>
          <p>Routes are easy with Geddy. Just match a url to a controller and an action. You can specify http methods, formats, and url params.</p>
        </div>
        <div class="span6">

<!-- Bootstrap -->
<pre class="code-box prettyprint" style="font-size: 90%">
// standard main route
router.match('/').to({controller: 'Main', action: 'index'});

// a custom route
router.match('/moving/pictures/:id').to({controller: 'Moving', action: 'pictures'});

// a restful resource route
router.resource('users');
</pre>

        </div>
      </div>

      <hr/>

      <footer>
        <p>&copy; GeddyJS.org 2112</p>
      </footer>

    </div> <!-- /container -->

    <script>
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-5555148-4']);
      _gaq.push(['_setDomainName', '.geddyjs.org']);
      _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') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    </script>

  </body>
</html>