Friday 5 September 2014

Ionic & Yeoman

Ionic HTML5 Mobile App Framework 
# create new folder for app and open it
mkdir my-ionic-project && cd $_
# clear npm cache. more info @ NPM config 
rm -rf ~/.npm 
npm clear cache
# install generator-ionic globally
npm install -g generator-ionic
# installs:
  • Lo-Dash.js (Utility Library. Superset of Underscore.js)
  • Chalk (Package for Terminal string styling)
  • MOUT { Modular JS Utility Collection. Use whole package or individual Modules (Helper Methods) }, includes Dependencies:
    • Commander.js (Node.js Full Command-Line Interface Utility)
    • Handlebars (Semantic templates)
    • Istanbul (JS code coverage)
    • Jasmine-Node (Node.js integration of Jasmine Spec Framework)
    • JSHint (JS error detection)
    • MDOC (Markdown based documentation generator)
    • Nodefy { convert AMD JS modules (RequireJS define(..) into Node.js format (module.exports...) }
    • Regenerate (JS RegEx generator
    • RequireJS { Node.js Adapter for RequireJS (loading AMD Modules) incl. Optimiser (Minifies Scripts, CSS Inlined w/out Comments) }
    • RimRaf { Node.js deep Deletion Module (rm -rf) }
    • Rocambole { Recursive walk and manipulate EcmaScript Abstract Syntax Tree (AST) to Compile code (i.e. Rocambole Visualiser) }
  • Yeoman-Generator { Rails-inspired Generator System to Scaffold apps }, adds Additional Dependencies:
    • Dargs { Spawn CLTs by Converting Options Object into Command-Line (CL) Args }
    • Diff { Text Differences for JS (Sample) } 
    • Debug { Node.js Debugging Utility }
    • Mime { Mime-type Mapping API includes Node.js and Apache Project extensions }
    • Text-table { Text Tables borderless and aligned to print to STDOUT }
    • Async (Node.js Utility Module with Functions for Asynchronous JS)
    • Mkdirp (Node.js Recursively create Nested Directories)
    • Isbinaryfile (Node.js check if file is binary)
    • Shelljs (Node.js portable Unix Shell commands)
    • Underscore.string (Underscore.js String manipulation for JS) 
    • Iconv-lite (Convert character encoding/decoding in JS)
    • Glob (Pattern Matching search walking either Sync/Async)
    • Findup-sync (Pattern Matching first File found in current or nearest Ancestor Directory)
    • Download (Node.js Download and Extract Files)
    • File-utils { User CLT Sync File and Directory Utils (do not use on Node.js server as is equivalent to Grunt.file) } 
    • Cheerio (Lean Server implementation of core jQuery)
    • Request {Node.js HTTP and HTTPS Request Client (Forwarding, File Streaming, Piping, Proxies, Unix Sockets, Form Data URL Encoding, HTTP Auth, OAuth Signing, Custom HTTP Headers) }
    • Inquirer { Node.js Collection of Common Interactive CLIs (lightweight form of Commander.js }
  • Cordova { Platform to build Native Mobile apps using HTML, CSS, JS }, adds Additional Dependencies:
    • Q { Tool for creating Promises in JS. then method resolves handling eventual return value (fulfillment) or thrown exception (rejection) asynchronously and mitigates the Pyramid of Doom } UncommonJS Promises Manager
    • Semver (NPMs semantic parser of package versions in package.json file)
    • Underscore (Helper Library for JS is Underscore.js)
    • Plist-with-patches (Node.js parsing of Property List files (.Plist) or string into native JS object with Pull requests applied)
    • Optimist (lightweight Option Parsing with Argv Hash)
    • Npmconf (NPM configuration. Alternative RC)
    • Xcode (Node.js parser of xcodeproj/project.pbxproj files)
    • Tar (compression)
    • Elementtree { Module for XML serialization (creation) and parsing }
    • Plugman (Install/Uninstall Cordova plugins)
yo ionic
# installs:
# ionic starter blank creates:
  • Gruntfile.js
  • .gitignore
  • hooks/after_prepare/icons_and_splashscreens.js (Scripts executed before and after directory-related commands) Example Hooks
  • test/spec/controllers.js
# bower_components folder (similar to the /vendor folder in Rails) updated with: 
  • Collide (JS animation engine built by Ionic Framework team allowing developers to hook into every frame)
  • Angular-ui-router (AngularJS flexible routing with nested views to organise parts of interface into a state machine)
  • Angular-mocks (testing)
  • Angular-sanitize (Parse HTML using tokens to avoid unsafe input with ngSanitize)
  • Angular-animate (Animation hooks for common Directives using ngAnimate)
  • Angular-scenario
    • TODO: 
    • TODO - Test Driven Development (TDD)
      • Karma { Cross-browser HTML Test Server & Runner } uses Plugins / Adapters
        • Jasmine { AngularJS Testing Framework
        • Protractor { AngularJS Testing Framework End-to-end using Jasmine as Test Interface and Selenium Server to control browsers}
        • Mocha { JS Testing Framework. Integrates with GitHub }
          • Chai { Assertion Library }
        • PhantomJS { Testing code on Headless Instance }
        • Istanbul { Automatic Coverage Report Generation }
        • RequireJS { Modular Script and Source File Loader. Optimises and Minifies JS for Deployment }
        • QUnit { EmberJS Testing Framework }
      • Continuous Integration & Deployment Pipeline
        • Adobe PhoneGap Build { Free for Open Source. JS. GitHub Integration. }
        • Codeship  { Free for Open Source. Multiple Languages / Endpoints / Tools / Databases. GitHub Integration. }
        • Jenkins CI { AngularJS Automated Tests. GitHub Integration }
        • Travis CI { Automated Tests. GitHub Integration. Integrated using a YAML file. Results in Pull Requests }
        • Semaphore CI { GitHub Integration. Platform includes NodeJS, PhantomJS, and Headless Firefox }
        • CircleCI $19/mth+ { Multiple Languages. GitHub Integration. Fast }
      • Beta Testing
      • Sass
      • Encryption
        • Database Encryption
      • UI Libraries & Tools
      • Scaffolding Tool (modular code shell generator similar to the role of Rails)
        • Yo (Yeoman)
          • Package.json { informs Node.js of specific packages and version the specific project needs installed (instead of all installed globally) }
          • Bower.json { informs Bower of JS and CSS components to install in /app/bower_components }
          • Gruntfile.js { set of task instructions on specific project for Grunt } 
          • Angular Generator of Boilerplate  
            • Generates Modules { controllers, directives, filters, routes (controller + view), services (providers, factories, values, constants), decorators (with config and delegate), views }
            • Modules (resources)
            • Bootstrap
      • Build & Utility Tools (modular Configuration & Tasks)
        • Grunt { i.e. optimisation tasks including JS and CSS concatenation and/or minification (__.main.css, __.plugins.js, __.scripts.js), running local server, JS error checking and unit tests, Grunt server (uses Node.js) for live reload of changes with re-compiled Sass and CoffeeScript. Similar to Ant for Java }
        • Gulp
      • Packaging
      • Package Manager (Dependency Managers. use npm install (or update) [-g] and bower install to install tools in Package.json into /app/node_packages and Bower.json into /app/bower_components)
        • npm (Node Package Manager) { Installation Utility }
        • Bower { Web component dependency installer (i.e. bower install --save __ to add to list of dependencies in Bower.json). Similar to Maven and Ivy in Java }
        • Wiredep { Bower dependency Injection from Grunt into HTML. Manage JS and CSS includes. }
      • APIs
        • Google Maps
        • PubNub (Websockets)
  • Alias Ionic Unix Commands
    • Setup an alias function in your .bash_profile
gii() { gulp sass ; ionic build ios ; ionic emulate ios ; }

Sublime Text 2
  • Custom Tab Spaces
    • Open a document in Sublime Text 2 with the File Extension that you want to apply custom tab spacing to (i.e. two tab spaces preceding the code instead of the default of four spaces when you press the 'tab' key on your keyboard)
    • Go to the Menu and select: Sublime Text 2 > Preferences > Settings - More > Syntax Specific - User
    • Paste the following in the file that has opened automatically and then save it 
{
  "tab_size": 2,
  "translate_tabs_to_spaces": true,
  "detect_indentation": false
}

 Contributions

 Links
    Posted by at
    Labels: , , , , , , , , , , , , , , , , , , ,

    No comments:

    Post a Comment

    Subscribe to: Post Comments (Atom)