Reactjs Meetup at App Academy

7:00pm: Why react is slow and how to make it faster, Justin Menestina, OmniSci Inc,
7:30pm: Material Components for React, Matt @moog16, Google
8:00pm: Using React and WebGL to help archaeologists, @ksjogo

Why react is slow and how to make it faster

• Justin:
  • 2015 app academy graduate
  • remote from denver
• react performance: expection vs reality
  • toy app: 16 comp, 60 fps
  • real work app: 2 sec to load, slow to shutter when scrollling
• where did you go wrong?
  • render!!!!
  • many unnecessary calls of render
• overview of react lifecycle
  • application state changes -> react recursively renders
  • virtual dom -> don’t have control
  • rendering -> do have control
• why is render the bottleneck?
  • extra rendering causes extra jas work to be done ~16ms
  • js eecution => application change, rendering, reconciliation oand dom updating
  • browser work (reflow and painting)
  • developer can control rendering
• how to control component rendering

shouldComponentUpdate = (nextProps, nextState) => {
  // true -> render
  // false -> not rerender
}

• Using react.purecomponent
• Anti patternrs: fuinction references: the bad
  • do not use this.badfunction.bind(this)
  • not to send new object
  • do not create state mismatch within render
• anti patternes: function references: the good
  • bind in the constructor
  • list child component -> just pass function name, let child component handle key(index)
  • something not change use constant
  • any expaneisve operation -> return the same reference, so it won’t trigger re-rendering
• purecomponent caveats and best practices
  • don’t usre purecomponent eerywhere
  • even a shallow check has overhead and extensive, unnecessary use can cause more performance issue
  • Do place purecomponents strategically to reduce rendering of expensive components
  • react-redux’s connect is an example of this pattern… look into
  • string, undefined === they are the same object
• performance of FC(functional components)
  • const Compe = () => () type
  • can’t control render
• benchmarking
  • use chrome dev tool to figure out
• takeaways
  • renders are generally the performance botttleneck
  • control rendering by implementing shouldComponentUpdate or using PureComponent
  • if using PureComponent, avoid changing refereces to function, objects or arrays unless the value or behaviour has changed
  • use a combination of componet, pure component and Fuctional Components to acheve best performance
  • Always use benchmark tooling to put numbers to performance issues

Material Componets for React

• talk slide
• What is Material Design?
  • https://material.io
  • make beautiful products, faster. design system
  • guideline, ios, android, flutter
• tools: https://material.io/tools
  • gallery (share mocks and redlines)
  • icons (over 4000 icons)
  • and more!!
• MDC React architecture
• MDC Web -> vanilla js, MDC React -> react
• MDC React
  • 60 live components
• MDC Web
  • [adapter, foundation, component]
  • MDC Web [component, foundation/adapter]
    • MDC React
    • MCWC(Polymer)
    • Maybe more…

code examples, foundation, adapter, react components
adapter.addClass, componentDidCreated(...)

• Chip, ChipSet from ‘@material/react-chips’

• TextField

• MaterialIcon

• Feedback.js from github examples

• Takeaways

  • MDC will make my life easier
  • icons
  • you’re not alone

• Active support!

  • discord: discordapp.com/invite/material
  • github issues

Using React and WebGL to help archeologists

• Johannes ‘ksjogo’ Goslar

• Reflectance Transformation Imaging

  • Developed at HP in 2001 as Polynomial Texture Mapping
  • Capturing an object
  • Dynamic relighting and an anlaysis(without physical process)

• PTM LRGB

  • 28 light source
  • calculate surface normal
  • capture > process RTIBuilder > View RTIViewer

• Problem?

  • scientific code

• requirements

  • support for PTM and RTI file format

• file format

• gl-react

  • check this library out

const shaders = Shader.creawte({
  helloGL: {
    frag: GLSL
  }
  })

class Example
render (
  <shaders>
)

• mobx
  • another state library
• Demo
  • electron app
• takeaways
  • use gl-react library
  • https://github.com/ksjogo/oxrti

sponsers

• app academy
  • chase
• omni-sci, david vp of eng
  • formerly mapd -> analytics company
  • platform,front -> react
  • db and rendering engine, backend running on gpu
  • 30 ms in billion rows
    • class 3 funding just passed
  • linsien -> direct of engineering for frontend