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 2015.
marcello.teodori@workshare.com - Workshare
ROME 27-28 march 2015
ROME 27-28 march 2015 – Marcello Teodori
• longtime JUG Leader, now only from “remote”, for JUG Milano

BTW did you subscr...
ROME 27-28 march 2015 – Marcello Teodori
End of 2012: after many years of trusty web development with server side Java
web...
ROME 27-28 march 2015 – Marcello Teodori
📦
🔨
🏡
manage

dependencies
run

tasks
scaffold

new projects
Good ol’ trusty Maven
ROME 27-28 march 2015 – Marcello Teodori
Node.JS - http://nodejs.org
ROME 27-28 march 2015 – Marcello Teodori
Node.js is a platform built on Chrome's JavaScript runtime V8
for easily building...
ROME 27-28 march 2015 – Marcello Teodori
• command line interface: npm
• descriptor: package.json
• public registry: https...
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 de...
ROME 27-28 march 2015 – Marcello Teodori
{
"directory": "app/bower_components"
}
{
"name": "jspt-demo-app",
"version": "0....
ROME 27-28 march 2015 – Marcello Teodori
$ bower search <name>
$ bower install —save <name>
Discover and download new Java...
ROME 27-28 march 2015 – Marcello Teodori
• package descriptor specification
• search by name and keywords
• embedded
• ser...
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...
ROME 27-28 march 2015 – Marcello Teodori
{
"name": "jspt-demo-app",
"version": "0.0.0",
"dependencies": {}
},
"devDependen...
ROME 27-28 march 2015 – Marcello Teodori
• plugin: grunt extension
• task: a command provided by a plugin

=> grunt <task>...
ROME 27-28 march 2015 – Marcello Teodori
• grunt-connect-plugin
• grunt-connect-proxy
• livereload
• watch
• CSS preproces...
ROME 27-28 march 2015 – Marcello Teodori
$ npm search grunt-plugin
$ npm install --save-dev <plugin-name>
contrib plugins ...
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 proj...
ROME 27-28 march 2015 – Marcello Teodori
#2 generator install
#3 launch project scaffold
$ mkdir my-app && cd $_
$ yo back...
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 <g...
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.git...
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....
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/
buildin...
ROME 27-28 march 2015 – Marcello Teodori
Did you like what you saw?
Interested in working with us?
Workshare is hiring fro...
ROME 27-28 march 2015 – Speaker's name
Leave your feedback on Joind.in!
https://joind.in/event/view/3347
Upcoming SlideShare
Loading in …5
×

JavaScript Power Tools 2015 - Marcello Teodori - Codemotion Rome 2015

792 views

Published on

Questa presentazione è una versione aggiornata ad un anno di distanza dell'omonima presentata a Codemotion Milano. Allora descrivevo la mia esperienza di sviluppatore Java passato al frontend e il mio kit di JavaScript Power Tools per affrontare il compito al meglio: Bower per la gestione dipendenze, Grunt per le build ma sopratutto Yeoman per lo scaffolding di un progetto a partire da un modello. In questa occasione vedremo come integrare un progetto Yeoman con il codice backend durante sviluppo e deployment ed anche la creazione di un nostro modello di progetto (generator).

Published in: Technology
  • Be the first to comment

JavaScript Power Tools 2015 - Marcello Teodori - Codemotion Rome 2015

  1. 1. Marcello Teodori JavaScript Power Tools 2015. marcello.teodori@workshare.com - Workshare ROME 27-28 march 2015
  2. 2. 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
  3. 3. 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
  4. 4. ROME 27-28 march 2015 – Marcello Teodori 📦 🔨 🏡 manage
 dependencies run
 tasks scaffold
 new projects Good ol’ trusty Maven
  5. 5. ROME 27-28 march 2015 – Marcello Teodori Node.JS - http://nodejs.org
  6. 6. 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
  7. 7. 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
  8. 8. ROME 27-28 march 2015 – Marcello Teodori http://bower.io Bower, a JavaScript dependency management tool
  9. 9. ROME 27-28 march 2015 – Marcello Teodori Duplications! Version? Who owns the assets? Whatever the language, here’s some dependency hell!
  10. 10. 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
  11. 11. ROME 27-28 march 2015 – Marcello Teodori $ bower search <name> $ bower install —save <name> Discover and download new JavaScript packages
  12. 12. 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
  13. 13. ROME 27-28 march 2015 – Marcello Teodori http://gruntjs.com Grunt, the JavaScript task runner
  14. 14. 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?
  15. 15. 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
  16. 16. 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
  17. 17. 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
  18. 18. 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!
  19. 19. ROME 27-28 march 2015 – Marcello Teodori http://yeoman.io Yeoman, the JavaScript application scaffolding tool
  20. 20. 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
  21. 21. 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
  22. 22. ROME 27-28 march 2015 – Marcello Teodori from: http://yeoman.io/learning/ The Yeoman workflow
  23. 23. 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
  24. 24. ROME 27-28 march 2015 – Marcello Teodori $ npm install -g generator-generator $ yo generator
  25. 25. 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!
  26. 26. ROME 27-28 march 2015 – Marcello Teodori 🎰
  27. 27. ROME 27-28 march 2015 – Marcello Teodori 🎰
  28. 28. ROME 27-28 march 2015 – Marcello Teodori 🎰
  29. 29. 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!
  30. 30. ROME 27-28 march 2015 – Marcello Teodori Let’s hack together! A twitter wall demo app
  31. 31. 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
  32. 32. 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 marcello.teodori@workshare.com Paco Jr, internet star
  33. 33. ROME 27-28 march 2015 – Speaker's name Leave your feedback on Joind.in! https://joind.in/event/view/3347

×