JavaScript Task Automation Frameworks

@svswaminathan Jan 23, 2016

2

About me• Swaminathan Vetri• Developer @ Target• Experienced on windows/web development using Microsoft technologies,

Hybrid mobile app development using Cordova, AngularJS, Ionic• Passionate on exploring, learning and sharing about technologies• Gadget freak, Amateur photographer, novice tech/travel blogger

3

What do we learn today ??

• What is task automation ?• Why do we need automation ?• What are the popular tools ?• Automation demos

4

Common tasks

Unit tests Static code analysis Minification

Concatenation Live reloadManaging

dependencies

and many more …

5

Popular tools for automation…

6

• Bower (bower.io) – package manager for the web• Eases the process of managing all the client side dependencies like

other JS frameworks, libraries, utilities, assets.• Getting Bower -> npm install –g bower• Installing other packages -> bower install <package name>

7

Demo

8

• Grunt (http://gruntjs.com/) - The JavaScript Task Runner• Purely an automation tool - that works based on Configuration• Rich set of plugins for most commonly used tasks • Grunt-CLI and Grunt plugins do the magic• Getting started -> “npm install –g grunt-cli”• Gruntfile.js is at the crux of Grunt

9

What can you do with a Gruntfile ?

• Define tasks configuration• Load tasks – tasks can be custom written or from pre-existing grunt

plugins available via npm• Register tasks• Execute grunt tasks -> “grunt <taskname>”

10

DemoCode available at http://bit.ly/bdotnet-grunt-demo

11

• Yeoman (Yeoman.io) – Scaffolding tool for the modern web apps• Exposes generators for various types of web application which

scaffolds the template• Uses bower and grunt internally to manage dependencies and

automate the workflow• Getting started -> npm install –g yo• Npm install –g generator-* (* - can be aspnet, angular, backbone,

ionic etc.,)

12

Demo

13

• Cordova hooks – Helps in tapping into Cordova Events to customize them. E.g., after_build, after_platform_add etc.,• Provides more flexibility to streamline the build process of Cordova

based applications• Hooks can be defined either by • adding Scripts inside predefined “hooks” directory (getting deprecated)• Defining scripts in “config.xml” (recommended way)• Plugin developers can define plugin hook events in “plugin.xml”

DemoCode available at : http://bit.ly/bdotnet-hooks-demo

Thank youQuestions/Feedbacks -> @svswaminathan