PhosphorJS

The PhosphorJS Project

What?

The PhosphorJS libraries cover topics including (but not limited to): message passing, signaling, attached properties, data structures, widgets, and layouts. Each of the libraries is a separately installable NPM package. Developers are free to use as much or as little of PhosphorJS as suits their needs.

Most users will be drawn to PhosphorJS for its high performance layouts and well structured widget hierarchy. These features allow a developer to build desktop-like experiences which are not possible using CSS alone, and which are not within the purview of most of today's web frameworks.

Why?

HTML and CSS were designed for documents, not applications. There are certain classes of user interactions which are expected of production-quality desktop applications which are impossible to implement in CSS alone. Think of tabbed and docked panels in an IDE application. These types of interactions must be implemented using JavaScript, and implementing them in a scalable and elegant fashion requires a reasonable amount of architecture. This includes facilities such as: a message-passing hierarchy, resize/attach/detach/show/hide events, size constraint aggregation, and efficient layout computation. PhosphorJS provides these low-level facilities that are currently missing from the web, in a way which is flexible, unopinionated, and compatible with existing code.

How?

  • PhosphorJS provides a simple and flexible Widget class which establishes a hierarchy for message passing and DOM node manipulation. This enables the propagation of various messages throughout the hierarchy, such as: resize, attach, detach, show, and hide (among many others).
  • Once establishing resize messages which propagate reliably, it becomes possible to implement layouts in JavaScript which would be impossible to achieve with CSS alone. By explicitly specifying the position and size of a node in absolute terms, the browser is able to optimize reflows so that they are contained within the affected portion of the page. This means that changes to one part of the application do not incur the cost of a reflow of the entire page.
  • PhosphorJS recognizes that CSS is good at lots of things, and does not prevent the developer from using it when appropriate. PhosphorJS layouts play nicely with standard CSS layouts, and the two can be freely mixed within a widget hierarchy.
  • PhosphorJS recognizes that developers have favorite frameworks that are well suited to a particular task. A Phosphor Widget instance can play host to DOM content generated by any other framework, and such a widget can be freely embedded within any Phosphor widget hierarchy.
  • PhosphorJS provides a host of predefined widgets and layouts which are hard to implement correctly and efficiently, such as: menus and menu bars, split panels, and tabbed and docked panels. These make it simple to create the rich desktop-style applications described previously.

Can I use it now?

Yes! All of the libraries listed on the documentation page have reached 1.0.