Joshua T Kalis (he/him/his)

I build great teams and excellent software.

JSConf 2014

Space-launch

Firstly.

JavaScript is Awesome!

And, if you don't think so...

Get out.

Not really, but seriously, it is.

Day 1 Sessions

  1. Armchair Type Theory
  2. Emotional Safety
  3. Battle-tested Enterprise NodeJS
  4. Frontend Ops Tooling
  5. UI Algorithms
  6. Frontend Performance Testing
  7. RaveJS
  8. Regenerator
  9. Why does ReactJS Scale?

1. Armchair Type Theory

For your sanity's sake.

Type System not Theory

Type Theory - "... any of a class of formal systems, some of which can seve as alternatives to set theory as a foundation for all mathematics, every 'term' has a 'type' and operations are restricted to terms of a certain type." ~ wikipedia

Type System - "... a type system is a collection of rules that assign a property called a type to the various constructs — such as variables, expressions, functions or modules — a computer program is composed of." ~ wikipedia

Types Can Save Your Ass

Strict-typing can narrow the scope of what is a valid program by removing from the developer the need to, explicitly, check for object types in code.

JavaScript Types

JavaScript has types:

Support for creating and using custom types is not very intuitive or developer-friendly.

(Lack of a) Type System

function areaOfACircle(shape) {

  return Math.PI * shape.radius * shape.radius;
}

areaOfACircle(9); // runtime error

Type System Applied

class Circle {
  constructor (radius) {
    public radius = radius;
  }
}

function areaOfACircle(shape : Circle) {

  return Math.PI * shape.radius * shape.radius;
}

areaOfACircle(9); // compile error

But, wait...

That's not JavaScript

Compile-to-JS Languages

100s in total ~ GitHub

One Last Type System Plug

"[Without a Type System] the only way to know your program is correct is to run the program." ~ speaker

Emotional Safety

Be excellent to one another.

Emotional Safety

Emotional Safety

Help to make the people around you feel "safer".

Battle-tested NodeJS in the Enterprise

JavaScript everywhere and it's totally cool

Battle-tested

"[FidSafe is] architected in such a way that the entire system would need to be compromised in order to gain any useful information." ~ speaker

Frontend Ops Tooling

Automate all of the things!

Frontend Ops Tooling

Frontend Ops Tooling

There are lots of tools. Some favorites are:

Frontend Ops Tooling

npm + scripts

package.json

{
  ...
  "scripts": {
    "awesomeize": "./path/to/awesome.ize.js",
    "simple": "./path/to/simple.sh"
  }
  ...
}

Frontend Ops Tooling

  1. When starting a greenfield project, automate as much as possible to begin with
  2. Whenever possible automate anything repetitive in any project as soon as possible

The developers' job/sanity/time you save might just be your own.

UI Algorithms

This was awesome!

UI Algorithms

The problem you are working on right now, was probably solved at least 20 years ago.

UI Algorithms

Shamelessly thieve (borrow) slides from the original presenter (Mark DiMarco).

UI Algorithms

I'm not going to talk too much about this because you should watch the actual talk when it is available.

Frontend Performance Testing

You. Want. RUM.

Frontend Perf Testing

RUM - Real User Metrics/Monitoring.*

You want RUM because:

* One provider of this is New Relic

Frontend Perf Testing

Be sure that you consider unique factors of your application:

     Application state
               Plugins
    +        User type
    ------------------
    Unique and hard to track-down bug

Frontend Perf Testing

For logging/tracking in the browser there are APIs available.

Comcast has opensourced Serf-n-Perf library.

Frontend Perf Testing

Track/graph 99% of traffic by default.

Paying attention to only averages will not give you as much information as the extremes are effectively nullified.

You want to see the extremes so that they can be addressed.

Composing Frontend Components

MontageJS

Composing the Frontend

Hey, we happen to be building such a framework

Sales pitch.

RaveJS

This looks like Yeoman a little, but feels a little more like a seed project with a plugin architecture development style.

That is all I have.

Regenerator

I have no idea where this talk came from or what talk it supplanted in the schedule.

Some Notes

When you want people to join in and work on your opensource project:

New contributors need something they can accomplish to feel like that can help.

Why Does React(JS) Scale?

Minimize time-to-change

React(JS) Focus

Package Management For ES6 Modules

jspm.io

jspm.io

Using

Optimize 2D & 3D Canvas Rendering

Optimize vs. Best Practice

"Premature optimization is the root of all evil." ~ somebody smart

Premature Optimization

While this does hold true...

Optimize vs. Best Practice

"Premature optimization is the root of all evil; when done at the wrong time." ~ me

Best Practices

Micro-optimizations

Make It Pop

Make It Pop

Unfortunately I missed most of this talk but I caught the tail end and these links were shared:

Encouraging Diversity In Your Open Source Project

Diversity === Good

Encouraging Diversity

"Diversity trumps ability." ~ Page Scott

Encouraging Diversity

Encouraging Diversity

Recognize

"You don't know everything; you will benefit from getting others' opinion." ~ me

Remember

"Making good software is really fucking hard." ~ Kate Hudson (presenter)

Persistent Data Structures

I only caught the very end of this session, but...

Persistent Data Structures

  1. Clojure has some pretty cool stuff in it
  2. I want to use them on the web
  3. But I don't want to use ClojureScript

Mori

EOL

Distributed Complex Computing With NodeJS

NodeJS Distributed Computing

Exhibiting ZeroMQ distributing Fourism tasks to peer-computers.

Learning ES6 As A Community

Learning ES6

NodeJS Deploment

NodeJS Deployment Rules

  1. No config
  2. Work locally as close to production environment
  3. Don't use Git for deployment

Web Components Accessiblity

"[accessibility] is the right thing to do." ~ speaker

Web Components Accessibility

The first rule of Web Components:

  1. Make sure that you need a web component; be sure what you actually need isn't already a standard element.

Web Components Accessibility

Web Components are a chance to extend the DOM, when you do, don't forget about:

A11y

  1. ARIA roles are cool + They help impaired users (do the things you take for granted)
  2. display: none; - removes the element from the a11y tree

With great power...

Reactive Game Development

Just watching someone code a simple game.

Recative Programming

Modules For Browser And npm

Modules

  1. Use CommonJS syntax
  2. Use Browserify to make modules available in the browser + Browserify will shim modules if necessary

Open Web Art

The web is a new medium for art.

Open Web Art

Demo

http://cell-flight.com

Being Human

A truly inspirational talk; including some personal experiences of the presenter.

Rule #1

The most important rule we should adhere to is:

  1. Be excellent to one another.

Be Passionate

Share your passion, inspire others.

You will find, people are passionate about things too.

Have Compassion

Opportunities

Do These Things

... and you will:

Suggestion

If you liked any of what I have mentioned, I highly suggest looking this talk up and watching it yourself. I have not done it justice.

Thank you