When Javascript Excited Me

This is a country song about a love burnt out over time like a candle. This story starts with a young boy. This boy fell in love with a beautiful programming language. The boy grew into a man, becoming more and more cynical over time. Eventually he lost his way and his first love.

Our story begins two decades ago, when the dial up was king and T1 crowds all complained about Internet Explorer. Netscape was cool? Simplier times, when a javascript developer only worried about making one browser happy: IE.

Oh, Internet Explorer, your quirkiness was terrible and atractively simple. Developing for IE felt like riding your bicylce through a giant mud puddle. It was awesome when you made it through. It was messy as hell when you got stuck.

During this time, this boy still rode a bicycle. He also started learning javascript and html. His first site was hosted on angelfire. His first code looked something like this. He was really excited.

FIRST HE WAS EXCITED ABOUT JAVASCRIPT

1
2
3
4
5
6
7
8
<button onclick="doSomething()">Do Something</button>

<script>
function doSomething()
{
document.writeln('I did something!');
}
</script>



THEN HE WAS SUPER EXCITED ABOUT JQUERY

1
2
3
4
5
6
7
8
<button class="foo">Do Something</button>

<script>
$('.foo').on('click', function()
{
$(this).append('<p>I did something</p>');
});
</script>



THEN HE WAS INTERESTED IN PROTOTYPE

1
2
3
4
5
6
7
8
<button class="foo">Do Something</button>

<script>
$('.foo').on('click', function()
{
$(document).insert("<p>I did something</p>");
});
</script>



THEN HE GLANCED AT MOOTOOLS

1
2
3
4
5
6
7
8
<button class="foo">Do Something</button>

<script>
$$('.foo').addEvent('click', function()
{
new Element('span', {'html': 'Do something'}).inject(document);
});
</script>



THEN HE WAS KNOCKED OUT BY KNOCKOUT

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<button data-bind='click: doSomething'>Do Something</button>
<p data-bind="text: message"></p>

<script>
var DoSomethingViewModel = function() {
this.message = ko.observable('');

this.doSomething = function() {
this.message('I did something!');
};
}

ko.applyBindings(new DoSomethingViewModel());
</script>



THEN HE GOT DIZZY ABOUT ANGULAR

1
2
3
4
<div ng-app>
<button ng-click="message='I Did Something'">Do Something</button>
{{ message }}
</div>



THEN HE WAS EXCITED ABOUT BACKBONE

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="do-something">
<button>Do Something</button>
<p class="js-message"></p>
</div>

<script>
Backbone.View.extend({
el: '.do-something',
events: {
'click button': 'render'
}
render: function() {
this.$('.js-message').append('I did something!');
}
});
</script>



THEN HE WAS EXCITED ABOUT MARIONETTE

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div id="my-element">
<button class="do-something-button">Do Something</button>
<p class="js-message"></p>
</div>

<script>
var MyView = Marionette.View.extend({
el: '#my-element',

template: false,

ui: {
button: '.do-something-button',
message: '.js-message'
},

events: {
'click @ui.button': 'clickedButton'
},

clickedButton: function() {
this.ui.paragraph.text('I did something!');
}
});

var view = new MyView();
view.render();
</script>



THEN HE WAS OVERWHELMED BY EMBER

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>
App = Ember.Application.create();

App.Router.map(function() {
this.resource('index', { path: '/' }, function() {});
});

App.IndexController = Ember.ObjectController.extend({
actions: {
doSomething: function() {
this.set('message', 'I did something!');
}
}
});
</script>

<script type="text/x-handlebars" data-template-name='index'>
<button {{ action 'doSomething' }}>Do Something</button>
<p>{{ message }}</p>
</script>



THEN HE WAS FASCINATED BY POLYMER

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<dom-module id="do-something">
<template>
<button id="doSomething">Do Something</button>
<p>{{ message }}</p>
</template>
<script>
Polymer({
is: 'do-something',
listeners: {
'doSomething.tap': 'doSomething'
},
doSomething: function(e) {
this.message = 'I did something';
}
});
</script>
</dom-module>

<do-something></do-something>



THEN HE WAS LIKE OKAY … FACEBOOK HAS REACT

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var DoSomething = React.createClass({
getInitialState: function () {
return {
message: ''
}
},

render: function () {
var message = this.state.message;

return (
<div>
<button onClick={this.showMessage}>Do Something</button>
<p>{message}</p>
</div>
);
}
});

React.render(<DoSomething />, document.body);



THEN HE WAS KIND OF INTERESTED IN VUE

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="doSomething">
<button v-on:click="message = 'I did something'">Do Something</button>
<p>{{ message }}</p>
</div>

<script>
new Vue({
el: '#doSomething',
data: {
message: '',
}
});
</script>



THEN HE CRIED BECAUSE ANGULAR 2 CHANGED SO MUCH

index.html

1
<do-something></do-something>

main.ts

1
2
3
4
import {bootstrap}  from 'angular2/platform/browser';
import {DoSomething} from './do_something';

bootstrap(DoSomething);

do_something.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import {Component} from 'angular2/core';

@Component({
selector: 'do-something',
templateUrl: 'do-something.html'
})

export class DoSomething {
message: string = '';

onClick(){
this.message = 'I did something!';
}
}

do_something.html

1
2
<button (click)="onClick()">
<p [hidden]="!message">{{message}}</p>



AND THESE DAYS HE JUST TRIES KEEPING HIS SANITY…

meh, I’m tired of Javascript… maybe I’ll just use CSS3

babahahaMUHAHAHAHAHAHAHAHA!!!

1
2
3
4
5
6
7
8
9
10
11
12
<input type="checkbox" class="show-info-btn"> Check Me.
<p class="show-info">I did something</p>

<style>
.show-info-btn:checked ~ .show-info {
display: block;
}

.show-info {
display: none;
}
</style>



OKAY ENOUGH OF THAT, YOU’RE BORING ME…

Anyway, SURPRISE, the boy I’m talking about is me. Bet you didn’t see that coming huh? I know, I know, I’m good. I chould write Michael Bay movies. Javascript best practices keep changing. Some have come full circle in the last 20 years. For example, what is the real difference between,

1
<button onclick="doSomething()">Do Something</button>

and

1
<button ng-click="doSomething()">Do Something</button>

The real difference is time. Your time. The first example of native javascript takes a web developer seconds/minutes to understand. The angular example takes a massive undertaking and days/weeks to learn - not to mention the exorcism later when the angular 3.0 framework completely changes and your inner demons come to life. ^_^

I didn’t even mention all the other stuff that come with these frameworks and javascript development. Take javascript testing tools for example. Karma, which used to be testacular _(ha ha, testicles),_Jasmine, moocha, chii, QUnit, unit.js, headless phantom. For managing assets we can use component, browserfiy, bower, gulp (is Grunt still alive?), include billions of jQuery/node/ plugins (which are awesome). I intentionally left out all the server-side javascript frameworks in this article because it is already too damn long.

When it comes to javascript, there are simply too many ways to skin the cat.

Sure, fundamentally Javascript has problems as a language. It allows us to write extremely complex and obscure code that does seemingly simple things. It needs polyfils and browser checks and server/client checks. One day javascript will run all our toasters.

However, language problems set aside, there is also this social problem with the language. Developer elitism comes with the rapidly changing terriority. For example, if you’re not using the latest tools in javascript, then to other developers/employers you’re just a shitty javascript developer. You could have been coding javascript for years, but to be awesome you’ve gotta know React or angular or insert some framework. My next blog article should be titled: You know… using jQuery won’t kill you, right?

Do you have a love/hate relationship with javascript? Feel free to comment about it below. Don’t keep your frustrations inside, go on… rage a little. ^^

UPDATE 4/11/2016

Shortly after writing this I found this article about Why Javascript Development Is Crazy. It’s good, check it out.