Your SlideShare is downloading. ×
JavaScript Power Tools
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

JavaScript Power Tools


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 è …

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
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Marcello Teodori JavaScript Power Tools - JUG Milano
  • 2. A few words about the speaker Marcello Teodori - 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:
 than blogger:
  • 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. Node.JS enables JavaScript CLI tools Marcello Teodori - JUG Milano Node.JS -
  • 5. What is Node.JS Marcello Teodori - 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. Discover and download new Node.JS packages Marcello Teodori • • • • • • - JUG Milano command line interface: npm descriptor: package.json public registry: keyword search registry software: couchdb + web interface:
  • 7. Bower, a JavaScript dependency management tool Marcello Teodori - JUG Milano
  • 8. Whatever the language, here’s some dependency hell! Marcello Teodori - JUG Milano ions Duplicat ! Version ? ns Who ow assets? the
  • 9. Bower 101: install, .bowerc and bower.json Marcello Teodori - 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": "", "sinon-chai": "~2.4.0" } $ npm -g install bower #2 .bowerrc { "directory": "app/bower_components" } } #3 bower.json #4 install $ bower install
  • 10. Discover and download new JavaScript packages Marcello Teodori - JUG Milano $ bower search <name> $ bower install —save <name>
  • 11. Publish and consume your JavaScript packages Marcello Teodori • • • • - JUG Milano package descriptor specification search by name and keywords embedded server (registry) • default: • implementation: • API • project dependencies configuration • name • shorthand on github: organisation/repository • git repo • url • no authentication! but you can leverage git...
  • 12. Grunt, the JavaScript task runner Marcello Teodori - JUG Milano
  • 13. What is Grunt? Marcello Teodori - 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. Grunt 101: package.json, Gruntfile.js, install Marcello Teodori - 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. Grunt 101: Plugin, Task, Target and Config Marcello Teodori - 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. Using Grunt at development time Marcello Teodori • • • • • • • • • - 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. Using Grunt at build and deploy time Marcello Teodori • • • • • • • • concat cssmin htmlmin imagemin uglify rev compress phonegap - JUG Milano
  • 18. Plugin hunting! Marcello Teodori - JUG Milano $ npm search grunt-plugin contr “offic ib plugins ially m a aintai re
 ned” $ npm install --save-dev <plugin-name>
  • 19. Yeoman, the JavaScript application scaffolding tool Marcello Teodori - JUG Milano
  • 20. Start your project from a best practices template Marcello Teodori - 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. Search a template for your favourite JavaScript stack Marcello Teodori - JUG Milano $ npm search yeoman-generator $ npm install -g <generator-name>
  • 22. Build your own generator Marcello Teodori - JUG Milano $ npm install -g generator-generator $ yo generator
  • 23. The Yeoman workflow Marcello Teodori - JUG Milano from:
  • 24. Continuous Integration Ready! Marcello Teodori - 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. Let’s hack together! A twitter wall demo app Marcello Teodori - JUG Milano
  • 26. Some useful references Marcello Teodori - JUG Milano • Net Tuts+ tutorials 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 – twitter wall demo application