You have ruined javascript
You - yes you. You know who you are
I'm @robashton
![](https://s3.amazonaws.com/media-p.slid.es/uploads/robashton/images/406307/pasted-from-clipboard.png)
Enterprise developer
![](https://s3.amazonaws.com/media-p.slid.es/uploads/robashton/images/406310/pasted-from-clipboard.png)
I've been around
![](https://s3.amazonaws.com/media-p.slid.es/uploads/robashton/images/406321/pasted-from-clipboard.png)
I've seen things
![](https://s3.amazonaws.com/media-p.slid.es/uploads/robashton/images/406325/pasted-from-clipboard.png)
And I am disappoint.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/robashton/images/406334/pasted-from-clipboard.png)
But enough about me
What about you?
You have great good
![](https://s3.amazonaws.com/media-p.slid.es/uploads/robashton/images/406338/pasted-from-clipboard.png)
You have great wine
![](https://s3.amazonaws.com/media-p.slid.es/uploads/robashton/images/406340/pasted-from-clipboard.png)
And you're a lovely audience
;-)
You have bad coffee
![](https://s3.amazonaws.com/media-p.slid.es/uploads/robashton/images/406337/pasted-from-clipboard.png)
But I won't hold it against you
Now let's talk Javascript
![](https://s3.amazonaws.com/media-p.slid.es/uploads/robashton/images/406345/pasted-from-clipboard.png)
AWful language
'true' == true // returns false
written in a day
![](https://s3.amazonaws.com/media-p.slid.es/uploads/robashton/images/406353/pasted-from-clipboard.png)
in use for nearly two decades
![](https://s3.amazonaws.com/media-p.slid.es/uploads/robashton/images/406358/pasted-from-clipboard.png)
(apparently 1995 was the year of "take that")
In the beginning
![](https://s3.amazonaws.com/media-p.slid.es/uploads/robashton/images/406361/pasted-from-clipboard.png)
We were wizards
![](https://s3.amazonaws.com/media-p.slid.es/uploads/robashton/images/406363/pasted-from-clipboard.png)
then came jquery
![](https://s3.amazonaws.com/media-p.slid.es/uploads/robashton/images/406537/pasted-from-clipboard.png)
everything as a plugin
$('#thing').accordion()
$('#other').tabs({
onChange: onTabChanged
})
never claimed it was ideal
![](https://s3.amazonaws.com/media-p.slid.es/uploads/robashton/images/406380/pasted-from-clipboard.png)
But it worked
![](https://s3.amazonaws.com/media-p.slid.es/uploads/robashton/images/406382/pasted-from-clipboard.png)
But now?
We're writing everything
as a js client*
*(We really shouldn't, but that's another talk)
And we're bringing our baggage with us
![](https://s3.amazonaws.com/media-p.slid.es/uploads/robashton/images/406389/pasted-from-clipboard.png)
This is not cool
![](https://s3.amazonaws.com/media-p.slid.es/uploads/robashton/images/406376/pasted-from-clipboard.png)
Examples?
"I want to manage my dependencies'
![](https://s3.amazonaws.com/media-p.slid.es/uploads/robashton/images/406521/pasted-from-clipboard.png)
Require-js
"RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node."
'require-js seems to be the thing'
![](https://s3.amazonaws.com/media-p.slid.es/uploads/robashton/images/406527/pasted-from-clipboard.png)
'wow, requirejs solves so many problems i never knew I had'
![](https://s3.amazonaws.com/media-p.slid.es/uploads/robashton/images/406540/pasted-from-clipboard.png)
everything is configuration
![](https://s3.amazonaws.com/media-p.slid.es/uploads/robashton/images/406546/pasted-from-clipboard.png)
coffeescript?
Configuration
![](https://s3.amazonaws.com/media-p.slid.es/uploads/robashton/images/406551/pasted-from-clipboard.png)
Static file includes?
configuration
![](https://s3.amazonaws.com/media-p.slid.es/uploads/robashton/images/406575/pasted-from-clipboard.png)
unsupported libraries?
Configuration
![](https://s3.amazonaws.com/media-p.slid.es/uploads/robashton/images/406562/pasted-from-clipboard.png)
Then the real problems start
![](https://s3.amazonaws.com/media-p.slid.es/uploads/robashton/images/406544/pasted-from-clipboard.png)
emberjs
![](https://s3.amazonaws.com/media-p.slid.es/uploads/robashton/images/406589/pasted-from-clipboard.png)
convention over... convention
Shove everything on app
App.FooController = blah
App.FooRoute = blah
App.FooView = blah
Refactor and forget
is this code dead now?
Set up your observers
![](https://s3.amazonaws.com/media-p.slid.es/uploads/robashton/images/406600/pasted-from-clipboard.png)
observe that your observers are observing observers which are observing chaos
Except when they're a binding
or a computed property
emberjs: Taking something dynamic and confusing and making it more dynamic and confusing
a six month old ember codebase
![](https://s3.amazonaws.com/media-p.slid.es/uploads/robashton/images/406617/pasted-from-clipboard.png)
But it's okay
you can hire an ember consultant
![](https://s3.amazonaws.com/media-p.slid.es/uploads/robashton/images/406564/pasted-from-clipboard.png)
and angular...
where do you even begin?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/robashton/images/406554/pasted-from-clipboard.png)
"I had a problem and thought to use Angular so now I have a problem directive factory"
(h/t Andreas Brekken )
directives?
<div ng-controller="Controller">
Hello <input ng-model='name'> <hr/>
<span ng-bind="name"></span> <br/>
<span ng:bind="name"></span> <br/>
<span ng_bind="name"></span> <br/>
<span data-ng-bind="name"></span> <br/>
<span x-ng-bind="name"></span> <br/>
</div>
Directives?
angular.module('docsBindExample', [])
.controller('Controller', ['$scope', function($scope) {
$scope.name = 'Max Karl Ernst Ludwig Planck (April 23, 1858 – October 4, 1947)';
}]);
directives are what happen when you take html and js and then vomit all over them
angular is extensible
An Angular "service" is a singleton object created by a "service factory". These service factories are functions which, in turn, are created by a "service provider". "The service providers are constructor functions". When instantiated they must contain a property called $get, which holds the service factory function.
Factory factories?
service factories?
service providers?
"You need all of this because of dependency injection"
Dependency injection
var pony = new Pony(dependency)
testing a dumb view with some dumb data is dumb and easy
var view = new View(fakeProvider) view.addPony("Pinkie Pie") view.render()
.should_contain("pinkie pie")
you don't need extensibility
you need less code
And now - Javascript vnext
- Promises
- Generators
- Classes
- Etc
You can polish turds
but why bother?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/robashton/images/407127/pasted-from-clipboard.png)
If you want a better client-side language
- Idris
- Fay
- Purescript
- Bash
Case study: Google
![](https://s3.amazonaws.com/media-p.slid.es/uploads/robashton/images/406620/pasted-from-clipboard.png)
"Oh what, we have to write js?"
![](http://dashie.mylittlefacewhen.com/media/f/img/mlfw3923-129287_-_animated_apple_bloom_panic_WACKY_WAVING_INFLATABLE_ARM_FLAILING_TUBE_MARE.gif)
No wai - GWT will save us!
![](http://iambrony.dget.cc/mlp/gif/35418__safe_pinkie-pie_animated%20(1).gif)
how about making js itself
look more like java?
Ffs, it's not working - let's make angular js
Everything google do is about trying to make javascript more like java
Causes?
- Too much time on their hands?
- Afraid of a little bit of dynamic code?
- Because frameworks and languages are fun to write?
- (genuine performance concerns)
Well I've got a message
for you google
You have done bad
![](https://s3.amazonaws.com/media-p.slid.es/uploads/robashton/images/406655/pasted-from-clipboard.png)
you should feel bad
![](https://s3.amazonaws.com/media-p.slid.es/uploads/robashton/images/406651/pasted-from-clipboard.png)
because you are bad
![](https://s3.amazonaws.com/media-p.slid.es/uploads/robashton/images/406683/pasted-from-clipboard.png)
Why do we do this to ourselves?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/robashton/images/406671/pasted-from-clipboard.png)
lazy?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/robashton/images/406685/pasted-from-clipboard.png)
instant gratification?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/robashton/images/406691/pasted-from-clipboard.png)
"Productivity without much learning"
the only winners here are the consultants
![](https://s3.amazonaws.com/media-p.slid.es/uploads/robashton/images/406584/pasted-from-clipboard.png)
"But rob, how else do you get a large team of developers up to speed?"
time.
if your company wants to do javascript yesterday and you are not already a team of js developers
then you will fail regardless of technology
slow down
![](https://s3.amazonaws.com/media-p.slid.es/uploads/robashton/images/406707/pasted-from-clipboard.png)
spend time learning
![](https://s3.amazonaws.com/media-p.slid.es/uploads/robashton/images/406708/pasted-from-clipboard.png)
have patience
grow as a team
not as a flock of sheep
be set free
![](http://www.researchismagic.org/wp-content/uploads/2014/01/pinkie_pie_marching_band_tuba_display.gif)
anyway
We're not doing too bad really
there are some clever people doing it right
npm
browserify
all the module authors
We are learning as a community
We'll get there eventually
![](https://s3.amazonaws.com/media-p.slid.es/uploads/robashton/images/406740/pasted-from-clipboard.png)
thanks very much
@robashton
![](https://s3.amazonaws.com/media-p.slid.es/uploads/robashton/images/406723/pasted-from-clipboard.png)
You have ruined javascript
By Rob Ashton
You have ruined javascript
- 7,620