node package manager
Easy collaboration. Discover, share, and reuse code in your team. Create a free org ยป

generator-scaffold-web

Scaffold JS 2.0 (Work in progress)

Build Status

NPM Module http://www.npmjs.com/package/generator-scaffold-web

The web changes a lot in a year!

Note: Angular 2 and Ionic 2 are in Beta right now. Things can and probably will be refactored later.

Scaffold V2 is completely re-written from the ground up to use Angular 2 as well as harnessing Ionic 2. The project aims to follow best practices in frontend web development with a component based approach, comprehensive testing (Unit and Behavioural) and the optimization of frontend assets through the proven techniques of concatentation. minification and compression.

There will be automated processes to ensure that your project's data is as contextual as possible both in the domain of semantic markup and data as well as platform integration out of the box. The web isn't just in the browser anymore.

Template configurations are also included to allow you to easily set up things like docker containers, Travis CI buils, IDE configurations and code quality tools.

This project will be published as an NPM module and Yeoman generator to allow for modularity and reusability. The generator will contain options for customizing the architecture of your application.

Ionic 2 http://ionicframework.com/docs/v2/

  • Hybrid app development
  • Updated design changes
  • Simplicity using a component model
  • Great choice of components
  • No router required but still works with the router component from Angular,
  • Lots of customizable components developed for cross platform compatibility,
  • Completely modular styles.
  • Native scrolling for hybrid apps,
  • Material design
  • Over 900 icons and much more!
  • Ionic native plugins for access to the user's device and hardware. GPS, Bluetooth, Camera, NFC etc.
  • Gulp, SASS (CSS Preprocessor), CommonJS and a new module loader out of the box. No longer using bower.
  • Web animations API! https://w3c.github.io/web-animations/
  • Ionic CLI

Features

What I'm excited about

  • Angular 2! Improved and intuitive templating with better code completion in your IDE.
  • Ionic 2! Build apps for Android and IOS with web technologies.
  • Ionic Native! Only add the components you need.
  • Phonegap build! Take the hassle out of packaging your app for the Google Play and/or the IOS app store.
  • Builds using Travis! Automate builds and tests for every change ensuring code quality into the future.
  • Web Components!
  • Shadow DOM!
  • HTML Imports!
  • ES6!

Directory structure

.
+-- app
+-- gulp-tasks
|   +-- css-tasks.js
|   +-- html-tasks.js
|   +-- img-tasks.js
|   +-- js-tasks.js
|   +-- performance-tasks.js
+-- hooks
+-- platforms
+-- plugins
+-- resources
+-- tests
+-- www
+-- .csscomb.json
+-- .csslintrc
+-- .editorconfig
+-- .gitattributes
+-- .gitignore
+-- .npmignore
+-- .travis.yml
+-- config.xml
+-- gulpfile.js
+-- index.html
+-- ionic.config.json
+-- karma.conf.js
+-- package.json
+-- protractor.config.js
+-- README.md

Installation

npm install -g gulp

npm install -g ionic@beta

npm install -g protractor

npm install -g cordova

Command Line

The majority of build related tasks are executed using the gulp cli tool. For a full list of available commands enter..

gulp list

The ionic cli tool is also of course available. For a full list of available commands..

ionic -h

Running the application

ionic serve

Protractor Tests

Install Protractor globally on your system

npm install -g protractor

The webdriver-manager is a helper tool to easily get an instance of a Selenium Server running. Use it to download the necessary binaries with:

webdriver-manager update

And start the selenium server with..

webdriver-manager start

Ensure the Selenium server is running and the below command should execute the protractor specs.

gulp test:protractor

Karma Tests

Install Karma globally on your system

npm install -g karma

You can then run your tests with

gulp test:karma

License

This source code has a MIT License.

Further potential and reading Material

https://developer.lge.com/webOSTV/develop/web-app/getting-started/building-your-first-web-app-webos-tv/ https://developer.mozilla.org/en-US/Marketplace/Options/Packaged_apps https://developer.chrome.com/apps/about_apps http://yeoman.io/authoring/ http://code.tutsplus.com/tutorials/build-your-own-yeoman-generator--cms-20040 http://lab.ionic.io/ http://www.gajotres.net/ionic-2-tutorial-lets-create-our-first-application/ http://ionic.io/products/creator https://angular.github.io/protractor/#/ https://angular.github.io/protractor/#/