Skip to content

Instantly share code, notes, and snippets.

@esjay

esjay/fluent-conf-2015.md

Created April 23, 2015 16:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save esjay/92880b11a55e2cb13bb1 to your computer and use it in GitHub Desktop.
Save esjay/92880b11a55e2cb13bb1 to your computer and use it in GitHub Desktop.
Download ZIP
Fluent Conference 2015 Notes
Raw
fluent-conf-2015.md

ES6 Workshop

ES6 browser compat table - Kangax

Destructuring

let {hello: greeting, goodbye: signoff} = {hello: 'Is it me', goodbye: 'you're looking for'}; let [, year, month, day] = /(\d+)-(\d+)-(\d+)/.exec(date);

Named exports/imports

import {square} from 'lib/math';
console.log(square(3));
// or
import * as math from 'lib/math';
console.log(math.square(3));

export default function() {};
import myFunc from 'myFunc';

React Workshop

Use an event emitter for lightweight message passing between react components. Flux is overkill for most applications, unless they are heavy full-size apps.

  • Re JSX: Separation of concerns is less of an ideal for the front-end, since the behavior and layouts make up the components.

in JSX: class -> className

Tuesday Morning

Keynote

Paul Irish

  • RAIL
    • Response
    • Animation
    • Idle
    • Load
  • Any idle computation should occur < 50ms to allow the feeling of immediate response to user interaction.

Andreas Gal

  • For jank-free performance

  • Reuse objects instead of reallocating them, to avoid garbage collection.

  • Avoid closure. Use C-style loops whenever possible.

  • Don't look at your code to guess what is performant. Use tooling and measure.

  • Layout Scaling images that are large is not easily layerized by the browser Convert GIFs to video; browsers are optimized for that.

Reading already-painted pixels back is a very expensive operation from the browser. Canvas is a common way to cause this problem.

Bill Scott

PayPal mantra for converting to JS was, "The UI Layer is the Experimentation Layer." "When a new hire comes in, they should be able to google your code base." -- Bill Scott #fluentconf

Brendan Eich

JS - Threads

Stewart Nickolas

IOT - MQTT

Kathy Sierra

  • Cognitive waste
  • Fruit vs. Cake after cognitive exhaustion
  • Capacity to work after periods of focus
  • Expertise requires cognitive resource management.
  • Reduce time spent being mediocre
  • Trim task size down if cannot be mastered after 3 sessions of 45-90 mins
  • "Perceptual learning": The difficult-to-quantify process of learning by trying, failing, getting feedback, retrying, etc...
  • Examples: chick-sexing, plane-spotting, plane-6-pack-reading

Tuesday Sessions

React + Flux by @fisherwebdev

Spaghetti code wrapped with events becomes Evented Spaghetti Code

The Flux flow is Action > Dispatcher > Store > View because "mental models matter"

Actions & Action Creators

Actions report on something that has happened already in the real world, like a newspaper.

Dispatcher

The Dispatcher is like the center of a dipole. The center of all action/reactions in Flux. It's a singleton registry of callbacks, like EventEmitter.

Stores

  • Stores are domain models. Each store is a singleton.
  • Manage app state for a logical domain.
  • Collections or values
  • no setters, only getters.
  • callbacks are the only way to get data into the store

Views & Controller Views

  • Controller Views == 'Querying Views'
  • React Native brings the same programming paradigm to iOS & Android
  • For free: can stop thinking about the DOM altogether
  • The virtual DOM isn't the main benefit of React, the programming paradigm is
    • Composable
    • Declarative
    • Testable
    • Unidirectional

Implementing

  • Use a WebAPIUtils module to do XHR
  • Allows passing of API fetches around the app freely, decoupling from other concerns

Immutable Data

  • Boosts performance in shouldComponentUpdate()
  • React.addons.PureRenderMixin
  • immutable-js

More Flux Patterns

  • LoggingStore - log events back to server for analytics (or could be used for DDD type work?)
  • Error handling with client ID/dirty bit by communicating directly with the store
  • Error handling with actions queue. Future FB lib Relay will work with this method (could also be DDD?).
  • Resolving dependencies in Controller-view with waitFor
  • om library for tracking state diffs on the front-end
  • react-router works as a component for routing
  • other options route without components

Anti-patterns

  • No app state/logic in React components, put them in Stores
  • No getters in render() b/c it

Ember in Real World @tehviking

  • ember generate for testing set up
  • json-api for adapting against ember-data
  • Pretender for mocking API dependencies
  • ember-animation recently added material design style hooks to provide additional context for users
  • Interesting improvements to @Emberjs community in the last year. ember-cli seems great. thx @tehviking #fluentconf
  • (mostly, @tehviking's full-screen-rapid-fire-GIFs-and-visual-gags presentation style is my favorite) #fluentconf

Automating Front-End Performance @kitt

  • 40% will abandon applies to ecommerce site
  • in reality, 70% of folks will stick with your site for 11+s
  • Tim Kadlec has written some perfomance budget docs
  • Redirects are an easy way to reduce latency without messing with front-end code
  • grunt-devperf: outputs performance reports and can tie into CI
  • uncss in your build or cssstats reports in your build
  • grunt-responsive-images for polyfilling resp images
  • grunt-perfbudget

Running Node @tjfontaine

  • "Who in here is running Python 3?" "Mmmmm, I'm skeptical." @tjfontaine #fluentconf

Code Smells @elijahmanor

  • eslint allows for plugging in your own custom rules to define your desired level of complexity
  • jsinspect to detect copy/pasted code
  • jscpd will look at other langs besides JS for copy/paste
  • Open/Closed principle via Uncle Bob's SOLID Principles
  • Strategy Design Pattern via Gang of Four
  • Instead of string keys, use #es6 Symbol to provide unique IDs that cannot be faked.
  • use existing framework plugins via `eslint-plugin-*``
  • http://bit.ly/js-smells

Isomorphic React

  • Network Link Conditioner (alternative to DevTools throttling)
  • Server-side code still requires attention to ensure the specific interactions remain valid without functioning JS
  • The primary goal of isomorphism is not necessarily to ensure that the app works without JS enabled. It's to enhance the more common use cases such as serving content prior to the client boostrapping.
  • Isomorphism requires your attention to implementation in order for progressive enhancement to work.
  • http://react.rocks
  • flatiron: React compatible router
  • react-router-mega-demo: implements an agnostic router on server/client
  • http://davidwells.io/talks/isomorphic-javascript/

Wednesday Morning

Keynotes

Estelle Weyl @estellevw

  • Imposter syndrome ignores the likely normal distribution that exists in the dev world.
  • Work to include folks outside of your cultural mix so that your env doesn't die.
  • Use same language for everyone
  • Use merit, not potential
  • Assume they are as skilled as you
  • Assume everyone is correct
  • Listen
  • Give directives instead of constr. criticism
  • "Yes, and."
  • Onboard everyone
  • Include everyone
  • Formalize processes
  • Be aware when hiring that a number of people undersell themselves.

Erin McKean (lexicographer) @emckean

  • "Con-langs make mythical places feel more real; you know, like Middle Earth or the browser." @emckean #fluentconf

Eric Meyer @meyerweb

  • "The web is NOT a platform... He said at Fluent: The Web Platform." @meyerweb #fluentconf
  • "The web is not about consistency; the web is about ubiquity." @meyerweb #fluentconf
  • "Your convenience [as a developer] is not a reason to do the web wrong." @meyerweb #fluentconf
  • "Progressive enhancement is more about dealing with technology failing than about technology not being supported."
  • Super convicting reminder by @meyerweb about the importance of maintaining web access ubiquity. #fluentconf

The Web (Browser) We Forgot - Kimberly Blessing @obiwankimberly

  • line mode browser 2013 - reimplementing the original line-mode web browser with node + JS

Hack @Facebook // Julien Verlaguet

  • async function pairs to await ...
  • Interesting that Hack has a return <el></el> pattern like React.

Wednesday Sessions

When Speed Kills @mantamedia @fabledweb

  • After performance increase for page loads, -17% in ad rev
  • Difference between 1px on top of a paragraph was +5% in ad rev
  • Slowing perceived page load time by 1s increased ad rev significantly
  • Look at overall normalized revenue, not just per-page load or other skewed metrics
  • Don't degrade. Understand what the new is really doing and optimize it.
  • "The first page sets the user's expectation of speed. Any page slower than [that] seems broken." @fabledweb #fluentconf

Responsive Design @divya

  • How should the page load on slow connections for the user?
  • What browser-safe fonts should we choose when web fonts fail to load?
  • Which sections stretch at which breakpoints
  • Link smart objects in Photoshop

Animation / motion @chemphill

  • Progressive disclosure
  • Visual affordance imbues objects with meaning even before interaction.

React after One Year @ben_anderson

  • React Manifesto
    • Functional over OO
    • Stateless over stateful
    • Clarity over brevity
  • Can't fully ignore the internals of mixins, they are not sandboxed
  • Decorators can wrap components with mixins to maintain a sandboxed mixin state
  • Practical func. prog is not about eliminating state change, but limiting it to the smallest area possible.
  • #React / #Flux both require more typing. -- @ben_anderson Seems yet another reason to use #es6 with them. #fluentconf
  • "Thinking in React" by Pete Hunt

Web Components for Enterprise Apps: Ben Donohue / MediaMath @bndo

  • Consistent style guide of web components enables lo-fi wireframes to work for an established product and reduce overall time to develop new views.
  • MediaMath just open sourced their (Strand web components library)[http://mediamath.github.io/strand] which wraps Polymer
  • polymer-ready Chrome extension highlights any web components that are using polymer
  • Office Sensors hooked up to custom webcomponents at (Sid Lee)[http://dashboard.sidlee.com]
  • Really love the connected sensor dashboard hooked to custom web components http://dashboard.sidlee.com via @bndo #fluentconf

History of Web Apps - Henrik

  • Simplicity in native web apps makes for easier to maintain code
  • Consider generate presentation pieces into static web files
  • In parallel, bootstrap the native web app along side of it
  • Hubtags.org

User Empathy @jamesarosen

  • Cluttered software: What problem is the user trying to solve?
  • Touch/no-touch study helps to associate users as more like you
  • Do real live user testing
  • http://ux.stackexchange.com
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment