modern web application development workflow - eclipsecon us 2014
DESCRIPTION
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 FranciscoTRANSCRIPT
MODERNWEB APPLICATIONDEVELOPMENTWORKFLOW
FIRST, LET’S LOOK AT THE PAST
HOW WEB APPLICATIONS USED TO BE DONE?
THROW A BUNCH OF HTML FILES
THROW A BUNCH OF HTML FILES
ADD A COUPLE OF CSS FILES
THROW A BUNCH OF HTML FILES
ADD A COUPLE OF CSS FILES
PUT SOME JAVASCRIPT IN ALL THIS
THROW A BUNCH OF HTML FILES
ADD A COUPLE OF CSS FILES
PUT SOME JAVASCRIPT IN ALL THIS
AND CALL IT A DAY...
COME BACK 6 MONTHS LATER
AND TRY TO REMEMBER HOW TO MAINTAIN YOUR CODE
MOVING FORWARD
A NODE.JS WORLD
Node.js
≠ Server-side JavaScript
Node.jsstand alone JavaScript runtime
Node.jsstand alone JavaScript applications
Node.jsstand alone JavaScript applicationscreated by JavaScript developers
Node.jsstand alone JavaScript applicationscreated by JavaScript developersfor JavaScript developers
BRAND NEW WORLD
JAVASCRIPT DEVELOPMENT TOOLS
JAVASCRIPT DEVELOPMENT WORKFLOW
A GOOD DEVELOPMENT WORKFLOW
-HELPS YOU GET STARTED
A GOOD DEVELOPMENT WORKFLOW
-HELPS YOU GET STARTED-MAINTAINS YOUR DEPENDENCIES
A GOOD DEVELOPMENT WORKFLOW
-HELPS YOU GET STARTED-MAINTAINS YOUR DEPENDENCIES-ENFORCES BEST PRACTICES
A GOOD DEVELOPMENT WORKFLOW
-HELPS YOU GET STARTED-MAINTAINS YOUR DEPENDENCIES-ENFORCES BEST PRACTICES-PREPARES YOUR TOOLS
A GOOD DEVELOPMENT WORKFLOW
-HELPS YOU GET STARTED-MAINTAINS YOUR DEPENDENCIES-ENFORCES BEST PRACTICES-PREPARES YOUR TOOLS-FIGHTS REGRESSIONS
A GOOD DEVELOPMENT WORKFLOW
-HELPS YOU GET STARTED-MAINTAINS YOUR DEPENDENCIES-ENFORCES BEST PRACTICES-PREPARES YOUR TOOLS-FIGHTS REGRESSIONS-EASES THE RELEASE PROCESS
HOW TO GET STARTED?
YEOMANBorn in 2012
Various contributors (Employees from Google, Twitter, etc)
YEOMAN scaffolding
- structure- compilation- static analysis- dependencies management- development tools- unit testing
YEOMAN download
> npm install -g yo
“-g” global install
YEOMANVarious generators:○ Angular○ Ember○ Backbone
And all the other popular frameworks...
YEOMAN bootstrapping
You can also use Yeoman to generate an Yeoman generator project
YEOMAN angular.js generator
> npm install -g generator-angular
YEOMAN create an Angular project
> yo angular
YEOMAN select some dependencies
YEOMAN choose some options
YEOMAN it creates the project
YEOMAN it downloads the internet
YEOMAN it uses some dark magic
Enjoy the view, Yeoman takes care of everything…
What does the result look like?
STRUCTURE
CONTENT
DEPENDENCIES
DEV TOOLS
YEOMAN evolution over time
> yo angular:controller myController
create the code and its unit test
IT’S MAGIC!and it will be your job to maintain it...
HAPPY?
BUT HOW DOES IT WORK?
YEOMAN HAS FRIENDS
BOWER
GRUNT
GULP
AND OTHERS
DEPENDENCIES MANAGEMENT
BOWER
BOWERPackage manager for the web
Born in 2012
Created by Twitter and other contributors over time
BOWER Download
> npm install -g bower
BOWER Find a package
> bower search jquery
BOWER Find the versions available
> bower info jquery
BOWER Add a specific dependency
> bower install jquery#1.10.2 --save
install jquery and save this new dependency
BOWER runtime dependencies in bower.json
DEPENDENCIES
LOCATION
BOWER Add all your dependencies
> bower install
BOWER See your dependencies
> bower list
BOWER Package management always comes with its set of problems:
BOWER Package management always comes with its set of problems:- how can I create a new package?
BOWER Package management always comes with its set of problems:- how can I create a new package?- how can I host a bower repository?
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?
BOWER Create a bower package
> bower init
BOWER Host a bower repository
BOWER Host a bower repository
> git init
BOWER Host a bower repository
> git init> git add .
BOWER Host a bower repository
> git init> git add .> git commit -m “Initial commit.”
BOWER Host a bower repository
> git init> git add .> git commit -m “Initial commit.”> git remote add origin …
BOWER Host a bower repository
> git init> git add .> git commit -m “Initial commit.”> git remote add origin …> git push origin master
BOWER Host a bower repository
SVN support has been added with bower 1.3for those who care….
BOWER Use bower with Git
> bower install https://myrepository.git
BOWER Host multiple versions
> git tag -a 1.4 -m 'version 1.4'
> bower install https://myrepository.git#1.4
BOWER Host multiple versions
Use semantic versioning to easily let your consumers handle API breakages
BOWER Download
> bower install jquery> bower install git://github.com/jquery/jquery.git
BOWER Download
> bower install jquery> bower install git://github.com/jquery/jquery.git
How do this work?
BOWER Registry
https://github.com/bower/registry
A simple web server listing Git repository URLs
BOWER Register
> bower register myrepository https://…git
> bower install myrepository
BUILD
GRUNT GULP
CONFIGURATION
GULP
CODE
GRUNT
EQUALLY POWERFUL
GRUNT is a bit older so its
ECOSYSTEM is more mature
Grunt and Gulpdevelopment tools dependencies in package.json
>npm install
DEV TOOLS
GRUNT
GRUNT
Configuration in Gruntfile.js
GRUNT gruntfile.js structure
3 parts:-Task loading-Task configuration-Task registration
GRUNT
An example: Static code analysis with JSHINT
GRUNT
HOW DO YOU USE IT?
>grunt
>grunt jshint:all
GULP
GULPConfiguration in Gulpfile.js
GULP gulpfile.js structure
3 parts:- task loading- task configuration- task registration
GULP
GULP launch
> gulp
SOUNDS FAMILIAR?
GULP differences with Grunt
node.js streams (asynchronous by nature)nice and simple apiconcurrent execution with Orchestrator
BUILD TASKS
STATIC ANALYSISgrunt-contrib-jshintgulp-jshint
Detect coding errors in your JavaScript files(Checkstyle-like reports)
RESPONSIVE IMAGESgrunt-responsive-imagesgulp-responsive-images
Produce images at different sizes for responsive websites
COMPRESS IMAGESgrunt-contrib-imagemingulp-imagemin
Compress and optimize images
COFFEESCRIPTgrunt-contrib-coffeegulp-coffee
Compile CoffeeScript source code to JavaScript
SASSgrunt-contrib-sassgulp-sass
Compile SASS to CSS
WHY SASS?- import- extends- function- mixins- variables- compilation errors
MINIFICATIONgrunt-contrib-uglifygulp-uglify
Reduce the size of JavaScript files
CSS TRIMMINGgrunt-uncssgulp-uncss-task
Remove unused CSS rules
TESTING
TESTINGFrameworks: Jasmine, Mocha, QUnitRunner: KarmaCode Coverage: Istanbul
TESTINGHudson/Jenkins integration?
karma-junit-reporterkarma-coverage (Cobertura reports)
CHROME DEVTOOLS
WORKSPACE
SNIPPETS
AUDITS
TIMELINE
REMOTE DEBUGGING
DEMONSTRATION
Murphy’s Law: Anything that can go wrong — will go wrong
BACKUP SLIDES
(if everything failed, you still have some pictures)
KARMA + GRUNT/GULP
Test your application on various devices
TO SUM UP
YEOMAN + BOWER + GRUNT/GULPand their plugins…
=
AWESOME
QUESTIONS?
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.