generator-scaffold-web

Scaffold JS 2.0 (Work in progress)

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

• Angular 2 https://angular.io
• Ionic 2 hybrid app development. Package your web app easily for Android and IOS.
• Gulp
• Livereload http://livereload.com
• Browserify http://browserify.org
• SASS http://sass-lang.com/
• CSS Comb http://csscomb.com
• CSS and JS Concatenation and Minification
• Automatic CSS Vendor prefixing to support older browers
• CSS and JS Lints
• HTML minification for production builds if required. Squeeze every last Kb out of your app.
• Travis configurations to automate and test builds before deployment http://travis-ci.org
• Editorconfig for code styling http://editorconfig.org/
• Auto generated cache manifest file (Note This has now been replaced by an offline service worker for providing an offline experience first. This is now better web practice as cache manifest files can be tricky to manage for different sites http://alistapart.com/article/application-cache-is-a-douchebag)
• Further compression of assets using express in gzip format (To do)
• Development and production builds with a watcher to kick off builds when changes are made in development
• Native notification when builds are completed.
• Builds run against pagespeed for feedback on app performance
• Favicons, IOS splash / homescreen icons, Android icons and Windows 8 Tile Icons auto-generated.
• Protractor for Testing https://angular.github.io/protractor/#/
• Karma and Jasmine Testing https://karma-runner.github.io/0.13/index.html http://jasmine.github.io
• Gulp task listing (just type 'gulp list')

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/#/