bitmovin-player-ui icon indicating copy to clipboard operation
bitmovin-player-ui copied to clipboard

Rewrite rendering layer with Preact

Open protyposis opened this issue 6 years ago • 1 comments

We are looking to rewrite the rendering layer of the UI for v3 (#111) with the following goals:

  • integrates nicely into the current Component/Container architecture
    • probably replaces the Component.toDomElement function
    • does not unnecessarily blow up the file structure
  • improves rendering performance
    • DOM tree should only contain active/visible elements (instead of just being hidden via CSS like now)
    • how to handle CSS animations/transitions (e.g. fade-outs)?
    • how to handle child elements / container children?
  • allows dynamic reconfiguration
    • allows changing language / updating labels on the fly
    • global generic configuration per Component via UIConfig, overridable on instance level
  • usage of an external library explicitly desired
    • must not add much weight, i.e. increase in output file size

Internal evaluations have shown that Preact could be the right library to use as a rendering layer because it's very small and has shown promising performance improvements.

We have not yet decided how to integrate it and are looking for opinions, proposals and PRs. Any help is appreciated!

protyposis avatar Jul 02 '18 10:07 protyposis

A small demo on using Preact for the Label component: https://github.com/bitmovin/bitmovin-player-ui/tree/feature/preact-label

protyposis avatar Jul 02 '18 10:07 protyposis