Google Dart Adoption Anxieties And How To Relieve Them

I’ve been following Dart now for a few months. I really like what I’ve seen. So what’s going to prevent it from capturing the hearts and minds of Web developers and seeing mass adoption?

Dart’s lack of open source frameworks and libraries built and contributed by a vibrant open source community will prevent its mass adoption. The ‘not reinvented here’ phenonenum has allowed all of us to stand on the shoulders of giants, and that just doesn’t exist yet in the Dart world.

If I had Google’s attention, I’d say to them, ‘hey, you’ve got a potential phenomenal success here with Dart but it will fail unless you can entice developers like me to embrace it. Please port Angular to Dart. That will let developers like me know that you are committed for the long haul. By enriching us with a ‘Dangular’ you will have seeded the first world-class framework to the Dart community. Others will then surely follow.”

I’d also suggest to Google that they offer a Dart specific hosting environment, running on Dart, along the same lines of what nodejitsu.com provides for NodeJs apps, and burn that right into the Dart editor. That would be spectacular. I’d gladly pay Google a few buck each month to provide me with a playground like that. Throw in the ability to connect to MongoDb, CouchDb, MySql and to scale up… and you will have a real winner on your hands.

I think the time is absolutely ripe for an alternative to JavaScript language like Dart to succeed and capture the hearts and minds of us developers. Personally, I’ll be rooting for Google, wishing them great success. I’d like to help if I can and that’s why I’m offering them my 2 bits. But it isn’t enough to just provide us with an option to JavaScript. What we need to see is gravitas and that can only be seeded by Google.

Jeff

Bootstrap, my first impressions

Built With Bootstrap

Built With Bootstrap[slideshow]

Smart developers and designers are turning to front-end libraries and frameworks to help reduce the time and cost required to put together a web site. Twitter’s Bootstrap, an open source library, is one such library and it appears to be very well received by developers and designers alike.

On its website Bootstrap is described as a “Sleek, intuitive, and powerful front-end framework for faster and easier web development”. The web site boasts that Bootstrap was written “By nerds, for nerds” and yes, it certainly seems to have been because I recently had the opportunity to put this library through its paces and my overall impression is very positive. Without much ado I was able to download Bootstrap, install it, and put together a few common page layouts that implement various common navigational elements that Bootstrap provides. The bottom line is that I wouldn’t hesitate recommending Bootstrap to my clients as well as using it in my own projects.

Even its documentation impresses me. Anyone who has ever had to use a library developed by others very well knows that the quality of the library’s documentation is often what will set it appart from the others. Bootstrap’s documentation is as close to excellent as I think I have every seen. What I really appreciate is that many of the examples are live so you can ‘play’ with them while browsing through it all. And it’s a good thing that Bootstraps documentation is so good because the library provides a truckload of functionality and it would be unapproachable if its documentation was anything less than stellar.

Of all its features my favorite is its ability to use symantic markup to wire up your html with the various Javascript plugins that it provides. Bootstrap calls this its “first class API”, juxtoposing it againsts the alternative method of having to code your own Javascript against the various DOM events, which, by the way, it also supports.

I did experience one rough spot, though, when I was trying to use the first class API to display the appropriate content in response to clicking on various navigation tabs. It wasn’t that it wasn’t covered in the documentation becasue it is. The problem that I had is that it wasn’t all in one place and succinctly explained. But after a few hours of toying with the API I managed to get everything working very nicely, as you can see from the screen shots I’ve included below.

Source Available To Play With

All the html I created to render the pages in the above images is available from my GitHub account in the following gists:

Feel free to clone the above. I believe they represent the least amount of code needed to display the appropriate content in response to clicking on Bootstrap’s navigation tabs.

Conclusion

Now that I’ve had time to spend with Bootstrap I am convinced it is a fantastic tool and until something better comes along Bootstrap will be my ‘go to’ front-end framework on all future projects.

Is Node.js singing the death knell for Wicket and other ‘old world’ frameworks for new projects?

Based on my own hands on experience with Node.js as well as recent positive press reports by large scale implementors suggest to me that Node.js is a game changer, one that has and will dramatically alter the landscape of future web development.

Feel free to chime in and provide your own opinion on this.

Taming Those Unruly Routes

Routing Can Quickly Turn Into A Bowl Of Spaghetti
The many Express framework examples I typically see show routing implemented inline in the main module which is frequently named app.js. While this will do for small applications with only a few resource and routes to support, it will quickly break down and become unmaintainable as the number of resources and routes grow.

There’s A Better Way – CommonJS Comes To The Rescue
There are numerous approaches to modularizing and encapsulating routing logic and the method I use is to employ CommonJs and its ability to modularize a folder. You instruct CommonJs to create a module from a folder by passing the relative path to a folder as the parameter passed to the require method as demonstrated by the the code snippet below:

require(‘./routes’);

CommonJS Does Folders
Notice that in the above expression there is no assignment of the returned value to a variable. You might ask why are we requiring a module but not assigning anything that is exported for future reference? The answer to that is that nothing is actually being exported. What’s important to understand here is that when this expression is evaluated CommonJs will parse and cache any file that is required by the file ./routes/index.js which can, for example, contain the following code snippet:

require (‘./main’); // main.js exports;
require (‘./home’); // home.js exports;

And in main.js the following code is used to configure routing:

var app = require (“../app”).app;

app.get (‘/’, function (req, res) {
console.log (‘request being handled by: get /’);
res.end(“request being handled by: get /”);
});

And in home.js the following code is used to configure routing:

var app = require (“../app”).app;

app.get (‘/home’, function (req, res) {
console.log (‘request being handled by: get /home’);
res.end(“request being handled by: get /home”);
});

index.js Acts Like A Master Include
When the require method is called in app.js CommonJs will look for a file named index.js in the routes folder. When it finds it CommonJs will parse it and any code we put there can be used to initialize routing for our application. By putting various require statements in the routes/index.js file we can have as many files as is needed, each acting as individual controllers and encapsulating all their specific domain logic.

Summary/Demo App On GitHub

Access to source code for this article is available at
https://github.com/jeffschwartz/express-restful-routing-example

To keep things simple and focused the sample project I placed on github only has 2 files in the routes folder and only implements 2 GET requests which results in the rendering of the index and home views. However, in a real life application with dozens, hundreds, even thousands of resources backed by a restful api the same technique I showed you here can use dozens of files (really controllers) in the routes folder and each one of those files would be responsible for handling any number of urls and request for a specific resource.

Well that’s a wrap for today. I’ve really enjoyed sharing this with you and I hope you have enjoyed following along with me. Most of all I hope that you will try implementing routing in your own applications using the technique that I presented here.

As always, please feel free to leave me your comments and questions.

Until the next time…

Opinion: Node.js Future Bright

picture

Node.js Delivers The Goods
As reported by eWeek.com News and Views. eBay recently launched ql.io, a gateway for HTTP APIs, using Node.js as the runtime stack. eBay was able to tune a regular quality Ubuntu workstation to handle more than 120,000 active connections per Node.js process with each connection consuming about 2K of memory. In recent months Walmart and LinkedIn have also rolled out parts of their platforms onto Node.js.

Popular among developers
Not only is Node.js popular because of it high performance and cost savings but it is becoming the darling of developers because it allows them to code in Javascript on the server, the same language they use for coding on the client browser.

Handwriting on the wall for heavy-weight frameworks and enterprise platforms
Heavy-weight Web frameworks and enterprise platforms like ROR, Dot.Net and Java EE will never die as long as there are legacy systems that need to be supported but I predict that their use in new projects and systems will see a very serious decline as developers and companies see the tremendous opportunities that Node.js provides.

Competition spurs technological advances
I also suspect that we will see a rash of products coming down the pike that will directly compete with Node.js. Like Node.js, these products will provide a Javascript VM hosted non-blocking, evented IO server environment but they will differentiate themselves in various ways.

For instance, Node.js uses Google’s V8 Javascript engine so I can predict that there will be other product offering from other vendors that use other Javascript engines, such as those from the likes of Firefox or even from MS.

Future, Bright
Node.js let the cat is out of the bag and now there is no telling where all this is going to take us. I can only be sure of one thing and that is that Node.js is a game changer, one that  spurs a shift in paradigms, and which results in new and marvelous opportunities.

Until the next time…

Use Express Route Specific Middleware To Access MongoDB

The Express framework for Node.js has this concept it calls Route Specific Middleware. It is similar in concept to the Connect framework’s middleware but it is specifically for exposing functionality to your routes.

You can use route specific middleware for all sorts of cool things and here I’ll specifically show you how you can use it to access your MongoDB database in your routes, which are defined in separate modules.

Access to source code for this article is available at
https://github.com/jeffschwartz/express-middleware-routing/tree/

To begin, you define a route specific middleware with a function that takes 3 parameters: a request; a response; and a callback function which by convention is named next. For example, the following is a valid middleware function:

  var exposeDb = function(req, resp, next){
    req.mongoDb = db;
    next();
  };

The middleware function above adds a property called mongoDb to the request object and assigns to it the value of db, which is a MongoDb database object. With this function defined, you can now add this middleware to your routes as in the following example:

app.get('/', exposeDb, routes.index);

And here is the code to the main module so you can see everything in context:

/**
 * Module dependencies.
 */

var mongo = require("mongodb")
  , express = require('express')
  , routes = require('./routes')
  , http = require('http')
  , path = require('path');

// server options
var serverOptions = {
  auto_reconnect: true,
  poolSize: 10
};

// create mongo server
var server = new mongo.Server("localhost", 27017, serverOptions);
// create mongo database
var db = new mongo.Db("dbname", server, {});

var app = express();

app.configure(function(){
  app.set('port', process.env.PORT || 3000);
  app.set('views', __dirname + '/views');
  app.set('view engine', 'ejs');
  app.use(express.favicon());
  app.use(express.logger('dev'));
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);
  app.use(express.static(path.join(__dirname, 'public')));
});

app.configure('development', function(){
  app.use(express.errorHandler());
});

db.open(function(err, db){
  if(err){
    throw err;
  }

  // route specific middleware - will expose the database to route
  var exposeDb = function(req, resp, next){
    req.mongoDb = db;
    next();
  };

  app.get('/', exposeDb, routes.index);

  http.createServer(app).listen(app.get('port'), function(){
    console.log("Express server listening on port " + app.get('port'));
  });

});

The routes/index.js file exports the index function that handles the route for the ‘/’ URL. All it does is render the home page for the Web site. Here’s its complete code:

/*
 * GET home page.
 */

exports.index = function(req, res){
  var mongoDb = req.mongoDb;
  var expose = "";
  if(mongoDb){
    expose = "index route has access to mongo";
  }else{
    expose = "index route doesn't have access to mongo";
  }
  res.render('index', { title: 'Express', expose: expose });
};

As you can see from the above code, the route now has access to the MongoDb database by way of the request. To keep things simple and straightforward this example justs reports the ‘truthyness’ of the req.mongoDb property and passes that on to the index.ejs template which will render the home page to the browser:

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
    <p><%= expose %></p>
  </body>
</html>

And here’s what the browser actually renders:

image

Browser reports that route has access to database

Summary

I hope you’ve enjoyed my short demonstration of using Express route specific middleware to easily ‘inject’ services and database access into your routes. Give it a try in your next Node application.

Feel free to leave me your comments and questions.

Until the next time…

JetBrains WebStorm Open URL, a productivity enhancing feature

WebStorm, the JetBrains Web/Javascript IDE, has a very nice feature that allows you to save a URL directly to a local file on your computer. I use this feature a lot when I need to download Javascript libraries and save them locally to my hard drive and include them in my projects. While you can easily do this using Bash and curl, WebStorm allows you to do this directly from inside the IDE. Here’s how.

  1. From WebStorm’s File menu, click on ‘Open URL’ which will open the ‘The Open URL’ window.
  2. In the ‘Specify URL’ field enter the URL for the library you want to download. So, for instance, to download the AngularJS library enter http://code.angularjs.org/1.0.1/angular-1.0.1.js and click OK. Once the library is downloaded WebStorm will open a new editor tab containing the content of the library.
  3. To save the library to your project’s Javascript folder, select ‘Save As’ from the File menu and enter the directory where you keep your Javascript libraries for your project and click OK. WebStorm will save the library to the directory you indicated and it will also add it to your project which you will be able to see in WebStorm’s Project pane.

In the short time that I’ve been using WebStorm it has really impressed me as being a very modern, productive and light weight IDE for Web/Javascript development and I’ll be discussing it along with some of the projects that I’ve been using it with in future articles.

Until the next time…