Web Development Workflow: Unterschied zwischen den Versionen

Aus Open Source Ecology - Germany
Zur Navigation springen Zur Suche springen
Zeile 26: Zeile 26:
 
* In-Browser Devtools
 
* 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])
 
** 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
  
 
==Others==
 
==Others==

Version vom 12. Juni 2013, 20:05 Uhr

Javascript Development Workflow of 2013

Video: Javascript Development Workflow of 2013 by Paul Irish (PDF)

  • A Baseline for Front-End Developers
  • 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

Others