This document discusses best practices for writing Meteor framework code, emphasizing the importance of style consistency and the use of linters like ESLint, JSHint, and JSCS to improve code quality. It provides guidelines on maintaining uniform code style, identifying and avoiding common coding mistakes, and utilizing tools for formatting assistance. The document also suggests gradual implementation of rules for better adherence to coding standards within teams.

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. 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. # 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. 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. L O O K AT Y O U R C O D E

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. I S I T L E G A L ? I S I T S T Y L I S H ?

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. • 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. 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. 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. T H E D Y N A M I C D U O
Style
CorrectnessFocus on
*100
*69
*number of rules

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. 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. AT O M . I O
A D D I N G L I N T E R S

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. 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. 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. Look, I found some code to fix my code!
$ npm install -g js-beautify
$ npm install -g esformatter

20. C O D E F I X E R S
# of settings*
Ease
of use
esformatter
Editorconfig
*6
*17
*286

21. Editorconfig to the rescue!

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. 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. 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. 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. 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

28. 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 !

29. 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