DEV Community

Eden Ella
Eden Ella

Posted on • Originally published at blog.bitsrc.io

Build Marketing Landing Pages Faster With Reusable Components

How to let marketers view all the components your team has so you can design and build multiple websites and pages faster.

bit.dev — Create a component catalog for everyone to sharebit.dev — Create a component catalog for everyone to share

“How can marketing view the components our company already has?”

Many marketing teams seek a way to build their websites and apps faster. This is critical to help communicate your product to your users and consumers.

Today, in a world of React, Vue and Angular, these websites and apps are already built from reusable UI components. Why not reuse them?

When you seek to build a new marketing site, page or app, you just want to quickly learn which components are available for your team to build with. You don’t want to have to dig through the source code of your projects. You want to see the components as visual units that you can explore and choose from.

Using tools like Bit’s component platform you can create a shared cataolog of your actual code components, which provide this expirience and help speed your building time. It also lets marketing, R&D and other stakeholders view and discover the components that are available for your organization.
Share reusable code components as a team · Bit
*Easily share reusable components between projects and applications to build faster as a team. Collaborate to develop…*bit.dev

Marketing can view all shared UI components

bit.dev is a platform for shared reusable components. It lets developers easily share components from their different projects into a shared visual collection. There, they can quickly find and use components to build new things.

This collection isn’t just for developers. Every component is visually presented with live examples of how the component looks, works and feels-like to users. Marketing managers can see every single component with their own eyes.

Before designing a new website or app for potential costumers, marketing personas can easily view and learn exactly which components are available. They can even play with the components hands-on to see how they work.

A loader component shared in bit.dev: view, play and use in new projectsA loader component shared in bit.dev: view, play and use in new projects

Thanks to the advanced component-search in bit.dev, you can just search for components using plain English to see what’s available in your team’s collections, or in the open-source community (why not use it too?).

For example, just type “button” and view thousands of components in bit.dev, shared in your team’s catalogs or by other developers around the world.

Then, you can use these components to design new websites, features and apps, which will be quick and easy to build with your reusable components. You will also know how it will look and behave before you even start working.

Developers reuse components to build faster

Through open-source project Bit and the bit.dev component collaboration platform, developers can easily share, organize and reuse shared components.

Bit’s CLI tool lets you seamlessly isolate existing components in any project or library with all their files and dependencies so that you can individually version and publish them to bit.dev. From there, components can be installed in other projects using package managers like npm and yarn.

When a component is updated, you can update only the changes to that component without having to dwell in PRs to the entire library. Moreover, you can use Bit to import the component’s source code into new projects and suggest changes to the code right from that consuming project.

The result is a fast, collaborative workflow over reusable components that lets developers build multiple websites and apps faster using shared components.

Keep your brand and UI/UX consistent

When you reuse components you keep your visual and functional expirience consistent for your users and costumers. This means more use happiness and less confusion, which sums up to better conversion rates across the board.

Using Bit this becomes easier than ever before, as the same components are used in different projects while keeping a consistent visual experience. In fact, you create a component design system much like Uber, Airbnb and others do.

Build lighter websites that load faster

When you use individual components to build your applications you can avoid adding too much weight to your applications. This means faster loading times, which increase the numbers of traffic and engagement with your websites.

Google research shows that roughly every 0.5 seconds added to the page’s loading time will result in 20% of traffic lost. Amazon states that a 1 second lag time will cost $1.6B a year. For your own product, faster loading times may generate better numbers in conversions, retention, traffic and more.

Using bit.dev, you can learn exactly which component weighs more than others and even filter your components based on the total bundle-size they add to your application. The result: lighter apps that load faster for users.

Get started

To get started, just head over to bit.dev and create your free account. Over 50k developers and teams already use bit.dev to share code and colalborate, inside their organizations or with the open-source community.

You can even invite other stakeholders to collaborate over your shared components, such as designers, product and company management. When everyone can easily view the building blocks you have at your disposal, you can get everyone on the same page and work better as a team.

Top comments (0)