2. Description du module
● Côté navigateur
○ HTML5 / CSS / JS - Polymer
● Côté serveur - Concepts
○ Introduction à JEE : servlets, JSP, frameworks… - SparkJava
● Forge JavaScript
○ Une forge logicielle pour JavaScript : Grunt/Gulp, Bower, Yeoman
● Côté serveur - NodeJS
○ NodeJS, ExpressJS, APIs
● Écosystème de la webapp
○ Introduction à NoSQL : MongoDB, Redis, Cassandra…
● Autour de la webapp
○ Forge logicielle en Java - Test-driven development
● Examen et exposées des projets
10. What is NodeJS?
Node.js is a platform built on Chrome's
JavaScript runtime for easily building fast,
scalable network applications.
Node.js uses an event-driven, non-blocking I/O
model that makes it lightweight and efficient,
perfect for data-intensive real-time applications
that run across distributed devices.
11. What is npm?
● NodeJS built modularly
○ Each functionality in a package
● npm is the official package manager for Node.js
○ runs through the command line
○ manages dependencies for an application
○ install applications available on the npm registry
12. What is npm registry?
NodeJS equivalent to Maven Central
http://npmjs.org
13. I'm a front-end coder and
npm is for backend JS devs!
● npm is used to install tools used by front-end devs
○ bower, grunt, yeoman…
● npm is the base tool to build your JavaScript forge
14. npm behind a corporate proxy
● Proxy must be defined as environment variable
○ export http_proxy=user:password@proxy.example.com:3128
export https_proxy=user:password@proxy.example.com:3128
○ Potential problem with proxy-pac…
● Using of npm config could be needed
○ npm config set proxy http://proxy.example.com:3128
npm config set https-proxy http://proxy.example.com:3128
● If necessary use credentials:
○ npm config set proxy http://user:password@proxy.example.com:3128
npm config set proxy https://user:password@proxy.example.com:3128
16. What is Bower?
Bower is a package manager
for web applications
No more manual downloading of JavaScript
libraries and its dependencies
Proper version management
and conflict resolution
17. Bower:
A package manager for the web
● makes installing tools easy
● uses a manifest file (./bower.json)
○ to express what to download
● downloads to a centralized place (./bower)
● resolves dependencies
$ bower install jquery
bower cloning git://github.com/components/jquery.git
bower cached git://github.com/components/jquery.git
bower fetching jquery
bower checking out jquery#2.0.0
bower copying /home/horacio/.bower/cache/jquery/29cb...
bower installing jquery#2.0.0
18. Installing Bower
● To install bower you need npm
○ Bower is an application on npm registry
$ npm install -g bower
20. Getting info on a package
Looks on bower registry for packages
$ bower info angular
bower angular#* cached git://github.com/angular/bower-angular.git#1.2.3
bower angular#* validate 1.2.3 against git://github.com/angular/bower-angular.git#*
bower angular#* new version for git://github.com/angular/bower-angular.git#*
bower angular#* resolve git://github.com/angular/bower-angular.git#*
bower angular#* download https://github.com/angular/bower-angular/archive/v1.2.4.tar.gz
bower angular#* extract archive.tar.gz
bower angular#* resolved git://github.com/angular/bower-angular.git#1.2.4
{
name: 'angular',
version: '1.2.4',
main: './angular.js',
dependencies: {},
homepage: 'https://github.com/angular/bower-angular'
}
Available versions:
- 1.2.4
- 1.2.3
- 1.2.2
[…]
21. Installing a package
● Install last version:
bower install <package>
● Install other version:
○ Versions using semver syntax
bower install <package>#<version>
$ bower install angular
bower angular#* cached git://github.com/angular/bower-angular.git#1.2.4
bower angular#* validate 1.2.4 against git://github.com/angular/bower-angular.git#*
bower angular#~1.2.4 install angular#1.2.4
angular#1.2.4 bower_components/angular
$ ls bower_components/
angular
22. List locally installed package
$ bower list
bower check-new Checking for new versions of the project dependencies...
test ~/git/breizhbeans/forge/bower/test
└── angular#1.2.4 extraneous
23. Using an installed package
● Reference the package's installed components
○ using a <script> tag
● Use a module loader like Sprockets or RequireJS
○ For big or complex projects
○ Not really the Angular way
○ Better combine Bower with Uglify using Grunt… ;-)
[…]
<script src="/bower_components/angular/angular.js"></script>
[…]
24. Using local package cache
● Useful when offline
$ bower cache list
ace=git://github.com/ajaxorg/ace.git#1.1.1
ace-builds=git://github.com/ajaxorg/ace-builds.git#1.1.1
angular=git://github.com/angular/bower-angular.git#1.0.8
angular=git://github.com/angular/bower-angular.git#1.2.0-rc.3
angular=git://github.com/angular/bower-angular.git#1.2.0
angular=git://github.com/angular/bower-angular.git#1.2.3
angular=git://github.com/angular/bower-angular.git#1.2.4
[…]
$ bower install <package-name> --offline
25. Where are the packages?
● Registered with Bower
○ jquery, angular…
● Remote Git endpoints
○ public or private
○ git://github.com/angular/bower-angular.git
● A local endpoint
○ a folder that's a Git repository
● A shorthand endpoint
○ defaults to GitHub
○ angular/bower-angular
● A URL to a file
○ including zip and tar files
○ Its contents will be extracted.
26. Bower behind a corporate proxy
● Proxy must be defined as environment variable
○ export http_proxy=user@password:proxy.example.com:3128
export https_proxy=user@password:proxy.example.com:3128
○ Potential problem with proxy-pac…
● Same solution and potential problem with npm
27. Installing packages using bower.json
● If using multiple packages a project it’s often a good
idea to list these packages in a bower.json file
○ Installing and updating multiple packages with a single command.
{
"name": "LostInBrittany-App",
"version": "0.0.1",
"authors": [
"Horacio Gonzalez <horacio.gonzalez@gmail.com>"
],
"license": "MIT",
"private": true,
"dependencies": {
"angular": "~1.2",
"angular-route": "~1.2",
"leaflet": "~0.6.4",
"angular-leaflet": "~0.6.1"
}
}
28. Initialising the bower.json file
● Bower includes a tool to initialize a bower.json file
○ Executing bower init command at the root of the project will launch
an interactive program to create the file
$ bower init
[?] name: toto
[?] version: 0.0.1
[?] description: A sample app
[?] main file: index.html
[?] what types of modules does this package expose? globals
[?] keywords:
[?] authors: Horacio Gonzalez <horacio.gonzalez@gmail.com>
[?] license: MIT
[?] homepage: lostinbrittany.org
[?] set currently installed components as dependencies? Yes
[?] add commonly ignored files to ignore list? Yes
[?] would you like to mark this package as private which prevents it from being
accidentally published to the registry? Yes
29. Installing a package and saving it
to the bower.json
● To save installed packages into bower.json as dependencies
bower install --save <package>
$ bower install angular --save
bower angular#* cached git://github.com/angular/bower-angular.git#1.2.4
bower angular#* validate 1.2.4 against git://github.com/angular/bower-angular.git#*
bower angular#~1.2.4 install angular#1.2.4
angular#1.2.4 bower_components/angular
$ ls bower_components/
angular
31. What's in my bower.json?
● name
○ Name of your package
● version
○ Semantic version number
● main [string|array]
○ Primary endpoints of your package
● ignore [array]
○ An array of paths not needed in production
○ Bower will ignore them when installing the package
32. What's in my bower.json?
● dependencies [hash]
○ Packages your package depends upon in production
● devDependencies [hash]
○ Development dependencies
● private [boolean]
○ Set to true if you want to keep the package private
■ If you won't want to register the package in future
34. Registering a package
● You need
○ A valid bower.json
○ A public Git repository
○ Use semver Git tags
■ Don't forget to push tags to repository!
$ bower register <my-package-name> <git-endpoint>
● No authentication or user management
○ first come, first served
○ Like an url shortener
35. Other useful Bower commands
$ bower
Usage:
bower <command> [<args>] [<options>]
Commands:
cache Manage bower cache
help Display help information about Bower
home Opens a package homepage into your favorite browser
info Info of a particular package
init Interactively create a bower.json file
install Install a package locally
link Symlink a package folder
list List local packages
lookup Look up a package URL by name
prune Removes local extraneous packages
register Register a package
search Search for a package by name
update Update a local package
uninstall Remove a local package
40. Using Grunt on a project
● A Gruntfile.js file
○ To configure and define tasks and load Grunt plugins
○ We will see it latter
● A package.json file
○ list Grunt and the Grunt plugins your project needs
○ as devDependencies
{
"name": "my-project-name",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.2",
"grunt-contrib-jshint": "~0.6.3",
"grunt-contrib-nodeunit": "~0.2.0",
"grunt-contrib-uglify": "~0.2.2"
}
}
41. Using Grunt on a project
● Installing grunt for the project
$ npm install grunt --save-dev
npm WARN package.json my-project-name@0.1.0 No description
npm WARN package.json my-project-name@0.1.0 No repository field.
npm WARN package.json my-project-name@0.1.0 No README data
npm http GET https://registry.npmjs.org/grunt
npm http 200 https://registry.npmjs.org/grunt
npm http GET https://registry.npmjs.org/grunt/-/grunt-0.4.2.tgz
npm http 200 https://registry.npmjs.org/grunt/-/grunt-0.4.2.tgz
[…]
grunt@0.4.2 node_modules/grunt
├── which@1.0.5
├── dateformat@1.0.2-1.2.3
├── eventemitter2@0.4.13
├── getobject@0.1.0
├── colors@0.6.2
├── hooker@0.2.3
├── async@0.1.22
├── exit@0.1.2
[…]
42. The Gruntfile
● Containing
○ The "wrapper" function
○ Project and task configuration
○ Loading Grunt plugins and tasks
○ Custom tasks
● Valid JS (or CoffeeScript) file
46. Loading plugins and tasks
● Grut plugins
○ Providing tasks like concatenation, minification and linting
○ Specified in package.json as a dependency
■ Installed via npm install
○ Enabled inside Gruntfile
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');
47. Custom tasks
● Define your own tasks
○ By registering then in the Grunfile
○ E.g. default task
■ run by default
// Default task(s).
grunt.registerTask('default', ['uglify']);
// A very basic logStuff task.
grunt.registerTask('logStuff', 'Log some stuff.', function() {
grunt.log.write('Logging some stuff...').ok();
});
● May be defined in external .js files
○ loaded via the grunt.loadTasks method
49. What's Yeoman?
● It's a workflow
○ a collection of tools and best practices
● Based on three pillars
○ Yo
■ Scaffolds out a new application
■ Write your Grunt configuration
■ Pulls in relevant Grunt tasks
○ Grunt
■ Used to build, preview and test your project
■ Using tasks curated by the Yeoman team and grunt-contrib
○ Bower
■ Used for dependency management.
51. Installing yo generators
$ npm install -g generator-webapp
npm http GET https://registry.npmjs.org/generator-webapp
npm http 200 https://registry.npmjs.org/generator-webapp
npm http GET https://registry.npmjs.org/generator-webapp/-/generator-webapp-0.4.4.tgz
npm http 200 https://registry.npmjs.org/generator-webapp/-/generator-webapp-0.4.4.tgz
[…]
generator-webapp@0.4.4 /opt/node/lib/node_modules/generator-webapp
├── cheerio@0.12.4 (entities@0.3.0, underscore@1.4.4, htmlparser2@3.1.4, cheerio-select@0.0.3)
└── yeoman-generator@0.13.4 (dargs@0.1.0, diff@1.0.7, debug@0.7.4, rimraf@2.2.5, text-table@0.
1.1, mime@1.2.11, async@0.2.9, mkdirp@0.3.5, isbinaryfile@0.1.9, shelljs@0.1.4, underscore.
string@2.3.3, iconv-lite@0.2.11, lodash@1.3.1, chalk@0.2.1, tar@0.1.19, findup-sync@0.1.2,
glob@3.2.7, inquirer@0.3.5, request@2.25.0)
● Generators are used to scaffold your apps
○ A generator by kind of app
■ e.g. generator-webapp, generator-angular
52. ● A typical workflow
Workflow Yeoman
$ npm install -g generator-angular # install generator
[…]
$ yo angular # scaffold out a AngularJS project
[…]
$ bower install angular-ui # install a dependency for your project from Bower
[…]
$ grunt test # test your app
[…]
$ grunt server # preview your app
[…]
$ grunt # build the application for deployment
[…]
54. Why Brunch?
● Grunt & Gulp are powerful… but complex
○ Brunch is order-of-magnitude simpler
● Config files are easy and short
exports.config =
# See http://brunch.io/#documentation for docs.
files:
javascripts:
joinTo:
'javascripts/app.js': /^app/
'javascripts/vendor.js': /^(?!app)/
stylesheets:
joinTo: 'stylesheets/app.css'
templates:
joinTo: 'javascripts/app.js'
[…]
55. Why Brunch?
● Command line options are minimal
○ Three commands: new, build and watch
● Lots of plugins
○ With plugins it do anything Grunt tasks do
(and beyond…)
● Gulp adapter
○ To use Gulp tasks inside Brunch
56. Why Brunch?
● Grunt & Gulp are generic task runners
○ like MakeFile or Maven
○ lots of conf needed
● Brunch is a build tool
○ Categorization of source files
○ Smart concatenation
○ Module wrapping
○ Maintenance of source maps
○ Minification of resulting files
○ Watching of source files to update on the fly
57. Create a new Brunch project
● skeleton-URL specifies a skeleton
○ from which the application will be initialized
○ like Yeoman blueprints
● current skeleton list : http://brunch.
io/skeletons.html
$ brunch new <skeleton-URL> [optional-output-dir]
58. Develop with Brunch
● Tells Brunch to watch your project
○ Incrementally rebuild it when source files are
changed
○ Optional server flag launches a simple web server
with pushState support
$ brunch watch --server
59. Build with Brunch
● Builds a project for distribution
○ Optional production flag activates the minification
$ brunch build --production
60. Built-in processing
● Brunch will always take care of:
○ Concatenate files
■ by category
■ towards 1+ target files you define
○ Publish the resulting files
■ in a target directory
■ along with static asset files
○ Wrap the relevant JS source files
■ as CommonJS modules
■ during the concatenation phase)
61. Built-in processing
● Brunch will always take care of:
○ Produce the matching sourcemaps
■ so you can easily debug in your browser
○ Watch your source files and trees for changes
■ triggering an incremental build update
■ For developing mode
○ Provide an HTTP server
62. Configuration files
● Configuration files:
○ either brunch-config.coffee (favored version)
○ or brunch-config.js
● Most of times conf is only a big object
○ JSON style
○ so CoffeeScript will “just” spare you the noise
■ curly braces, commas, quotes…
exports.config =
# See http://brunch.io/#documentation for docs.
files:
javascripts:
joinTo:
'javascripts/app.js': /^app/
'javascripts/vendor.js': /^(?!app)/
stylesheets:
joinTo: 'stylesheets/app.css'
[…]
63. Folders have a meaning
● Convention over configuration
○ app contains the entire source codebase
■ script files, style sheets and template files
■ contents concatenated by type
○ Any assets folder (usually app/assets)
■ its contents will be copy-pasted (recursively) into
the target folder, as-is, without any processing.
64. Folders have a meaning
● Convention over configuration
○ Any vendor folder (usually app/vendor)
■ its contents will concatenated, much like app
■ the script files will not get wrapped in modules
● ideal for 3rd party libraries that do not play well with being
wrapped as modules
○ Any file starting with an underscore (_)
■ considered a partial, to be embedded into
another file
■ not processed standalone.
65. CommonJS module wrapping
● Brunch wraps your script files as
CommonJS modules
○ they therefore exist in a closure
○ all your explicit declarations are private
■ var, function
○ Access to exports, module.exports and require
66. Sourcemaps
● Concatenations generate source maps
○ browser’s developer tools display and debug the
original source files
■ a must-have for sane debugging
67. Watcher
● Brunch watch your files and trees
○ to update the build when changes are detected
■ the update is incremental and very fast
■ full updating logs are produced
○ watching happens when you use brunch watch
■ instead of the one-shot brunch build
68. Built-in web server
● Built-in HTTP server: brunch watch --server
○ can serve your target files statically
○ HTTP listener on port 3333
○ with / mapped to your target folder
○ automatic serving of index.html on folder URLs
○ CORS headers
69. Plugin loading
● Brunch plugins are installed with npm
○ Once installed they are directly available
■ declaration in node_modules and package.json
is enough to be detected
■ automatically used for file types and
environments they registered themselves for
○ Most plugins require no configuration
70. A simple app with Brunch
● Let's say you have a simple app:
How can we use Brunch with it?
https://github.com/brunch/brunch-guide-demos
.
├── app
│ ├── application.js
│ ├── assets
│ │ └── index.html
│ └── styles
│ └── main.scss
└── package.json
71. A simple app with Brunch
● First: installing a starting set of Brunch modules
● Then: writing a minimal Brunch configuration
○ a Node module that exports a config property
■ with at least a files property
● describing concatenations
$ npm install --save-dev brunch javascript-brunch sass-brunch
module.exports = config:
files:
javascripts: joinTo: 'app.js'
stylesheets: joinTo: 'app.css'
72. A simple app with Brunch
● Our first build
● Here’s what Brunch will have put in public:
$ brunch build
25 Feb 17:07:20 - info: compiled 2 files into 2 files, copied
index.html in 94ms
public/
├── app.css
├── app.css.map
├── app.js
├── app.js.map
└── index.html
73. Dependency management
● Bower integration
○ make sure you have bower.json
■ with your dependencies inside
○ Dependencies from bower aren't modularized
○ Config needed to separate app from libraries
module.exports = config:
files:
javascripts: joinTo:
'libraries.js': /^(?!app/)/
'app.js': /^app//
stylesheets: joinTo: 'app.css'
74. Templating
● Templates live in their own files
○ cleanly separated from JS or static HTML
○ templates get precompiled
■ by whatever engine handles the templating
● usually Jade
■ to produce a ready-to-use JS function
○ the function is wrapped as a module