Facilitating the Spread of Knowledge and Innovation in Professional Software Development

Write for InfoQ


Choose your language

InfoQ Homepage News UI Development Environment "Storybook 4" Supports Six New View Layers, Including Ember and MarkoJS

UI Development Environment "Storybook 4" Supports Six New View Layers, Including Ember and MarkoJS

The Storybook 4.0 release adds support for six new view layers including Ember, MarkoJS, and Svelte, and updates its dependencies to Webpack 4 and Babel 7. Storybook provides a UI development environment and playground for UI components, enabling users to create components independently and showcase components interactively in an isolated development environment.

Storybook strives to improve component development, testing, and documentation regardless of framework or stack. The project helps developers write stories which represent a single state of a component, similar to visual test cases. With the Storybook 4.0 release, Storybook now supports Ember, MarkoJS, Mithril, Svelte, Riot.js, and an HTML snippets view, in addition to existing support for React, Angular, Vue.js, and React Native.

Storybook runs outside of the main application development environment, allowing developers to create UI components in isolation of application-specific dependencies and requirements.

Storybook 4.0 improves its performance via upgrades to Webpack 4 and Babel 7. The 4.0 release also adds compatibility with create-react-app 2, Gatsby 2, and Next 7. The update of dependencies also improves support for JavaScript configuration, TypeScript, and JSX fragments. Support for React Native receives significant updates in the 4.0 release of Storybook, including a simple process to distribute Storybook to a development team’s mobile devices and running Storybook as an application without needing to connect to a Storybook server.

The Storybook development environment also received updates with support for theming of the IDE, and a new dedicated mobile view. To view Storybook in action, visit the official Storybook example.

Migrating to Storybook 4.0 from earlier releases requires upgrading the version of Storybook using npm or yarn, upgrading dependencies on Webpack and Babel, and reviewing updates for various add-ons and minor breaking changes.

Storybook is available under the MIT open source license. Contributions are welcome via the Storybook GitHub project and should follow Storybook's contribution guidelines and code of conduct.

Rate this Article