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

Modern Web Application Development Workflow

Modern Web Application Development Workflow

People often consider that creating a web application is done by creating a bunch of HTML, Javascript and CSS files together in a text editor 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!

We will start by seeing how you can use Yeoman and its generators to kickstart your project. Then you will see how Bower let you manage the dependencies of your project. Downloading the JavaScript and CSS frameworks that you are using for you. After that we will have a look at Chrome Devtools in order to debug and edit our application. We will also see how to use remote debugging to inspect a web application running on a phone or a tablet.

Finally we will see how you can set up your whole continuous integration workflow with Grunt. Compilation, static code analysis, unit tests, integration tests, minification, code coverage, you name it.

This talk has been presented during EclipseCon North America 2014 in San Francisco

Stéphane Bégaudeau

March 19, 2014
Tweet

More Decks by Stéphane Bégaudeau

Other Decks in Technology

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 Package management always comes with its set of problems:

    - how can I create a new package? - how can I host a bower repository? - what kind of exotic tools will I have to use?
  11. BOWER Host a bower repository > git init > git

    add . > git commit -m “Initial commit.”
  12. BOWER Host a bower repository > git init > git

    add . > git commit -m “Initial commit.” > git remote add origin …
  13. BOWER Host a bower repository > git init > git

    add . > git commit -m “Initial commit.” > git remote add origin … > git push origin master
  14. BOWER Host a bower repository SVN support has been added

    with bower 1.3 for those who care….
  15. BOWER Host multiple versions > git tag -a 1.4 -m

    'version 1.4' > bower install https://myrepository.git#1.4
  16. GULP differences with Grunt node.js streams (asynchronous by nature) nice

    and simple api concurrent execution with Orchestrator
  17. WHY SASS? - import - extends - function - mixins

    - variables - compilation errors
  18. 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.