Writing (Meteor) Code With Style

3.145 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Technologie
0 Kommentare
3 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
3.145
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
49
Aktionen
Geteilt
0
Downloads
8
Kommentare
0
Gefällt mir
3
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

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

×