Web Development Workflow: Unterschied zwischen den Versionen

Aus Open Source Ecology - Germany
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 ===
 
** 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:
+
=== 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
+
=== 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

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)
  • Package Management - cooming soon.
  • In-Browser Devtools
  • 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
      • In multiple browsers via cmd line
      • 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.

Others