The template to create a maintainable web app
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
helper
public
routes
views
.bowerrc
.csslintrc
.editorconfig
.eslintignore
.eslintrc
.gitignore
.travis.yml
Dockerfile
README.md
bower.json
config.js
config.xml
gulpfile.js
index.html
karma.conf.js
package.json
pre-commit
server.js

README.md

project logo

Webapplate

Webapplate is inactive, please consider neutrino instead

The template to create a maintainable web app. For your server, client, Android/iOS/FxOS or desktop projects.

Before hacking with webapplate, Try it with jsfiddle playground! Or you can fork ghapplate to experience web app directly on github! Webapplate is the most maintainable choice which allows you write with future proved javascript and css and trans-compile to current working code.

Build Status Dependency Status Code Climate Codacy Badge

current version: v3.3.0

Get the template

You can use git command to clone Webapplate:

$ git clone https://github.com/webapplate/webapplate.git

Or click 'ZIP' button on github to download the template.

Demos

Here are some examples that start the development by webapplate:

What is webapplate?

Webapplate is the Mobile First, full stack web app template/boilerplate that curated several libraries to help you quickly start a maintainable mobile web app development process. Webapplate enable you to optimized and export your web app to hosting server, Firefox/Chrome webapp store, or even Android, iOS, and more platforms.

When you first time running, webapplate provide you a material-designed web app frame.

Real welcome page

Application Structure

All applications follow the same set of guidelines as far as how code is formatted, build, and structured. A typical app looks like this:

  • public/ - The application runtime code.
  • public/manifest.webapp - The application manifest.
  • public/js/ - All javascript for your app. This code is converted during the build step using Babel, and should be using es6 modules.
  • public/style/ - Stylesheets for the app. This code is converted during the build step using cssnext, to support css variable and more emerging CSS specs.
  • public/* - Dotfiles and metadata for packagers such as bower, npm, etc.

Key Technologies

  • Bower - For library and app dependency management.
  • npm - For build-time dependency management.
  • gulp - For building, packaging, and workflow.
  • Babel - So we can leverage es6 modules and classes today.
  • CssNext - So we can leverage new CSS specs today.

Why need webapplate?

Though there are many powerful tools surround web technologies, web does not provide the SDK or ready to use template that just like Android or iOS. Web apps are simple to write but hard to get done right. Developer who wants to quickly build an web app usually consume much longer time to make their web app right.

Thus developer who is approaching to the web app(make web site behaves like mobile app) concept need a bootstrap or template project to start with. That's why webapplate comes.

What kind of web app webapplate supports?

  • static hosting web app
  • dynamic web app with node.js/express backend
  • packaged web app for Firefox Marketplace or Chrome Store
  • cordova/phonegap for multiple platform native app

To build the deployable web app, run command:

$ npm run static|dynamic|pack|cordova|github

Choose one of the above npm command based on your needs.

How does webapplate do

Webapplate provide full HTML5 development experience, use javascript to rule frontend, backend, build and test.

Webapplate provide a ready-to-deploy project bootstrap settings for both hosted (dynamic/static website) and packaged (no server) web app, with convention of file structure, express server-side support, and preconfigured helper tools like code style check, appcache generator, multi-locales and testframework.

Website inherit from Webapplate can be deployed to any host provider.

All magics are well integrated and configurable.

Webapplate Functionality

Tools Used:

Package Management

  • npm Node Package manager
  • bower Libraries manager

Build

Test

  • Karma test runner
  • Mocha test framework
    • Chai assertion library
    • Sinon test spies, stubs and mocks

Server

Client side libraries

License

The MIT License

Credit

Developers and designers from node.js, bower, express, gulp, Firefox OS, and people who involved in improving Web technologies.