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
HOW TO GET STARTED?
Page 29
YEOMANBorn in 2012
Various contributors (Employees from Google, Twitter, etc)
Page 30
YEOMAN scaffolding
- structure- compilation- static analysis- dependencies management- development tools- unit testing
Page 31
YEOMAN download
> npm install -g yo
“-g” global install
Page 32
YEOMANVarious generators:○ Angular○ Ember○ Backbone
And all the other popular frameworks...
Page 33
YEOMAN angular.js generator
> npm install -g generator-angular
Page 34
YEOMAN create an Angular project
> yo angular
Page 35
Select some dependencies
Page 36
Choose some options
Page 37
It creates the project
Page 38
It downloads half of the internet
Page 39
It uses some dark magic
Page 40
Enjoy the view, Yeoman takes care of everything…
Page 41
What does the result look like?
Page 46
IT’S MAGIC!and it will be your job to maintain it...
Page 48
BUT HOW DOES IT WORK?
Page 49
YEOMAN HAS FRIENDS
Page 57
DEPENDENCIES MANAGEMENT
Page 60
BOWERPackage manager for the web
Born in 2012
Created by Twitter and other contributors over time
Page 61
BOWER Download
> npm install -g bower
Page 62
Find a package: bower search
Page 63
Find more information: bower info
Page 64
BOWER Add a specific dependency
> bower install jquery#1.10.2 --save
install jquery and save this new dependency
Page 65
BOWER runtime dependencies in bower.json
Page 67
BOWER Add all your dependencies
> bower install
Page 68
See your dependencies: bower list
Page 69
BOWER Package management always comes with its set of problems:
Page 70
BOWER Package management always comes with its set of problems:- how can I create a new package?
Page 71
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 72
Create a bower package: bower init
Page 73
BOWER Use bower with Git
> bower install https://myrepository.git
Page 74
BOWER Host multiple versions
> git tag -a 1.4 -m 'version 1.4'
> bower install https://myrepository.git#1.4
Page 75
BOWER Download
> bower install jquery> bower install git://github.com/jquery/jquery.git
Page 76
BOWER Registry
https://github.com/bower/registry
A simple web server listing Git repository URLs
Page 77
BOWER Register
> bower register myrepository https://…git
> bower install myrepository
Page 81
CONFIGURATION
GULP
CODE
GRUNT
Page 83
GRUNT is a bit older so its
ECOSYSTEM is more mature
Page 84
Grunt and Gulpdevelopment tools dependencies in package.json
>npm install
Page 88
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 89
GRUNT
Configuration in Gruntfile.js
Page 90
GRUNT
Global install before Grunt 0.4
Updating Grunt cannot break existing projects anymore
Page 91
GRUNT gruntfile.js structure
3 parts:-Task loading-Task configuration-Task registration
Page 92
GRUNT
An example: Static code analysis with JSHINT
Page 94
HOW DO YOU USE IT?
>grunt
>grunt jshint:all
Page 97
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 98
GULPConfiguration in Gulpfile.js
Page 99
GULP gulpfile.js structure
3 parts:- task loading- task configuration- task registration
Page 101
GULP differences with Grunt
node.js streams (asynchronous by nature)
nice and simple api
less IO operations
Page 103
STATIC ANALYSISgrunt-contrib-jshintgulp-jshint
Detect coding errors in your JavaScript files
Page 104
STATIC ANALYSISVarious style of reports (checkstyle, html, etc)Configuration in .jshtinrc
Page 105
MINIFICATIONgrunt-contrib-uglifygulp-uglify
Reduce the size of JavaScript files
Page 106
CSS TRIMMINGgrunt-uncssgulp-uncss-task
Remove unused CSS rules
Page 107
TESTINGFrameworks: Jasmine & QUnitRunner: KarmaCode Coverage: Istanbul
Page 108
LIVE RELOADgrunt-contrib-watchgulp-livereload
Reload automatically the web application if some files have been changed
Page 109
initconcat
jshintminunit
serverendtoend
watch
WORKFLOW
Page 111
OrionEclipse project
Introduced in 2011 in the Eclipse Foundation
Page 112
OrionTwo versions: Jetty or Node.js
Page 113
Orionnpm install orion
node node_modules/orion/server.js /projectpath
Page 115
PROJECTS MANAGEMENT
Page 120
FIRST CLASS GIT SUPPORT
Page 135
DOCKER SUPPORT
SOON
Page 136
WHAT ABOUT ECLIPSE?
Page 137
Back-endLot of tooling for Java development
Jetty, EclipseLink, Webtools, etc
Page 139
WHAT ABOUT OTHERS?
Page 143
Back-endLot of tooling for Java development
Jetty, EclipseLink, Webtools, etc
Page 147
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.