Workflow

How can we be efficient

Development Tools

Eco-System

+

Distribution

How do we package and deliver code

Considerations

• Transcompiling JavaScript: Babel, Traceur etc.
• JavaScript Transforms: ng-annotate etc.
• Bundling/Concatenation: combining of scripts and styles into multiple files
• Minification: scripts, styles and html
• Source Maps: for both scripts and styles
• CSS Preprocessor: Less, Sass, Stylus etc.
• Style Transforms: Autoprefixer, PostCSS etc.
• Cache Busting: renaming files with a hash to prevent incorrect caching
• Image Optimization
• Compiling Templates: Mustache or HandlebarsJS, Underscore, EJS, Jade etc.
• Copying Assets: html, fav icon etc.
• Watching for Changes
• Incremental Rebuild
• Clean Build: deleting all files at start or preferably cleaning up files as needed
• Injecting References: generating script and style tags that reference the bundled files
• Build Configurations: separate Dev, Test and Prod configuration, for example to not minify html in dev build
• Serve: running a development web server
• Running Tests
• Running JavaScript and CSS Linters: jshint, csslint etc.
• Dependencies: handle dependencies on npm and Bower packages, Browserfy etc.

CSS Preprocessing

Programming for stylesheets

Why?

• Nest your CSS instead of repeating your selectors when having to target child elements.
• Use variables instead of repeating identical values.
• Extend classes (apply the styles of a given class to other elements).
• Use Mixins (Mixins are reusable groups of code).
• Speed / Re-use

Testing

Development and Regression

CSS Regression

• Compare signed-off CSS layout against newly developed to identify differences
• Example: BackstopJS
  https://garris.github.io/BackstopJS/

Code Qualtiy

Standards and best practices

Scaffolding

• New projects based on standards
• Components; create a module within a project with all the required files and structure

Dependencies

How to manage 3rd party code

Depedency Types

• Development Process
• Application References

Key: automate as much as possible

JavaScript

Framework or not, style, future ...