Java2day 2013 : Modern workflows for javascript integration

xModern workflows for JavaScript integration@mitemitreskiblog.mitemitreski.com

Application that can be written in JavaScript, will eventually be written in JavaScript.- Atwood’s Law ( Jeff Atwood aka @codinghorror)

How do we manage dependencies?

● Don’t manage them● Just use copy/paste● Obey the framework’s preferred way● Use a build tool

Web Jars<dependency>

<groupId>org.webjars</groupId>

<artifactId>jquery</artifactId>

<version>1.8.2</version>

</dependency>

compile 'org.webjars:jquery:1.8.2'

Tools tools and more tools

Successful programmers are ?

A. Lazy B. DumbC. All aboveD. None

What are you doing to save time?

Pick tools that you will use

Yeoman.io

Tooling workflow for modern JavaScript development

Toolset

● Think of ANT, Maven, Make, Gradle …● Huge ecosystem● 1800 + plugins

module.exports = function(grunt) { grunt.initConfig({ concat: { options: { separator: ';' }, dist: { src: ['src/**/*.js'], dest: 'dist/<%= pkg.name %>.js' } }, watch: { files: ['<%= jshint.files %>'], tasks: ['jshint', 'qunit'] } });}

Gruntfile.js

What’s running the JS?

{

"name": "temp",

"version": "0.0.0",

"dependencies": {},

"devDependencies": {

"grunt": "~0.4.1",

"grunt-autoprefixer": "~0.4.0",

"karma": "~0.10.6",

"karma-ng-html2js-preprocessor": "~0.1.0"

},

"engines": {

"node": ">=0.8.0"

}

..}

Package.json

How are the frontend libs managed?

● Runs over Git● 5000 + packages● Flat hierarchy

{ "name": "myapp", "version": "0.0.0", "dependencies": { "sass-bootstrap": "~3.0.0", "requirejs": "~2.1.8", "modernizr": "~2.6.2", "jquery": "~1.10.2" }, "devDependencies": {}}

Bower.json

Semantic versioning

MAJOR.MINOR.PATCH (2.3.3)

● MAJOR - backward incompatible● MINOR - new features backwards

compatible● PATCH - bugfixes, fully compatible

YO

● Workflow and glue code● Initial project scaffolding● 400 + generators with a lot subsections

What about tests?

● Karma test runner ○ Reporters ○ Test framework support

● Phantom JS

Demo time

> npm search yeoman-generator > npm install -g generator-angular > yo angular

Maven integration

● yeoman-maven-plugin● maven-exec-plugin

+ some maven-asembly

<plugin>

<groupid>org.codehaus.mojo</groupid>

<artifactid>exec-maven-plugin</artifactid>

<version>1.2.1</version>

<executions>

<execution>

<id>some-execution</id>

<phase>compile</phase>

<goals>

<goal>exec</goal>

</goals>

</execution>

</executions>

<configuration>

<executable>yo</executable>

</configuration>

</plugin>

Links

● webjars.org● yeoman.io● gruntjs.com● npmjs.org● karma-runner.github.io● npmjs.org