Web Development Workflow: Unterschied zwischen den Versionen

Aus Open Source Ecology - Germany
Zur Navigation springen Zur Suche springen
Zeile 65: Zeile 65:
  
 
=== Build System ===
 
=== Build System ===
* Grunt
+
=== Grunt ===
 
** [http://gruntjs.com/getting-started Getting Started with Grunt], [http://stackoverflow.com/a/15712530/2510374 How to install grunt and how to built script with it]
 
** [http://gruntjs.com/getting-started Getting Started with Grunt], [http://stackoverflow.com/a/15712530/2510374 How to install grunt and how to built script with it]
 
*** cd <your_project>
 
*** cd <your_project>
 
*** npm install -g grunt-cli
 
*** npm install -g grunt-cli
 
*** touch package.json Gruntfile.js
 
*** touch package.json Gruntfile.js
 +
*** npm install grunt --save-dev
 
** [https://npmjs.org/package/grunt-contrib-jade grunt-contrib-jade]
 
** [https://npmjs.org/package/grunt-contrib-jade grunt-contrib-jade]
 
*** [https://github.com/visionmedia/jade#readme-contents Jade Readme Contents]
 
*** [https://github.com/visionmedia/jade#readme-contents Jade Readme Contents]

Version vom 23. Juni 2013, 21:18 Uhr

Overview of Tools

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

Images

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

Build System

Grunt

After Deployment

Client-Side Error Tracking

Projects to check out

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

Stay Up to Date