Java2day 2013 : Modern workflows for javascript integration
1 like2,257 views
Modern JavaScript workflows use various tools to manage dependencies, build scripts, and frontend libraries. Popular tools include Grunt for running tasks, Bower for frontend package management, and Yeoman for scaffolding projects. These tools use mechanisms like npm, semantic versioning, and package.json files to integrate with build systems like Maven. Tests can be run with Karma and frameworks like PhantomJS.
![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']
}
});
}](https://image.slidesharecdn.com/automation-copy-safe-131203091356-phpapp02/85/Java2day-2013-Modern-workflows-for-javascript-integration-15-320.jpg)
Java2day 2013 : Modern workflows for javascript integration
- 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
- 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>