javascript power tools 2015 - marcello teodori - codemotion rome 2015
TRANSCRIPT
ROME 27-28 march 2015 – Marcello Teodori
• 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
company specialised in Document Collaboration • more twitterer: http://twitter.com/magomarcelo
than blogger: http://magomarcelo.blogspot.com
A few words about the speaker
ROME 27-28 march 2015 – Marcello Teodori
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 (buzzword alert) 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?
From back-end to full stack
ROME 27-28 march 2015 – Marcello Teodori
📦
🔨
🏡
manage dependencies
runtasks
scaffold new projects
Good ol’ trusty Maven
ROME 27-28 march 2015 – Marcello Teodori
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
JavaScript based
Command Line Tools!
Node.JS enables JavaScript CLI tools
ROME 27-28 march 2015 – Marcello Teodori
• 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://www.npmjs.com/
Discover and download new Node.JS packages
ROME 27-28 march 2015 – Marcello Teodori
http://bower.io
Bower, a JavaScript dependency management tool
ROME 27-28 march 2015 – Marcello Teodori
Duplications!
Version?
Who owns the
assets?
Whatever the language, here’s some dependency hell!
ROME 27-28 march 2015 – Marcello Teodori
{ "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
Bower 101: install, .bowerc and bower.json
ROME 27-28 march 2015 – Marcello Teodori
$ bower search <name>$ bower install —save <name>
Discover and download new JavaScript packages
ROME 27-28 march 2015 – Marcello Teodori
• package descriptor specification • search by name and keywords • embedded • server (registry)
• default: http://bower.io/search/ • implementation: https://github.com/bower/registry • API
• project dependencies configuration • name • shorthand on github: organisation/repository • git repo • url
• there’s no authentication! but you can leverage git...
Publish and consume your JavaScript packages
ROME 27-28 march 2015 – Marcello Teodori
http://gruntjs.com
Grunt, the JavaScript task runner
ROME 27-28 march 2015 – Marcello Teodori
• 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.
What is Grunt?
ROME 27-28 march 2015 – Marcello Teodori
{ "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: package.json, Gruntfile.js, install
ROME 27-28 march 2015 – Marcello Teodori
• 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
=> grunt <task:target>
Core Grunt Concepts
ROME 27-28 march 2015 – Marcello Teodori
• grunt-connect-plugin • grunt-connect-proxy • livereload • watch • CSS preprocessors
like less/sass/stylus • javascript compilers
like coffeescript • test runners like
mocha
• jshint • lesslint • concat • cssmin • htmlmin • imagemin • uglify • rev • compress • phonegap
Using Grunt at development, build and deploy time
ROME 27-28 march 2015 – Marcello Teodori
$ npm search grunt-plugin
$ npm install --save-dev <plugin-name>
contrib plugins are “officially maintained”
There’s a Grunt plugin for it, just search!
ROME 27-28 march 2015 – Marcello Teodori
http://yeoman.io
Yeoman, the JavaScript application scaffolding tool
ROME 27-28 march 2015 – Marcello Teodori
• brought by Addy Osmani, Paul Irish and many more • leverages npm to manage project templates • similar to Maven archetypes for Java or Rails
scaffolding for Ruby
Yeoman, a friendly command line tool to scaffold your applications from a template
ROME 27-28 march 2015 – Marcello Teodori
#2 generator install
#3 launch project scaffold
$ mkdir my-app && cd $_$ yo backbone
#1 tool install
$ npm -g install yo
$ npm -g install generator-webapp
#4 choose generator options
ROME 27-28 march 2015 – Marcello Teodori
from: http://yeoman.io/learning/
The Yeoman workflow
ROME 27-28 march 2015 – Marcello Teodori
$ npm search yeoman-generator
$ npm install -g generator-<generator-name>$ yo <generator-name>
Search a template for your favourite (JavaScript?) stack
ROME 27-28 march 2015 – Marcello Teodori
$ npm install -g generator-generator$ yo generator
ROME 27-28 march 2015 – Marcello Teodori
$ npm install -g generator-jhipster$ yo jhipster
JHipster - https://jhipster.github.io/
• a Yeoman generator for a full stack application • Java on the backend with Spring Boot, using Maven
or Gradle in what they do best • Angular.JS on the frontend using Grunt and Bower
Go full stack also!
ROME 27-28 march 2015 – Marcello Teodori
🎰
ROME 27-28 march 2015 – Marcello Teodori
🎰
ROME 27-28 march 2015 – Marcello Teodori
🎰
ROME 27-28 march 2015 – Marcello Teodori
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 WebJars to be consumed by a Java application, or an asset gem to be consumed by your Rails application, or…
Continuous Integration Ready!
ROME 27-28 march 2015 – Marcello Teodori
Let’s hack together! A twitter wall demo app
ROME 27-28 march 2015 – Marcello Teodori
• 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
Some useful references
ROME 27-28 march 2015 – Marcello Teodori
Did you like what you saw? Interested in working with us? Workshare is hiring front-end and full stack developers! drop me an email [email protected]
Paco Jr, internet star
ROME 27-28 march 2015 – Speaker's name
Leave your feedback on Joind.in! https://joind.in/event/view/3347