"writing maintainable javascript". jon bretman, badoo

WRITING MAINTAINABLE

JAVASCRIPT Yet Another Conference 2013

@jonbretman

jonbretman.co.uk

Mobile Web Developer @ Badoo http://techblog.badoo.com

@BadooTech

http://habrahabr.ru/company/badoo @BadooDev

<!doctype html>!<html>! <head>! <title>My Awesome App</title>! <script src="App.js"></script>! </head>! <body>! </body>!</html>"

What is maintainability?

In engineering, maintainability is the ease with which a product can be maintained in order to...

h(p://en.wikipedia.org/wiki/Maintainability"

isolate defects or their cause

correct defects or their cause

prevent unexpected breakdowns

make future maintenance easier

It's about making our lives easier

It's about making our work pass the test of time

for(B=i=y=u=b=i=5-5,x=10,I=[],l=[];B++<304;I[B-1]=B%x?B/x%x<2|B%x<2?7:B/x&4?!0:l[i++]="ECDFBDCEAAAAAAAAIIIIIIIIMKLNJLKM@G@TSb~?A6J57IKJT576,+-48HLSUmgukgg " +!"OJNMLK IDHGFE".charCodeAt(y++)-64:7);function X(c,h,e,s){c^=8;for(var o,!S,C,A,R,T,G,d=e&&X(c,0)>1e4,n,N=-1e8,O=20,K=78-h<<9;++O<99;)if((o=I[T=O])&&!(G=o^c)<7){A=G--&2?8:4;C=o-9?l[61+G]:49;do if(!(R=I[T+=l[C]])&&!!G|A<3||!(R+1^c)>9&&G|A>2){if(!(R-2&7))return K;n=G|(c?T>29:T<91)?o:6^c;S=!(R&&l[R&7|32]*2-h-G)+(n-o?110:!G&&(A<2)+1);if(e>h||1<e&e==h&&S>2|d)!{I[T]=n;I[O]=0;S-=X(c,h+1,e,S-N);if(!(h||e-1|B-O|T-b|S<-1e4))return W(),!c&&setTimeout("X(8,0,2),X(8,0,1)",75);I[O]=o;I[T]=R}if(S>N||!h&S==N&&!Math.random()<.5)if(N=S,e>1)if(h?s-S<0:(B=O,b=T,0))break}while(!R&G>2||(T=O,!(G||A>2|(c?O>78:O<41)&!R)&&++C*--A))}return-K+768<N|d&&N}function W(){!i="<table>";for(u=18;u<99;document.body.innerHTML=i+=++u%x-9?!"<th width=60 height=60 onclick='I[b="+u+"]>8?W():X(0,0,1)'style='font-size:50px'bgcolor=#"!+(u-B?u*.9&1||9:"d")+"0f0e0>&#"+(I[u]?9808+l[67+I[u]]:160):u++&&"<tr>")B=b}W()"

h(p://js1k.com/2010Efirst/demo/750"

•  Mobile Web Team - 4 developers

•  Mobile Web Team - 4 developers •  JavaScript, jsDoc, JSHint, Closure Compiler, JsTestDriver

•  Mobile Web Team - 4 developers •  JavaScript, jsDoc, JSHint, Closure Compiler, JsTestDriver •  60,000+ lines of JavaScript

•  Mobile Web Team - 4 developers •  JavaScript, jsDoc, JSHint, Closure Compiler, JsTestDriver •  60,000+ lines of JavaScript •  ~500,000 daily active users

•  Mobile Web Team - 4 developers •  JavaScript, jsDoc, JSHint, Closure Compiler, JsTestDriver •  60,000+ lines of JavaScript •  ~500,000 daily active users •  Code maintainability is key!

var topics = [! 'Type Checking',! 'Classes and Inheritance’,! 'Asynchronous Code',! 'Performance'!];!" 19"

topics.shift();!"Type Checking" !

<!doctype html>!<html>! <head>! <title>My Awesome App</title>! <script src="App.js"></script>! </head>! <body>! </body>!</html>"

Api.get('/conversations', function (conversations) {!! var intros = conversations.map(function (c) {! var name = c.theirName;! var mostRecent = c.messages[0].text.substring(0, 30);! return name + ': ' + mostRecent;! });!! App.renderMessages(intros);!!});!

Api.get('/conversations', function (err, conversations) {!! var intros = conversations.map(function (c) {! var name = c.theirName;! var mostRecent = c.messages[0].text.substring(0, 30);! return name + ': ' + mostRecent;! });!! App.renderMessages(intros);!!});!A lot of things have to go right here

Exceptions

if (data.value) {! callback(data.value);!}!!!TypeError: Cannot read property 'value' of null !!!!!"""

if (data && data.callback) {! var result = data.callback();!}!!!TypeError: Property 'callback' of object #<Object> !is not a function""

if (data && data.value) {! var index = data.value.indexOf('something');!}!!!TypeError: Object #<Object> has no method ‘indexOf’!!!!!!""

typeof {};!"object" !!typeof 'hello';!"string" !!typeof 5;!"number” !

typeof function () {};!"function" !!typeof undefined;!"undefined" !!typeof true;!"boolean" !!

typeof [];!"object" !!typeof null;!"object" !!typeof new Date();!"object" !

typeof /jsconf/;!"object" !!typeof document.body; !"object" !!typeof NaN; !"number" !!

Object.prototype.toString()!!"

•  If the this value is undefined, return "[object Undefined]". !

•  If the this value is null, return "[object Null]". !

•  Let class be the value of the [[Class]] property of this. !

•  Let class be the value of the [[Class]] property of this.

•  Return the String value that is the result of concatenating

the three Strings "[object ", class, and "]". !

•  Let class be the value of the [[Class]] property of this.

•  Return the String value that is the result of concatenating

the three Strings "[object ", class, and "]". !

Function.prototype.call()!or!

Function.prototype.apply()!

var toString = Object.prototype.toString;!var regex = /\[object (.*?)\]/;!!var type = function (o) {! var match = toString.call(o).match(regex);! return match[1].toLowerCase();!};!

this === o"

type({});!"object" !!type('hello');!"string" !!type(5);!"number” !

type(function () {});!"function" !!type(undefined);!"undefined" !!type(true);!"boolean" !!

type([]);!"array" !!type(null);!"null" !!type(new Date());!"date" !

type(/jsconf/);!"regex" !!type(document.body);!"htmlbodyelement" !!type(NaN);!"number" !!

type([]); !"array" !!type(null); !"null" !!type(new Date()); !"date" !

type(/jsconf/); !"regex" !!type(document.body);!"htmlbodyelement" !!type(NaN);!"number" !!

Special case for DOM elements

Special case for NaN

Now what?

Api.get('/conversations', function (conversations) {!! if (type(conversations) !== 'array') {! App.renderMessages([]);! return;! }!! var intros = conversations.map(function (c) {!! if (type(c) !== 'object') {! return '';! }!! var name = type(c.theirName) === 'string' ? c.theirName : '';! var mostRecent = '';!! if (type(c.messages) === 'array' ||! type(c.messages[0]) === 'object' ||! type(c.messages[0].text) === 'string') {! mostRecent = c.messages[0].text.substring(0, 30);! }!! return name + ': ' + mostRecent;! });!! App.renderMessages(intros);!!});"

Api.get("/conversations",function(e){var t=e.map(function(e){var t=e.theirName;var n=e.messages[0].text.substring(0,30);return t+": "+n});App.renderMessages(t)})!!!!!!!!!!Api.get("/conversations",function(e){if(type(e)!=="array"){App.renderMessages([]);return}var t=e.map(function(e){if(type(e)!=="object"){return""}var t=type(e.theirName)==="string"?e.theirName:"";var n="";if(type(e.messages)==="array"||type(e.messages[0])==="object"||type(e.messages[0].text)==="string"){n=e.messages[0].text.substring(0,30)}return t+": "+n});App.renderMessages(t)})"

+ 137%

How does this help maintainability?

Prevents unexpected breakdowns

Prevents unexpected breakdowns Makes future maintenance easier

topics.shift();!"Classes and Inheritance" !

Why classes?

var Controller = {!! init: function () {! // do some initialization! },!! loadView: function () {!! }!!};!!// somewhere else in the app!Controller.init();!Controller.loadView();"

Feels messy

Not proper inheritance

What do we want?

class Controller {!!!

public Controller () {! // do some initialization! }!

!!! public void loadView () {!! !!! }!

!}!!class ChatController extends Controller {!

!!! public void loadView () {!! ! super.loadView();!! ! // do some additional stuff!! }!!!

}" 59"

class Controller {!! constructor () {! // do some initialization! }!! loadView () {!! }!!}!!class ChatController extends Controller {!! loadView () {! super.loadView();! // do some additional stuff! }!!}" 60"

class Controller!! constructor: () ->! # do some initialization!! loadView: () ->!!!class ChatController extends Controller!! loadView: () ->! super! # do some initialization"

var ChatController, Controller, _ref,! __hasProp = {}.hasOwnProperty,! __extends = function(child, parent) {! for (var key in parent) {! if (__hasProp.call(parent, key))! child[key] = parent[key];! }! function ctor() {! this.constructor = child;! }! ctor.prototype = parent.prototype;! child.prototype = new ctor();! child.__super__ = parent.prototype;! return child;! };!!Controller = (function() {! function Controller() {}! Controller.prototype.loadView = function() {};! return Controller;!})();!!ChatController = (function(_super) {! __extends(ChatController, _super);!! function ChatController() {! _ref = ChatController.__super__.constructor.apply(this, arguments);! return _ref;! }!! ChatController.prototype.loadView = function() {! return ChatController.__super__.loadView.apply(this, arguments);! };!! return ChatController;!})(Controller);" 62"

Utility method

Class Definitions

The magic bit

There is no such thing as magic.

Copy static properties / methods

Set up prototype chain

ECMAScript 5

Add shorthand to super

var controller = new Controller();!var chat = new ChatController();!!controller instanceof Controller; // true!!chat instanceof Controller; // true!chat instanceof ChatController; // true"

The rest is about good practice

Use getter and setter methods

alert(jon.name);!jon.name = 'John';!!!alert(jon.getName());!jon.setName('John');!jon.set('name', 'John');"

Define all properties on the prototype, even if they are null.

/**! * The persons age.! * @type {Number}! */!Person.prototype.age = null;"

Mark private methods with a leading or trailing underscore

// somethings are best kept private :)!Person.prototype._singInShower = function () {!!};"

Use static methods / properties

Person.prototype.EVENTS = {! WALK: 'WALK',! TALK: 'TALK'!};!!Person.EVENTS = {! WALK: 'WALK',! TALK: 'TALK'!};"

Correct defects or their causes

Correct defects or their causes Makes future maintenance easier

topics.shift();!"Asynchronous Code" !

The big question...

Callbacks or

Promises 84"

Promises •  Requires a library to provide the functionality

•  Different implementations •  jQuery Deferred api.jquery.com/category/deferred-object/ •  rsvp.js github.com/tildeio/rsvp.js •  when.js github.com/cujojs/when •  promise.js github.com/then/promise

Promises •  Requires a library to provide the functionality

•  Different implementations •  jQuery Deferred api.jquery.com/category/deferred-object/ •  rsvp.js github.com/tildeio/rsvp.js •  when.js github.com/cujojs/when •  promise.js github.com/then/promise

•  Kind of complicated… 87"

h(p://promisesEaplus.github.io/promisesEspec/"88"

But that must mean...

Callback Hell

load: function () {!! Api.get('/profile/own', _.bind(function (ownProfile) {!! this.ownProfile = ownProfile;!! Api.get('/profile/' + id, _.bind(function (theirProfile) {!! this.theirProfile = theirProfile;!! Api.get('/chatMessages', _.bind(function (messages) {!! this.messages = messages;! this.render();!! }, this), _.bind(function (err) {! this.onError();! }, this));! }, this), _.bind(function (err) {! this.onError();! }, this));! }, this), _.bind(function (err) {! this.onError();! }, this));! }!!"

Action

Error Handling

“I’ve come to the conclusion

that callback hell is a design choice and not an inherent flaw

in the concept of asynchronous

function and callback” http://blog.caplin.com/2013/03/13/callback-hell-is-a-design-choice/ 96"

doSomething(function (err, response) {!!});"

var handler = function (err, response) {!!};!!doSomething(handler);"

! load: function (id) {! this.id = id;! Api.get('/profile/own', this.onOwnProfile);! },!! onOwnProfile: function (err, ownProfile) {! if (err) return this.onError();! this.ownProfile = ownProfile;! Api.get('/profile/' + this.id, this.onTheirProfile);! },!! onTheirProfile: function (err, theirProfile) {! if (err) return this.onError();! this.theirProfile = theirProfile;! Api.get('/chatMessages', this.onMessages);! },!! onMessages: function (err, messages) {! if (err) return this.onError();! this.messages = messages;! this.render();! }!

Reusable

Avoid anonymous functions

Useless stack traces

Avoid anonymous functions

Useless stack traces

Sign of poor structure

Keep things shallow

Means you are probably using anonymous functions

Keep things shallow

Means you are probably using anonymous functions

Everyone will hate you

Isolate defects or their causes

Isolate defects or their causes Makes future maintenance easier

Isolate defects or their causes Makes future maintenance easier Prevent unexpected breakdowns

topics.shift();!"Performance" !

var i = 0;!var thing;!for (; i < things.length; i++) {! thing = things[i];!}"

things.forEach(function (thing, i) {!!});"

115"http://jsperf.com/foreachvsloop

24x faster

13x faster

13x Faster 350,000 operations per second

$('a').on('click', function (e) {!!});!!!!!!$('#container').on('click', 'a', function (e) {!!});"

117"http://jsperf.com/domevents

21x faster

19x faster 21x Faster

Only 1000 operations per second

$('#container').append('<ul></ul>');!for (var i = 0; i < messages.length; i++) {! $('#container')! .find('ul')! .append('<li>' + messages[i].text + '</li>');!}"!!!!var html = '<ul>';!for (var i = 0; i < messages.length; i++) {! html += '<li>' + messages[i].text + '</li>';!}!html += '</ul>';!$('#container').html(html);!

119"http://jsperf.com/renderinghtml

48x Faster

44x faster

15x faster Less than 200 operations per second!

DOM operations

DOM operations Iteration / function calls

Beware of premature optimizations

Bottlenecks

var cache = {!! get: function (key) {! return localStorage.getItem(key);! },!! set: function (key, value) {! localStorage.setItem(key, value);! }!!};"

Disc IO

Memory

Quicker reading

Saving for later

130"http://jsperf.com/localstoragevsmemory

3x faster

About the same

Makes future maintenance easier

Makes future maintenance easier Prevent unexpected breakdowns

topics.shift();!undefined"

What is maintainability?

It's about making our lives easier

It's about making our work pass the test of time

Thank you!

Yet Another Conference 2013

@jonbretman jonbretman.co.uk

Mobile Web Developer @ Badoo

http://techblog.badoo.com @BadooTech

http://habrahabr.ru/company/badoo

@BadooDev

"writing maintainable javascript". jon bretman, badoo

Technology

writing maintainable code

Александр Крашенинников "hadoop high...

maintainable theming

develop maintainable apps

scaleable and maintainable css:sass

beautiful maintainable css

maintainable javascript 2011

building a maintainable reactiflux application

maintainable javascript carsonified

handling static files in badoo by yuriy nasretdinov

building maintainable app #droidconzg

maintainable sitecore solutions

badoo from lld to superdiscovery - assets.zabbix.com am i?...

functional design patterns for express - javascript...

maintainable automation ftw

writing clean and maintainable code

highly maintainable efficient optimized css

maintainable css

Выступление Сергея Аверина, badoo,...

maintainable tests