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>
)


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
COMMENTS
Related Post