Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Java2day 2013 : Modern workflows for javascript integration

2,126 views

Published on

Published in: Technology
  • Be the first to comment

Java2day 2013 : Modern workflows for javascript integration

  1. 1. Modern workflows for JavaScript integration x @mitemitreski blog.mitemitreski.com
  2. 2. Application that can be written in JavaScript, will eventually be written in JavaScript. - Atwood’s Law ( Jeff Atwood aka @codinghorror)
  3. 3. How do we manage dependencies? ● ● ● ● Don’t manage them Just use copy/paste Obey the framework’s preferred way Use a build tool
  4. 4. Web Jars <dependency> <groupId>org.webjars</groupId> <artifactId>jquery</artifactId> <version>1.8.2</version> </dependency> compile 'org.webjars:jquery:1.8.2'
  5. 5. Tools tools and more tools
  6. 6. Successful programmers are ? A. Lazy B. Dumb C. All above D. None
  7. 7. What are you doing to save time?
  8. 8. Pick tools that you will use
  9. 9. Yeoman.io Tooling workflow for modern JavaScript development
  10. 10. Toolset
  11. 11. ● Think of ANT, Maven, Make, Gradle … ● Huge ecosystem ● 1800 + plugins
  12. 12. 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'] } }); }
  13. 13. What’s running the JS?
  14. 14. 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" } ..}
  15. 15. How are the frontend libs managed? ● Runs over Git ● 5000 + packages ● Flat hierarchy
  16. 16. 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": {} }
  17. 17. Semantic versioning MAJOR.MINOR.PATCH (2.3.3) ● MAJOR - backward incompatible ● MINOR - new features backwards compatible ● PATCH - bugfixes, fully compatible
  18. 18. YO ● Workflow and glue code ● Initial project scaffolding ● 400 + generators with a lot subsections
  19. 19. What about tests? ● Karma test runner ○ Reporters ○ Test framework support ● Phantom JS
  20. 20. Demo time > npm search yeoman-generator > npm install -g generator-angular > yo angular
  21. 21. 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>
  22. 22. Links ● ● ● ● ● ● webjars.org yeoman.io gruntjs.com npmjs.org karma-runner.github.io npmjs.org

×