dfreire's programming blog

A quick webapp project template

2015-06-29T00:00:00+00:00

29 Jun 2015

A quick webapp project template

Let's create a minimal working webapp project template, using Bootstrap, React, React Router, NPM, and Webpack.

The directory layout looks like this:

js/
    about.jsx
    app.jsx
    home.jsx
index.html
package.json
webpack.config.json

All the code is pretty much self explanatory, but let's briefly describe each file separately.

js/about.jsx and js/home.jsx are two React (Router) pages. In this trivial example, each of them renders a heading:

import React from "react/addons";
import Router from "react-router";

export default React.createClass({
    mixins: [Router.State],

    render: function() {
        return (<h1>About</h1>);
    }
});

js/app.jx is the entry point of the application. It renders the website structure and configures the routes. The active page will be rendered in the place of the <RouteHandler/> component.

import React from 'react/addons';
import Router from 'react-router';
import {Route, Redirect, RouteHandler, Link} from 'react-router';

import Home  from './home.jsx'
import About from './about.jsx'

var pages = [
  { id: "home",  path: "/home",  title: "Home",  handler: Home  },
  { id: "about", path: "/about", title: "About", handler: About }
];

// hold the current active path
// used to identify which bootstrap's navbar <li> element
// should be declared with the "active" class
var activePath;

var App = React.createClass({
  render: function() {
    return (
      <div>
        <nav className="navbar navbar-default navbar-fixed-top">
          <div className="container">
            <div className="navbar-header">
              <button type="button" className="navbar-toggle collapsed"
                data-toggle="collapse"
                data-target="#navbar"
                aria-expanded="false" aria-controls="navbar">
                <span className="sr-only">Toggle navigation</span>
                <span className="glyphicon glyphicon-menu-hamburger"></span>
              </button>
              <a className="navbar-brand" href="/">App</a>
            </div>
            <div id="navbar" className="collapse navbar-collapse">
              <ul className="nav navbar-nav">
                {pages.map(function(page, i) {
                  var className = (activePath === page.path) ? "active" : "";
                  return (
                    <li key={i} className={className}>
                      <Link to={page.path}>{page.title}</Link>
                    </li>
                  );
                })}
              </ul>
            </div>
          </div>
        </nav>
        <div className="container">
          <div style= >
            <RouteHandler/>
          </div>
        </div>
      </div>
    )
  }
});

var routes = (
  <Route handler={App}>
    {pages.map(function(page, i) {
      return (
          <Route key={i}
            name={page.id}
            path={page.path}
            handler={page.handler}/>
      );
    })};
    <Redirect from="/" to="home" />
  </Route>
);

Router.run(routes, Router.HashLocation, function(Handler, state) {
  activePath = state.path.split("?")[0];
  React.render(<Handler />, document.getElementById('app'));
});

The webpack.config.json configuration file tells webpack to build js/app.jsx and all its dependencies into a bundle.js file. Webpack uses loaders to compile jsx, css, and scss files into bundle.js. Although in this minimal project template we haven't created any css (or scss) file, it is a good idea to have the build system ready for them.

var config = {
  entry: ['./js/app.jsx'],
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: [/\.jsx?$/],
      loaders: ['babel']
    }, {
      test: [/\.css$/, /\.scss$/],
      loader: 'style!css!sass'
    }]
  }
};

module.exports = config;

In package.json we declare our production dependencies (React and React Router) and our development dependencies (Webpack's loaders).

{
  "name": "quick-webapp-template",
  "version": "0.0.1",
  "dependencies": {
    "react": "*",
    "react-router": "*"
  },
  "devDependencies": {
    "babel-loader": "*",
    "style-loader": "*",
    "css-loader": "*",
    "sass-loader": "*"
  }
}

Finally, the index.html page loads twitter bootstrap and our own bundle.js. Bootstrap depends on jquery, so we need to load it too.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>App</title>
  <link href="/bootstrap.min.css" rel="stylesheet">
  <!--[if lt IE 9]>
  <script src="/html5shiv.min.js"></script>
  <script src="/respond.min.js"></script>
  <![endif]-->
</head>
<body>
  <div id="app"></div>
  <script src="/jquery.min.js"></script>
  <script src="/bootstrap.min.js"></script>
  <script src="/bundle.js"></script>
</body>
</html>

If you remember js/app.jsx, you'll recognize that our app will be rendered inside the <div id="app"> element.

Assuming you have NPM and Webpack installed in your system, you can run:

npm install to install all the dependencies
webpack to build bundle.js
webback -w to build bundle.js and keep building it each time a source file is changed
webpack -p to build an optimized version of bundle.js, which is appropriate to be used in production

To see the resulting website running, you should serve the project directory in a webserver.

A common way to do this is to run:

cd <project_dir>
python -m SimpleHTTPServer 3000

and then visit http://localhost:3000/

As an alternative, you can create your own static web server using Go, as explained here.

You can find and use the source code for this template here.

Semantic Versioning

2015-06-26T00:00:00+00:00

26 Jun 2015

Semantic Versioning

Semantic Versioning, usually abbreviated as semver, is a software versioning scheme that uses the format: MAJOR.MINOR.PATCH.

If you are using a library with the semver version 1.4.2, the next patch version should be 1.4.3, the next minor version should be 1.5.0, and the next major version should be 2.0.0.

A patch version should only contain bug fixes and remain backwards compatible.

A minor version contains new features, but remains backwards compatible.

A major version can contain new features that break backward compatibility.

When your projects dependend on semantically versioned packages, you need to specify the version ranges you are willing to accept. For example, if you have a npm project that depends on lodash, you can declare the dependecy in your package.json file:

"lodash": "3.9.3", to accept only this specific version
"lodash": "~3.9.3" or "lodash": "3.9.x", to accept all patch releases after 3.9.3
"lodash": "^3.9.3" or "lodash": "3.x", to accept all minor releases after 3.9.3
"lodash": "*" or "lodash": "x", to accept all versions

Using Echo to serve a static files folder

2015-06-24T00:00:00+00:00

24 Jun 2015

Using Echo to serve a static files folder

Echo is a micro web framework for go.

Here's a snippet for serving a static files folder:

package main

import (
    "github.com/labstack/echo"
)

func main() {
    e := echo.New()
    e.Static("/", "public") // Echo.Static(path, root string)
    e.Run(":3000")
}

Using Direnv to setup a Go project based development environment

2015-06-24T00:00:00+00:00

24 Jun 2015

Using Direnv to setup a Go project based development environment

Go does not ship with a package management tool, so the community has come up with a lot of different approaches for managing dependencies. Some popular ones are: godep, gopkg, and gd.

However, I find that the simple direnv tool works for me.

I simply put a .envrc file like this on my project's root folder and all the go tools work nicely, go get correctly installs packages on the <project_folder>/src, etc.

export GOPATH=<project_folder>
export GOBIN=$GOPATH/bin
export GOROOT=/usr/local/opt/go/libexec
export PATH=$GOROOT/bin:$GOPATH/bin:$PATH

Direnv is language agnostic, so it can be used in other situations as well.

Presentation "Painless data storage with MongoDB and Go"

2015-06-24T00:00:00+00:00

24 Jun 2015

Presentation "Painless data storage with MongoDB and Go"

Gustavo Niemeyer and Steve Francia gave an excellent presentation about MongoDB and Go at GopherCon 2014: