Quelltext der Seite Web Development Workflow


==Javascript Development Workflow of 2013==
Video: [http://www.youtube.com/watch?v=f7AU2Ozu8eo Javascript Development Workflow of 2013] by [http://www.paulirish.com/ Paul Irish] ([http://cdn.oreillystatic.com/en/assets/1/event/83/Javascript%20Development%20Workflow%20of%202013%20Presentation.pdf PDF])
* [http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/ A Baseline for Front-End Developers]
* Shell:
** Shell customizations: http://dotfiles.github.io/
** Faves: [https://github.com/rupa/z z script] (for jumping), server alias
* Editor:
** learn it well, most important
** Code linting is your first unit test.
* Realtime Feedback
** live linting
** live recompilation
** live reload
* Javascript
** Modules / Dependency management
*** AMD modules
*** CommonJS modules
*** ECMAScript Harmony modules
*** Minispade require ([https://github.com/emberjs/ember.js/blob/80d37171709f213bd16ed5646e3d5c7aeef8c5ec/packages/ember-views/lib/views/states/default.js ember.js example])
** Tricks:
*** Template precompilation - into functions in a build step and ship the compiled templates.
*** Custom build output based on build-time forks. ([http://requirejs.org/docs/optimization.html#hasjs require.js optimizier])
*** More module magic from Alex Sexton ([http://alexsexton.com/talks/backboneconf2012/#/ MVC MODULE MAGIC])
* Package Management - cooming soon.
* In-Browser Devtools
** sourceURL ([http://www.thecssninja.com/javascript/source-mapping Source Mapping], [http://www.thecssninja.com/demo/source_mapping/compile.html Source Mapping Compile Demo])
** source maps - full live debugging on source files with Chrome Dev tools.
** Navigating scripts
* Mobile
** Test in Chrome
*** Emulate touches, override device metrics
** Emulators & Browserstack
** Real device & Adobe Shadow
** Chrome on Android w/ DevTools
=== Testing ===
** Jasmin, QUnit or Mocha
** Execute tests in a variety of settings:
*** In the Browser
*** In a headless browser on-demand via cmd line
*** In a headless browser post-push. Continuous Integration
**** https://travis-ci.org/ - on every commit - test.
*** In multiple browsers via cmd line
**** [https://github.com/ryanseddon/bunyip bunyip] -f test/index.html
*** In multiple browsers ''in the cloud'' via cmd line (e.g. with BrowserStack)
**** [https://github.com/ryanseddon/bunyip bunyip] -f test/index.html -b ios

=== Build System ===
* Use Grunt!
* Resolve your dependency chain
* concatenate
* compile
* flatten your CSS @imports
* Remove debugging statements
* Compress images
* Precompile templates
* Run tests in a variety of environments
* Revs asset paths for caching
* Affirm code quality

=== After Deployment ===
==== Client-Side Error Tracking ====
* [http://errorception.com/ errorception]

===Projects to check out===
* Grunt
* LiveReload
* Shadow
* CodeKit
* Brunch - recompiler
* WebStorm - unit testing, ...

===Principles===
* DRY - Don't Repeat Yourself
** don't type ./build.sh everytime you save a file
** don't ftp everytime up you update the site's release branch.
* Learn from other developers.
* Share what you've learned.

==Others==
* [https://dl.dropboxusercontent.com/u/39519/talks/jsconf-tools/index.html JavaScript Tooling JSConf. April 2nd. Paul Irish. ]
* [http://www.joezimjs.com/javascript/optimize-your-workflow-javascript-tools-and-libraries/ Optimize Your Workflow: JavaScript Tools and Libraries]
* [http://drublic.de/blog/yeoman/ Yeoman – Level-up Your Daily Workflow]
** [https://www.youtube.com/watch?v=Hl1sp9axHEY Yeoman with Addy Osmani]




[[Category: Software]]