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"

  },

  "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

my 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) {

});

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) {
    
}));

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

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;
};

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

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