Node + JS Interactive Conference

NodeJSConf.md

A React Point of Vue - Divya Sasidharan, Lucro Global LLC

Components

• vue separates logic and mock up
• logic is specified in script tag
• add the word functional to template to make it a functional component in Vue
• conditionals
  • v-if="ice" and v-else for rendering

Stateful componentss

• react uses this.setState() to update state
• uses directives to iterate v-for='variable_name'
• vue can change the data property from the template without a setState
• vue uses @change to create a listener
  • can use v-model to shorten a reactivity change, default predefined behavior

render children

• agnostic container that renders children
• react: this.props.children
• vue does have acces to a render() method and has create element that takes the same 3 arguments
• children in vue are not accessed through props
  • this.$slots.default
  • requires <slot></slot> as a child of the component
• can write JSX in Vue script as well

slot

• slot cannot be a root component
• can determine order by giving slots names to expect certain components

render as a prop

• Vue doesn't really have render as a prop
• Scoped Slots
  • renders this.$scopedSlots.default()
  • poss in any scope you want it to have access to

Building High Performance React Applications - Joe Karlsson, Best Buy

Virtual DOM

• why react is so dang fast
• dom update -> virtual dom (makes a copy of itself), react comparies the differences -> actual DOM patch updates those differences

faster

• only render when needed, minimize
• need to measure performance
• ?react_perf in terminal to get some performance specs

tips

• use key correctly
  • make it unique
  • used by react to keep track of elements!
  • compares the diffs
  • dont use index as key!
  • use a hash alg
• manage shouldComponentUpdate
  • lifecycle method
  • specify exactly when component should render
  • best for deeply nested data structures
  • returns a boolean
• extend PureComponent instead of Component
  • free performance boots
  • shallow comparison of all props and state
    • looks at top layer
    • if immutable data, checks to see if new object
  • will do shouldComponentUpdate for free
  • RISK: deeply nested data can mess up
• use immutable data
  • makes a new copy of an object
  • tracking changes are cheap
• use isomorphic react
  • initial render of components on server
  • debugging is tricky due to node
  • managing configs
  • no DOM
• build for production
  • setting a node environment variable to production NODE_ENV = 'production'
  • strips out all of those dev tools stuff
• use stateless components

thoughts

• GZIP all plain text
• use png or loseless for images
• analyze webpack bundle
  • turns into a blackbox
  • webpack analysis as part of build process
  • webpack bundle analyzer
    • shows bundle sizes as containers

Introduction to Vue.js

Vue.js

• focused on the view layer only
• easy to integrate with other libraries
• single page apps
• with modern tooling and supporting libraries

progressive framework

• can add to projects gradually or progressively
• scales with project
• flexible with backend linking
• can add vue components to other libraries
• broken into libraries
  • router, Vuex state management
• fantastic docs

notes

• The v-bind directive dynamically binds one or more attributes, or a component prop to an expression. That little : makes all the difference!
• there are lifecycle methods just like react!
• Computed properties can be used to do quick calculations of properties that are displayed in the view. These calculations will be cached and will only update when their dependencies are changed.

Offline First: Making Your App Awesome When the Network Isn't - Teri Chadbourne, Protocol Labs

Offline First

• a dev approach that plamns for constrained network conditions first
• UX that just works, from developing work to urban commute, offilne or on
• social movement
• no app can work when first visited offline

editorial process

• starts at offline at camp
• back and forth
• multiple authors need a shared tool for collab

guide

• offline is the baseline, work from there

offline data storage

• pouchDB and couchDB
  • pouch is local data
  • couch is shareable
• data stored locally?
  • but need to collaborate with others

pouchDB

• allow users to have their own local version of a database
• in browser database
• async api
• across browsers
• checks for certain features
• local DB
• const pouch = new PouchDB('pouch');
• if the remote database exists, sync

couchDB

• NoSQL data store
• stores in JSON format
• uses Mango

sync

• set up a continuous sync
• listen for changes
• offline status is a headsup, not an error
• reassure user data is safe offline
• need a unique ID that is consistent across all DBs
  • usually a date
• _rev revision records is required on any subsequent write in pouchDB
• service worker cache will continue to leave the page up even when the DB is down or the internet is off!

service workers

• enable offline capable updates, notifications
• fast on delivery
• application -> service workers -> status -> activated?
• intercept network requests and see if it is already in the cache
  • get from cache if same
  • get from network if not
• creates fast user experience, even if it is not updated

Standardizing Javascript

• Jory Burson

Standards

• technical spec that adopters target as a representative implementation of tech
• many organizations and groups, makes it difficult to work together
• necessary to communicate between systems
• necessary for interoperability within system
• impact how a problem is solved
• impact pacture finfancial value
• impact rates of adoption technologies
• impact regulation of tech

Common standards

• interfaces
• data formats
• vocabulary
• languages
• processes
• frameworks

components of a standard

• technical description
  • hard to read!
  • tech jargon
  • self referrential
• intellectual property policy
  • copyright??
  • what right does it grant or restrict
• Issuing authority
  • W3C, Oasis, EMCA, ITU, IETF

EMCA starter pack

• around since 1961
• used to stand for menufacturing
• based in Switzerland, close working relation with Swiss standards
• non profit
• general group, technical group, management group

types of standards

• proprietary (closed) standard
  • maybe a company offered
  • published by a single organization
• De facto / community
  • de facto can be a proprietary standard that got enough traction to be accepted by the greater community
  • de facto can and often is controlled by a single group
• De Jure
  • from law
  • taken through a formal process by a formal body
• volunteer consensus
  • tech specs developed through a standardized body
  • multiple stakeholders
• open
  • all stakeholders may participate
  • all interests are discussed and agreement found, no domination
  • due process
  • same standard worldwide
  • low or no charge for IPR
  • open access documents
  • open change process
  • open interfaces
  • objective performance support
  • ongoing support
• openness is a scale!

JS

• how open
  • EMCA organizational membership structure
  • must join
  • TC39 is consensus seeking comittee
  • improvements via tooling
  • worldwide royalty free
  • EMCAScript spec is free
  • many efforts to make process / archival documents more accessible
  • Test262 conformance regression test suite

process

• stage 0: idea
• stage 1: proposal
  • high level discussion
  • challenges identified
• stage 2: draft
  • spec text
  • more precise syntax
• stage 3: candidate
  • further refinement
  • feedback & testing
• stage 4: final
  • all criteria met, tests in, signed off

pub process

• never want to be stuck for years like the early days of JS again
• keep the language evolving and moving
• in person meetings
• feature freeze (november)
• editors polish spec-text
• 90-day spec-text freeze for IPR clearance
• sent to EMCA GA, officially published

TC39

• evolving old school standards with open source practices

Internaltionalize your web apps with GlobalizeJS and Unicode CLDR

• Alolita Sharma

GlobalizeJS

• JS library enables to build app for global audience
• open source
• supports open standards
• around since 2010
• 65 active contributors
• was once jQuery, now pure JS
• Common Local Data Repository (CLDR)

current features

• currency, dates, relative time, numbers, units, plural generators, message formatting
• implements Unicode Technical standard for UTS 35
• does not bundle local data
  • must be initialized using CLDR data
  • uses timezone data from IANA-tz
• stays in sync with latest CLDR data so app can always access the latest locale data

Unicode CLDR

• provides building blocks for software to support languages
• largest most extensive standard repository of locale data
• used all over the world

Math in Javascript can be Awesome

• Dominic Kramer

deep learning

• neural net of computations that will occur
• feed vectorization -> hidden layer which turns -> a number -> yes or no
• tools
  • linear alegebra
  • optimiation theory
    • gradient descent
  • calculus
    • gradients
    • chain rule
  • probability theory
    • cross entropy

tensorFlow.js

• runs in browser utilize webGL
• runs in Node.js
• leverages hardware

core mathmatical tools

• you can directly access core mathmatical tooling from tensorFlow

Bridging the Designer-Developer Gap, PWA

• Antoinette Janus

web apps

• fast, reliable, engaging
• has an empty state for when there is no data available
• emersive user experience despite user device
  • gmail, google docs
• uniform feeling

design system

• collection of objects aligned by shared principles
• much like components! example:
  • button has consistent color and font styles for primary, secondary, etc.
  • functionality, styles, use cases

Documentation

• web manifest
• design system

Automated accessibility testing

• Dylan Barrell
• github.com/dequelabs/axe-core

JS, CSS, HTML

• were created with the internet in mind, may lose connection, things might disappear
• one part might fail, but the application can continue without complete failure
• therefore silently fail

tools

• cypress, jest, cucumber, mocha, serelium, etc.

accessibility

• usually invisible to the developer
• usual tools you rely on do not help from an accessibility standpoint
• bad:
  • incorrect to use an image for a button
  • if you take the alt away, a screen reader cannot find it
  • taking control of the tabindex
  • adding menuitem to every single list item
  • making up roles that dont exist, using them wrong
• test functionality with a keyboard

Axe-core

• finds 50% of HTML accessibility issue
• any browser
• shadow DOM
• cross-domain iframes
• open source, free
• WCAG 2.1 support
• find aria issues / misuse
• missing labels
• firefox and chrome extension
  • press the analyze button
  • will analyze the state that time page is in at that point in time (will not test purposely hidden content)
• brings up a list of results grouped by rules, can filter, gives examples of best practices, show source code / HTML
• has a learn more button with information on rules kept in sync with aria rules
  • information on why you should care
  • different ways to fix the problem

npm axe-core

• can bring into test suite import axe from 'axe-core'
  • axe.run(fixture, (err, results) => //assertions)
  • fixture is a functional test to get resulting DOM

Axe-cli

• also exists, can add to jenkins

react-axe

• prints out information dynamically as the page updates with interactions
• does not reprint the same errored element

google lighthouse and devtools

• has Axe-core running underneath the hood!

coming next

• more rules and improved rules
• linting support
• project from a large partner
• Project Walnut

HTTP/2, One Frame at a time

• Irena Shestak

why

• a major protocol shift with potential to accelerate the web
• faster applications
• efficient, compact, less error prone

HTTP1 vs HTTP2

• focus of protocol is on performance
• in 1991 HTTP1 was introduced:
  • much slower web traffic
  • looks at a single TCP connection
  • 1 request
  • packets are blocked with other packets in qeue
• HTTP2 in 2015
  • 1 TCP x connections (several streams)
  • number depends on hardware
  • provide key and sertificates

brings some lil wins

• stream prioritization
• server push
• compress HTTP headers

how do we connect

• start off with a single TCP connect that has multiple streams
• clinet sends over frames
• you can send back an Upgrade header to let the client know they can handle this in HTTP2
• Negotiations
  • client makes a call
  • request with frames and upgrade header
  • server says yes it can upgrade
  • client sends over settings grames

Frames

• HTTP2 uses Frames to communicate with client
  • headers, data
• frames come with header blocks
  • HTTP2 compresses!
• normal headers add 500-800 bytes of overhead of just information

headers

• client sends over a header
• serialized
• turns into octal
• sent to server
• HTTP2 will reuse headers so similar information is not redundant
• compressed!

http2-request

• samndbox on github

stream

• independent bidirectional sequence of frames exchanged between client and server
• states:
  • closed
  • idle
  • reserved
  • half closed
• each endpoint can combine frames received from multiple streams
• prioritization
  • many streams per connection, prioritize resources
  • can give weights on either end
  • heavier weights are more prioritized
• flow control
  • congestion can happen
  • allows the receiver to control how much in can receive at a time
  • credit based system
  • allocate points like credit

server push

• allows server to preemptively send data to client
• server knows you will need other things in addition to content that was requested, places it in browser cache
• will appear as PUSH / (index) in Network tab under Initiator
• http1 does not cache

future

• hypertext transfer protocol
• websockets & HTTP2?!

Javascript Async Context

• Mike Kaufman & Mark Marron

Async Context

• "how did I get here" across async boundaries
• call stack is available
• Example, nested function callbacks a -> b -> c
  • they are unique by invocations, a()1 -> b()1 -> c()1 vs `a()2 -> b()2 -> c()2``
  • may not all come back in order, becomes confusing

Why is it important

• foundational
  • no shared terminology or concepts
  • no ties to JS source code, a reader must have an understanding of APIs
  • no formal specs
• useful in application and tooling
  • confinuation local storage
  • async call stacks
  • async step-into debugger
  • memory leak detection
  • APM reporting

Where is the JS community today

• monkey patching
  • overwrite functionality in API, intercept
• domains
  • conflated async call flow with exception handling
  • required explicit enter() / leave()
• async hooks
  • lifecycle events on Node.js resources
  • exposes implemntation details
  • expensive transitions from native code to JS code

Formal modal

• define concepts and give names
• provide structure
• no policy
• implmentation at VM level
  • integration across stack
  • potential syntatic structures

concepts

• async API
  • takes a function as a parameter and invokes it at a later time
• goal: provide primitive constructs that captures async code at API boundaries
• why?
  • API boundaries are close to programmers mental model
  • primitives are simple, get pushed up the stack
• continuation: a special type of function that is passed into an async API
• Context: structure created when a continuation is invoked
• assumption: all functions passed across async API boundaries are continuations
• invariant: all JS code executes inside of a context example:

continufy

• given a function, transform into a continuation
• for any given stack frame, we can find our context by looking down until continuation is found
• will have a invocationID
• a pointer back to continuation that created it
• readyContext: point across promise chains

memory leak detection

• tag JS heap objects with their "allocation context"
• apply heuristics to identify potential leaks