• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Java2day 2013 : Modern workflows for javascript integration
 

Java2day 2013 : Modern workflows for javascript integration

on

  • 1,479 views

 

Statistics

Views

Total Views
1,479
Views on SlideShare
984
Embed Views
495

Actions

Likes
0
Downloads
5
Comments
0

3 Embeds 495

http://blog.mitemitreski.com 488
http://feeds.feedburner.com 6
http://3233503126001905087_4fd8d02b78378cb682cb3721c17a587ac0afbeb8.blogspot.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Java2day 2013 : Modern workflows for javascript integration Java2day 2013 : Modern workflows for javascript integration Presentation Transcript

    • Modern workflows for JavaScript integration x @mitemitreski blog.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. Dumb C. All above D. 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
    • 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'] } }); }
    • What’s running the JS?
    • 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" } ..}
    • How are the frontend libs managed? ● Runs over Git ● 5000 + packages ● Flat hierarchy
    • 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": {} }
    • 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 <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>
    • Links ● ● ● ● ● ● webjars.org yeoman.io gruntjs.com npmjs.org karma-runner.github.io npmjs.org