Writing (Meteor) Code With Style

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

TeEpD:te.DinC.eMents!{ cDicC ;Ltton.;tn-=:ngeI ) fLnction!eMt) { '' =eDete DinC eMt.pIeMent.ef:LDt!); MeteoI.c:DD! ReEoMeLinC , { DinC0=) tAis._i= R, fLnction!eIIoI) {

if !eIIoI) { IetLIn :DeIt! /IIoI) + eIIoI.eIIoI); R eDse { consoDe.Dog! ye:A, =eDete= );

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! =:t:.DinC0=,

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: CategoriesCollection.find () }; }

https://github.com/yauh/meteor-with-style

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

# 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 ?

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

http://opensource.apple.com/source/Security/Security-55471/libsecurity_ssl/lib/sslKeyExchange.c

L O O K AT Y O U R C O D E

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

I S I T L E G A L ? I S I T S T Y L I S H ?

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

• 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

M A I N TA I N U N I F O R M S T Y L EC 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

A = B + 1 N O T

A=B+1

FUNCTION (A, B, C) { RETURN 1; } N O T

FUNCTION(A,B,C) {RETURN 1;}

FOR (I = 0; I < 3; I++) N O T

FOR(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}

IF (A) N O T IF(A)

…

D O M I N A T I N G S T Y L E

T H E D Y N A M I C D U O

Style

CorrectnessFocus on

*100

*69

*number of rules

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

N P MA D D I N G L I N T E R S

$ npm install -g jshint

$ npm install -g jscs

$ npm install -g eslint

AT O M . I OA D D I N G L I N T E R S

B U T W H Y W O U L D Y O U ?

You can have as many linters as you like

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

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

Look, I found some code to fix my code!

$ npm install -g js-beautify $ npm install -g esformatter

C O D E F I X E R S

# of settings*

Ease of use

esformatter

Editorconfig*6

*17

*286

Editorconfig to the rescue!

AT O M . I OA D D I N G F O R M A T T I N G H E L P E R S

C O N F I G U R I N G T H E T O O L ST H E P O W E R O F T H E I N V I S I B L E

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

E V E N T U A L LYC O N T I N U O U S I N T E G R A T I O N

E V E N T U A L LYC O N T I N U O U S I N T E G R A T I O N

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 !

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

Technology

Writing (Meteor) Code With Style