My Notes for talks from ForwardJS Ottawa 2018

forward-js-talk-notes.md

ForwardJS Ottawa, April 4/5, 2018

Essentialism

Andy Mockler (@asmockler), Shopify Analytics Team, Chicago

inspirational sources:

• book: Essentialism by Greg McKeown

key concepts:

• essentialism is about getting the right things done
• doing more by doing less
• make your users do less
• focus on the essential task
• take time to think

ux examples:

• Netflix “skip intro” button
• Apple “Face ID” feature
• Medium “article page ux”

code examples:

• lodash.sample
• react button component + analytics logging

closing thoughts:

• find the seams
• build what you understand
• just say no

Kristen Spencer

How To Train Your Junior Dev

• slides: http://kristen.codes/forwardjsottawa.pdf
• twitter: @kristencodes
• Lead Instructor, @HackerYou

inspirational sources:

• book: the 4-hour chef, Timothy Ferriss, “minimum effective dose”
• book: the talent code, Daniel Coyle, “deep practice”

problems:

• too many junior devs on the market
• too hard to recruit senior developers

solutions:

• close the on boarding process gap / cost

key concepts:

• mentorship is just as important as writing code

• cut out the noise

  • what is the minimum effective dose for our code
  • you don’t need to know everything
  • learners: focus on the fundamentals, look for patterns, once you figure something out try to explain it to someone else (solidifies learning)
  • mentors: isolate fundamentals and explain them well, as dev to explain things back to you

• repeat repeat repeat

  • with repetition, the brain can start to identify and learn patterns
  • make mistakes, fix them, rinse repeat
  • learners: build a lot of small projects, memorize syntax so you can focus on logic
  • mentors: have frequent planned feedback on the schedule, bring devs into code reviews for other peoples PR’s, assign similar tasks and let the brain figure out the pattern

• value context

  • learners: look at other code / mimic to start, find or make starter files (don’t get caught up on the tools)
  • mentors: paired programming, keep the first few tasks clear and small in scope

• have empathy

  • being at the beginning of the learning journey is a very vulnerable place to be
  • ie: learning a new instrument, starting a fitness journey, dating someone new
  • learners & mentors: be kind (to yourself and others), remember what it’s like

• remember, we’re all learning

Universal Components with StencilJS

Mike Harrington

• How I learned to stop worrying, and love standards

• angular, ember, react, vue, ....

• a lack of cross framework compatibility leads to duplicated (code, efforts) and an over abundance of choices with no clear difference in tools

• what if, there was a way we could do this with standards

• Enter Web Components...

• vanilla js, easy to polyfill, built into the browser, part of the standard

• custom elements, x-tag

• template element: client-side templating

• shadow dom

• example: github.com/pearlbea/better-img

• stenciljs, another framework?

• compiler for web components

JS minus JS? The future of targeting and transpilation

Adam Daw, Coventure

book: the new kingmakers, stephen o'grady

State of JS

• js is #1

Compilation vs Transpilation

• compilation: transforming source from one language to another (normally a language with a lower level of abstraction)
• transpilation: compilation between languages with similar levels of abstraction

Why Transpilation?

• abstraction is our friend
• the more ways there are to write js, the more people will write js

Where did Transpilation come from? Where are we now? What's the future of JS / Transpilation?

Using Vault to store your node app secrets

Taswar Bhatti, Gemalto

https://www.vaultproject.io/

• secrets grant Authentication (AuthN) or Authorization (AuthZ) to a system

Secret Sprawl

• secrets ending up in the wrong places
• source code, VCS (Github, BitBucket), configuration management (chef, puppet, ansible, etc..)

Issues with Secrets

• when were they last accessed?
• who has access?
• what if we want to change them?

Desired State for Secrets

• encryption in rest and transit
• decrypted only in memory
• access control
• rotation & revocation

Shamir Secret Key Sharing

AI+ML in the browser

Keyfer Mathewson, @keyfermath, Shopify

• teachablemachine.withgoogle.com

• what? ("supervised machine learning")

  • AI - science of getting computers to perform human tasks (ie: alphago, robotics)
  • ML - an approach to achieve AI through a system that can learn from experience to find patterns in data
  • DL (deep learning) - a technique to implement ML through structures called neural networks (NN)
  • deep learning drives machine learning, which can then enable artificial intelligence
  • the main goal of ML is prediction / inference
  • models: regression (line chart) vs classification (picture of cat)
  • machines: predict, change (to reduce errors), try

• why? do we care as js developers

  • we have a direct connection to the users on the other end of the screen - interactive machine learning

  • JS ML frameworks

    • as of jan 2010, 1
    • as of apr 2018, 8

• how?

  • brain.js

    • open source lib, two types of NN's (feedforward) and recurrent that can remember previous actions
    • easy to train models and inference
    • usage
      • data is organized in an object containing an input and an output (features and labels)
      • input has to be an array or object of values between 0 and 1, so we translate our data

  • "underfitting": not enough knowledge to create generalizations

  • "overfitting": result of training our data based on outliers, undesirable

  • tensorflow.js

    • previously deeplearn.js, developed by Google Brain
    • based off tensorflow for python, written in typescript
    • hardware accelerated
    • data has to be fed as tensors, a data structure which represents an n-dimensional array

• cool example projects:

  • melody mixer
  • styletransfer
  • tensorfire
  • cyborg writer
  • webcam pacman
  • emoji scavenger hunt

• idea: squint detector which automatically increases font-size

First Class Fun

Ryan Christiani, @rchristiani, HackerYou

• "Go programmers should not fear first class functions" (Dave Cheney, dotGo 2016)

• what is first class?

  • all operations can generally be applied to it:
    • passed as argument
    • assigned as variable
    • returned from function
    • modified

• learners need to think of functions as values

Finding Your Voice: Building Screenless Interfaces with Node.js

Nara Kasbergen, @xiehan, NPR

• "smart speakers" vs "voice assistants"

• what would you want to know about voice UI development?

  • what can i actually make?

    • history: timeline

      • nov 2014, amazon echo
      • 2015, alexa
      • 2016, google assistant, google home
      • 2017, samsung bixby, microsoft cortana
      • 2018, apple homepod

    • each player in the game seems to have gone through a natural evolution

      • 1. add voice activation to existing app ecosystem (apple, samsung)
      • 2. add content via RSS feeds (microsoft)
      • 2.5 home automation, another type of custom skill like IFTTT
      • 3. add support for custom "skills" (amazon, google)

    • conclusions:

      • amazon has a 2-year lead
      • only amazon and google have fully developed systems
      • a big focus is adding access to news and podcasts via RSS
      • home automation is secondary

• is it possible to build one app for amazon echo, google home, and apple homepod?

  • can you build one "skill" to rule them all?
  • alexa + google
    • heavily leverage their existing cloud infrastructure
      • AWS lambda + google cloud functions
    • can build a traditional REST API accessed by their services
  • the future is "serverless"
    • let's assume we want to use lambda or cloud functions
      • node.js wins
    • the official SDKs are pretty good
  • all manufacturers agreed to use SSML speech sensitive markup language
  • limitations / challenges
    • text-to-speech (TtS) is still king
      • google didn't even add support for their native audio player until feb 2018
    • no access to the user's location
    • error handling is interesting
      • user might not even trigger your skill

conclusions:

• the code is not hard
• understanding platform limitations and user expectations are hard
• apple is a bit of a wildcard

open source opportunities:

• would it be helpful to have a formalized framework?
  • not really in practice, code isn't too hard
• what we struggle with the most: QA
  • we need something like selenium or nightwatch.js for voice UI

Progressive Web Apps

Simon MacDonald, @macdonst, Adobe

• book: Responsive Web Design, Ethan Marcotte
• book: Building Progressive Web Apps

Progressive Web Apps are just web pages

• works for every user regardless of browser choice because it's built with progressive enhancement as a core tent.
• responsive:
  • fits any form factor: desktop, mobile, tablet, or whatever is next
• connectivity independent:
  • enhanced with service workers to work offline or on low-quality networks
• app like:
  • feels like an app, because the app shell model separates the application functionality from the content
• safe:
  • served via https to prevent snooping and to ensure content hasn't been tampered with
• re-engageable:
  • makes re-engagement easy through features like push notifications
• installable
  • allows users to add apps to their home screen without an app store
• linkable
  • easily share the application via URL, does not require complex installation
• discoverable:
  • is identifiable as an "application" thanks to W3C manifest and service worker registration scope, allowing search engines to find it

Tools: - workbox: https://developers.google.com/web/tools/workbox/ - lighthouse: https://developers.google.com/web/tools/lighthouse/

Node's Performance Hooks and Event Loop

Mary Snow, @thisismarycodes

Confusing terms surrounding "Event Loop"

• call stack, v8 engine, libuv, event loop, task queue

What happens when our code runs?

• call stack, push/pop, FILO

Node under the hood

• v8 & libuv

v8

• transpiles js into c++ -> assembly -> machine code
• optimizations like GC and Malloc

libuv (unicorn velociraptor library)

• written in C++, focused on async I/O
• processes async tasks through OS or its own thread pool

event loop breakdown

• timers (setInterval, setTimeout)
• i/o (setImmediate, close)
• idle, prepare
• poll (incoming connections, data, etc..)
• check
• close callbacks

performance node timing

const { performance } = require('perf_hooks')

setTimeout(() => { process.on('exit', () => { console.log('settimeout', performance.nodeTiming); }) }, 1000)

^ yields loopStart and loopExit times

Death to the Boring Design System

James Rauhut, @seejamescode

history of design systems

• 2011, twitter bootstrap
• 2014, google material design
• 2018, everyone and their ancestors are making a design system

boring problems we're solving right now

• blog post: josh clark, the most exciting design systems are boring, 2017
• "the more common the problem, the better. Design systems should prioritize the mundane."
• scaling a type scale: Mike Riuthmeiler equation
• switching barriers (covered by css gridish, opensource tool: https://github.com/IBM/css-gridish)
• "There is such a thing as over-designing, however, it has nothing to do with the capabilities of the browser. You can design for the future of your medium."

things we want today

• variation with variable fonts (coming soon™)
  • a single file with all weights of a typeface can reduce total data downloaded and the number of requests
• effortless use via element queries
  • element queries would allow css to be applied to an element based on the current width and height of that particular element.

css-in-js makes design better

• velocity in transition-duration variables
• react with eventlistener ripples
• skeletons with Math.random() states (the RAIL model from google)

A Micro Frontends Future: Using Angular with React and Vue in Enterprise Apps

Douglas Riches, Rangle.io, @froosh_ca, doug.riches@rangle.io

• resource: micro-frontends.org

Tales from the QA Crypt

Jennifer Voss, @vossjenn, Software Engineering Lead at Elsevier

• tool: cypress.io

• manual tests

  • stuck in a repetitive workflow
    • for just one simple field, like an email address
      • tester: tests feature, detects defect
      • qa lead: validates the defect
      • dev: validates defect, fixes

• automated tests

  • let testers do what they do best
    • represent your site users
    • find unexpected functionality or errors
    • let machines handle the boring repetitive stuff

• mystery tests

  • shift testing "left"
    • makes sure tests are included with the code before it gets merged
    • won't this take longer? how do we make this work?
      • takes the same amount of time, but you verify by testing earlier to save headaches

• environment disparity

  • test/dev/qa envs aren't the same as prod
  • solve via containers to get closer to the same environment as prod for our tests to run

Overcome the Async Struggle with RxJS

Eric Adamski, @zealigan, MB3

• resources: https://github.com/ericadamski/forwardjs-2018-async-struggle

• why consider different async options?

  • handle async, chainable, multi-value, cancellable

  • callbacks: only handle async

  • promises: handle async, chainable

  • observable stream programming paradigm: does all the things

  • libs:

    • RxJS
    • XStream
    • Callbag

My Hockey Team Sucks: JSON, Node and Accepting Defeat

Rey Riel, DevRel, Qlik, @rjriel87

• resources: halyard.js, enigma, nhl.com api

The Promised Land (Upgrading Legacy Code Bases)

Cosmo Wolfe, Clever, cozmo.io

Upgrading a 100+ page legacy webapp to a single page React app without slowing development or compromising user experience

Hofstadter's Law software development always takes longer than you expect, even when you take into account Hofstadter's Law

• technical goals

  • single page app
  • react + redux
  • typescript
  • stateless backend API
  • meta goal: easy to do the right thing, hard to do the wrong thing
  • maintain feature development velocity

• approach 1: dom snatcher

    ReactRouter
      newRoute1
      newRoute2
  
      *oldRoute* -> DomSnatcher to re-inject server-side content
  
    div#app (new client-rendered content)
    div#content (old server-rendered content)
  

  • wrap new and old pages in a react ui so the overhead for creating new pages with react is lower
  • downsides:
    • mixes new and old patterns

• approach 2: dom snatcher after dark

  • "everything the light touches is the new codebase"
  • write a new dashboard from the ground up
  • convert the old dashboard into an API to serve legacy pages
  • steps:
    • static asset urls need to be updated (webpack can help rewrite urls)
    • scripts from the legacy page need to be loaded (create a script element, inject it into the page)
    • links need to be converted to react router (el.querySelectorAll('a') and modify the href attribute)
    • form submission needs to be ajax'ified (hook form.onSubmit and redirect to the legacy proxy)
  • downsides:
    • lots of edge cases in the 10% phase, took a lot of effort to deal with random hacks
    • very difficult to develop on the legacy codebase

the first 90% of the code accounts for the first 90% of the development time the remaining 10% of the code accounts for the other 90% of the development time

• approach 3: d2 (dashboard 2) :P

  • write a new dashboard from the ground up and run it alongside the old dashboard, proxy requests as needed
  • benefits:
    • could still develop on the old dashboard (aka: trashboard)
    • no changes to legacy codebase
    • ended up being the simplest approach codewise
    • whole team contributed to upgrading pages
    • feature development speed increases
  • downsides:
    • hard page reloads when using the trashboard pages

• key takeaways

  • clear "right path"
  • can be done as slowly or quickly as needed
  • carrot (modern dev practices) & the stick (old trashy repo name, clunky old api, code reviews :P)
  • can be as easy as starting with a proxy and a url list

Practical Object-Oriented Design in JavaScript

Adam Waselnuk, Tech Lead at Shopify, @AWaselnuk

• book: Practical Object Oriented Design in Ruby, Sandi Metz

• message-oriented design instead of object-oriented design

• concepts:

  • single responsibility principle
    • more singular responsibility leads towards more easily changeable code
    • SRP is fractal (at the class level, at the method level, zooming down...)
  • dependencies
    • thoughts:
      • still violates CQS, dependencies in chaining make for really hard to test code
      • punching a whole w/ react context both couples an unstable api and still doesn't solve changeability

Can React apps be Accessible?

Scott Vinkle, Shopify, @svinkle

JSX Gotchas

• react attributes are camelCase, but aria-* and data-* are exempt from this
• reserved words for html attritubtes for -> htmlFor, class -> className
• self closing elements require a forward-slash to close (img, meta, input)

Setting a page title

• updates the browsers tab, so users understand where they are in the app
• SEO
• page title is the first content announced by screen readers
• document.title = 'Some Page Title'; or some pre-existing components:
  • react-document-title
  • react-helmet (created by the NFL)

Live Announcements

• announces when data is being loaded, and finishes, and announces how many items are now being displayed on the screen
• aria-live="polite" -> assistive technology will wait until other messages are announced before announcing this
• aria-atomic="true" -> ensures all content, not just the changed content, will be announced
• <Announcements message={this.state.message} />
• other existing components:
  • react-aria-live
  • react-a11y-announcer

Focus Management

• critical to a comfortable UX

• jquery $(el).focus()

• react:

  <div
    ref={
      (loadingMessage) => {
        this.loadingMessage = loadingMessage;
      }
    }
    tabIndex=-1
    >
    Loading...
  </div>

  used via:

  componentDidMount() {
    this.loadingMessage.focus();
  }
  -

• why manage focus when loading a new page?

  • React Router <Link/>
  • SPA's load pages quickly, but people who need assistive tech need an indicator that the page has changed, shifting focus helps with this

• use fragments to avoid generating invalid HTML, React.Fragment or <></>

Reacts Accessibility Linter

• eslint-plugin-jsx-a11y (comes with Create React App), outputs errors to the browser console

Semantic HTML in React

• how semantic your components are is up to you, React does not prevent this
• if there are any a11y issues, it's your fault

Getting the Most out of Code Reviews

Ksenia Coulter, @kscoult, Washington Post

• why code reviews?

always code as if the guy who ends up maintaining your code is a violent psychopath? always code as if the guy who ends up maintaining your code is YOU

• fewer bugs

• reducing technical debt

• knowledge transfer between team members

• happier clients

• getting buy-in

  • allow time to streamline the process
  • automate as much as possible (lint, prettier, etc..)
  • establish standards as a team (shared ownership)
  • build a culture of trust

• practical examples

  • steer clear of generic terms like "item", "element", or "unit"
  • don't invent terminology
  • use semantic html
  • comments
    • write why not how
    • too many comments? => refactor the code
    • keep comments up to date or delete them
  • functions
    • named(?), when is it appropriate to use anonymous functions, -> conversation with team
    • do one thing
    • reusable

• harder to quantify things

  • performance/maintainability
    • is there an existing feature for this in the codebase?
    • sass mixins
    • event listeners (right place? scope? cleaning up after done?)
    • !important (not great, force page layout)
    • DOM (minimize or batch DOM updates)
    • image sizes and formats (can we use svg)
  • security
    • user input, sanitized?
    • url parameters, secure? vulnerable?
    • cookies, extra scrutiny
    • is a 3rd party dependency appropriate? do we need this? are we vulnerable?
  • other considerations
    • test coverage
    • documentation
    • es6

Getting the Most out of CR's

when you give people agency, it makes it harder for them to avoid doing what you want them to do

• give the entire team a say in the process
• use linters and tests to reinforce code standards
• write PRs with knowledge sharing in mind
• allow everyone to be a reviewer
• negotiate feedback styles

Dive into the React Native Ecosystem

Brian Farias Tavares, Software Engineer, @elselabs

• react-native threads

  • main thread | (no link between this threads)
  • javascript thread (runs a js engine in this thread, in ReactNative, JSCore from Safari (even in Android))
  • if you want to communicate between threads, you need a bridge (async bridge that sends serialized messages)

• react-native uses the same fundamental native UI building blocks as iOS and Android

• tools for react-native:

  • react-navigation
  • react-native-navigation
  • detox (end to end testing)
  • react-native-elements (ui toolkit)