Page 1
MODERNWEB APPLICATIONDEVELOPMENTWORKFLOW
Page 2
FIRST, LET’S LOOK AT THE PAST
Page 4
THROW A BUNCH OF HTML FILES
Page 5
THROW A BUNCH OF HTML FILES
ADD A COUPLE OF CSS FILES
Page 6
THROW A BUNCH OF HTML FILES
ADD A COUPLE OF CSS FILES
PUT SOME JAVASCRIPT IN ALL THIS
Page 7
THROW A BUNCH OF HTML FILES
ADD A COUPLE OF CSS FILES
PUT SOME JAVASCRIPT IN ALL THIS
AND CALL IT A DAY...
Page 8
COME BACK 6 MONTHS LATER
AND TRY TO REMEMBER HOW TO MAINTAIN YOUR CODE
Page 12
Node.js
≠ Server-side JavaScript
Page 13
Node.jsstand alone JavaScript runtime
Page 14
Node.jsstand alone JavaScript runtimeusing v8, Chrome’s JavaScript engine
Page 15
Node.jsstand alone JavaScript applications
Page 16
Node.jsstand alone JavaScript applicationscreated by JavaScript developers
Page 17
Node.jsstand alone JavaScript applicationscreated by JavaScript developersfor JavaScript developers
Page 19
JAVASCRIPT DEVELOPMENT TOOLS
Page 20
JAVASCRIPT DEVELOPMENT WORKFLOW
Page 21
A GOOD DEVELOPMENT WORKFLOW
-HELPS YOU GET STARTED
Page 22
A GOOD DEVELOPMENT WORKFLOW
-HELPS YOU GET STARTED-MAINTAINS YOUR DEPENDENCIES
Page 23
A GOOD DEVELOPMENT WORKFLOW
-HELPS YOU GET STARTED-MAINTAINS YOUR DEPENDENCIES-ENFORCES BEST PRACTICES
Page 24
A GOOD DEVELOPMENT WORKFLOW
-HELPS YOU GET STARTED-MAINTAINS YOUR DEPENDENCIES-ENFORCES BEST PRACTICES-PREPARES YOUR TOOLS
Page 25
A GOOD DEVELOPMENT WORKFLOW
-HELPS YOU GET STARTED-MAINTAINS YOUR DEPENDENCIES-ENFORCES BEST PRACTICES-PREPARES YOUR TOOLS-FIGHTS REGRESSIONS
Page 26
A GOOD DEVELOPMENT WORKFLOW
-HELPS YOU GET STARTED-MAINTAINS YOUR DEPENDENCIES-ENFORCES BEST PRACTICES-PREPARES YOUR TOOLS-FIGHTS REGRESSIONS-EASES THE RELEASE PROCESS
Page 27
scaffolding
dependency management
build
build tasks
orion
eclipse
Page 28
HOW TO GET STARTED?
Page 30
YEOMANBorn in 2012
Various contributors (Employees from Google, Twitter, etc)
Page 31
YEOMAN scaffolding
- structure- compilation- static analysis- dependencies management- development tools- unit testing
Page 32
YEOMAN download
> npm install -g yo
“-g” global install
Page 33
YEOMANVarious generators:○ Angular○ Ember○ Backbone
And all the other popular frameworks...
Page 34
YEOMAN angular.js generator
> npm install -g generator-angular
Page 35
YEOMAN create an Angular project
> yo angular
Page 36
Select some dependencies
Page 37
Choose some options
Page 38
It creates the project
Page 39
It downloads half of the internet
Page 40
It uses some dark magic
Page 41
Enjoy the view, Yeoman takes care of everything…
Page 42
What does the result look like?
Page 47
IT’S MAGIC!and it will be your job to maintain it...
Page 49
BUT HOW DOES IT WORK?
Page 50
scaffolding
dependency management
build
build tasks
orion
eclipse
Page 51
YEOMAN HAS FRIENDS
Page 59
DEPENDENCIES MANAGEMENT
Page 62
BOWERPackage manager for the web
Born in 2012
Created by Twitter and other contributors over time
Page 63
BOWER Download
> npm install -g bower
Page 64
Find a package: bower search
Page 65
Find more information: bower info
Page 66
BOWER Add a specific dependency
> bower install jquery#1.10.2 --save
install jquery and save this new dependency
Page 67
BOWER runtime dependencies in bower.json
Page 69
BOWER Add all your dependencies
> bower install
Page 70
See your dependencies: bower list
Page 71
BOWER Package management always comes with its set of problems:
Page 72
BOWER Package management always comes with its set of problems:- how can I create a new package?
Page 73
BOWER Package management always comes with its set of problems:- how can I create a new package?- how can I host a bower repository?
Page 74
Create a bower package: bower init
Page 75
BOWER Use bower with Git
> bower install https://myrepository.git
Page 76
BOWER Host multiple versions
> git tag -a 1.4 -m 'version 1.4'
> bower install https://myrepository.git#1.4
Page 77
BOWER Download
> bower install jquery> bower install git://github.com/jquery/jquery.git
Page 78
BOWER Registry
https://github.com/bower/registry
A simple web server listing Git repository URLs
Page 79
BOWER Register
> bower register myrepository https://…git
> bower install myrepository
Page 80
scaffolding
dependency management
build
build tasks
orion
eclipse
Page 84
CONFIGURATION
GULP
CODE
GRUNT
Page 86
GRUNT is a bit older so its
ECOSYSTEM is more mature
Page 87
Grunt and Gulpdevelopment tools dependencies in package.json
>npm install
Page 91
GRUNT configuration over code
grunt.initConfig({ lint: { src: 'src/<%= pkg.name %>.js' }, concat: { src: [ '<banner:meta.banner>' , '<file_strip_banner:src/<%= pkg.name %>.js>' ], dest: '<%= pkg.name %>.js' }});
Page 92
GRUNT
Configuration in Gruntfile.js
Page 93
GRUNT
Global install before Grunt 0.4
Updating Grunt cannot break existing projects anymore
Page 94
GRUNT gruntfile.js structure
3 parts:-Task loading-Task configuration-Task registration
Page 95
GRUNT
An example: Static code analysis with JSHINT
Page 97
HOW DO YOU USE IT?
>grunt
>grunt jshint:all
Page 100
GULP code over configuration
gulp.src('src/main.mycss') .pipe(stylus()) .pipe(rename({ ext: 'css' })) .pipe(autoprefixer()) .pipe(cssmin()) .pipe(header('/* All Right Reserved */' )) .pipe(gulp.dest( 'dist'))
Page 101
GULPConfiguration in Gulpfile.js
Page 102
GULP gulpfile.js structure
3 parts:- task loading- task configuration- task registration
Page 104
GULP differences with Grunt
node.js streams (asynchronous by nature)
nice and simple api
less IO operations
Page 105
scaffolding
dependency management
build
build tasks
orion
eclipse
Page 107
STATIC ANALYSISgrunt-contrib-jshintgulp-jshint
Detect coding errors in your JavaScript files
Page 108
STATIC ANALYSISVarious style of reports (checkstyle, html, etc)Configuration in .jshtinrc
Page 109
MINIFICATIONgrunt-contrib-uglifygulp-uglify
Reduce the size of JavaScript files
Page 110
CSS TRIMMINGgrunt-uncssgulp-uncss-task
Remove unused CSS rules
Page 111
TESTINGFrameworks: Jasmine & QUnitRunner: KarmaCode Coverage: Istanbul
Page 112
LIVE RELOADgrunt-contrib-watchgulp-livereload
Reload automatically the web application if some files have been changed
Page 113
initconcat
jshintminunit
serverendtoend
watch
WORKFLOW
Page 114
scaffolding
dependency management
build
build tasks
orion
eclipse
Page 116
OrionEclipse project
Introduced in 2011 in the Eclipse Foundation
Page 117
OrionTwo versions: Jetty or Node.js
Page 118
Orionnpm install orion
node node_modules/orion/server.js /projectpath
Page 120
PROJECTS MANAGEMENT
Page 125
FIRST CLASS GIT SUPPORT
Page 140
scaffolding
dependency management
build
build tasks
orion
eclipse
Page 141
WHAT ABOUT ECLIPSE?
Page 142
Back-endLot of tooling for Java development
Jetty, EclipseLink, Webtools, etc
Page 144
WHAT ABOUT OTHERS?
Page 148
Front-endIt’s time to contribute!
Page 154
THANKS!Stéphane BégaudeauTwitter: @sbegaudeauGoogle+: +stephane.begaudeau
The research leading to these results has received funding from the European Union’s Seventh Framework Program (FP7/2007-2013) for CRYSTAL – Critical System Engineering Acceleration Joint Undertaking under grant agreement № 332830 and from specific national programs and/or funding authorities.