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.
2. 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
3. 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?
4. Node.JS enables JavaScript CLI tools
Marcello Teodori
marcello.teodori@jugmilano.it - JUG Milano
Node.JS - http://nodejs.org
5. 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
6. 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/
7. Bower, a JavaScript dependency management tool
Marcello Teodori
marcello.teodori@jugmilano.it - JUG Milano
http://bower.io
8. Whatever the language, here’s some dependency hell!
Marcello Teodori
marcello.teodori@jugmilano.it - JUG Milano
ions
Duplicat
!
Version
?
ns
Who ow
assets?
the
10. Discover and download new JavaScript packages
Marcello Teodori
marcello.teodori@jugmilano.it - JUG Milano
$ bower search <name>
$ bower install —save <name>
11. 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...
12. Grunt, the JavaScript task runner
Marcello Teodori
http://gruntjs.com
marcello.teodori@jugmilano.it - JUG Milano
13. 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
15. 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>
16. 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
17. Using Grunt at build and deploy time
Marcello Teodori
•
•
•
•
•
•
•
•
concat
cssmin
htmlmin
imagemin
uglify
rev
compress
phonegap
marcello.teodori@jugmilano.it - JUG Milano
19. Yeoman, the JavaScript application scaffolding tool
Marcello Teodori
http://yeoman.io
marcello.teodori@jugmilano.it - JUG Milano
20. 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
21. 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>
22. Build your own generator
Marcello Teodori
marcello.teodori@jugmilano.it - JUG Milano
$ npm install -g generator-generator
$ yo generator
23. The Yeoman workflow
Marcello Teodori
marcello.teodori@jugmilano.it - JUG Milano
from: http://yeoman.io/gettingstarted.html
24. 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…
25. Let’s hack together! A twitter wall demo app
Marcello Teodori
marcello.teodori@jugmilano.it - JUG Milano
26. 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