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.
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!