1. Modern workflows for JavaScript integration
x
@mitemitreski
blog.mitemitreski.com

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

6. How do we manage dependencies?
●
●
●
●
Don’t manage them
Just use copy/paste
Obey the framework’s preferred way
Use a build tool

7. Web Jars
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>1.8.2</version>
</dependency>
compile 'org.webjars:jquery:1.8.2'

8. Tools tools and more tools

9. Successful programmers are ?
A. Lazy
B. Dumb
C. All above
D. None

10. What are you doing to save time?

11. Pick tools that you will use

12. Yeoman.io
Tooling workflow for modern JavaScript development

13. Toolset

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

15. Gruntfile.js
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']
}
});
}

16. What’s running the JS?

17. Package.json
{
"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"
}
..}

18. How are the frontend libs managed?
● Runs over Git
● 5000 + packages
● Flat hierarchy

19. Bower.json
{
"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": {}
}

20. Semantic versioning
MAJOR.MINOR.PATCH (2.3.3)
● MAJOR - backward incompatible
● MINOR - new features backwards
compatible
● PATCH - bugfixes, fully compatible

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

22. What about tests?
● Karma test runner
○ Reporters
○ Test framework support
● Phantom JS

23. Demo time
> npm search yeoman-generator
> npm install -g generator-angular
> yo angular

24. Maven integration
<plugin>
<groupid>org.codehaus.mojo
</groupid>
<artifactid>exec-maven-plugin
</artifactid>
<version>1.2.1</version>
● yeoman-maven-plugin
● maven-exec-plugin
<executions>
<execution>
<id>some-execution
</id>
<phase>compile</phase>
<goals>
<goal>exec</goal>
</goals>
+ some maven-asembly
</execution>
</executions>
<configuration>
<executable>yo</executable>
</configuration>
</plugin>

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