webapp-frame v0.0.1

webapp-frame

This is a basic toolkit for building webapps. The primary goal is to provide a stable, fast and feature rich boilerplate for developers that want to create webapps.

• Browserify
• SCSS
• Gulp
• BrowserSync

Installation

You need to install Node, Gulp (click the links to find installation instructions).

Open Terminal / Command Prompt from the project directory and run the following command:

sudo npm install

The installation is now complete.

Getting started

Open Terminal / Command Prompt from the project directory and run the following command to start developing your new web application:

gulp

Directories / Files

• src main directory, contains HTML files.
• src/index.html this is the main HTML file, which is displayed in the browser once gulp is started. When you make changes to HTML files, the browser will automatically update.
• src/scripts this directory contains all your application modules.
• src/scripts/main.js this is the main module, the entry point of your application.
• src/styles this directory contains .scss files, scss files are automatically compiled and injected to the browser.

Modules

Most web applications exists of custom modules (i.e. login-form) and libraries (i.e. Backbone.js).

All your modules go to the src/scripts directory. The entry point of your application is src/scripts/main.js, this file is required.

Modules are bundled on the fly and automatically reload the browser.

src/index.html at the end of the body tags has 2 scripts:

<script src="scripts/vendors.js"></script>
<script src="scripts/main.js"></script>

Gulp creates and automatically updates these 2 scripts, main.js contains your application modules and vendors.js contains all the 3th party dependencies (i.e. jQuery, Angular.js etc.)

We maintain 2 seperate files because of the speed and size, if we would recompile only 1 script file each time we make changes to our modules, it will be slow as hell.

Installing module dependencies

Lets say you are writing an application which needs Backbone.js if we want to use Backbone in one of our modules we simply do this:

Open Terminal / Command prompt in the root of the project:

sudo npm install backbone --save

NOTE: You have to add the --save flag when installing npm packages that you want to use in your application. If you forget this, the library will not be compiled.

Once the installation is finished, you can require Backbone in your modules.

src/scripts/login-form.js

var Backbone = require('backbone');

var LoginForm = Backbone.View.extend({
	// ...
});

module.exports = LoginForm;

src/scripts/main.js

var LoginForm = require('./login-form');
var loginForm = new LoginForm();

And again, we automatically compile everything on the fly and reload the browser.

React support

If you want to build your application using React simply install React like you would install any other library:

sudo npm install react --save

Now lets create our first react component

src/scripts/hello.jsx

/** @jsx React.DOM */
var React = require('react');

var Hello = React.createClass({
	render: function () {
		return <div>Hello {this.props.name}</div>;
	}
});

module.exports = Hello;

Lets do something with this component in src/scripts/main.js

src/scripts/main.js

var React = require('react');
var Hello = require('./hello.jsx');

var targetNode = document.getElementById('content');

React.renderComponent(Hello({ name: 'John' }), targetNode);

And your up and running!