Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Modern Web Application Development Workflow - E...

Modern Web Application Development Workflow - EclipseCon France 2014

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.

Stéphane Bégaudeau

June 19, 2014
Tweet

More Decks by Stéphane Bégaudeau

Other Decks in Programming

Transcript

  1. THROW A BUNCH OF HTML FILES ADD A COUPLE OF

    CSS FILES PUT SOME JAVASCRIPT IN ALL THIS
  2. THROW A BUNCH OF HTML FILES ADD A COUPLE OF

    CSS FILES PUT SOME JAVASCRIPT IN ALL THIS AND CALL IT A DAY...
  3. A GOOD DEVELOPMENT WORKFLOW -HELPS YOU GET STARTED -MAINTAINS YOUR

    DEPENDENCIES -ENFORCES BEST PRACTICES -PREPARES YOUR TOOLS
  4. A GOOD DEVELOPMENT WORKFLOW -HELPS YOU GET STARTED -MAINTAINS YOUR

    DEPENDENCIES -ENFORCES BEST PRACTICES -PREPARES YOUR TOOLS -FIGHTS REGRESSIONS
  5. A GOOD DEVELOPMENT WORKFLOW -HELPS YOU GET STARTED -MAINTAINS YOUR

    DEPENDENCIES -ENFORCES BEST PRACTICES -PREPARES YOUR TOOLS -FIGHTS REGRESSIONS -EASES THE RELEASE PROCESS
  6. YEOMAN scaffolding - structure - compilation - static analysis -

    dependencies management - development tools - unit testing
  7. BOWER Package manager for the web Born in 2012 Created

    by Twitter and other contributors over time
  8. BOWER Add a specific dependency > bower install jquery#1.10.2 --save

    install jquery and save this new dependency
  9. BOWER Package management always comes with its set of problems:

    - how can I create a new package? - how can I host a bower repository?
  10. BOWER Host multiple versions > git tag -a 1.4 -m

    'version 1.4' > bower install https://myrepository.git#1.4
  11. 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' } });
  12. 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'))
  13. THANKS! Stéphane Bégaudeau Twitter: @sbegaudeau Google+: +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.