Learning JavaScript

...and Staying Marketable

Kent C. Dodds

Utah

1 wife, 3 kids

PayPal Inc.

@kentcdodds

@kentcdodds

Please Stand...

Just Kidding...

What this talk is not

• Live coded (for once)
• All about Angular
• Bashing Angular 1
• Praising Angular 2

What this talk is

• Praising JavaScript
• Showing how learning JS will help you today and in the future
• Showing how you can do more JavaScript with Angular (1 and 2)

History of JS Frameworks

http://w3techs.com/technologies/overview/javascript_library/all

• jQuery: 399
• Backbone: 195
• Bootstrap: 135
• Ember: 101
• Knockout: 51
• YUI: 8
• MooTools: 1

Jobs...

What are your Angular 1 skills going to matter...

Learn JavaScript!

Requirement:

You need modules (ES6, CommonJS, etc.)

Let's see what Angular 1 looks like

With a focus on JavaScript

Filters

// emoji.filter.js
angular.module('emojiApp')
  .filter('emoji', emojiFilter)

function emojiFilter(emojiMap) {
  return emojify

  function emojify(emojiCode) {
    return emojiMap[emojiCode] || emojiMap.confused
  }
}

// emoji.filter.test.js
describe('emoji filter', function() {
  beforeEach(module('emojiApp'))

  var emojiFilter

  beforeEach(inject($filter) {
    emojiFilter = $filter('emoji')
  })

  it('should default to the confused emoji', function() {
    expect(emojiFilter()).to.equal('😕')
    expect(emojiFilter('gibberish')).to.equal('😕')
  })

  it('should return the right emoji for the emoji code', function() {
    expect(emojiFilter('cherries')).to.equal('🍒')
  })
})

Services

// emojiUtils.factory.js

angular.module('emojiApp')
  .factory('emojiUtils', emojiUtils)

function emojiUtils() {
  return {flatten}

  function flatten(array) {
    return array.reduce((a, b) => a.concat(b), [])
  }
}

// emojiUtils.factory.test.js
describe('emojiUtils', function() {
  beforeEach(module('emojiApp'))

  var emojiUtils

  beforeEach(inject(function(_emojiUtils_) {
    emojiUtils = _emojiUtils_
  }))

  describe('flatten', function() {
    const {flatten} = emojiUtils

    it('should flatten an array', function() {
      const input = [[1], [2, 3], [4]]
      const result = [1, 2, 3, 4]
      expect(flatten(input)).to.deep.equal(result)
    })
  })
})

Directives

// emoji-chooser.directive.js
angular.module('emojiApp')
  .factory('emojiChooser', emojiChooser)

function emojiChooser() {
  return {
    template: `
      <div>
        {{::'some.translation.key' | translate}}
        <!-- more stuff -->
      </div>
    `,
    // more stuff
  }
}