Marcello Teodori
JavaScript Power Tools

marcello.teodori@jugmilano.it - JUG Milano
A few words about the speaker
Marcello Teodori

marcello.teodori@jugmilano.it - JUG Milano

• longtime JUG Leader, now onl...
From backend to full-stack
End of 2012: after many years of trusty web development with server side Java
web frameworks, t...
Node.JS enables JavaScript CLI tools
Marcello Teodori

marcello.teodori@jugmilano.it - JUG Milano

Node.JS - http://nodejs...
What is Node.JS
Marcello Teodori

marcello.teodori@jugmilano.it - JUG Milano

Node.js is a platform built on Chrome's Java...
Discover and download new Node.JS packages
Marcello Teodori

•
•
•
•
•
•

marcello.teodori@jugmilano.it - JUG Milano

comm...
Bower, a JavaScript dependency management tool
Marcello Teodori

marcello.teodori@jugmilano.it - JUG Milano

http://bower....
Whatever the language, here’s some dependency hell!
Marcello Teodori

marcello.teodori@jugmilano.it - JUG Milano

ions
Dup...
Bower 101: install, .bowerc and bower.json
Marcello Teodori

marcello.teodori@jugmilano.it - JUG Milano
{	

#1 tool instal...
Discover and download new JavaScript packages
Marcello Teodori

marcello.teodori@jugmilano.it - JUG Milano

$ bower search...
Publish and consume your JavaScript packages
Marcello Teodori

•
•
•
•

marcello.teodori@jugmilano.it - JUG Milano

packag...
Grunt, the JavaScript task runner
Marcello Teodori

http://gruntjs.com

marcello.teodori@jugmilano.it - JUG Milano
What is Grunt?
Marcello Teodori

marcello.teodori@jugmilano.it - JUG Milano

Grunt, the JavaScript task runner, collects a...
Grunt 101: package.json, Gruntfile.js, install
Marcello Teodori

marcello.teodori@jugmilano.it - JUG Milano

#1 tool insta...
Grunt 101: Plugin, Task, Target and Config
Marcello Teodori

marcello.teodori@jugmilano.it - JUG Milano

• plugin: grunt e...
Using Grunt at development time
Marcello Teodori

•
•
•
•
•
•
•
•
•

marcello.teodori@jugmilano.it - JUG Milano

grunt-con...
Using Grunt at build and deploy time
Marcello Teodori

•
•
•
•
•
•
•
•

concat
cssmin
htmlmin
imagemin
uglify
rev
compress...
Plugin hunting!
Marcello Teodori

marcello.teodori@jugmilano.it - JUG Milano

$ npm search grunt-plugin

contr
“offic ib p...
Yeoman, the JavaScript application scaffolding tool
Marcello Teodori

http://yeoman.io

marcello.teodori@jugmilano.it - JU...
Start your project from a best practices template
Marcello Teodori

marcello.teodori@jugmilano.it - JUG Milano

brought by...
Search a template for your favourite JavaScript stack
Marcello Teodori

marcello.teodori@jugmilano.it - JUG Milano

$ npm ...
Build your own generator
Marcello Teodori

marcello.teodori@jugmilano.it - JUG Milano

$ npm install -g generator-generato...
The Yeoman workflow
Marcello Teodori

marcello.teodori@jugmilano.it - JUG Milano

from: http://yeoman.io/gettingstarted.ht...
Continuous Integration Ready!
Marcello Teodori

marcello.teodori@jugmilano.it - JUG Milano

1. being command line tools, t...
Let’s hack together! A twitter wall demo app
Marcello Teodori

marcello.teodori@jugmilano.it - JUG Milano
Some useful references
Marcello Teodori

marcello.teodori@jugmilano.it - JUG Milano

• Net Tuts+ tutorials

http://net.tut...
Upcoming SlideShare
Loading in...5
×

JavaScript Power Tools

1,805

Published on

Questa presentazione descrive l’esperienza di uno sviluppatore Java che vuole affrontare lo sviluppo frontend di un’applicazione web moderna nel migliore dei modi senza rinunciare alle comodità cui è abituato. Vedremo una serie di strumenti, dei veri e propri JavaScript Power Tools come Bower per la gestione delle dipendenze, Grunt per le build e Yeoman per la gestione dei progetti, che permettono di creare applicazioni javascript ben strutturate e funzionali in modo semplice e rapido.

Published in: Technology
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,805
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
31
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

JavaScript Power Tools

  1. 1. Marcello Teodori JavaScript Power Tools marcello.teodori@jugmilano.it - JUG Milano
  2. 2. A few words about the speaker Marcello Teodori marcello.teodori@jugmilano.it - JUG Milano • longtime JUG Leader, now only from “remote”, for JUG Milano
 BTW did you subscribe to the mailing list? :D • 15y of Java development, from mobile to web • now based in London, working as Senior Architect for Workshare, a startup specialised in Document Collaboration and Enterprise Social Network solutions • more twitterer: http://twitter.com/magomarcelo
 than blogger: http://magomarcelo.blogspot.com
  3. 3. From backend to full-stack End of 2012: after many years of trusty web development with server side Java web frameworks, the startup I was working gets acquired and I find myself in wasteland… a place with no Java at all!!! The only common language we could speak was front-end development, it was really time to become a full stack developer. ! In the meanwhile libraries like JQuery, Backbone, Bootstrap, Mustache/ Handlebars and books like Object-Oriented JavaScript, JavaScript the Good Parts, JavaScript Design Patterns had changed my perception of what I could do with the language… but what about the tools?
  4. 4. Node.JS enables JavaScript CLI tools Marcello Teodori marcello.teodori@jugmilano.it - JUG Milano Node.JS - http://nodejs.org
  5. 5. What is Node.JS Marcello Teodori marcello.teodori@jugmilano.it - JUG Milano Node.js is a platform built on Chrome's JavaScript runtime V8 for easily building fast, scalable network applications. to be leveraged Can also ibute ild and distr bu Tools mmand Line Co
  6. 6. Discover and download new Node.JS packages Marcello Teodori • • • • • • marcello.teodori@jugmilano.it - JUG Milano command line interface: npm descriptor: package.json public registry: https://registry.npmjs.org keyword search registry software: couchdb + https://github.com/isaacs/npmjs.org web interface: https://npmjs.org/
  7. 7. Bower, a JavaScript dependency management tool Marcello Teodori marcello.teodori@jugmilano.it - JUG Milano http://bower.io
  8. 8. Whatever the language, here’s some dependency hell! Marcello Teodori marcello.teodori@jugmilano.it - JUG Milano ions Duplicat ! Version ? ns Who ow assets? the
  9. 9. Bower 101: install, .bowerc and bower.json Marcello Teodori marcello.teodori@jugmilano.it - JUG Milano { #1 tool install "name": "jspt-demo-app", "version": "0.0.0", "dependencies": { "jquery": "~1.10.2", "underscore": "~1.5.2", "backbone": "~1.1.0", "bootstrap": "~3.0.0", “my-lib”: “mteodori/mylib#develop”, “my-private-lib”: “git@server/repo.git#commitish”, "freewall": "*" }, "devDependencies": { "mocha": "~1.13.0", "sinon": "http://sinonjs.org/releases/sinon-1.7.3.js", "sinon-chai": "~2.4.0" } $ npm -g install bower #2 .bowerrc { "directory": "app/bower_components" } } #3 bower.json #4 install $ bower install
  10. 10. Discover and download new JavaScript packages Marcello Teodori marcello.teodori@jugmilano.it - JUG Milano $ bower search <name> $ bower install —save <name>
  11. 11. Publish and consume your JavaScript packages Marcello Teodori • • • • marcello.teodori@jugmilano.it - JUG Milano package descriptor specification search by name and keywords embedded server (registry) • default: http://bower.heroku.com • implementation: https://github.com/bower/registry • API • project dependencies configuration • name • shorthand on github: organisation/repository • git repo • url • no authentication! but you can leverage git...
  12. 12. Grunt, the JavaScript task runner Marcello Teodori http://gruntjs.com marcello.teodori@jugmilano.it - JUG Milano
  13. 13. What is Grunt? Marcello Teodori marcello.teodori@jugmilano.it - JUG Milano Grunt, the JavaScript task runner, collects a series of JavaScript tools within a user defined workflow described in JavaScript itself. • sponsored by bocoup • leverages npm to manages automatically their installation as required • similar to Ant, Gradle, or Maven in the Java world or Rake for Ruby
  14. 14. Grunt 101: package.json, Gruntfile.js, install Marcello Teodori marcello.teodori@jugmilano.it - JUG Milano #1 tool install $ npm -g install grunt-cli #2 package.json module.exports = function(grunt) { ! ! { "name": "jspt-demo-app", "version": "0.0.0", "dependencies": {} }, "devDependencies": { "grunt": "~0.4.1" }, "engines": { "node": ">=0.8.0" } } ! grunt.initConfig({ pkg: grunt.file.readJSON('package.json') }); grunt.registerTask('default', function() { grunt.log.write(‘Hello from Grunt...').ok(); }); } #3 Gruntfile.js #4 install $ npm install
  15. 15. Grunt 101: Plugin, Task, Target and Config Marcello Teodori marcello.teodori@jugmilano.it - JUG Milano • plugin: grunt extension • task: a command provided by a plugin
 => grunt <task> • config: set of options to configure a task • target: multiple named set of options per task
 => call via: grunt <task:target>
  16. 16. Using Grunt at development time Marcello Teodori • • • • • • • • • marcello.teodori@jugmilano.it - JUG Milano grunt-connect-plugin grunt-connect-proxy livereload watch CSS preprocessors like less/sass/stylus javascript compilers like coffeescript test runners like mocha jshint lesslint
  17. 17. Using Grunt at build and deploy time Marcello Teodori • • • • • • • • concat cssmin htmlmin imagemin uglify rev compress phonegap marcello.teodori@jugmilano.it - JUG Milano
  18. 18. Plugin hunting! Marcello Teodori marcello.teodori@jugmilano.it - JUG Milano $ npm search grunt-plugin contr “offic ib plugins ially m a aintai re
 ned” $ npm install --save-dev <plugin-name>
  19. 19. Yeoman, the JavaScript application scaffolding tool Marcello Teodori http://yeoman.io marcello.teodori@jugmilano.it - JUG Milano
  20. 20. Start your project from a best practices template Marcello Teodori marcello.teodori@jugmilano.it - JUG Milano brought by Addy Osmani, Paul Irish and many more generators npm install -g generator-webapp => yo webapp meglio: npm install -g generatorgenerator-gruntplugin  ◦ generator-generator ◦ generator-jquery ◦ generator-backbone/generator-angular ◦ generator-stacked/generator-express • command line options and subgenerators ◦ yo backbone --test-framework=[mocha|jasmine] --template-framework=[lodash|handlebars| mustache] ◦ interactive options ◦ yo backbone # generates your application base and build workflow
 yo backbone:model blog
 yo backbone:collection blog
 yo backbone:router blog
 yo backbone:view blog => generates view and template using handlebars
 grunt server 
  21. 21. Search a template for your favourite JavaScript stack Marcello Teodori marcello.teodori@jugmilano.it - JUG Milano $ npm search yeoman-generator $ npm install -g <generator-name>
  22. 22. Build your own generator Marcello Teodori marcello.teodori@jugmilano.it - JUG Milano $ npm install -g generator-generator $ yo generator
  23. 23. The Yeoman workflow Marcello Teodori marcello.teodori@jugmilano.it - JUG Milano from: http://yeoman.io/gettingstarted.html
  24. 24. Continuous Integration Ready! Marcello Teodori marcello.teodori@jugmilano.it - JUG Milano 1. being command line tools, they can execute on any server, even a CI server! 2. if you use Jenkins, lucky you! There’s a Jenkins NodeJS plugin to prepare the environment with Grunt e Bower from its web interface without direct access to the server 3. mocha tests can produce JUnit report files via the xunit-file reporter, directly parseable by Jenkins 4. static analysis tools like JSHint, CSSLint and LessLint can produce reports in CheckStyle format, parseable via the Jenkins CheckStyle plugin 5. Deploy your “built” JavaScript application or library via publishing tags to git, or upload to an external server or CDN, or package as a WebJars to be consumed by a Java application, or an asset gem to be consumed by your Rails application, or…
  25. 25. Let’s hack together! A twitter wall demo app Marcello Teodori marcello.teodori@jugmilano.it - JUG Milano
  26. 26. Some useful references Marcello Teodori marcello.teodori@jugmilano.it - JUG Milano • Net Tuts+ tutorials
 http://net.tutsplus.com/tutorials/javascript-ajax/ building-apps-with-the-yeoman-workflow/ • “Developing Backbone.js Applications” by Addy Osmani – covers also Grunt, Bower and Yeoman • example code for this presentation – custom Yeoman generator
 https://github.com/mteodori/generator-jspt – twitter wall demo application
 https://github.com/mteodori/jspt-demo-app
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×