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.

current version: v3.3.0

• Project page http://webapplate.github.io/
• Follow Setup Instruction to setup the webpplate project.
• More Guides
  • Learn more from webapplate document.
  • Webapplate introduction from hacks.mozilla.org.

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:

• WebbyMouse Touchpad & Air mouse with full web technology (Desktop + Web App)
• Lookfor (Web App)
• BMI (Web App)
• Tomodoro (Web App)
• BeautyClock (Web App)
• Author's homepage (Web page)

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.

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.

Tools Used:

Package Management

• npm Node Package manager
• bower Libraries manager

Build

• gulp Javascript build system

• Transpiler

• Babel (ES6)

• Cssnext (CSS)

• Optimize

  • UglifyJS javascript Compressor
  • cssmin Compress CSS files
  • htmlmin Minify HTML

• Code Quality & Analysis

  • eslint javascript linting utility
  • csslint css code style linter
  • [jsonlint] (https://github.com/rogeriopvl/gulp-jsonlint) json linter
  • sloc Source line of codes
  • jsdoc Generate API document by running documentationjs

Test

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

Server

• Express
  • Swig JavaScript Template Engine

Client side libraries

• l20n client side internationalization

• Bootstrap mobile first front-end framework

  • Bootstrap Material Design material design theme for Bootstrap

• Browser polyfill

  • localforage enhanced offline storage API
  • fetch replacement of XMLHTTPRequest

License

The MIT License

Credit

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