name: inverse layout: true class: center, middle, inverse --- # WebApplate Overview [gasolin] --- # TL;DR a template for maintainable web app project. .footnote[https://github.com/webapplate/webapplate] --- # What is it and why should I be using it? --- layout: false # Web Rules There are different platforms and devices, only web can support them in budget * Natually **multi-platform** friendly (Windows, Android, iOS..) * *Responsive design* can deal with **multi-form-factors** (phone, pad, pc) * Build Hybrid-app for **Android**, **iOS** * Build Native webapp for **Firefox(/OS)** and **Chrome** webapp --- # Steps to develop a new webapp 1. git clone the [webapplate](https://github.com/webapplate/webapplate) 2. run `gulp` to auto-fetch required libraries 3. get familiar with [File structure](https://github.com/webapplate/webapplate/wiki/Structure) 4. add your app content 5. [Deploy](https://github.com/webapplate/webapplate/wiki/Deployment) to variant place .footnote[Read more on [wiki](https://github.com/webapplate/webapplate/wiki/)] --- # A fast track to start webapp development Webapplate bundled things you need for serious web development: * **Template** App template with Material Design * **Build, optimize, library dependency** helper tools integrated * **Firefox, Chrome, Cordova** webapp related configuration provided * **Test framework** for multi-browsers * **Style checker** for js, css, json, jsdoc formats * **Localization** client side localization --- # What are those helper tools? * Project Build: gulp * Optimize: uglify, cssmin, htmlmin * Library dependency: npm, bower * Test: karma, mocha, chai, sinon * Localization: l20n --- # Try webapplate now! * Firefox and Chrome webapp support * Pure Javascript for either client or server side * Integrated toolbox to optimize your web app .footnote[https://github.com/webapplate/webapplate]