DinosaurJS 🦕

2019

For questions during the talk tweet @paladique

Building a Babel 7 Processor

Cassidy Willams (@cassidoo)

• @babel/standalone
  • contains most of the presets and pluggins
  • it was not extendable, so it had to be done themselves
• Design Considerations
  • Browser support
  • Did not compile to ES2015, since very few people use IE10 or older
  • Customizable plugins
  • Extendable
  • Catch errors in both the babel pipeline and user code
  • Handle infinite loop detection, since infinite loops break the application
• Tests
  • Everything was tested, each plugin, the combination of plugins, etc

Note for future talks: put twitter handle at the bottom of every page

A Postmortem on the Ingen Incident

Haley Denbraver (@hayleydenb)

• Used Jarassic Park to demonstrate walking through an incident
• All complex systems behave in unpredicatable ways when minor chaos is induced
• Sources of chaos
  • Teams missing context
  • Pressure to finish things too quickly
  • Unethical behavior
• Chaos Engineering
  • Practice of breaking your system on purpose and documenting how to fix it
  • Don’t start in prod
  • Start small, make a prediction, observe and iterate
  • Another term for chaos enginer: chaos injection
• Recommendations
  • Hire people you can trust
  • Allocate appropriate budgets to projects
  • Utilize chaos engineering
  • Not moving forward is an option, you can say no

How To Have An Amicable Breakup with a JavaScript Library

Daria Caraway (@darcar31)

• Phases of using a javascript library
  • honeymoon phase
  • at some point you get very attached
  • breakup
• The breakup
  • Reasons
    • Too large
    • Deprecated
  • Completely move on
  • Won’t let go
  • Ghost them: leave the code alone
  • Remain friends: iteratively remove the code
• Preparing for the breakup
  • Write tests that don’t depend on an implementation
  • Use wrapper components
    • This de-risks your application from any one library
    • Allows you to swap out for your own implementation if nothing else works
  • Define interfaces, the contract/api for the component
• Live demo on how to swap out an entirely different component library

Codemods: Refactoring JavaScript using JavaScript

Saimon Sharif (@saimonsharif)

• Codemod
  • scripts used to help with refactoring
  • refactor by using transfromers
  • jscodeshift: mainstream codemod lib
• recast: a tool for parsing, manipulating and returning code
• AST (Abstract Syntax Tree)
  • consists of nodes that describe the structure of our programs
  • https://astexplorer.net
• General flow: Parse => Modify => Regenerate
• Demo write a codemod to transform function expressions into arrow functions
  • Helpful to write out some cases manualy to understand the expected input/output. Think of them like test cases
  • jscodeshift can select all functions and filter out functions that contain this
• Tips
  • Have safety nets in place before using them, extensive testing is key
  • Don’t make any additional changes on codemod refactored branches (especially manual changes)
  • Split up codemod changes into multiple changes and deploy each one separately
  • Document your changes for codemods, and include the codemod with the source
  • Version control your codemods
  • You don’t need to handle every case, can handle edge cases later

The Future Of Web Animation

Sarah Drasner (@sarah_edo)

• The web is about communication
• Hooks
  • Changing to Composition Components
  • Can encapsulate animations so they can be reused on composed
• Page Transitions
  • going from page to page with different structures increases cognitive load
  • Using more intuative layouts and smart transitions can help reduce cognitive load NUXT
  • next.js for Vue
  • can create page transitions using css classes and javascript for advanced transitions
  • Vue "Flip under the hood"
    • Wrap a group of elements and define how they change over time
• Responsive Webdesign
  • flexbox covers 2d
  • what about 3d experiences with VR?
    • we can do this with current tech
    • three.js
    • future media queries might have VR as a query
    • ARKit 2.0
  • ARChemistry - new experiences that for learning
  • Static 2D is an abstraction from 3D
• Progressive Enhancement
  • A book that has 3d view when looking at it with an iPad
• “We Are In A Rut. A Rut Shaped Like This” – pointing out hwo all sites look the same

Pika: Reimagining the Registry

Fred K. Schott (@fredkschott)

• A talk about why use bundlers
• npm is the reason why we need bundlers
• Module History
  • Common.js was never meant to run in the browser
  • Web as using AMD
  • Eventually browserify brought Common.js to the web and AMD dissappears
  • Web moved to ES Modules but node.js is still on Common.js
• Pika: A tool to find Modern modules
  • @pika/web
    • only runs when your dependencies change
    • allows javascript packages to run in your browser
    • removes need to bundle code and have very complex toolchains
    • you can still use a build step if you’d like to
      • @pika/web + babel
  • about simplification and reducing tools
• We still need bundlers
  • imports
    • bad subdependencies
    • bad imports
    • bad node isms import url from 'url'
• Divide
  • One group focused on JS and everyone
  • Everyone in an npm survey wanted to have less tooling – simplify!

The Art Of Teaching

Lori Culberson (@irongirltx)

• Teacher - someone who has knowledge to share
• Student - someone who wants to learn
• How We Learn
  • With new information our brain starts to look for clues
  • Schema
    • Building blocks for knowledge
  • New knowledge is built on previous knowledge and experiences
• How We Teach
  • We have a tendency to teach the same way we like to learn
  • Students don’t necessarily learn the way we teach, we have different learning styles
    • Unless there is an impairment most of us learn in a combination of ways
  • Set the stage for a no judgement learning zone
    • It’s ok to make mistakes
    • If students don’t understand try a new way to teach
  • Provde learner with clues
    • Spell out acronyms
    • Example: CDN
  • Explain in byte sized pieces
    • Avoid verbally overwhelming explainations
    • Talk for only 3-5 minutes, then check for understanding
  • Check for understanding
    • Ask studens to summarize what they learned, then provide quiet think time
    • Techniques
      • Pair & share
      • Write a summary
      • Draw a picture
    • Don’t interrupt when the learner is summarizing, they might catch themselves (which is a great learning tool)
  • Benefit of Confusion
    • Making errors facilitates learning as long as corrective feedback follows
  • Drawback of Confusion
    • If a student started off and stayed confused it hindered learning
    • Validates the need for a feedback loop to check for understanding more frequently
  • Don’t Use Sarcasm
    • Sarcastic comments are putdowns wrapped in humor
    • Many people feel put down and think the sarcastic person is a jerk

Data Science in the Browser: DX & UX

Jana Beck (@iPancreas)

• Data Science at Stichfix
  • co-dev with data scientists
  • have multiple teams focused on areas of the product
• Dimensionailty reduction
  • allow you to see relationships between items
• t-SNE
• UMAP
• Componentization
  • minimize load on users’ compute resources
  • minimize compute time
• better UX
  • how?
    • compute on the GPU
    • caching!
      • data that doesn’t change often
      • local storage
    • Web Workers
      • create an embedder (thing that runs UMAP) in a web worker
      • bundling the embedder allows it to be easily shared
    • OffscreenCanvas (new)
• better DX
  • caching
  • componentization is important for DX
• Demo
  • UMAP of numbers using the MNIST dataset in the browser
  • UMAP of articles of clothing to similarly catagorize them
    • Could be used for suggesting similar items of clothing
  • opensourced: npm install react-flatland

A Partial Taxonomy of Test Unreliability

Rich Trott (@Trott)

• Tools
  • Have a job that runs lots of different configurations, serial, parallel etc. it will help find wierd stuff
• Types
  • Race Condition
    • Writing to and reading from the same file in parallel
  • Magic Number
    • Loop with iterations that work on a fast machine and not on a slow machine
    • Special case of race condition
  • Long Timeout
    • Special case of magic number
  • Deadlock
    • Two resources waiting on the same thing
    • Special case of race condition
  • Too Much Stuff Going On (TMSGO)
    • Might launch too many processes
    • Special case of race condition
  • Firewall!
    • Make 500 HTTP requests to a test resource and hit a bottleneck
    • Special case of race condition
  • Range Overflow
    • Limited system resources to allocate, like port allocation
• Global State
  • One test affects another
• It’s very likely to be a race condition (probably)

A Tale of Two Architectures

Tejas Kumar (@TejasKumar_)

• Native / PWA
• We build things to solve problems
• Problem solved in demo: How much medicine is in his system to counteract Hemophelia
  • Shown as a percentage in realtime
• Demo
  • Using glamorous
  • react native components have some properties that are not easy to work with
• 66.7% of devs use JS
• PWA
  • Web apps that progress into an application
  • More accessible
  • Faster
  • Smaller
  • PWA checklist is huge, and some of the items are difficult
  • Good
    • Work on all devices
    • Single codebase for all the things
    • Universal experience
    • Familiar tooling
    • Use device features when available (progressive enhnacement)
  • Bad
    • Hard to monetize
    • Limited access to device API
    • UI/UX inconsistency
    • Browser support
    • Security
• React Native
  • There’s targets for Andriod, iOS and other platforms – but not the web
    • There is work getting web as a build target react-native-web and react-native-dom
  • Good
    • Write React once, deploy everywhere
    • Easy monitization
    • Can share state with Native OS (Ex: Healthkit)
  • Bad
    • Different APIs for different devices
    • Trivial tasks are sometimes complex (demo was a great example of this)
    • There are more cons, but Expo helps with them
• Which one should I use?
  • It depends on your use case
• Humans first – people use apps to solve problems, they’re not worried about “do you use webpack”