Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

[doc] Update docs with `Integration with Flatiron` sections for each …

…relevant section.
  • Loading branch information...
commit 9641224e03e47da856cd0953c357a0a020069a73 1 parent 65ca1d7
Charlie Robbins authored January 17, 2012
2  public/css/app.css
@@ -71,7 +71,7 @@ h2 .name {
71 71
 h3 {
72 72
 	font-size: 120%;
73 73
 	color: #46483E;
74  
-	margin: 0px;
  74
+	margin: 0 0 10px 0;
75 75
 	line-height: 18px;
76 76
 }
77 77
 
205  public/index.html
@@ -146,11 +146,31 @@ <h2 class="green">Getting started with <span class="name">Flatiron</span></h2>
146 146
               
147 147
               <p>Flatiron comes with a commandline tool that can generate several application <b>boilerplates</b>.</p>
148 148
               <div class="panel">
149  
-                  <p class="bash">$ [sudo] npm install flatiron</p>
  149
+                <p class="bash">$ [sudo] npm install flatiron</p>
150 150
               </div>
151  
-              <p>If everything works as expected, you'll now have a new command line tool called <code>nide</code>. To create a new project, go to an existing folder and run:</p>
  151
+              <p>If everything works as expected, you'll now have a new command line tool called <code>flatiron</code>. To create a new project, go to an existing folder and run:</p>
152 152
               <div class="panel">
153  
-                  <p class="bash">$ flatiron webserver</p>
  153
+                <p class="bash">$ flatiron create &lt;type&gt; &lt;app-name&gt;</p>
  154
+              </div>
  155
+              
  156
+              <p>You can also simply include flatiron in your package.json and install locally with npm.</p>
  157
+
  158
+              <div class="panel">
  159
+<pre class="syntax">
  160
+  {
  161
+    "name": "your-application",
  162
+    "dependencies": {
  163
+      "flatiron": "*"
  164
+    }
  165
+  }
  166
+</pre>
  167
+              </div>
  168
+              
  169
+              Installing your dependencies with <code>npm</code> will install flatiron and all nested dependencies:
  170
+              <br/><br/>
  171
+              <div class="panel">
  172
+                <p class="bash">$ cd /path/to/your/app <br/>
  173
+                  $ npm install</p>
154 174
               </div>
155 175
               
156 176
 
@@ -161,8 +181,55 @@ <h2 class="green">URL Routing with <span class="name">Director</span></h2>
161 181
                 <a href="http://github.com/flatiron/director" class="button icon tag">Full project on Github</a>
162 182
               </div>
163 183
 
  184
+              <h3>What problem does it solve?</h3>
164 185
               <p>Director is a URL router. It works in a browser for single page apps <b>and</b> in Node.js. It's not a plugin for another framework. It's not dependent on anything. It's a modern router that was designed from the ground up with javascript.</p>
165 186
 
  187
+              <h3>Integration with Flatiron</h3>
  188
+              A Director based router is automatically attached to your application when using <code>flatiron.plugins.http</code> or <code>flatiron.plugins.cli</code>
  189
+              <br/><br/>
  190
+              
  191
+              <h4>CLI application</h4>
  192
+              <div class="panel">
  193
+<pre class="syntax">
  194
+  var flatiron = require('flatiron'),
  195
+      app = flatiron.app;
  196
+  
  197
+  app.use(flatiron.plugins.cli, {
  198
+    // CLI options
  199
+  });
  200
+  
  201
+  //
  202
+  // app.router is now available. app.cmd is also available
  203
+  // as a shortcut for creating routes
  204
+  //
  205
+  app.cmd('version', function () {
  206
+    console.log('flatiron ' + flatiron.version);
  207
+  });
  208
+</pre>
  209
+              </div>
  210
+              
  211
+              <h4>HTTP application</h4>
  212
+              <div class="panel">
  213
+<pre class="syntax">
  214
+  var flatiron = require('flatiron'),
  215
+      app = flatiron.app;
  216
+  
  217
+  app.use(flatiron.plugins.http, {
  218
+    // HTTP options
  219
+  });
  220
+  
  221
+  //
  222
+  // app.router is now available. app[HTTP-VERB] is also available
  223
+  // as a shortcut for creating routes
  224
+  //
  225
+  app.get(/\/version/, function () {
  226
+    this.res.writeHead(200, { 'Content-Type': 'text/plain' })
  227
+    this.res.end('flatiron ' + flatiron.version);
  228
+  });
  229
+</pre>
  230
+              </div>
  231
+
  232
+              <h3>How does it work?</h3>
166 233
               <p>On the client, it uses part of the URL to figure out what functions should execute, which usually has some effect on the way the page is presented.</p>
167 234
 
168 235
               <div class="panel">
@@ -256,6 +323,15 @@ <h2 class="green">Templating with <span class="name">Plates</span></h2>
256 323
                 <li>Make both the code and markup more readable and maintainable by a wider audience.</li>
257 324
               </ul>
258 325
 
  326
+              <h3>Integration with Flatiron</h3>
  327
+              No special integration with <code>flatiron</code> is provided, you can simply use plates by requiring it.<br/><br/>
  328
+              
  329
+              <div class="panel">
  330
+<pre class="syntax">
  331
+  var plates = require('plates');
  332
+</pre>
  333
+              </div>
  334
+
259 335
               <h3>How does it work?</h3>
260 336
               <p>
261 337
               By default, plates will try to match the data-key in the data to an ID in the tag, since both should are uniqe.
@@ -263,12 +339,12 @@ <h2 class="green">Templating with <span class="name">Plates</span></h2>
263 339
              
264 340
              <div class="panel">
265 341
 <pre class="syntax">
266  
-var Plates = require('plates');
  342
+var plates = require('plates');
267 343
 
268 344
 var html = '&lt;div id="test"&gt;Old Value&lt;/div&gt;';
269 345
 var data = { "test": "New Value" };
270 346
 
271  
-var output = Plates.bind(html, data); 
  347
+var output = plates.bind(html, data); 
272 348
 </pre>
273 349
 </div>
274 350
               <p>
@@ -279,11 +355,11 @@ <h2 class="green">Templating with <span class="name">Plates</span></h2>
279 355
 var html = '<span class="name">User</span>...<span class="name">User</span>';
280 356
 
281 357
 var data = { "username": "John Smith" };
282  
-var map = Plates.Map();
  358
+var map = plates.Map();
283 359
 
284 360
 map.class('name').to('username');
285 361
 
286  
-console.log(Plates.bind(html, data, map));
  362
+console.log(plates.bind(html, data, map));
287 363
 </pre>
288 364
 </div>
289 365
               <p>
@@ -294,11 +370,11 @@ <h2 class="green">Templating with <span class="name">Plates</span></h2>
294 370
 var html = '<a href="/"></a>';
295 371
 
296 372
 var data = { "newurl": "http://www.nodejitsu.com" };
297  
-var map = Plates.Map();
  373
+var map = plates.Map();
298 374
 
299 375
 map.where('href').is('/').insert('newurl');
300 376
 
301  
-console.log(Plates.bind(html, data, map));
  377
+console.log(plates.bind(html, data, map));
302 378
 </pre>
303 379
 </div>
304 380
               <p>
@@ -309,11 +385,11 @@ <h2 class="green">Templating with <span class="name">Plates</span></h2>
309 385
 var html = '<a href="/"></a>';
310 386
 
311 387
 var data = { "imageurl": "http://www.nodejitsu.com" };
312  
-var map = Plates.Map();
  388
+var map = plates.Map();
313 389
 
314 390
 map.where('data-foo').is('bar').use('imageurl').as('src');
315 391
 
316  
-console.log(Plates.bind(html, data, map));
  392
+console.log(plates.bind(html, data, map));
317 393
 </pre>
318 394
 </div>
319 395
 
@@ -334,8 +410,19 @@ <h2 class="green">Data Management with <span class="name">Resourceful</span></h2
334 410
 
335 411
                 <li>Define an extensibility model for databases to provide CRUD functionality to Models along with custom query, filtering or updating specific to that specific implementation (Mongo, CouchDB, Redis, etc).</li>
336 412
               </ul>
  413
+              
  414
+              <h3>Integration with Flatiron</h3>
  415
+              No special integration with <code>flatiron</code> is provided, you can simply use resourceful by requiring it.<br/><br/>
  416
+              
  417
+              <div class="panel">
  418
+<pre class="syntax">
  419
+  var resourceful = require('resourceful');
  420
+</pre>
  421
+              </div>
337 422
 
338 423
               <h3>How does it work?</h3>
  424
+              Resources can be defined using <code>resourceful.define(name, factory)</code>. Once a resource prototype is created it can be treated as a normal Javascript prototype.<br/><br/>
  425
+              
339 426
               <br/>
340 427
              <div class="panel">
341 428
 <pre class="syntax">
@@ -356,6 +443,7 @@ <h2 class="green">Data Management with <span class="name">Resourceful</span></h2
356 443
 
357 444
 wolf.feed('squirrel');
358 445
 console.dir(wolf.belly);
  446
+// ['squirrel']
359 447
 </pre>
360 448
 </div>
361 449
 
@@ -371,9 +459,40 @@ <h2 class="green">Middleware with <span class="name">Union</span></h2>
371 459
               </p>
372 460
 
373 461
               <h3>What problem does it solve?</h3>
374  
-              <p>It provides an easy way to interact with requests before and after they are processed. But it's primary value add is that it's a hybrid buffered, streaming middleware kernel that isn't coupled with any other software.
375  
-              </p>
376  
-
  462
+              <p>It provides an easy way to interact with requests before and after they are processed. But it's primary value add is that it's a hybrid buffered, streaming middleware kernel that isn't coupled with any other software.</p>
  463
+              
  464
+              <h3>Integration with Flatiron</h3>
  465
+              By using <code>flatiron.plugins.http</code> you can configure and control a <code>union</code> server. The middleware used by <code>union</code> are compatible with express and connect.<br/><br/>
  466
+              
  467
+              <div class="panel">
  468
+<pre class="syntax">
  469
+  var flatiron = require('flatiron'),
  470
+      app = flatiron.app;
  471
+  
  472
+  app.use(flatiron.plugins.http, {
  473
+    //
  474
+    // List of middleware to use before dispatching 
  475
+    // to app.router
  476
+    //
  477
+    before: [],
  478
+    //
  479
+    // List of Streams to execute on the response pipeline 
  480
+    //
  481
+    after: []
  482
+  });
  483
+  
  484
+  //
  485
+  // Both app.listen(port, [host,] callback) and 
  486
+  // app.start(port, [host,] callback) are now attached 
  487
+  // to your application. app.start() will automatically 
  488
+  // call app.listen() after calling app.init().
  489
+  //
  490
+  app.listen(8000, function () {
  491
+    console.log('Application is now started on port 8000');
  492
+  });
  493
+</pre>
  494
+              </div>
  495
+              
377 496
               <h3>How does it work?</h3>
378 497
               <br/>
379 498
              <div class="panel">
@@ -413,12 +532,42 @@ <h2 class="green">Plugins with <span class="name">Broadway</span></h2>
413 532
               </p>
414 533
 
415 534
               <h3>What problem does it solve?</h3>
416  
-              <p>
417  
-              This plugin model translates well between the browser and the server because developers can write different plugins to suite the needs of the different environments. Broadway includes several plugins by default which can be overridden if you don't agree with the particular module or library choice we've made.
418  
-              </p>
  535
+              <p>This plugin model translates well between the browser and the server because developers can write different plugins to suite the needs of the different environments. Broadway includes several plugins by default which can be overridden if you don't agree with the particular module or library choice we've made.</p>
  536
+
  537
+              <h3>Integration with Flatiron</h3>
  538
+              Each <code>flatiron.App</code> instance inherits from <code>broadway.App</code>. This means that you can write your own plugins to extend your application as you see fit.<br/><br/>
  539
+
  540
+              <div class="panel">
  541
+<pre class="syntax">
  542
+  var flatiron = require('flatiron'),
  543
+      app = flatiron.app;
  544
+
  545
+  var customPlugin = {
  546
+    name: 'custom-plugin',
  547
+    attach: function (options) {
  548
+      //
  549
+      // Extend the application
  550
+      //
  551
+      app.yourCustomMethod = function () {
  552
+        
  553
+      };
  554
+    },
  555
+    init: function (done) {
  556
+      //
  557
+      // Initialize anything your plugin needs,
  558
+      // asynchronously if necessary, then call done().
  559
+      //
  560
+      done();
  561
+    }
  562
+  };
  563
+  
  564
+  app.use(customPlugin);
  565
+</pre>
  566
+              </div>
419 567
 
420 568
               <h3>How does it work?</h3>
421  
-              <br/>
  569
+              <p>Each plugin in <code>broadway</code> interacts with an application instance through four properties illustrated in the code sample below:</p>
  570
+              
422 571
              <div class="panel">
423 572
 <pre class="syntax">
424 573
 var plugin = {
@@ -451,14 +600,26 @@ <h2 class="green">Logging with <span class="name">Winston</span></h2>
451 600
                 <a href="http://github.com/flatiron/winston" class="button icon tag">Full project on Github</a>
452 601
               </div>
453 602
 
454  
-              <p>
455  
-              A multi-transport async logging library. 
456  
-              </p>
  603
+              <p>A multi-transport async logging library.</p>
457 604
 
458 605
               <h3>What problem does it solve?</h3>
459 606
               <p>Winston is designed to be a simple and universal logging library with support for multiple transports. A transport is essentially a storage device for your logs. Each instance of a winston logger can have multiple transports configured at different levels. For example, one may want error logs to be stored in a persistent remote location (like a database), but all logs output to the console or a local file.</p>
460 607
 
461 608
               <p>There also seemed to be a lot of logging libraries out there that coupled their implementation of logging (i.e. how the logs are stored / indexed) to the API that they exposed to the programmer. This library aims to decouple those parts of the process to make it more flexible and extensible.</p>
  609
+              
  610
+              <h3>Integration with Flatiron</h3>
  611
+              Using <code>flatiron.plugins.log</code> will automatically extend your application with logging capabilities from <code>winston</code>. This plugin is included by default in both CLI and HTTP flatiron apps.<br/><br/>
  612
+              
  613
+              <div class="panel">
  614
+<pre class="syntax">
  615
+  var flatiron = require('flatiron'),
  616
+      app = flatiron.app;
  617
+
  618
+  app.log.info('Logging to my flatiron application', {
  619
+    with: 'custom metadata'
  620
+  });
  621
+</pre>
  622
+              </div>
462 623
 
463 624
               <h3>How does it work?</h3>
464 625
               <br/>
@@ -478,7 +639,7 @@ <h2 class="green">Logging with <span class="name">Winston</span></h2>
478 639
 winston.add(winston.transports.File, { filename: 'somefile.log' });
479 640
 winston.remove(winston.transports.Console);
480 641
 </pre>
481  
-</div>
  642
+             </div>
482 643
 
483 644
 
484 645
             </div>

0 notes on commit 9641224

Please sign in to comment.
Something went wrong with that request. Please try again.