Дмитрий Щадей "Что помогает нам писать качественный JavaScript-код?"
1 like1,429 views
The document discusses best practices for writing high-quality JavaScript, emphasizing code review, collective ownership, and using pull requests for collaboration. It highlights tools such as static code analysis and the importance of adhering to style guides. Key techniques shared include pre-commit hooks for jshint integration and maintaining project organization through version control workflows.
![- usage example
/*jshint unused: true, es5: false, undef: true */!
!
var foo = { ! !<< Defined but never used!
! !a: 1, !!
! !b: 2, ! !<< Extra comma!
!}, super,! !<< Reserved word!
!nums = {}; !!
!
for (i = 0; i < 10; i++) { << Not defined!
!nums[i] = function (j) {
! !return i + j;
!}; ! ! ! !<< Functions within a loop!
!
}!
9](https://image.slidesharecdn.com/rigaaprshchadei-130410142801-phpapp02/85/JavaScript-9-320.jpg)
Дмитрий Щадей "Что помогает нам писать качественный JavaScript-код?"
- 1. What helps us to write HQ JS? Yandex DevDay, Riga 2013
- 2. HELLO RIGA♥ I’M DMITRII SHCHADEI @ MeTroFuN 2
- 3. Code review Many eyes see what one alone cannot Grand Master Yoda
- 4. So, why does it work? • Collective code ownership – Decrease the bus factor – Increase code reuse • Skills exchange • The Ego Effect 4
- 5. • Pre and post commit • Version control agnostic • Lots of features – progress meter – jira integration – statistics 5
- 6. using Pull Requests • That’s FREE* • Pre commits only • No git-flow, Yes github-flow 6
- 7. makes you better at GitHub # install on OS X ! $ port install hub! ! # alias it as git ! $ alias git=hub! ! # open a pull request for a branch, put its URL to the clipboard! $ git push -u origin feature ! $ git pull-request | pbcopy! ! # put compare URL for a topic branch to clipboard ! $ git compare -u feature | pbcopy! ! # see the current project's issues! $ git browse --issues! 7
- 8. Static code analysis Mistakes are always easy to see in retrospect Obi-Wan Kenobi
- 9. - usage example /*jshint unused: true, es5: false, undef: true */! ! var foo = { ! !<< Defined but never used! ! !a: 1, !! ! !b: 2, ! !<< Extra comma! !}, super,! !<< Reserved word! !nums = {}; !! ! for (i = 0; i < 10; i++) { << Not defined! !nums[i] = function (j) { ! !return i + j; !}; ! ! ! !<< Functions within a loop! ! }! 9
- 10. for style guides • Max number of – line length – function params – function statements – nested blocks depth • Tab width and whitespaces • Quotation marks and lots of other cool staff…
- 11. Force to use… HOOK PRE-COMMIT #!/bin/sh –e! case "${1}" in! !--about ) ! ! !echo "check *.js files using jshint";;! !* ) ! !for FILE in $(git diff --cached --diff-filter=ACMTR -- name-only HEAD | grep -e '.js$'); do! ! !echo jshint $FILE ! ! !jshint $FILE ! !done;;! esac! 11
- 12. - bonus track =) .column {!! !display: inline-block;! !width: 50%;! !*width: 49%; ! ! !<< Star prefix found! ! !font-size: 11px;! !background: rgba(0,0,0,0.5); !<< Fallback should precede ! !position: relative;! !float: left; !<< Can't be used with display: inline-block! ! }! .column * { ! ! ! ! !<< Is known to be slow !display: inline;! !color: black !important;! ! !<< Use of !important! !font-weight: bold; !! !color: red; ! !<< Duplicate property! !-moz-user-select: none; !<< include -ms-user-select ! !-webkit-user-select: none;! }! 12
- 13. SUFFER THE PAIN OF DISCIPLINE OR SUFFER THE PAIN OF REGRET 13
- 14. That’s all, Any Questions? 14 @ MeTroFuN