Modern Web Application Development Workflow - EclipseCon France 2014

147
MODERN WEB APPLICATION DEVELOPMENT WORKFLOW

description

People often consider that creating a web application is done by creating a bunch of HTML, Javascript and CSS files in a text editor, putting them in a folder and uploading them on the web. Well, things have changed and in this presentation, you will see how the workflow used to deliver web applications has evolved over the past few years and where the Eclipse Foundation's tools stand in this new world! In this talk, we will start by having a look at all the new development tools that have appeared with the arrival of Node.js and how they are used by the web development community. With tools like Bower used to manage the dependencies of a project, Grunt and Gulp used for the continuous integration and Yeoman used to kickstart web applications, web developers have dramatically increased their productivity. After that, we will see what tools like the Eclipse IDE and Orion can offer to web developers in order to build and maintain their applications and finally how they could be improved to provide the features needed by web developers.

Transcript of Modern Web Application Development Workflow - EclipseCon France 2014

Page 1: Modern Web Application Development Workflow - EclipseCon France 2014

MODERNWEB APPLICATIONDEVELOPMENTWORKFLOW

Page 2: Modern Web Application Development Workflow - EclipseCon France 2014

FIRST, LET’S LOOK AT THE PAST

Page 3: Modern Web Application Development Workflow - EclipseCon France 2014
Page 4: Modern Web Application Development Workflow - EclipseCon France 2014

THROW A BUNCH OF HTML FILES

Page 5: Modern Web Application Development Workflow - EclipseCon France 2014

THROW A BUNCH OF HTML FILES

ADD A COUPLE OF CSS FILES

Page 6: Modern Web Application Development Workflow - EclipseCon France 2014

THROW A BUNCH OF HTML FILES

ADD A COUPLE OF CSS FILES

PUT SOME JAVASCRIPT IN ALL THIS

Page 7: Modern Web Application Development Workflow - EclipseCon France 2014

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: Modern Web Application Development Workflow - EclipseCon France 2014

COME BACK 6 MONTHS LATER

AND TRY TO REMEMBER HOW TO MAINTAIN YOUR CODE

Page 9: Modern Web Application Development Workflow - EclipseCon France 2014
Page 10: Modern Web Application Development Workflow - EclipseCon France 2014
Page 11: Modern Web Application Development Workflow - EclipseCon France 2014
Page 12: Modern Web Application Development Workflow - EclipseCon France 2014

Node.js

≠ Server-side JavaScript

Page 13: Modern Web Application Development Workflow - EclipseCon France 2014

Node.jsstand alone JavaScript runtime

Page 14: Modern Web Application Development Workflow - EclipseCon France 2014

Node.jsstand alone JavaScript runtimeusing v8, Chrome’s JavaScript engine

Page 15: Modern Web Application Development Workflow - EclipseCon France 2014

Node.jsstand alone JavaScript applications

Page 16: Modern Web Application Development Workflow - EclipseCon France 2014

Node.jsstand alone JavaScript applicationscreated by JavaScript developers

Page 17: Modern Web Application Development Workflow - EclipseCon France 2014

Node.jsstand alone JavaScript applicationscreated by JavaScript developersfor JavaScript developers

Page 18: Modern Web Application Development Workflow - EclipseCon France 2014

BRAND NEW WORLD

Page 19: Modern Web Application Development Workflow - EclipseCon France 2014

JAVASCRIPT DEVELOPMENT TOOLS

Page 20: Modern Web Application Development Workflow - EclipseCon France 2014

JAVASCRIPT DEVELOPMENT WORKFLOW

Page 21: Modern Web Application Development Workflow - EclipseCon France 2014

A GOOD DEVELOPMENT WORKFLOW

-HELPS YOU GET STARTED

Page 22: Modern Web Application Development Workflow - EclipseCon France 2014

A GOOD DEVELOPMENT WORKFLOW

-HELPS YOU GET STARTED-MAINTAINS YOUR DEPENDENCIES

Page 23: Modern Web Application Development Workflow - EclipseCon France 2014

A GOOD DEVELOPMENT WORKFLOW

-HELPS YOU GET STARTED-MAINTAINS YOUR DEPENDENCIES-ENFORCES BEST PRACTICES

Page 24: Modern Web Application Development Workflow - EclipseCon France 2014

A GOOD DEVELOPMENT WORKFLOW

-HELPS YOU GET STARTED-MAINTAINS YOUR DEPENDENCIES-ENFORCES BEST PRACTICES-PREPARES YOUR TOOLS

Page 25: Modern Web Application Development Workflow - EclipseCon France 2014

A GOOD DEVELOPMENT WORKFLOW

-HELPS YOU GET STARTED-MAINTAINS YOUR DEPENDENCIES-ENFORCES BEST PRACTICES-PREPARES YOUR TOOLS-FIGHTS REGRESSIONS

Page 26: Modern Web Application Development Workflow - EclipseCon France 2014

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: Modern Web Application Development Workflow - EclipseCon France 2014

HOW TO GET STARTED?

Page 28: Modern Web Application Development Workflow - EclipseCon France 2014
Page 29: Modern Web Application Development Workflow - EclipseCon France 2014

YEOMANBorn in 2012

Various contributors (Employees from Google, Twitter, etc)

Page 30: Modern Web Application Development Workflow - EclipseCon France 2014

YEOMAN scaffolding

- structure- compilation- static analysis- dependencies management- development tools- unit testing

Page 31: Modern Web Application Development Workflow - EclipseCon France 2014

YEOMAN download

> npm install -g yo

“-g” global install

Page 32: Modern Web Application Development Workflow - EclipseCon France 2014

YEOMANVarious generators:○ Angular○ Ember○ Backbone

And all the other popular frameworks...

Page 33: Modern Web Application Development Workflow - EclipseCon France 2014

YEOMAN angular.js generator

> npm install -g generator-angular

Page 34: Modern Web Application Development Workflow - EclipseCon France 2014

YEOMAN create an Angular project

> yo angular

Page 35: Modern Web Application Development Workflow - EclipseCon France 2014

Select some dependencies

Page 36: Modern Web Application Development Workflow - EclipseCon France 2014

Choose some options

Page 37: Modern Web Application Development Workflow - EclipseCon France 2014

It creates the project

Page 38: Modern Web Application Development Workflow - EclipseCon France 2014

It downloads half of the internet

Page 39: Modern Web Application Development Workflow - EclipseCon France 2014

It uses some dark magic

Page 40: Modern Web Application Development Workflow - EclipseCon France 2014

Enjoy the view, Yeoman takes care of everything…

Page 41: Modern Web Application Development Workflow - EclipseCon France 2014

What does the result look like?

Page 42: Modern Web Application Development Workflow - EclipseCon France 2014

STRUCTURE

Page 43: Modern Web Application Development Workflow - EclipseCon France 2014

CONTENT

Page 44: Modern Web Application Development Workflow - EclipseCon France 2014

DEPENDENCIES

Page 45: Modern Web Application Development Workflow - EclipseCon France 2014

DEV TOOLS

Page 46: Modern Web Application Development Workflow - EclipseCon France 2014

IT’S MAGIC!and it will be your job to maintain it...

Page 47: Modern Web Application Development Workflow - EclipseCon France 2014

HAPPY?

Page 48: Modern Web Application Development Workflow - EclipseCon France 2014

BUT HOW DOES IT WORK?

Page 49: Modern Web Application Development Workflow - EclipseCon France 2014

YEOMAN HAS FRIENDS

Page 50: Modern Web Application Development Workflow - EclipseCon France 2014

BOWER

Page 51: Modern Web Application Development Workflow - EclipseCon France 2014
Page 52: Modern Web Application Development Workflow - EclipseCon France 2014

GRUNT

Page 53: Modern Web Application Development Workflow - EclipseCon France 2014
Page 54: Modern Web Application Development Workflow - EclipseCon France 2014

GULP

Page 55: Modern Web Application Development Workflow - EclipseCon France 2014
Page 56: Modern Web Application Development Workflow - EclipseCon France 2014

AND OTHERS

Page 57: Modern Web Application Development Workflow - EclipseCon France 2014

DEPENDENCIES MANAGEMENT

Page 58: Modern Web Application Development Workflow - EclipseCon France 2014

BOWER

Page 59: Modern Web Application Development Workflow - EclipseCon France 2014
Page 60: Modern Web Application Development Workflow - EclipseCon France 2014

BOWERPackage manager for the web

Born in 2012

Created by Twitter and other contributors over time

Page 61: Modern Web Application Development Workflow - EclipseCon France 2014

BOWER Download

> npm install -g bower

Page 62: Modern Web Application Development Workflow - EclipseCon France 2014

Find a package: bower search

Page 63: Modern Web Application Development Workflow - EclipseCon France 2014

Find more information: bower info

Page 64: Modern Web Application Development Workflow - EclipseCon France 2014

BOWER Add a specific dependency

> bower install jquery#1.10.2 --save

install jquery and save this new dependency

Page 65: Modern Web Application Development Workflow - EclipseCon France 2014

BOWER runtime dependencies in bower.json

Page 66: Modern Web Application Development Workflow - EclipseCon France 2014

DEPENDENCIES

Page 67: Modern Web Application Development Workflow - EclipseCon France 2014

BOWER Add all your dependencies

> bower install

Page 68: Modern Web Application Development Workflow - EclipseCon France 2014

See your dependencies: bower list

Page 69: Modern Web Application Development Workflow - EclipseCon France 2014

BOWER Package management always comes with its set of problems:

Page 70: Modern Web Application Development Workflow - EclipseCon France 2014

BOWER Package management always comes with its set of problems:- how can I create a new package?

Page 71: Modern Web Application Development Workflow - EclipseCon France 2014

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: Modern Web Application Development Workflow - EclipseCon France 2014

Create a bower package: bower init

Page 73: Modern Web Application Development Workflow - EclipseCon France 2014

BOWER Use bower with Git

> bower install https://myrepository.git

Page 74: Modern Web Application Development Workflow - EclipseCon France 2014

BOWER Host multiple versions

> git tag -a 1.4 -m 'version 1.4'

> bower install https://myrepository.git#1.4

Page 75: Modern Web Application Development Workflow - EclipseCon France 2014

BOWER Download

> bower install jquery> bower install git://github.com/jquery/jquery.git

Page 76: Modern Web Application Development Workflow - EclipseCon France 2014

BOWER Registry

https://github.com/bower/registry

A simple web server listing Git repository URLs

Page 77: Modern Web Application Development Workflow - EclipseCon France 2014

BOWER Register

> bower register myrepository https://…git

> bower install myrepository

Page 78: Modern Web Application Development Workflow - EclipseCon France 2014

BUILD

Page 79: Modern Web Application Development Workflow - EclipseCon France 2014
Page 80: Modern Web Application Development Workflow - EclipseCon France 2014

GRUNT GULP

Page 81: Modern Web Application Development Workflow - EclipseCon France 2014

CONFIGURATION

GULP

CODE

GRUNT

Page 82: Modern Web Application Development Workflow - EclipseCon France 2014

EQUALLY POWERFUL

Page 83: Modern Web Application Development Workflow - EclipseCon France 2014

GRUNT is a bit older so its

ECOSYSTEM is more mature

Page 84: Modern Web Application Development Workflow - EclipseCon France 2014

Grunt and Gulpdevelopment tools dependencies in package.json

>npm install

Page 85: Modern Web Application Development Workflow - EclipseCon France 2014

DEV TOOLS

Page 86: Modern Web Application Development Workflow - EclipseCon France 2014

GRUNT

Page 87: Modern Web Application Development Workflow - EclipseCon France 2014
Page 88: Modern Web Application Development Workflow - EclipseCon France 2014

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: Modern Web Application Development Workflow - EclipseCon France 2014

GRUNT

Configuration in Gruntfile.js

Page 90: Modern Web Application Development Workflow - EclipseCon France 2014

GRUNT

Global install before Grunt 0.4

Updating Grunt cannot break existing projects anymore

Page 91: Modern Web Application Development Workflow - EclipseCon France 2014

GRUNT gruntfile.js structure

3 parts:-Task loading-Task configuration-Task registration

Page 92: Modern Web Application Development Workflow - EclipseCon France 2014

GRUNT

An example: Static code analysis with JSHINT

Page 93: Modern Web Application Development Workflow - EclipseCon France 2014

GRUNT

Page 94: Modern Web Application Development Workflow - EclipseCon France 2014

HOW DO YOU USE IT?

>grunt

>grunt jshint:all

Page 95: Modern Web Application Development Workflow - EclipseCon France 2014

GULP

Page 96: Modern Web Application Development Workflow - EclipseCon France 2014
Page 97: Modern Web Application Development Workflow - EclipseCon France 2014

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: Modern Web Application Development Workflow - EclipseCon France 2014

GULPConfiguration in Gulpfile.js

Page 99: Modern Web Application Development Workflow - EclipseCon France 2014

GULP gulpfile.js structure

3 parts:- task loading- task configuration- task registration

Page 100: Modern Web Application Development Workflow - EclipseCon France 2014

GULP

Page 101: Modern Web Application Development Workflow - EclipseCon France 2014

GULP differences with Grunt

node.js streams (asynchronous by nature)

nice and simple api

less IO operations

Page 102: Modern Web Application Development Workflow - EclipseCon France 2014

BUILD TASKS

Page 103: Modern Web Application Development Workflow - EclipseCon France 2014

STATIC ANALYSISgrunt-contrib-jshintgulp-jshint

Detect coding errors in your JavaScript files

Page 104: Modern Web Application Development Workflow - EclipseCon France 2014

STATIC ANALYSISVarious style of reports (checkstyle, html, etc)Configuration in .jshtinrc

Page 105: Modern Web Application Development Workflow - EclipseCon France 2014

MINIFICATIONgrunt-contrib-uglifygulp-uglify

Reduce the size of JavaScript files

Page 106: Modern Web Application Development Workflow - EclipseCon France 2014

CSS TRIMMINGgrunt-uncssgulp-uncss-task

Remove unused CSS rules

Page 107: Modern Web Application Development Workflow - EclipseCon France 2014

TESTINGFrameworks: Jasmine & QUnitRunner: KarmaCode Coverage: Istanbul

Page 108: Modern Web Application Development Workflow - EclipseCon France 2014

LIVE RELOADgrunt-contrib-watchgulp-livereload

Reload automatically the web application if some files have been changed

Page 109: Modern Web Application Development Workflow - EclipseCon France 2014

initconcat

jshintminunit

serverendtoend

watch

WORKFLOW

Page 110: Modern Web Application Development Workflow - EclipseCon France 2014
Page 111: Modern Web Application Development Workflow - EclipseCon France 2014

OrionEclipse project

Introduced in 2011 in the Eclipse Foundation

Page 112: Modern Web Application Development Workflow - EclipseCon France 2014

OrionTwo versions: Jetty or Node.js

Page 113: Modern Web Application Development Workflow - EclipseCon France 2014

Orionnpm install orion

node node_modules/orion/server.js /projectpath

Page 114: Modern Web Application Development Workflow - EclipseCon France 2014
Page 115: Modern Web Application Development Workflow - EclipseCon France 2014

PROJECTS MANAGEMENT

Page 116: Modern Web Application Development Workflow - EclipseCon France 2014
Page 117: Modern Web Application Development Workflow - EclipseCon France 2014

EDITOR

Page 118: Modern Web Application Development Workflow - EclipseCon France 2014
Page 119: Modern Web Application Development Workflow - EclipseCon France 2014
Page 120: Modern Web Application Development Workflow - EclipseCon France 2014

FIRST CLASS GIT SUPPORT

Page 121: Modern Web Application Development Workflow - EclipseCon France 2014
Page 122: Modern Web Application Development Workflow - EclipseCon France 2014
Page 123: Modern Web Application Development Workflow - EclipseCon France 2014
Page 124: Modern Web Application Development Workflow - EclipseCon France 2014
Page 125: Modern Web Application Development Workflow - EclipseCon France 2014

SEARCH

Page 126: Modern Web Application Development Workflow - EclipseCon France 2014
Page 127: Modern Web Application Development Workflow - EclipseCon France 2014

PLUGINS

Page 128: Modern Web Application Development Workflow - EclipseCon France 2014
Page 129: Modern Web Application Development Workflow - EclipseCon France 2014
Page 130: Modern Web Application Development Workflow - EclipseCon France 2014
Page 131: Modern Web Application Development Workflow - EclipseCon France 2014
Page 132: Modern Web Application Development Workflow - EclipseCon France 2014

READY TO DEPLOY

Page 133: Modern Web Application Development Workflow - EclipseCon France 2014
Page 134: Modern Web Application Development Workflow - EclipseCon France 2014
Page 135: Modern Web Application Development Workflow - EclipseCon France 2014

DOCKER SUPPORT

SOON

Page 136: Modern Web Application Development Workflow - EclipseCon France 2014

WHAT ABOUT ECLIPSE?

Page 137: Modern Web Application Development Workflow - EclipseCon France 2014

Back-endLot of tooling for Java development

Jetty, EclipseLink, Webtools, etc

Page 138: Modern Web Application Development Workflow - EclipseCon France 2014

Front-end...

Page 139: Modern Web Application Development Workflow - EclipseCon France 2014

WHAT ABOUT OTHERS?

Page 140: Modern Web Application Development Workflow - EclipseCon France 2014
Page 141: Modern Web Application Development Workflow - EclipseCon France 2014
Page 142: Modern Web Application Development Workflow - EclipseCon France 2014
Page 143: Modern Web Application Development Workflow - EclipseCon France 2014

Back-endLot of tooling for Java development

Jetty, EclipseLink, Webtools, etc

Page 144: Modern Web Application Development Workflow - EclipseCon France 2014
Page 145: Modern Web Application Development Workflow - EclipseCon France 2014
Page 146: Modern Web Application Development Workflow - EclipseCon France 2014

TO SUM UP

Page 147: Modern Web Application Development Workflow - EclipseCon France 2014

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.