Things that go wrong in the JS community
https://slid.es/swatinem/anti
me?
Arpad
viennajs regular
nsid (no shaving in december)
“recreational coder”
mainly for fun, but also for money :-(
https://github.com/Swatinem
Motivation
I love code
I care about code
a lot
I also care a lot about
Simplicity
maintainability
Elegance
Beauty
Let me tell you a secret about myself
I have a sixth sense
Not this one
I can see dead people
but this one
I can feel wrong code
And I see a LOT of wrong/ugly code :-(
grunt.js
make
but a lot worse
Redundancy
grunt.loadNpmTasks('grunt-contrib-jade');
"dependencies": {
"grunt-contrib-jade": "*",
"grunt": "*" },
jade: {
compile: {
files: {
'index.html': ['index.jade'],
}, options: {
} },
Outdated dependencies
https://github.com/gruntjs/grunt-contrib-jade/blob/master/package.json
"dependencies": {
"jade": "~0.34.1",
"grunt-lib-contrib": "~0.6.1"
},
https://github.com/visionmedia/jade/blob/master/package.json "version": "0.35.0",
Needless indirections
it just calls an executable
https://github.com/gruntjs/grunt-contrib-compass/blob/master/tasks/compass.js#L15
var child = grunt.util.spawn({
cmd: args.shift(),
args: args
}, function (err, result, code) {
My recommendation
just use `make`!
But
make sucks, right?
True!
for large projects with 10k+ files
where files need to be processed individually
and have implicit dependencies
basically C projects
it is perfectly fine
for js projects!
but…
… grunt has `watch`
Use the command line, luke!
$ which watch
$ man watch
or:
https://github.com/visionmedia/watch
This project is very similar to original watch(1) implemented in 1991, differences include:
* ansi escape sequences (colors etc)
* terminal is not cleared
* lower default interval of 1s
* millisecond interval resolution
on OSX 10.8: https://github.com/echaouchna/watchmy workflow
$ watch make -s
$ watch mocha --bail --reporter minimal
require.js/AMD
boilerplate
define([ "require", "jquery", "blade/object", "blade/fn", "rdapi",
"oauth", "blade/jig", "blade/url", "dispatch", "accounts",
"storage", "services", "widgets/AccountPanel", "widgets/TabButton",
"widgets/AddAccount", "less", "osTheme", "jquery-ui-1.8.7.min",
"jquery.textOverflow"],
function (require, $, object, fn, rdapi,
oauth, jig, url, dispatch, accounts,
storage, services, AccountPanel, TabButton,
AddAccount, less, osTheme) {
});
Anybody still following?can i haz moar boilerplate?
(function (root, factory) {
'use strict';
// Universal Module Definition (UMD) to support AMD, CommonJS/Node.js,
// Rhino, and plain browser loading.
if (typeof define === 'function' && define.amd) {
define(['exports'], factory);
} else if (typeof exports !== 'undefined') {
factory(exports);
} else {
factory((root.esprima = {}));
}
}(this, function (exports) {
}));
where the hell do i put my code?i said MOOOOAAAR!!!111einself
require.config({
paths: {
'jquery': 'libs/jquery/jquery.min',
'underscore': 'libs/underscore/underscore',
'backbone': 'libs/backbone/backbone',
'bootstrap': 'libs/bootstrap/bootstrap',
},
shim: {
jquery: {
exports: "$"
},
underscore: {
exports: "_"
},
backbone: {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
bootstrap: {
deps: ['jquery'],
exports: 'Bootstrap'
},
}
});
My recommendation?
`component` https://github.com/component/component
or
`node-browserify`
but luckily, AMD already lost :-)
https://twitter.com/rakesh314/status/387336215290449920
So, AMD appears to have lost. CommonJS is the way to go. ComponentJS vs. Browserify, it seems. And I'm tending towards the latter.
Angularjs
Bullshit, all of it
the future of the web?
more like a blast from the past
Performance
Angularjs
in undebuggableis unmaintainable
is hard to reason about
has horrible performance
feels like last century with annotated html
My recommendation?
roll your own code
use lightweight models
and observer/mediator/event emitter pattern
use explicit and clear code
which one can understand and maintain
`component` :-)
Frameworks in general
Not recommended
use libraries
Framework
All or nothing
Stuck with it
Tries to do everything at once
Library
Use what you want
Easily exchangable
(Usually) does one thing and does it right
I have to go with this guy
Alright, I made a horrible decision
jquery
I love(d) jquery
it made DOM fun!
it was partly responsible for the webdev revolution
but its obsolete
we have:
querySelector(All)
CSS transitions/animations
requestAnimationFrame
classList
ES5 (with stupid things like [].slice.call(ElementList) )
What it never was:
module system
Recommendation:
use standards
small libraries just for the things you need
An exercise for you
var request = window.indexedDB.open("toDoList", 4);
request.onerror = function(event) {
};
request.onsuccess = function(event) {
db = request.result;
};
Whats wrong with this code?Can we do any better?
window.indexedDB.open("toDoList", 4, function (err, db) {
if (err) {
…
return;
}
…
});
Takeaway
don’t trust a single word I said!
challenge everything
Für die deutschen:
http://www.dict.cc/englisch-deutsch/to+challenge.html
etw. infrage stellen
etw. (kritisch) hinterfragen
choose solutions which are
simple
elegant
beautiful
did a google interview
most memorable thing:
“Can we do any better?”
Resonates deeply with who I am
Always ask:
can you do any better?
maybe next time?
`component`?
Anti-Talk
By Arpad Borsos
Anti-Talk
- 2,335