Notes from ForwardJS – General Sessions

These are some notes-to-self from a variety of presentations I attended at the recent ForwardJS Conference.

  • Check out the reading list at the very bottom for some homework.

How your brain is conspiring against you making good software

by Jenna Zeigen

Humans are predictably irrational.

– Dan Ariely

The Problem:

  • We may be “rational” developers, but we’re also “irrational” humans.
  • We tend to favor information/results that support our pre-existing beliefs: cognitive bias.
  • We also distrust evidence that is contrary to our existing beliefs.
  • We prefer things we make ourselves (pride + understanding).
  • Prediction bias: we’re really bad at predicting how long it will take us to do something.
    • We show a pessimistic bias toward others’ work.
    • We show an optimistic bias toward our own work (more so for negative things not happening to us, than positive things happening to us).
    • We tend to overestimate our own abilities.
  • We prefer the status quo, and we favor people/things from our own in-group – this leads to self-selecting for homogeneity.
  • We tend to favor speed/more over deliberation/less.

Solutions:

  • Breaks are vital – some scientists claim this allows you to “forget” misleading hints.
  • Selective attention – we’re pretty good at filtering out unwanted
    • NOTE TO SELF: I’ve also read studies contrary to this, e.g. opposed to open floor-plan work spaces.
  • Diversity – “fuller” coverage on the engineering side. Fewer blind spots.

Real-time Applications Panel

by Guillermo Rauch, Aysegul Yonet, Daniel Miller

Getting data from the database to the application and back as quickly as possible.

  • Question becomes: how quick is “real”? What’s the threshold for frequency/duration of polling?
  • socket.io – really cool real-time app framework for Node. Guillermo spoke on this last year and it was COOL.
  • We’re going to see more HTTP/2 reverse-proxy passing off to HTTP/1.1 backends.
  • HTTP/2 means we can push known/required assets immediately with the main payload response, as opposed to returning the payload, then letting the server request assets.

There’s a Bookmarklet for That!

by Justine Lam
  • Bookmarklet’s make things easier, less repetitive.
  • Works in all browsers (or it should at least).
  • Light – only runs when you click it.
  • Easy to install – drag to toolbar.
  • Useful examples

Steps:

  1. Create the JS you want to use
  2. Create script for loading external files
  3. Use a bookmarklet generator

React, Omniscient, and Immutable: the gateway drugs of functional programming

by Erin Depew

 

shouldCOmponentUpdate()
Can be used for deeper logic check on whether or not to update component, but that can be less performant than just always updating. Omniscient helps with this.

  • Unidirectional data flow – actions -> app-state -> functionality/transformations -> update browser -> repeat
  • Immutable allows us to skip deep value checks and instead just check if the reference object has changedx

Challenges:

  • Steep learning curve
  • Newer tech
  • Verbose

Benefits:

  • Simplified app state updates + data structure
  • More performant state change checks
  • Component-based structure promotes reusability

Building Widget Platform with Isomorphic React and Webpack

by Roy Yu
  • Define normal high order container and dump components
  • index.jsx is our high order container with Flux layer

Why Webpack

  • Powerful
  • Lots of support
  • Lots of assets transformation loaders and optimization plugins

Possible alternative integration: https://blog.frankdejonge.nl/rendering-reactjs-templates-server-side/

Ideas:

  • Create component/template micro-service: send request for component with props
  • Pregenerate templates that are easily accssible with placeholder input (this works okay for simple inputs), but loses interactivity (I think).
  • Render templates natively in PHP with V8 engine

Advanced Front End Debugging with Google Chrome

by Rocco Balsamo
Console Tricks:
  • console.table()
  • Save snippets (can be used for something like inserting jQuery for better debugging):Save snippets
  • console.profile()
    Speaker had an amazing snippet to profile on every page interaction. Get it!
  • Override default functions (e.g. setTimeout()) to log who the caller is.
  • command + alt +f = find in all files
  • command + shift + c = move immediately into element select mode
  • workspaces

Reading List

%d bloggers like this: