Web Development Workflow: Unterschied zwischen den Versionen

Aus Open Source Ecology - Germany
Zur Navigation springen Zur Suche springen
 
(67 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
−
* 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]
+
==Overview of Tools==
−
** Shell:
+
* [https://secure.flickr.com/photos/kejun/6988320204/ Tooling in the web app development lifecycle]
−
*** Shell customizations: http://dotfiles.github.io/
+
* [https://gist.github.com/jonkemp/2713513 Tooling & the Webapp Development Stack]
−
*** Faves: [https://github.com/rupa/z z script] (for jumping), server alias
+
** [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/chriscoyier/a-modern-web-designers-workflow A Modern Web Designer's Workflow by chriscoyier]
 +
 
 +
==Design Workflow==
 +
* [http://www.smashingmagazine.com/2013/06/25/workflow-design-develop-modern-portfolio-website/ My (Simple) Workflow To Design And Develop A Portfolio Website]
 +
 
 +
==Javascript Development Workflow of 2013==
 +
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]
 +
=== Shell ===
 +
** Shell customizations: http://dotfiles.github.io/
 +
** Faves: [https://github.com/rupa/z z script] (for jumping), server alias
 +
** Siehe [[Terminal]].
 +
 
 +
=== Editor ===
 +
** learn it well, most important
 +
** Code linting is your first unit test.
 +
* Realtime Feedback
 +
** live linting
 +
** live recompilation
 +
** live reload
 +
 
 +
=== HTML ===
 +
* [https://code.google.com/p/zen-coding/ Zen Coding]
 +
* [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 ===
 +
==== Icons ====
 +
* http://fortawesome.github.io/Font-Awesome/
 +
* http://fontcustom.com/
 +
 
 +
=== Images ===
 +
* Sprites
 +
** [http://yostudios.github.io/Spritemapper/ Spritemapper]
 +
** [http://glue.readthedocs.org/en/latest/quickstart.html Glue]
 +
** [http://csssprites.org/ SmartSprites] - with Eclipse plugin.
 +
** [https://npmjs.org/package/grunt-spritesmith grunt-spritesmith]
 +
 
 +
=== Javascript ===
 +
** Modules / Dependency management
 +
*** AMD modules
 +
*** CommonJS modules
 +
*** ECMAScript Harmony modules
 +
*** Minispade require ([https://github.com/emberjs/ember.js/blob/80d37171709f213bd16ed5646e3d5c7aeef8c5ec/packages/ember-views/lib/views/states/default.js 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. ([http://requirejs.org/docs/optimization.html#hasjs require.js optimizier])
 +
*** More module magic from Alex Sexton ([http://alexsexton.com/talks/backboneconf2012/#/ MVC MODULE MAGIC])
 +
* Package Management - cooming soon.
 +
* 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])
 +
** source maps - full live debugging on source files with Chrome Dev tools.
 +
** Navigating scripts
 +
* Mobile
 +
** Test in Chrome
 +
*** Emulate touches, override device metrics
 +
** Emulators & [http://www.browserstack.com/ 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
 +
*** [http://devtoolsecrets.com/  Secrets of the Browser Developer Tools]
 +
*** [https://developers.google.com/chrome-developer-tools/docs/authoring-development-workflow Chrome DevTools - Authoring & development workflow]
 +
** 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
 +
*** [https://github.com/ryanseddon/bunyip bunyip] -f test/index.html
 +
** In multiple browsers ''in the cloud'' via cmd line (e.g. with BrowserStack)
 +
*** [https://github.com/ryanseddon/bunyip bunyip] -f test/index.html -b ios
 +
* http://opendevicelab.com/
 +
 
 +
=== 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 ===
 +
see [[Grunt]].
 +
 
 +
===Bower===
 +
see [[Bower]]
 +
 
 +
=== Others ===
 +
* Resolve your dependency chain
 +
* concatenate
 +
* compile
 +
* flatten your CSS @imports
 +
* Minify
 +
** Online: http://refresh-sf.com/yui/
 +
* Beautify Javascript:
 +
** Online: http://jsbeautifier.org/
 +
* Remove debugging statements
 +
* Compress images
 +
** Online: http://tinypng.org/
 +
* Precompile templates
 +
* Run tests in a variety of environments
 +
* Revs asset paths for caching
 +
* 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 ===
 +
==== Client-Side Error Tracking ====
 +
* [http://errorception.com/ errorception]
 +
 
 +
===Projects to check out===
 +
* [https://npmjs.org/package/modjs modjs]
 +
* [http://gruntjs.com/ Grunt]
 +
** http://merrickchristensen.com/articles/gruntjs-workflow.html
 +
* [http://livereload.com/ LiveReload]
 +
* Shadow
 +
* CodeKit
 +
* [http://brunch.io/ 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.
 +
 
 +
==IDEs==
 +
* [[Aptana Studio]]
 +
 
 +
==Others==
 
* [https://dl.dropboxusercontent.com/u/39519/talks/jsconf-tools/index.html JavaScript Tooling JSConf. April 2nd. Paul Irish. ]
 
* [https://dl.dropboxusercontent.com/u/39519/talks/jsconf-tools/index.html JavaScript Tooling JSConf. April 2nd. Paul Irish. ]
 
* [http://www.joezimjs.com/javascript/optimize-your-workflow-javascript-tools-and-libraries/ Optimize Your Workflow: JavaScript Tools and Libraries]
 
* [http://www.joezimjs.com/javascript/optimize-your-workflow-javascript-tools-and-libraries/ Optimize Your Workflow: JavaScript Tools and Libraries]
 +
* [http://custardbelly.com/blog/2012/02/07/current-workflow-developing-linting-testing-and-distributing-javascript/ Current Workflow: Developing, Linting, Testing and Distributing JavaScript]
 
* [http://drublic.de/blog/yeoman/ Yeoman – Level-up Your Daily Workflow]
 
* [http://drublic.de/blog/yeoman/ Yeoman – Level-up Your Daily Workflow]
 
** [https://www.youtube.com/watch?v=Hl1sp9axHEY Yeoman with Addy Osmani]
 
** [https://www.youtube.com/watch?v=Hl1sp9axHEY Yeoman with Addy Osmani]
  
−
 
+
==Stay Up to Date==
 +
* http://uptodate.frontendrescue.org/#addy-osmani
 +
* [http://www.smashingmagazine.com/2012/12/22/talks-to-help-you-become-a-better-front-end-engineer-in-2013/ Talks To Help You Become A Better Front-End Engineer In 2013]
  
  
 
[[Category: Software]]
 
[[Category: Software]]

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“