Adopting a Unified Component Library Strategy
Kirti Joshi
Table of Contents
- Introduction
- Is It a Framework or a Library?
- The Standardization Reality
- Set Up Your Organization for Success with a Central Component Library
- Why Create a Central Component Library?
- Should You Build or Buy Components for Your Library?
- Feature Enhancements Down the Road
- Consider Resources at Hand
- Think about the Technical Debt
- Weigh Licensing Costs over Development Costs
- Support and Maintenance Costs
- How Can Sencha Help?
- Sencha’s Treasure Trove Component Library
- Sencha Solutions for Your Central Library
Introduction
WEB APPLICATION DEVELOPMENT COMPLEXITY CAN VARY QUITE DRAMATICALLY BASED ON THE NATURE OF THE APPLICATION AND THE FINAL GOAL.
Building a handful of small apps in a startup or small business environment with no immediate scalability or big data needs can be a straightforward process. On the other hand, app development for midsize to large global organizations is typically a complex, heavy lift, given the strict corporate standards and requirements (security, consistency, scalability, performance, etc.) that teams need to adhere to.
No matter the complexity of the application, the goal of every enterprise is to shorten the development cycle using the fewest resources while staying within budget. Among several approaches to achieving this goal (such as outsourcing, using prebuilt and tested tools and templates), one effective way to enable faster development is to use a central component methodology. This article provides some strategic guidance toward adopting a unified component library approach to secure long term success.
1
Is It a Framework or a Library?
BEFORE WE GO INTO DETAILS, LET’S LEVEL SET ON THE DIFFERENCE BETWEEN A FRAMEWORK AND A LIBRARY.
WHAT IS A LIBRARY?
A library is a collection of reusable pieces of code (functions or class definitions) that can be used in a more or less plug-and-play type environment. Libraries avoid code repetition, maintain uniformity, and encourage team collaboration. Libraries can be standard or custom developed.
For example, jQuery and D3.js are libraries.
For example, jQuery and D3.js are libraries.
WHAT IS A FRAMEWORK?
A framework is typically a collection of libraries that architecturally work well together and are used to serve a greater purpose. For example, Tensorflow and Caffe are frameworks for machine learning applications. Similarly, Ext JS, Angular, and React are frameworks for JavaScript.
Although the terms library and framework are often used interchangeably, there is a fundamental difference between the two.
The key difference primarily lies in the inversion of control (IoC). With a library, the software programmer can choose where and when to use the library—analogous to an API that a user can decide when to call. The developer is in control of the library calls. With a framework, the architecture defines where you can include a particular piece of your code and governs a set of rules for development. The control, in this case, is now reversed to the framework instead of the developer.
2
The Standardization Reality
IN MOST MIDSIZE TO LARGE ORGANIZATIONS, IT OR PROJECT MANAGERS ARE CONSISTENTLY TRYING TO STANDARDIZE PROCESSES AND CONSOLIDATE METHODOLOGIES TO INCREASE OVERALL PRODUCTIVITY AND SAVE COSTS.
Most development teams that are comfortable with their working processes aren’t always receptive to big process changes. In reality, they do end up reluctantly adopting the changes given the top-down pressure. For JavaScript development teams, in particular, the standardization effort is typically geared toward the framework (such as React, Angular, Vue, Ext JS, or plain JS) used across the board. The decision making is somewhat bottom-up influenced given development teams’ significant role and preferences in this process.
But what if a similar effort is focused on standardizing the components used for app development? That would be a huge productivity win—especially for large and growing organizations.
3
Set Up Your Organization for Success with a Central Component Library
CENTRAL LIBRARY OF STANDARD COMPONENTS THAT IS SHARABLE AND REUSABLE ALLEVIATES THE PAIN ASSOCIATED WITH SILOED CUSTOM DEVELOPMENT
Development teams in large corporations often have workflows, processes, or custom software tailored to their specific projects. Some teams prefer a certain framework or methodology and have written custom code for their projects, while others are using a whole different methodology but developing similar functional code. Unfortunately, the reality is that teams work in silos and are reinventing the wheel somewhere down the line.
In fact, here’s what’s happening behind the scenes. Teams that aren’t using reusable, shareable components are either searching for components from open source, purchasing them from enterprise vendors, or writing their own code. But it doesn’t end there. Components available for free aren’t necessarily designed with all scenarios in mind and may lack the required features or desired
performance critical to your application. Developers end up taking the most obvious route—creating
versions of the code, enhancing it, and maintaining copies. Not only is this approach time consuming,
but it comes with huge underlying effort related to testing the components across different platforms,
browsers, operating systems, and environments. Imagine this effort being somewhat repeated across
different organizations and teams within the same corporation.
Setting up a central library of standard components that is sharable and reusable alleviates some of the pain associated with siloed custom development.
4
Why Create a Central Component Library?
A centrally created repository of reusable, vetted UI components consists of ready-to-use components, including solutions for design and responsive layouts that are shared across teams
and business units.
This strategy can pay off significantly in the long term.
- Reduced development cycles (teams aren’t reinventing the wheel by creating or searching for similar components)
- Encourages reusability and collaboration
- Maintains brand consistency
- Enables faster time-to-market
- Allows for customization through component extensions and boilerplate code when necessary
Standardizing component selection isn’t intended to thwart developer freedom but is a means to save on development cycles, which could be channeled toward other critical aspects of business growth such as app UX design and testing, feature enhancements, or overall performance optimization efforts.
5
Should You Build or Buy Components for Your Library?
THIS IS A CLASSIC QUESTION, AND EACH DEVELOPMENT TEAM HAS ITS OWN APPROACH.
Some prefer the complete custom development method, others depend on purchasing commercially available components, and the remaining go for the mix-and-match approach.
Here are some factors to consider before you jump in either direction.
Feature Enhancements Down the Road
In-house developed UI components (such as data grids, forms, charts, or even layout managers) may not necessarily consider all potential usage scenarios and features. This may result in feature-deficient components that users have to extend and enhance to fit their requirements. Although teams do have complete control over their own code, the resulting library may lack prebuilt features that are easily available in commercially licensed libraries.
Consider Resources at Hand
With sufficient resources at hand to develop and maintain shareable components over the long haul, the build approach may work best. In fact, the build in-house method works best for small internal apps with limited requirements. When resources are limited and time-to-market is critical, it might be prudent to rely on licensed components. Internal component development may require long cycles and needs to adhere to stringent quality and performance standards.
Think about the Technical Debt
Attrition is inevitable, and although teams should ideally be prepared for it, most of the time that isn’t the case. As team members pursue new opportunities, other team members are stuck in spending cycles, debugging someone else’s custom-developed code, and incurring long-term technical debt as a result. With commercial components, this scenario is significantly improved.
Weigh Licensing Costs over Development Costs
Depending on the scale of your project, licensing costs can add up. Consider the costs required to maintain full-time engineers developing and maintaining the same code versus using a SaaS model for licensing components.
Support and Maintenance Costs
Maintaining and supporting components across platforms and browsers (including new and legacy ones) over their lifetimes is a huge undertaking. In fact, support and maintenance costs are estimated to be approximately 50% of the original development costs! Large organizations with a solid central team that can support the effort might consider developing and maintaining their own library of components. Others should consider commercial products given their higher product quality and support.
6
How Can Sencha Help?
WHETHER YOU CHOOSE THE FULLY COMMERCIAL COMPONENT SELECTION APPROACH OR GO
WITH A MIX-AND-MATCH STRATEGY FOR YOUR CENTRAL COMPONENT REPOSITORY, SENCHA
HAS THE RIGHT SOLUTIONS TO SIMPLIFY AND ACCELERATE YOUR APP DEVELOPMENT.
Sencha provides a powerful library of 140+ prebuilt and pretested UI components ranging from simple buttons, tabs, and menus to high-performing grids, data visualization, and intuitive layouts and themes. With an enterprise solution, teams don’t need to cherry-pick components from different places or worry about component consistency, interoperability, or feature inadequacies.
7
Sencha’s Treasure Trove Component Library
Equip your global teams with the right components to build web applications faster.
- High-Performing
- Interoperable
- Professionally Built
- Single Source
Data Analytics and Management
Data Grid
Pivot Grid
Trees
Exporter
Scheduling
Calendar
Date & Time Panel
Media
Audio
Video
FX/ Animations
Editing and Display Views
WYSIWYG Froala Editor
Forms
Lists
Tabs & Menus
Data View
Data Backend and Styling
Data Components
Navigation
Layouts & Themes
UX Components
Buttons
Carousel
Color Picker
Icons
Panels
Pop-ups
Progress Bars
Tooltips
Toolbars
Touch Events
Virtual Scroller
Data Visualization
Charts Visually represent complex data sets with a broad range of chart types
Line Charts
Area Charts
Bar Charts
3D Bar Charts
Box Plots
Column Charts
3D Column Charts
Bubble Charts
Scatter Charts
Financial Charts
Gauge Charts
Pie Charts
3D Pie Charts
Radar Charts
Combination Charts
Navigator Line Chart
Plot Charts
Stacked Charts
D3 Add sophisticated visualizations to create stunning representations from data
D3 Hierarchy maps
D3 Heatmap
D3 Pivot heatmap
D3 Sunbursts
D3 Zoomable Sunbursts
D3 Words
D3 Tree Map
Custom SVG
Custom Canvas
8
Sencha Solutions for Your Central Library
When you prefer to use an enterprise-backed JavaScript framework and library, think Ext JS!
Ext JS
Sencha’s ExtJS is a robust cross-browser, cross-platform JavaScript framework that comes packed with hundreds of prebuilt, high-performance UI components in one central place.
Ext JS
The Entire Ecosystem for App Development
Robust, Flexible and
Secure Framework
140+ High-Performing UI Components with hundreds of user extensions
Design & Testing Tools
Save time and money.
Make the right decision for your business.
MORE HELPFUL LINKS:
9
