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.
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
×

of

JavaScript Power Tools Slide 1 JavaScript Power Tools Slide 2 JavaScript Power Tools Slide 3 JavaScript Power Tools Slide 4 JavaScript Power Tools Slide 5 JavaScript Power Tools Slide 6 JavaScript Power Tools Slide 7 JavaScript Power Tools Slide 8 JavaScript Power Tools Slide 9 JavaScript Power Tools Slide 10 JavaScript Power Tools Slide 11 JavaScript Power Tools Slide 12 JavaScript Power Tools Slide 13 JavaScript Power Tools Slide 14 JavaScript Power Tools Slide 15 JavaScript Power Tools Slide 16 JavaScript Power Tools Slide 17 JavaScript Power Tools Slide 18 JavaScript Power Tools Slide 19 JavaScript Power Tools Slide 20 JavaScript Power Tools Slide 21 JavaScript Power Tools Slide 22 JavaScript Power Tools Slide 23 JavaScript Power Tools Slide 24 JavaScript Power Tools Slide 25 JavaScript Power Tools Slide 26
Upcoming SlideShare
Quality assurance for javascript
Next
Download to read offline and view in fullscreen.

8 Likes

Share

Download to read offline

JavaScript Power Tools

Download to read offline

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.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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
  • JayWu6

    Mar. 19, 2015
  • lucasacchi

    Feb. 24, 2015
  • gotrek77

    Dec. 8, 2014
  • AlexStani

    Sep. 2, 2014
  • magiclin

    May. 6, 2014
  • stefanobaghino

    Feb. 2, 2014
  • MarcoGualtieri

    Jan. 3, 2014
  • robertometz1

    Dec. 10, 2013

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.

Views

Total views

2,634

On Slideshare

0

From embeds

0

Number of embeds

122

Actions

Downloads

36

Shares

0

Comments

0

Likes

8

×