Skip to main content

FE Developors Guides

Introduction

Forge-UI is the primary driver of the Forge Design System.

Intro​

Forge-UI is the primary driver of the Forge Design System. The Forge-UI project not only outputs the bundles, markup and javascript modules but also builds this design system website. Build responsive, mobile-first projects on the web with Refinitiv’s front-end component library.

Core attributes​

The following is a list of core attributes defined for the Forge-ui project:

  • Well-formed, scalable and performant HTML, CSS, and JavaScript;
  • Consistency with Refinitiv brand;
  • Internationalized HTML and CSS;
  • Integrated best practices for search engine optimization (SEO);
  • Accessible;
  • Browser and device support across all Refinitiv operating regions.

The scope of Forge-ui is likely to be much broader than projects that either directly use Forge-ui components or reimplement the same look and feel. We therefore recommend that individual project teams determine their own core attributes based on their specific needs. For example:

  • A project that targets a specific geographic region may not need such extensive browser or internationalization support;
  • A project limited to logged-in or internal Refinitiv users may not need to implement SEO-related mark-up to the same level of rigor.

At a minimum, the front-end code in all projects should be accessible, performant, use well-formed HTML, CSS and Javascript and reflect Refinitiv brand guidelines.

General principles​

Our guiding front-end development principles:

  • Build for mobile first;
  • Embrace progressive enhancement;
  • Deliver solutions that work for the most limited platform;
  • Consider performance as a feature;
  • Lint and/or prettify HTML, CSS and JavaScript to ensure consistency;
  • Run automated testing where helpful.

HTML, CSS and JavaScript​

Forge-ui components are built using React, primarily because this allows us to leverage composability and bundle components and all necessary assets as individual npm packages.

Forge-ui components can therefore be used directly with React applications, but also outputted as rendered compositions in static HTML, CSS and Javascript bundles for use in non-React projects. We currently use the second method with AEM, but are exploring ways of using React components natively within this CMS.

Developers should assess the suitability of any JavaScript libraries and frameworks based on the specific project requirements.

Automated testing​

Forge-ui uses Jest to run snapshot tests on components. In the future, we hope to add Google Lighthouse to the CI pipeline to analyze and test for performance, accessibility and general best practice.

Linting​

Forge-ui makes use of the following linting tools:

htmlhint is recommended for projects that work with raw HTML or classic templating systems like Handlebars, rather than projects that use React, Vue or Angular to derive HTML.

Browser supported​

A tiered model is recommended for browser support. This allows for a nuanced approach, reflecting the variety of browser and device types now in use by our customers globally, as well as acknowledging that testing resource is often limited.

For up-to-date information, see: Forge-ui browser support.

Choosing a Consumption Method​

You can consume Forge-ui in two primary ways:

  • As HTML Markup
  • As Javascript Modules

There are number of factors to consider when choosing a consumption method. Its a factor of the front-end skills on your team and the complexity of the interactivity you require on the front end.

HTML Markup Use Cases​

  • DO Choose HTML Markup when you need standard XUX approved visuals or require server-side-rendering.
  • DO Choose HTML Markup and add our Forge-ui Bundles when you have no requirements for your own custom front-end interactivity.
  • DO Choose HTML Markup and use your own JS Bundles when you require basic custom on page interactivity.
  • DO Choose HTML Markup if your team does not have modern Javascript Skills

Javascript Modules Use Cases​

  • DO Choose Javascript modules if you require highly customised or complex client side logic.
  • DO Choose Javascript modules if your team has modern Javascript skills.
  • DO Choose Javascript modules if you need to control
  • DON'T Choose Javascript modules if your team does not have modern Javascript skills.