Writing (Meteor) Code With Style

3,086 views

Published on

A talk on static code analysis tools such as jshint, jscs, and eslint and how to use them to write good (stylish) code. Also introducing tools to enforce using the correct style via editorconfig or js-beautify to minimize efforts to write good code.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,086
On SlideShare
0
From Embeds
0
Number of Embeds
47
Actions
Shares
0
Downloads
8
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Writing (Meteor) Code With Style

  1. 1. W R I T I N G ( M E T E O R ) C O D E W I T H S T Y L E M E C O D E P R E T T Y O N E D A Y T Template.linkList.helpers({ links: function() { return LinksCollection.find({}, { sort: { votes: -1 } }); } }); Template.linkList.events({ 'click button#show-more': function() { var newLimit = Session.get('linksLimit') + 10; Session.set('linksLimit', newLimit); } }); MeteoI.EetAo=s! { ,==LinC ) fLnction !=:t:) { cAecC! =:t:, { LID) StIing, teOt) StIing, c:tegoIy) StIing R ); if !!tAis.LseI0=) { tAIow new MeteoI./IIoI! YoL A:Me to Dogin ); R =:t:.tiEest:Ep + new .:te!); =:t:.Motes + (; =:t:.LseI0= + tAis.LseI0=; =:t:.cIe:toI + MeteoI.LseIs.fin=One! =:t:.LseI0= ).LseIn:Ee; IetLIn LinCs-­oDDection.inseIt! =:t: ); R, ,==Vote ) fLnction !=:t:) { cAecC! =:t:, { DinC0=) StIing R ); if !!tAis.LseI0=) { tAIow new MeteoI./IIoI! YoL A:Me to Dogin to ;e :;De to Mote foI DinCs ); R =:t:.LseI0= + tAis.LseI0=; '' cAecC if LseI Mote= :DIe:=y if !LinCs-­oDDection.fin=! { _i=) =:t:.DinC0=, MoteIs) =:t:.LseI0= R ).coLnt!) +++ () { IetLIn LinCs-­oDDection.Lp=:te! Meteor.publish('links', function (options) { console.log(options); check(options, { linksLimit: Number }); var qryOptions = { limit: options.linksLimit, sort: { votes: -1 } }; console.log(qryOptions); return LinksCollection.find({}, qryOptions); Meteor.publish('categories', function () { return CategoriesCollection.find({}, { sort: { name: 1 } }); }); Router.route ( '/new', { name: 'new', subscriptions: function () { return Meteor.subscribe ( 'categories }, onBeforeAction: function () { if (!Meteor.userId ()) { this.render ( 'loginRequest' ); } else { this.next (); } }, action: function () { if (this.ready ()) { this.render ( 'addLink' ); } else { this.render ( 'Loading categories' } }, data: function () { return { categories: CategoriesCollehttps://github.com/yauh/meteor-with-style
  2. 2. S T E P H A N H O C H H A U S @ YA U H W H O A R E Y O U ? Being a style icon
  3. 3. # 1 Q U A L I T Y # 2 U N D E R S TA N D I N G # 3 S C A L I N G W H Y TA L K A B O U T S T Y L E ?
  4. 4. R E M E M B E R G O T O FA I L ? { ... if ((err = SSLHashSHA1.update(&hashCtx, &serverRandom)) != 0) goto fail; if ((err = SSLHashSHA1.update(&hashCtx, &signedParams)) != 0) goto fail; goto fail; if ((err = SSLHashSHA1.final(&hashCtx, &hashOut)) != 0) goto fail; ... fail: SSLFreeBuffer(&signedHashes); SSLFreeBuffer(&hashCtx); return err; } http://opensource.apple.com/source/Security/Security-55471/libsecurity_ssl/lib/sslKeyExchange.c
  5. 5. L O O K AT Y O U R C O D E
  6. 6. N O W A S K Y O U R S E L F T W O Q U E S T I O N S
  7. 7. I S I T L E G A L ? I S I T S T Y L I S H ?
  8. 8. P O I N T O U T S U S P I C I O U S C O D E A V O I D S T U P I D E R R O R S - L I N E S A F T E R A R E T U R N
  9. 9. • Missing semicolons • if, for, while without curly braces • Curly braces without if, for, while • Unreachable code after a return, throw, continue, or break • switch/case statements without break • Comments within comments. • Ambiguity whether two adjacent lines are part of the same statement. • Unnecessary code • … L O O K F O R
  10. 10. M A I N TA I N U N I F O R M S T Y L E C O N S I S T E N T LY U S I N G 2 S PA C E S , N O TA B S
  11. 11. A = B + 1 N O T A = B + 1 F U N C T I O N ( A , B , C ) { R E T U R N 1 ; } N O T F U N C T I O N ( A , B , C ) { R E T U R N 1 ; } F O R ( I = 0 ; I < 3 ; I + + ) N O T F O R ( I = 0 ; I < 3 ; I + + ) A ( 1 , 2 , 3 ) N O T A ( 1 , 2 , 3 ) { A : 1 , B : 2 } N O T { A : 1 , B : 2 } I F ( A ) N O T I F ( A ) … D O M I N A T I N G S T Y L E
  12. 12. T H E D Y N A M I C D U O Style CorrectnessFocus on *100 *69 *number of rules
  13. 13. T H E D Y N A M I C D U O + T H E N E W K I D Style CorrectnessFocus on ESLint *146 *100 *69 *number of rules
  14. 14. N P M A D D I N G L I N T E R S $ npm install -g jshint $ npm install -g jscs $ npm install -g eslint
  15. 15. AT O M . I O A D D I N G L I N T E R S
  16. 16. B U T W H Y W O U L D Y O U ? You can have as many linters as you like
  17. 17. W H AT ’ S W R O N G W I T H M Y C O D E ? S TA R T S M A L L A N D I N T R O D U C E R U L E S A S N E E D E D
  18. 18. P L U G G A B L E A R C H I T E C T U R E & C U S T O M R U L E S T H I S I S J U S T T H E T I P O F T H E M O U N TA I N
  19. 19. Look, I found some code to fix my code! $ npm install -g js-beautify $ npm install -g esformatter
  20. 20. C O D E F I X E R S # of settings* Ease of use esformatter Editorconfig *6 *17 *286
  21. 21. Editorconfig to the rescue!
  22. 22. AT O M . I O A D D I N G F O R M A T T I N G H E L P E R S
  23. 23. C O N F I G U R I N G T H E T O O L S T H E P O W E R O F T H E I N V I S I B L E
  24. 24. T L ; D L • Write code that • is valid JavaScript • uses the same style across the team • Use tools to support the writing process • editorconfig • js-beautify • Use ESLint to check style adherence and slowly introduce rules
  25. 25. E V E N T U A L LY C O N T I N U O U S I N T E G R A T I O N
  26. 26. E V E N T U A L LY C O N T I N U O U S I N T E G R A T I O N
  27. 27. W H AT A B O U T C O F F E E ? U S E C O F F E E L I N T !
  28. 28. F U R T H E R R E A D I N G • https://github.com/meteor/meteor/wiki/Meteor-Style- Guide • http://jsbeautifier.org/ • http://davidwalsh.name/eslint

×