Web Development Workflow: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
(58 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
Zeile 1: | Zeile 1: | ||
+ | |||
+ | ==Overview of Tools== | ||
+ | * [https://secure.flickr.com/photos/kejun/6988320204/ Tooling in the web app development lifecycle] | ||
+ | * [https://gist.github.com/jonkemp/2713513 Tooling & the Webapp Development Stack] | ||
+ | ** [https://gist.github.com/jonkemp/2713513 URL's from Paul Irish's talk: Tooling & The Webapp Development Stack] | ||
+ | * [https://speakerdeck.com/roka/frontend-development-then-now-and-the-future Frontend development – then, now and the future] ([http://lecture2go.uni-hamburg.de/veranstaltungen/-/v/15109;jsessionid=EC7B6F2B9C8B73EBADA202B35DA90F41 presentation]) | ||
+ | * [https://speakerdeck.com/chriscoyier/a-modern-web-designers-workflow A Modern Web Designer's Workflow by chriscoyier] | ||
+ | |||
+ | ==Design Workflow== | ||
+ | * [http://www.smashingmagazine.com/2013/06/25/workflow-design-develop-modern-portfolio-website/ My (Simple) Workflow To Design And Develop A Portfolio Website] | ||
==Javascript Development Workflow of 2013== | ==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]) | 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] | * [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/ | ** Shell customizations: http://dotfiles.github.io/ | ||
** Faves: [https://github.com/rupa/z z script] (for jumping), server alias | ** Faves: [https://github.com/rupa/z z script] (for jumping), server alias | ||
− | * Editor | + | ** Siehe [[Terminal]]. |
+ | |||
+ | === Editor === | ||
** learn it well, most important | ** learn it well, most important | ||
** Code linting is your first unit test. | ** Code linting is your first unit test. | ||
Zeile 13: | Zeile 25: | ||
** live recompilation | ** live recompilation | ||
** live reload | ** live reload | ||
− | * Javascript | + | |
+ | === HTML === | ||
+ | * [https://code.google.com/p/zen-coding/ Zen Coding] | ||
+ | * [http://emmet.io/ Emmet] [http://docs.emmet.io/cheat-sheet/ Emmet Cheat Sheet] | ||
+ | ** [http://hub.tutsplus.com/tutorials/build-bootstrap-in-minutes-using-emmet--webdesign-14585 Emme and Bootstrap] | ||
+ | |||
+ | === CSS === | ||
+ | ==== Icons ==== | ||
+ | * http://fortawesome.github.io/Font-Awesome/ | ||
+ | * http://fontcustom.com/ | ||
+ | |||
+ | === Images === | ||
+ | * Sprites | ||
+ | ** [http://yostudios.github.io/Spritemapper/ Spritemapper] | ||
+ | ** [http://glue.readthedocs.org/en/latest/quickstart.html Glue] | ||
+ | ** [http://csssprites.org/ SmartSprites] - with Eclipse plugin. | ||
+ | ** [https://npmjs.org/package/grunt-spritesmith grunt-spritesmith] | ||
+ | |||
+ | === Javascript === | ||
** Modules / Dependency management | ** Modules / Dependency management | ||
*** AMD modules | *** AMD modules | ||
Zeile 23: | Zeile 53: | ||
*** Custom build output based on build-time forks. ([http://requirejs.org/docs/optimization.html#hasjs require.js optimizier]) | *** 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]) | *** 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 & [http://www.browserstack.com/ 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 | ||
+ | *** [http://devtoolsecrets.com/ Secrets of the Browser Developer Tools] | ||
+ | *** [https://developers.google.com/chrome-developer-tools/docs/authoring-development-workflow Chrome DevTools - Authoring & development workflow] | ||
+ | ** 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 | ||
+ | * http://opendevicelab.com/ | ||
+ | |||
+ | === Build System === | ||
+ | |||
+ | ===Issues=== | ||
+ | * [https://github.com/necolas/issue-guidelines/blob/master/CONTRIBUTING.md Example of Guidelines for contributing an Issue at GitHub] | ||
+ | * Create a [http://css-tricks.com/reduced-test-cases/ Reduced Test Cases] | ||
+ | |||
+ | === Grunt === | ||
+ | see [[Grunt]]. | ||
+ | |||
+ | ===Bower=== | ||
+ | see [[Bower]] | ||
+ | |||
+ | === Others === | ||
+ | * Resolve your dependency chain | ||
+ | * concatenate | ||
+ | * compile | ||
+ | * flatten your CSS @imports | ||
+ | * Minify | ||
+ | ** Online: http://refresh-sf.com/yui/ | ||
+ | * Beautify Javascript: | ||
+ | ** Online: http://jsbeautifier.org/ | ||
+ | * Remove debugging statements | ||
+ | * Compress images | ||
+ | ** Online: http://tinypng.org/ | ||
+ | * Precompile templates | ||
+ | * Run tests in a variety of environments | ||
+ | * Revs asset paths for caching | ||
+ | * Affirm code quality | ||
+ | |||
+ | ==Front-End Development Workflow== | ||
+ | * [http://www.gpmd.co.uk/blog/front-end-process-flat-builds-and-automation-part-1-introduction/ Front-end Process - Flat Builds and Automation, Part 1: Introduction] | ||
+ | |||
+ | === After Deployment === | ||
+ | ==== Client-Side Error Tracking ==== | ||
+ | * [http://errorception.com/ errorception] | ||
+ | |||
+ | ===Projects to check out=== | ||
+ | * [https://npmjs.org/package/modjs modjs] | ||
+ | * [http://gruntjs.com/ Grunt] | ||
+ | ** http://merrickchristensen.com/articles/gruntjs-workflow.html | ||
+ | * [http://livereload.com/ LiveReload] | ||
+ | * Shadow | ||
+ | * CodeKit | ||
+ | * [http://brunch.io/ 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. | ||
+ | |||
+ | ==IDEs== | ||
+ | * [[Aptana Studio]] | ||
==Others== | ==Others== | ||
* [https://dl.dropboxusercontent.com/u/39519/talks/jsconf-tools/index.html JavaScript Tooling JSConf. April 2nd. Paul Irish. ] | * [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://www.joezimjs.com/javascript/optimize-your-workflow-javascript-tools-and-libraries/ Optimize Your Workflow: JavaScript Tools and Libraries] | ||
+ | * [http://custardbelly.com/blog/2012/02/07/current-workflow-developing-linting-testing-and-distributing-javascript/ Current Workflow: Developing, Linting, Testing and Distributing JavaScript] | ||
* [http://drublic.de/blog/yeoman/ Yeoman – Level-up Your Daily Workflow] | * [http://drublic.de/blog/yeoman/ Yeoman – Level-up Your Daily Workflow] | ||
** [https://www.youtube.com/watch?v=Hl1sp9axHEY Yeoman with Addy Osmani] | ** [https://www.youtube.com/watch?v=Hl1sp9axHEY Yeoman with Addy Osmani] | ||
− | + | ==Stay Up to Date== | |
+ | * http://uptodate.frontendrescue.org/#addy-osmani | ||
+ | * [http://www.smashingmagazine.com/2012/12/22/talks-to-help-you-become-a-better-front-end-engineer-in-2013/ Talks To Help You Become A Better Front-End Engineer In 2013] | ||
[[Category: Software]] | [[Category: Software]] |
Aktuelle Version vom 24. August 2013, 20:21 Uhr
Overview of Tools
- Tooling in the web app development lifecycle
- Tooling & the Webapp Development Stack
- Frontend development – then, now and the future (presentation)
- A Modern Web Designer's Workflow by chriscoyier
Design Workflow
Javascript Development Workflow of 2013
Video: Javascript Development Workflow of 2013 by Paul Irish (PDF)
Shell
- Shell customizations: http://dotfiles.github.io/
- Faves: z script (for jumping), server alias
- Siehe Terminal.
Editor
- learn it well, most important
- Code linting is your first unit test.
- Realtime Feedback
- live linting
- live recompilation
- live reload
HTML
CSS
Icons
Images
- Sprites
- Spritemapper
- Glue
- SmartSprites - with Eclipse plugin.
- grunt-spritesmith
Javascript
- Modules / Dependency management
- AMD modules
- CommonJS modules
- ECMAScript Harmony modules
- Minispade require (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. (require.js optimizier)
- More module magic from Alex Sexton (MVC MODULE MAGIC)
- Modules / Dependency management
- Package Management - cooming soon.
- In-Browser Devtools
- sourceURL (Source Mapping, 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
- Test in Chrome
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
- bunyip -f test/index.html
- In multiple browsers in the cloud via cmd line (e.g. with BrowserStack)
- bunyip -f test/index.html -b ios
- http://opendevicelab.com/
Build System
Issues
Grunt
see Grunt.
Bower
see Bower
Others
- Resolve your dependency chain
- concatenate
- compile
- flatten your CSS @imports
- Minify
- Online: http://refresh-sf.com/yui/
- Beautify Javascript:
- Online: http://jsbeautifier.org/
- Remove debugging statements
- Compress images
- Online: http://tinypng.org/
- Precompile templates
- Run tests in a variety of environments
- Revs asset paths for caching
- Affirm code quality
Front-End Development Workflow
After Deployment
Client-Side Error Tracking
Projects to check out
- modjs
- 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.
IDEs
Others
- JavaScript Tooling JSConf. April 2nd. Paul Irish.
- Optimize Your Workflow: JavaScript Tools and Libraries
- Current Workflow: Developing, Linting, Testing and Distributing JavaScript
- Yeoman – Level-up Your Daily Workflow