Tungsten.js Component Visualizer

Team name: Team 74 (if you're wondering, 74 is the atomic number of tungsten) Team participants: Andrew Rota, Joe Zatkovich, Spencer Gregson, Kofi Owusu Acheampong, and Matt DeGennaro

Inspiration

We were inspired primarily by a presentation given by Facebook engineer Jonas Gebhardt at React Europe on a work-in-progress project called Combine that focused on visual programming in React. We thought that was cool concept, and wanted to put our own component architecture in Tungsten.js to the test by implementing something similar.

What it does

Takes tungsten.js components and allows the user to visually compose them into an application that then gets rendered on the page.

How we built it

With tungsten.js, leveraging webpack and babel for the build.

Challenges we ran into

Time/availability limitations mostly. Some issues with nested component composition.

Accomplishments that we're proud of

Proved out the basic concept, provided a foundation to build it out more in the future.

What's next for Tungsten.js Component Visualizer

Create a more robust composition layer for combining different types of components. Integrate with our own internal PHP framework leveraging Mustache_Data to build out components. Dynamically pull in components from places like Wayfair's Homebase pattern library. Use type hints for property fields to show where and how components can be composed. Potentially integrate into the tungsten.js debugger for an additional view of how components are structured in your application.