Web Development Workflow: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
| Zeile 3: | Zeile 3: | ||
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 === | |
** 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 13: | ||
** live recompilation | ** live recompilation | ||
** live reload | ** live reload | ||
| − | + | === Javascript === | |
** Modules / Dependency management | ** Modules / Dependency management | ||
*** AMD modules | *** AMD modules | ||
Version vom 12. Juni 2013, 20:21 Uhr
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
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 (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
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
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.