6 Reasons for Employing Component-based UI Development

IT leaders claim that component-based UI development isn’t just the future of the web.  It is a technique that digital application owners need to implement right now.  Developing with a component-based user interface creates a sustainable technical architecture, saving time and costs. It also ensures a consistent experience across a portfolio of applications.  In the following discussion, we’ll emphasize the benefits of taking a component-based UI approach to development, and how you can get started.

What is a “Component”?

For the sake of this article, we’ll define “component” as an independent piece of software. This standalone, discrete piece of software has a clear boundary that is accessible via an API and contains all of the application dependencies. This enables teams to build the user interface quickly, leveraging the library of components.

What are the Benefits to Using a Component-Based approach?

1. It Allows for Reuse

Components are atomic units, and building with components allows for their reuse in future development cycles. Since technologies come and go, this is invaluable. If you build your application in a componentized format, you’re able to swap the best components in and out.

One of the challenges of reuse with other development types is that they are not internally built or that they include many dependencies. A component-based UI approach allows your application architecture to stay up to date over time instead of rebuilding it from scratch. You can build multiple applications that adhere to the intended design principles.

An example of an application that uses UI components is Salesforce’s Lightning Design System. This is a collection of design patterns, components, and guidelines for creating a unified UI in the Salesforce ecosystem. This type of framework enables design governance and a streamlined experience.

Lightning design system component-based UI development

Salesforce’s Lightning Design System is an example of a set of components, patterns, and guidelines represented with unique icons.

2. A Component-based UI Approach Accelerates Development

Using a component-based UI approach supports iterative, agile development. Components are hosted in a library from which teams can access, integrate and modify them throughout the development process.

Suppose that you were developing a financial application, and it required a listing of positions by asset class. You can pull a positions-by-asset-class grid component from the component library and quickly integrate it into the application. The developer does not have to worry about the service signature and creating the logic for the table.

In the design process, instead of designing new components, the designer focuses time on extending the existing components and designing new components where required. This optimizes the design process without designing a new grid, layout, or navigation. Ultimately, this expedites the design and development process because of the level of reuse.

3. It Ensures User Experience Consistency Across a Portfolio

One of the major challenges for an organization is ensuring that a portfolio of applications provides consistent user experiences and interactions. The component library acts as a point of governance for the business, designers, and quality assurance teams. In the case of Quality Assurance (QA), teams often have challenges validating the user interface due to a lack of an approved set of user interface standards. The component-based approach enables the creation of a library that provides that approved reference point. This enables the QA team to govern the compliance to UX standards across a portfolio of applications. It acts as a dynamic repository that the QA team can use to validate their tests.

As an example, there are many ways to handle a file upload feature within an application. A new application may select an approach that is different from the approved version within the component library; QA can utilize the component library to confirm alignment and then open a UX related defect.

4. It Easily Integrates into the Development Process

As components are created, production quality user interface code is managed within a source code repository such as GitHub. Application development teams are well versed in using source code repositories, and so they are able to extract the code as needed and incorporate it into the application. Leveraging the initial component as a starting point, development teams can extend it to meet their needs. Then they can submit it into the code repository for review and approval for inclusion.

The component library can be versioned in the repository, enabling tracking of which applications are on which version of the approved UX. This also will facilitate the governance and update process.

5. Component-based UI Development Optimizes the Requirements & Design Process

component-based UI development cycle

This is a visual example of how a component-based development style streamlines your processes.

Using the component-based library as a reference, product managers, business analysts and user experience designers can spend less time defining the detailed application functionality and user experience. As they work through the definition process and requirements elaboration, they can reference a component as the baseline for the requirement, and then only spend time defining the required extensions and business logic. This minimizes the team’s focus on how specific user interactions should work. Some examples are filtering, pagination in grids, and display of complex data (positions, trades, exceptions).

6. It Speeds Up the Transition from Design to Development (aka “Designing in the Brower”)

As the rate of change within businesses continues to accelerate, teams needs to find ways to accelerate the “Time to Value” for application development projects. Shifting to a design approach that demonstrates the user experience in the browser will have a significant impact on delivery timelines. There is often the issue of “lost in translation” that occurs when a wireframe or visual design is handed over to a development team for implementation. During the process of turning that into the application user interface, issues are surfaced and some portions are not translated correctly. This results in a misalignment of the delivered experience to the defined user experience.

Leveraging a component-based approach ultimately creates a library of approved components and templates. It enables a leaner user experience design process that transitions from the traditional:

UI Grid

This approach closely aligns the design team with the front-end development team with a focus on delivering working code over intricate wireframes and visual design deliverables. Our teams are seeing great success applying this model across a subset of our clients. As the component library becomes more robust and the teams become more familiar with the process, the rate of deliver of code is greatly accelerated.

Software Development Expert Derick Bailey described in a blog post how efficient this approach was on a client engagement:

This is exactly what I experienced while working on a system that I was building for a client in late 2012. I offered a three-day estimate for a change that I saw as necessary. The client agreed in spite of the timelines we had to work with. To my surprise, I completed the changes in less than 20 minutes. It may sound like a fairy tale, but it is the truth. Component-based application development can significantly increase your ability to change the software to meet new requirements.

How to make the shift to component-based UI development

Our recommendation for getting started it not to think about this as a “big bang” approach. Start small, build upon your successes and be sure to enable your teams along the way.

Below we have outlined the key activities of one approach to getting started. As with any recommendation, it must be adjusted to account for the specifics of your company or environment.

Step 1: Identify candidates for componentization:

  • Select Applications: Select a set of applications or a single application to use as a starting point.
  • Inventory Components: Create a list of components and rank them based up expected level of re-use.

Step 2: Establish a component library framework

  • Create Library Framework: You can create your own framework by pulling together a set of node based modules and custom code or leverage frameworks that exist. TandemSeven provides an initial component library framework in our open source GitHub repository.
  • Integrate into Source Code Repository: As part of setting up the framework, you established the directory structure for the library. This needs to be checked into the standard source code repository in use at your company.
  • Establish Component Repository: Distribute your components using a package manager like NPM. NPM supports distribution of public, private, and on premise components.
Create component-based UI development framework

Setting up a framework is fundamental for establishing directory structure.

Step 3: Establish Governance Process

  • Establish an Application Registry: Setup an approach to track which version of the component library is in use in which application. This will provide a point of reference for governing the upgrade process and reducing fragmentation.
  • Design Process: Establish a process for how the design team will leverage the component library and extend it. This should include the approvals required for a component update or refinement.
  • Versioning: Establish the approach to versioning. Our recommendation is to rely on the capabilities of the source code repository and keep it to major and minor release numbers.
  • Upgrade/Alignment: Setup guidelines for team to update their applications to include major and minor releases. This should be very prescriptive and align to their release cycle. A more stringent approach is to integrate this into your standard Development Operations processes and automate it.
  • Quality Assurance: Define how the QA team will utilize the component library to validate alignment of applications to the standards. This is an important piece of governance as QA then acts as the gatekeeper for the compliance.
  • Process to submit enhanced or new components: Define how improvements to the components will be integrated into a release.

Step 4: Design and Build your components

  • Refresh/Update Design: Engage with your user experience team to review the selection components and refine the design
  • Build in Isolation: Focus on creating each component and templates as separate independent pieces. This is important to ensure they can be utilized in any application.
  • Create a “package.json” file that is an actual JSON, not just a Javascript object literal. You can automatically create this using NPM with the command “npm init –y.” There are 3 very important pieces of information contained within a package.json:
    • Dependencies: A list of dependencies for the component including their version numbers
    • Scripts API: Tasks that you can run on your component such as compilation, and testing.
    • Version Number: This is perhaps the most important piece of information. Versioning allows you to release updates without breaking existing applications

Step 5: Publish to Repository

  • Submit to Source Code Repository: Once the code has been tested and validated, submit the component to the repository making it available for use.
  • Update Component Library: The component library site acts as a real-time source for teams to browse, interact and learn about the available components. The TandemSeven component framework creates this site automatically from the code repository.

Step 6: Start using your Components to build apps

Summing It Up…

Developing your UI with a component-based approach will go a long way in making your processes more efficient and economical. This architectural approach facilitates reuse, and provides transparency into the requirements and design process. Using component-based UI development accelerates your overall process, and sets you up to deliver seamless digital experiences.

IT leaders claim that component-based UI development isn’t just the future of the web.  It is a technique that digital application owners need to implement right now.  Developing with a component-based user interface creates a sustainable technical architecture, saving time and costs. It also ensures a consistent experience across a portfolio of applications.  In the following discussion, we’ll emphasize the benefits of taking a component-based UI approach to development, and how you can get started.

What is a “Component”?

For the sake of this article, we’ll define “component” as an independent piece of software. This standalone, discrete piece of software has a clear boundary that is accessible via an API and contains all of the application dependencies. This enables teams to build the user interface quickly, leveraging the library of components.

What are the Benefits to Using a Component-Based approach?

1. It Allows for Reuse

Components are atomic units, and building with components allows for their reuse in future development cycles. Since technologies come and go, this is invaluable. If you build your application in a componentized format, you’re able to swap the best components in and out.

One of the challenges of reuse with other development types is that they are not internally built or that they include many dependencies. A component-based UI approach allows your application architecture to stay up to date over time instead of rebuilding it from scratch. You can build multiple applications that adhere to the intended design principles.

An example of an application that uses UI components is Salesforce’s Lightning Design System. This is a collection of design patterns, components, and guidelines for creating a unified UI in the Salesforce ecosystem. This type of framework enables design governance and a streamlined experience.

Lightning design system component-based UI development

Salesforce’s Lightning Design System is an example of a set of components, patterns, and guidelines represented with unique icons.

2. A Component-based UI Approach Accelerates Development

Using a component-based UI approach supports iterative, agile development. Components are hosted in a library from which teams can access, integrate and modify them throughout the development process.

Suppose that you were developing a financial application, and it required a listing of positions by asset class. You can pull a positions-by-asset-class grid component from the component library and quickly integrate it into the application. The developer does not have to worry about the service signature and creating the logic for the table.

In the design process, instead of designing new components, the designer focuses time on extending the existing components and designing new components where required. This optimizes the design process without designing a new grid, layout, or navigation. Ultimately, this expedites the design and development process because of the level of reuse.

3. It Ensures User Experience Consistency Across a Portfolio

One of the major challenges for an organization is ensuring that a portfolio of applications provides consistent user experiences and interactions. The component library acts as a point of governance for the business, designers, and quality assurance teams. In the case of Quality Assurance (QA), teams often have challenges validating the user interface due to a lack of an approved set of user interface standards. The component-based approach enables the creation of a library that provides that approved reference point. This enables the QA team to govern the compliance to UX standards across a portfolio of applications. It acts as a dynamic repository that the QA team can use to validate their tests.

As an example, there are many ways to handle a file upload feature within an application. A new application may select an approach that is different from the approved version within the component library; QA can utilize the component library to confirm alignment and then open a UX related defect.

4. It Easily Integrates into the Development Process

As components are created, production quality user interface code is managed within a source code repository such as GitHub. Application development teams are well versed in using source code repositories, and so they are able to extract the code as needed and incorporate it into the application. Leveraging the initial component as a starting point, development teams can extend it to meet their needs. Then they can submit it into the code repository for review and approval for inclusion.

The component library can be versioned in the repository, enabling tracking of which applications are on which version of the approved UX. This also will facilitate the governance and update process.

5. Component-based UI Development Optimizes the Requirements & Design Process

component-based UI development cycle

This is a visual example of how a component-based development style streamlines your processes.

Using the component-based library as a reference, product managers, business analysts and user experience designers can spend less time defining the detailed application functionality and user experience. As they work through the definition process and requirements elaboration, they can reference a component as the baseline for the requirement, and then only spend time defining the required extensions and business logic. This minimizes the team’s focus on how specific user interactions should work. Some examples are filtering, pagination in grids, and display of complex data (positions, trades, exceptions).

6. It Speeds Up the Transition from Design to Development (aka “Designing in the Brower”)

As the rate of change within businesses continues to accelerate, teams needs to find ways to accelerate the “Time to Value” for application development projects. Shifting to a design approach that demonstrates the user experience in the browser will have a significant impact on delivery timelines. There is often the issue of “lost in translation” that occurs when a wireframe or visual design is handed over to a development team for implementation. During the process of turning that into the application user interface, issues are surfaced and some portions are not translated correctly. This results in a misalignment of the delivered experience to the defined user experience.

Leveraging a component-based approach ultimately creates a library of approved components and templates. It enables a leaner user experience design process that transitions from the traditional:

UI Grid

This approach closely aligns the design team with the front-end development team with a focus on delivering working code over intricate wireframes and visual design deliverables. Our teams are seeing great success applying this model across a subset of our clients. As the component library becomes more robust and the teams become more familiar with the process, the rate of deliver of code is greatly accelerated.

Software Development Expert Derick Bailey described in a blog post how efficient this approach was on a client engagement:

This is exactly what I experienced while working on a system that I was building for a client in late 2012. I offered a three-day estimate for a change that I saw as necessary. The client agreed in spite of the timelines we had to work with. To my surprise, I completed the changes in less than 20 minutes. It may sound like a fairy tale, but it is the truth. Component-based application development can significantly increase your ability to change the software to meet new requirements.

How to make the shift to component-based UI development

Our recommendation for getting started it not to think about this as a “big bang” approach. Start small, build upon your successes and be sure to enable your teams along the way.

Below we have outlined the key activities of one approach to getting started. As with any recommendation, it must be adjusted to account for the specifics of your company or environment.

Step 1: Identify candidates for componentization:

  • Select Applications: Select a set of applications or a single application to use as a starting point.
  • Inventory Components: Create a list of components and rank them based up expected level of re-use.

Step 2: Establish a component library framework

  • Create Library Framework: You can create your own framework by pulling together a set of node based modules and custom code or leverage frameworks that exist. TandemSeven provides an initial component library framework in our open source GitHub repository.
  • Integrate into Source Code Repository: As part of setting up the framework, you established the directory structure for the library. This needs to be checked into the standard source code repository in use at your company.
  • Establish Component Repository: Distribute your components using a package manager like NPM. NPM supports distribution of public, private, and on premise components.
Create component-based UI development framework

Setting up a framework is fundamental for establishing directory structure.

Step 3: Establish Governance Process

  • Establish an Application Registry: Setup an approach to track which version of the component library is in use in which application. This will provide a point of reference for governing the upgrade process and reducing fragmentation.
  • Design Process: Establish a process for how the design team will leverage the component library and extend it. This should include the approvals required for a component update or refinement.
  • Versioning: Establish the approach to versioning. Our recommendation is to rely on the capabilities of the source code repository and keep it to major and minor release numbers.
  • Upgrade/Alignment: Setup guidelines for team to update their applications to include major and minor releases. This should be very prescriptive and align to their release cycle. A more stringent approach is to integrate this into your standard Development Operations processes and automate it.
  • Quality Assurance: Define how the QA team will utilize the component library to validate alignment of applications to the standards. This is an important piece of governance as QA then acts as the gatekeeper for the compliance.
  • Process to submit enhanced or new components: Define how improvements to the components will be integrated into a release.

Step 4: Design and Build your components

  • Refresh/Update Design: Engage with your user experience team to review the selection components and refine the design
  • Build in Isolation: Focus on creating each component and templates as separate independent pieces. This is important to ensure they can be utilized in any application.
  • Create a “package.json” file that is an actual JSON, not just a Javascript object literal. You can automatically create this using NPM with the command “npm init –y.” There are 3 very important pieces of information contained within a package.json:
    • Dependencies: A list of dependencies for the component including their version numbers
    • Scripts API: Tasks that you can run on your component such as compilation, and testing.
    • Version Number: This is perhaps the most important piece of information. Versioning allows you to release updates without breaking existing applications

Step 5: Publish to Repository

  • Submit to Source Code Repository: Once the code has been tested and validated, submit the component to the repository making it available for use.
  • Update Component Library: The component library site acts as a real-time source for teams to browse, interact and learn about the available components. The TandemSeven component framework creates this site automatically from the code repository.

Step 6: Start using your Components to build apps

Summing It Up…

Developing your UI with a component-based approach will go a long way in making your processes more efficient and economical. This architectural approach facilitates reuse, and provides transparency into the requirements and design process. Using component-based UI development accelerates your overall process, and sets you up to deliver seamless digital experiences.

Interested in partnering with us?

Send a message and we will work with you to understand your needs.

Accelerators of Innovation

UX360

The complete data-driven journey-mapping platform. Support your CX teams with templates, as well as a tool and canvas to capture, research, and create personas and journey maps. Integrate to numerous analytics providers and agile lifecycle management tools for downstream development enablement.

Open Source Toolkits

Jump-start your design system! We’ve open-sourced an interactive style guide framework to enable empower our clients’ product development teams.

Digital Solutions Center

Gain velocity-to value by utilizing our development center for your next project. Our experts can help your team embrace new technologies and standards while delivering faster time to market.

Related Insights from Our Experts
2017-08-10T10:46:02+00:00