Developer

Lineman.js streamlines building JavaScript client applications

Lineman is a Node.js-based project build tool that is useful when building, testing, and deploying JavaScript client applications. Discover the benefits and one drawback of using Lineman.

developers-hero.png

The advances in JavaScript — namely client frameworks — have brought us back to the realm of creating thick client applications. Libraries such as Ember, AngularJS, and Backbone provide everything needed to build full-featured JavaScript client applications that deliver a rich user experience. It can be cumbersome to use these libraries, as you now have client code to go with server code. Lineman streamlines building, testing, and deploying such applications.

The rise of the framework

The popularity of client-side JavaScript development provides the opportunity to segregate client code from its server counterpart; this has always been the case with other languages, including Java and C#. The issues with separating your JavaScript client code from server side code starts with the easy aspect of maintaining a separate code repository and advances to more difficult tasks like building, deploying, and testing. This is where Lineman enters the picture by providing a vehicle for environment configuration, build automation, and testing.

It starts with Node

Lineman is a Node.js-based project build tool with a focus on assisting with all of the previously mentioned tasks. You must install Node.js fore diving into Lineman. The Node Package Manager is used to install the tool, as the following command line illustrates.

> sudo npm install –g lineman

On the Lineman site, I read that installing PhantomJS to facilitate testing is recommended. Using Lineman involves a few simple commands. The following command creates a new Lineman-based application using Lineman's default, framework-agnostic project template.

> lineman new LinemanExample

Figure A shows the creation of the new Lineman web application. Once the application is created, navigate to its new directory (LinemanExample in this case) and use the run command to start the web server (it uses Express JS) as shown in Figure B.

> lineman run 

Figure A

linemanfiga091114.jpg

Creating a new application with Lineman.

Figure B

linemanfigb091114.jpg

Starting the Lineman web server.

Once the web server is running, you can open the application in your browser — the default port used for the local web server is 8000 so navigate to http://localhost:8000 to load the application. The example is opened in Figure C. This opens the default page (index.html), which is defined in the index.us file located in the app\pages directory. Additional templates are stored in the app\templates directory.

Figure C

linemanfigc091114.jpg

Viewing the newly created Lineman site in Chrome.

In addition to the default template, Lineman offers templates to use with Backbone, AngularJS, and Ember frameworks along with templates for creating JavaScript libraries and Markdown-based blogs. These templates are located within GitHub repositories, so the clone command is used to create an application based on these projects. The following command creates a new application based on the AngularJS template in the local AngularTest directory.

> git clone https://github.com/linemanjs/lineman-angular-template.git AngularTest

A Lineman application's directory contains numerous files and directories, including these five:

  • app: This directory contains application files and assets. It includes js, img, static, pages, and templates.
  • config: This contains the application's configuration in a number of files. As an example, the files.js tells it what files to use, such as JavaScript libraries. Also, configuration.js has the standard configuration from Lineman, but you can edit to override.
  • dist: This directory is populated with generated content/files when the build command is executed.
  • package.json: This is the application's package.json file.
  • spec: Testing is configured in the config/spec.json file, but specific testing tools/helpers are set up in the spec directory, specifically in the helpers directory.

In addition to the previously covered new and run commands, Lineman offers more commands with spec and build being the most important. The build command takes your code (you can include CoffeeScript and JavaScript by default) and all other tasks defined (in config directory) and tests and spits out the final product in the dist directory. The build process runs your code through various processes such as JSHint, CssMin, UglifyJS, and more. The Lineman config command can be used to view the various configuration settings for you application. The online documentation provides more information, as well as details about how to change settings.

Testing is a notoriously tricky endeavor for JavaScript. By default, Lineman uses the Testem test runner — default tests are included in the spec directory. Figure D shows my sample project run with the spec switch with Figure E showing what is presented in the browser. The Lineman documentation provides additional details on testing and the many features at your disposal.

Figure D

linemanfigd091114.jpg

Running Lineman application with spec option.

Figure E

linemanfige091114.jpg

The Lineman application loaded in test mode.

An additional command that deserves mention is fetch; it allows you to download well-known libraries and install them in your Lineman application. As an example, I installed jQuery with the following command issued in the Lineman application directory where it will be used.

> lineman fetch jquery

Focus on development

After the initial learning curve, Lineman delivers on its promise. It is much easier to get up and running and actually use its basic features than another option like Yeoman, but that may be just my bias since I have been working with Node.js a lot. Rackspace uses Lineman for its environment, so it must do something well.

One drawback with Lineman is the overwhelming number of options available, which can be too much for a new JavaScript developer or even those developers that prefer simplicity. The numerous options bring flexibility as well, so there are plugins for using TypeScript and many more.

I've only scratched the surface of what Lineman can do, so please take a closer look at the online documentation to take full advantage of the tool. If you're already using Lineman, what do you like or not like about it? Let us know in the discussion.

Also see

About Tony Patton

Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a productio...

Editor's Picks

Free Newsletters, In your Inbox