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 ...
How do we manage dependencies?
●
●
●
●

Don’t manage them
Just use copy/paste
Obey the framework’s preferred way
Use a bui...
Web Jars
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>1.8.2</version>
</dependency...
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: ['s...
What’s running the JS?
Package.json
{
"name": "temp",
"version": "0.0.0",
"dependencies": {},
"devDependencies": {
"grunt": "~0.4.1",
"grunt-auto...
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",
"mo...
Semantic versioning
MAJOR.MINOR.PATCH (2.3.3)
● MAJOR - backward incompatible
● MINOR - new features backwards
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...
Links
●
●
●
●
●
●

webjars.org
yeoman.io
gruntjs.com
npmjs.org
karma-runner.github.io
npmjs.org
Java2day 2013 : Modern workflows for javascript integration
Java2day 2013 : Modern workflows for javascript integration
Java2day 2013 : Modern workflows for javascript integration
Upcoming SlideShare
Loading in …5
×

Java2day 2013 : Modern workflows for javascript integration

2,017 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,017
On SlideShare
0
From Embeds
0
Number of Embeds
640
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

×