Web Development Workflow: Unterschied zwischen den Versionen

Aus Open Source Ecology - Germany
Zur Navigation springen Zur Suche springen
 
(6 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 5: Zeile 5:
 
** [https://gist.github.com/jonkemp/2713513 URL's from Paul Irish's talk: 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/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==
 
==Design Workflow==
Zeile 27: Zeile 28:
 
=== HTML ===
 
=== HTML ===
 
* [https://code.google.com/p/zen-coding/ Zen Coding]
 
* [https://code.google.com/p/zen-coding/ Zen Coding]
−
* [http://emmet.io/ Emmet]
+
* [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 ===
 
=== CSS ===
Zeile 79: Zeile 81:
  
 
=== Build System ===
 
=== 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 ===
 
=== 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]
+
see [[Grunt]].
−
** cd <your_project>
+
 
−
** npm install -g grunt-cli
+
===Bower===
−
** touch package.json Gruntfile.js
+
see [[Bower]]
−
** npm install grunt --save-dev
 
−
* [http://www.anujgakhar.com/2013/02/28/writing-a-simple-grunt-task-using-gruntjs/ concatenate and minify your Javascript and CSS source files]
 
−
* https://npmjs.org/package/grunt-frontend - minify CSS and JS
 
−
* [https://npmjs.org/package/grunt-contrib-jade grunt-contrib-jade] - compiles [http://jade-lang.com/ Jade] html language
 
−
** [https://github.com/visionmedia/jade#readme-contents Jade Readme Contents]
 
−
** npm install grunt-contrib-jade --save-dev
 
−
* [https://github.com/mihaifm/simplemon simplemon] - Simple file monitor that executes commands whenever a file change occurs
 
−
** simplemon -O jade html_templates jade_templates
 
−
* http://livereload.com/
 
−
** https://github.com/gruntjs/grunt-contrib-livereload
 
−
*** Dependency: npm install grunt-contrib-connect https://npmjs.org/package/grunt-contrib-connect
 
  
 
=== Others ===
 
=== Others ===
Zeile 112: Zeile 108:
 
* Revs asset paths for caching
 
* Revs asset paths for caching
 
* Affirm code quality
 
* 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 ===
 
=== After Deployment ===

Aktuelle Version vom 24. August 2013, 20:21 Uhr

Overview of Tools

Design Workflow

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

HTML

CSS

Icons

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

Issues

Grunt

see Grunt.

Bower

see Bower

Others

  • Resolve your dependency chain
  • concatenate
  • compile
  • flatten your CSS @imports
  • Minify
  • Beautify Javascript:
  • Remove debugging statements
  • Compress images
  • 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

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

Abgerufen von „https://wiki.opensourceecology.de/index.php?title=Web_Development_Workflow&oldid=10245“