javascript power tools 2015
TRANSCRIPT
![Page 2: JavaScript Power Tools 2015](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a58f9a1a28ab776c8b46be/html5/thumbnails/2.jpg)
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
![Page 3: JavaScript Power Tools 2015](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a58f9a1a28ab776c8b46be/html5/thumbnails/3.jpg)
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
![Page 4: JavaScript Power Tools 2015](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a58f9a1a28ab776c8b46be/html5/thumbnails/4.jpg)
ROME 27-28 march 2015 – Marcello Teodori
📦
🔨
🏡
manage dependencies
runtasks
scaffold new projects
Good ol’ trusty Maven
![Page 6: JavaScript Power Tools 2015](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a58f9a1a28ab776c8b46be/html5/thumbnails/6.jpg)
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
![Page 7: JavaScript Power Tools 2015](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a58f9a1a28ab776c8b46be/html5/thumbnails/7.jpg)
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
![Page 8: JavaScript Power Tools 2015](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a58f9a1a28ab776c8b46be/html5/thumbnails/8.jpg)
ROME 27-28 march 2015 – Marcello Teodori
http://bower.io
Bower, a JavaScript dependency management tool
![Page 9: JavaScript Power Tools 2015](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a58f9a1a28ab776c8b46be/html5/thumbnails/9.jpg)
ROME 27-28 march 2015 – Marcello Teodori
Duplications!
Version?
Who owns the
assets?
Whatever the language, here’s some dependency hell!
![Page 10: JavaScript Power Tools 2015](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a58f9a1a28ab776c8b46be/html5/thumbnails/10.jpg)
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
![Page 11: JavaScript Power Tools 2015](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a58f9a1a28ab776c8b46be/html5/thumbnails/11.jpg)
ROME 27-28 march 2015 – Marcello Teodori
$ bower search <name>$ bower install —save <name>
Discover and download new JavaScript packages
![Page 12: JavaScript Power Tools 2015](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a58f9a1a28ab776c8b46be/html5/thumbnails/12.jpg)
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
![Page 13: JavaScript Power Tools 2015](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a58f9a1a28ab776c8b46be/html5/thumbnails/13.jpg)
ROME 27-28 march 2015 – Marcello Teodori
http://gruntjs.com
Grunt, the JavaScript task runner
![Page 14: JavaScript Power Tools 2015](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a58f9a1a28ab776c8b46be/html5/thumbnails/14.jpg)
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?
![Page 15: JavaScript Power Tools 2015](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a58f9a1a28ab776c8b46be/html5/thumbnails/15.jpg)
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
![Page 16: JavaScript Power Tools 2015](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a58f9a1a28ab776c8b46be/html5/thumbnails/16.jpg)
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
![Page 17: JavaScript Power Tools 2015](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a58f9a1a28ab776c8b46be/html5/thumbnails/17.jpg)
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
![Page 18: JavaScript Power Tools 2015](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a58f9a1a28ab776c8b46be/html5/thumbnails/18.jpg)
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!
![Page 19: JavaScript Power Tools 2015](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a58f9a1a28ab776c8b46be/html5/thumbnails/19.jpg)
ROME 27-28 march 2015 – Marcello Teodori
http://yeoman.io
Yeoman, the JavaScript application scaffolding tool
![Page 20: JavaScript Power Tools 2015](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a58f9a1a28ab776c8b46be/html5/thumbnails/20.jpg)
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
![Page 21: JavaScript Power Tools 2015](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a58f9a1a28ab776c8b46be/html5/thumbnails/21.jpg)
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
![Page 22: JavaScript Power Tools 2015](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a58f9a1a28ab776c8b46be/html5/thumbnails/22.jpg)
ROME 27-28 march 2015 – Marcello Teodori
from: http://yeoman.io/learning/
The Yeoman workflow
![Page 23: JavaScript Power Tools 2015](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a58f9a1a28ab776c8b46be/html5/thumbnails/23.jpg)
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
![Page 24: JavaScript Power Tools 2015](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a58f9a1a28ab776c8b46be/html5/thumbnails/24.jpg)
ROME 27-28 march 2015 – Marcello Teodori
$ npm install -g generator-generator$ yo generator
![Page 25: JavaScript Power Tools 2015](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a58f9a1a28ab776c8b46be/html5/thumbnails/25.jpg)
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!
![Page 26: JavaScript Power Tools 2015](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a58f9a1a28ab776c8b46be/html5/thumbnails/26.jpg)
ROME 27-28 march 2015 – Marcello Teodori
🎰
![Page 27: JavaScript Power Tools 2015](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a58f9a1a28ab776c8b46be/html5/thumbnails/27.jpg)
ROME 27-28 march 2015 – Marcello Teodori
🎰
![Page 28: JavaScript Power Tools 2015](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a58f9a1a28ab776c8b46be/html5/thumbnails/28.jpg)
ROME 27-28 march 2015 – Marcello Teodori
🎰
![Page 29: JavaScript Power Tools 2015](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a58f9a1a28ab776c8b46be/html5/thumbnails/29.jpg)
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!
![Page 30: JavaScript Power Tools 2015](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a58f9a1a28ab776c8b46be/html5/thumbnails/30.jpg)
ROME 27-28 march 2015 – Marcello Teodori
Let’s hack together! A twitter wall demo app
![Page 31: JavaScript Power Tools 2015](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a58f9a1a28ab776c8b46be/html5/thumbnails/31.jpg)
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
![Page 32: JavaScript Power Tools 2015](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a58f9a1a28ab776c8b46be/html5/thumbnails/32.jpg)
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
![Page 33: JavaScript Power Tools 2015](https://reader030.vdocuments.us/reader030/viewer/2022032616/55a58f9a1a28ab776c8b46be/html5/thumbnails/33.jpg)
ROME 27-28 march 2015 – Speaker's name
Leave your feedback on Joind.in! https://joind.in/event/view/3347