Embed Size (px)
DESCRIPTION
Citation preview
xModern workflows for JavaScript [email protected]
Application that can be written in JavaScript, will eventually be written in JavaScript.- Atwood’s Law ( Jeff Atwood aka @codinghorror)
How do we manage dependencies?
● Don’t manage them● Just use copy/paste● Obey the framework’s preferred way● Use a build tool
Web Jars<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>1.8.2</version>
</dependency>
compile 'org.webjars:jquery:1.8.2'
Tools tools and more tools
Successful programmers are ?
A. Lazy B. DumbC. All aboveD. None
What are you doing to save time?
Pick tools that you will use
Yeoman.io
Tooling workflow for modern JavaScript development
Toolset
● Think of ANT, Maven, Make, Gradle …● Huge ecosystem● 1800 + plugins
module.exports = function(grunt) { grunt.initConfig({ concat: { options: { separator: ';' }, dist: { src: ['src/**/*.js'], dest: 'dist/<%= pkg.name %>.js' } }, watch: { files: ['<%= jshint.files %>'], tasks: ['jshint', 'qunit'] } });}
Gruntfile.js
What’s running the JS?
{
"name": "temp",
"version": "0.0.0",
"dependencies": {},
"devDependencies": {
"grunt": "~0.4.1",
"grunt-autoprefixer": "~0.4.0",
"karma": "~0.10.6",
"karma-ng-html2js-preprocessor": "~0.1.0"
},
"engines": {
"node": ">=0.8.0"
}
..}
Package.json
How are the frontend libs managed?
● Runs over Git● 5000 + packages● Flat hierarchy
{ "name": "myapp", "version": "0.0.0", "dependencies": { "sass-bootstrap": "~3.0.0", "requirejs": "~2.1.8", "modernizr": "~2.6.2", "jquery": "~1.10.2" }, "devDependencies": {}}
Bower.json
Semantic versioning
MAJOR.MINOR.PATCH (2.3.3)
● MAJOR - backward incompatible● MINOR - new features backwards
compatible● PATCH - bugfixes, fully compatible
YO
● Workflow and glue code● Initial project scaffolding● 400 + generators with a lot subsections
What about tests?
● Karma test runner ○ Reporters ○ Test framework support
● Phantom JS
Demo time
> npm search yeoman-generator > npm install -g generator-angular > yo angular
Maven integration
● yeoman-maven-plugin● maven-exec-plugin
+ some maven-asembly
<plugin>
<groupid>org.codehaus.mojo</groupid>
<artifactid>exec-maven-plugin</artifactid>
<version>1.2.1</version>
<executions>
<execution>
<id>some-execution</id>
<phase>compile</phase>
<goals>
<goal>exec</goal>
</goals>
</execution>
</executions>
<configuration>
<executable>yo</executable>
</configuration>
</plugin>
Links
● webjars.org● yeoman.io● gruntjs.com● npmjs.org● karma-runner.github.io● npmjs.org
