JavaScript Power Tools
Upcoming SlideShare
Loading in...5
×
 

JavaScript Power Tools

on

  • 1,987 views

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

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.

Statistics

Views

Total Views
1,987
Views on SlideShare
1,893
Embed Views
94

Actions

Likes
5
Downloads
20
Comments
0

3 Embeds 94

http://milano.codemotionworld.com 86
http://milan2013.codemotionworld.com 7
http://webcache.googleusercontent.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

JavaScript Power Tools JavaScript Power Tools Presentation Transcript

  • 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 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
  • 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?
  • Node.JS enables JavaScript CLI tools Marcello Teodori marcello.teodori@jugmilano.it - JUG Milano Node.JS - http://nodejs.org
  • 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
  • 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/
  • Bower, a JavaScript dependency management tool Marcello Teodori marcello.teodori@jugmilano.it - JUG Milano http://bower.io
  • Whatever the language, here’s some dependency hell! Marcello Teodori marcello.teodori@jugmilano.it - JUG Milano ions Duplicat ! Version ? ns Who ow assets? the
  • 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
  • Discover and download new JavaScript packages Marcello Teodori marcello.teodori@jugmilano.it - JUG Milano $ bower search <name> $ bower install —save <name>
  • 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...
  • 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 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
  • 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
  • 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>
  • 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
  • Using Grunt at build and deploy time Marcello Teodori • • • • • • • • concat cssmin htmlmin imagemin uglify rev compress phonegap marcello.teodori@jugmilano.it - JUG Milano
  • 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>
  • Yeoman, the JavaScript application scaffolding tool Marcello Teodori http://yeoman.io marcello.teodori@jugmilano.it - JUG Milano
  • 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 
  • 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>
  • Build your own generator Marcello Teodori marcello.teodori@jugmilano.it - JUG Milano $ npm install -g generator-generator $ yo generator
  • The Yeoman workflow Marcello Teodori marcello.teodori@jugmilano.it - JUG Milano from: http://yeoman.io/gettingstarted.html
  • 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…
  • 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.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