Upload
codemotion
View
130
Download
2
Tags:
Embed Size (px)
DESCRIPTION
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.
Citation preview
A few words about the speakerMarcello Teodori [email protected] - 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 toolsMarcello Teodori [email protected] - JUG Milano
Node.JS - http://nodejs.org
What is Node.JSMarcello Teodori [email protected] - JUG Milano
Node.js is a platform built on Chrome's JavaScript runtime V8 for easily building fast, scalable network applications.
Can also be leveraged to
build and distribute
Command Line Tools
Discover and download new Node.JS packagesMarcello Teodori [email protected] - 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 toolMarcello Teodori [email protected] - JUG Milano
http://bower.io
Whatever the language, here’s some dependency hell!Marcello Teodori [email protected] - JUG Milano
Duplications!
Version?
Who owns the
assets?
Bower 101: install, .bowerc and bower.jsonMarcello Teodori [email protected] - JUG Milano
{ "directory": "app/bower_components"}
{ "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" }}
#2 .bowerrc
#3 bower.json#4 install
$ bower install
#1 tool install
$ npm -g install bower
Discover and download new JavaScript packagesMarcello Teodori [email protected] - JUG Milano
$ bower search <name>$ bower install —save <name>
Publish and consume your JavaScript packagesMarcello Teodori [email protected] - 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 runnerMarcello Teodori [email protected] - JUG Milano
http://gruntjs.com
What is Grunt?Marcello Teodori [email protected] - JUG Milano
• 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, the JavaScript task runner, collects a series of JavaScript tools within a user defined workflow
described in JavaScript itself.
Grunt 101: package.json, Gruntfile.js, installMarcello Teodori [email protected] - JUG Milano
{ "name": "jspt-demo-app", "version": "0.0.0", "dependencies": {} }, "devDependencies": { "grunt": "~0.4.1" }, "engines": { "node": ">=0.8.0" }}
#2 package.json
#3 Gruntfile.js
$ npm install
module.exports = function(grunt) {! grunt.initConfig({ pkg: grunt.file.readJSON('package.json') });! grunt.registerTask('default', function() { grunt.log.write(‘Hello from Grunt...').ok(); });!}
#4 install
#1 tool install
$ npm -g install grunt-cli
Grunt 101: Plugin, Task, Target and ConfigMarcello Teodori [email protected] - 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 timeMarcello Teodori [email protected] - 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 timeMarcello Teodori [email protected] - JUG Milano
• concat • cssmin • htmlmin • imagemin • uglify • rev • compress • phonegap
Plugin hunting!Marcello Teodori [email protected] - JUG Milano
$ npm search grunt-plugin
$ npm install --save-dev <plugin-name>
contrib plugins are “officially maintained”
Yeoman, the JavaScript application scaffolding toolMarcello Teodori [email protected] - JUG Milano
http://yeoman.io
Start your project from a best practices templateMarcello Teodori [email protected] - JUG Milano
brought by Addy Osmani, Paul Irish and many more generators npm install -g generator-webapp => yo webapp meglio: npm install -g generator- generator-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 blogyo backbone:collection blog yo backbone:router blog yo backbone:view blog => generates view and template using handlebarsgrunt server
Search a template for your favourite JavaScript stackMarcello Teodori [email protected] - JUG Milano
$ npm search yeoman-generator
$ npm install -g <generator-name>
Build your own generatorMarcello Teodori [email protected] - JUG Milano
$ npm install -g generator-generator$ yo generator
The Yeoman workflowMarcello Teodori [email protected] - JUG Milano
from: http://yeoman.io/gettingstarted.html
Continuous Integration Ready!Marcello Teodori [email protected] - 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 appMarcello Teodori [email protected] - JUG Milano
Some useful referencesMarcello Teodori [email protected] - 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