Intro
Aurora is a game-changing update to the industry-leading Khoros Community platform, with powerful new tools to design and manage your community, create more engaging member experiences, and integrate community more fully into your digital ecosystem.
In this article we’ll introduce you to the technology stack we used to create our next-generation Community application. Many of these technologies will be exposed as part of our new Software Development Kit (SDK) that will be used to customize the Community Application.
This latest iteration is a complete reimagining of our UI technology stack, with some notable backend changes.
Engineering Goals
When we kicked off the Aurora project, we set some lofty engineering goals for ourselves. While many of these goals are consistent with our existing Community product, we wanted to double-down and ensure that from day one we adhered to these goals.
- High performance: Server-side rendered (SSR); only include JS and CSS that are used by the components on the page; measure web vitals and set aggressive thresholds for Largest Contentful Paint (LCP), First Input Delay (FID), Cumulative Layout Shift (CLS), and other common metrics like Time To First Byte (TTFB).
- Best-in-class Search Engine Optimization (SEO): Semantic web and well structured markup; proper JSON-LD and microdata to enable Rich Snippet results in Search Engine Result Pages (SERP); reimagined and configurable URL patterns - no more "t5" by default.
- Accessibility: Web Content Accessibility Guidelines (WCAG) at a target level between AA and AAA; automation and testing to ensure all new UI meet these standards.
- Built-in mobile support; We're not quite a "mobile-first" development shop, but mobile is a priority and will work seamlessly with all new out-of-the-box (OOTB) interactions.
- API driven: All UI for Community will be backed by public APIs, no more internal APIs that can only be used by Khoros.
- Delightful to work with: Fast, inspect-and-adapt loop for internal and external developers.
- Heavily extensible: Enable external developers, via our SDK, to use the same tools we use internally to build integrations and extensions to the core product. Developer Tools and best practices enable customers to create integrations that are upgrade safe, avoid conflicts, and provide simple ways to preview and test changes.
- Modern frameworks and libraries: Leverage best-in-class and open source frameworks to simplify development and modernize our user experience.
Technology Stack
This overview into the Technology Stack used by Aurora is broken down into logical layers consisting of Styles, Web, UI Server, Backend, and a brief mention of some ancillary Tools used to build Aurora.
Styling
Starting at the figurative top level, the technologies we use for Styling act as the front door for our end-users. Think of it as the brioche bun on our UI tech-stack-hamburger.
Bootstrap
“The world’s most popular framework for building responsive, mobile-first sites.”
Similar to our existing Community product, we chose to stay with Bootstrap as the basis for our Design Language System (DLS).
CSS Modules
“A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.”
We introduced CSS Modules as a way to help ensure that the application includes only the necessary styles for any given component that’s being rendered on a page. CSS Modules also help provide a way to isolate the styles for a given component, allowing for easier customization without having to worry about impacting the styles of other components across the Community.
PostCSS
“A tool for transforming CSS with JavaScript.”
For a handful of reasons, most notably performance, we have replaced SCSS with PostCSS. Furthermore, we have replaced all of the configurable SCSS variables with CSS Variables which has had a noticeable impact on the ability to quickly change theme properties and see them reflected in the Community.
Web
The next layer in our UI tech-stack-hamburger is the Web layer, which centers around building and managing components in our UI layer.
React
“A JavaScript library for building user interfaces”
One of our overall goals is to allow customizations to be done using the same frameworks and tools we use internally. Given React’s ubiquity in the web development world, we felt like it was a no-brainer to use React for Aurora and our SDK.
React Bootstrap
“The most popular front-end framework Rebuilt for React.”
Since we’re using Bootstrap as our DLS and React for building components, the react-bootstrap library was a natural fit for providing components that act as building blocks for our UI.
Apollo
“Apollo Client is a comprehensive state management library for JavaScript that enables you to manage both local and remote data with GraphQL.”
Apollo client serves a few purposes in our tech stack:
- Managing GraphQL calls from our UI
- A data store that caches the results of GraphQL queries and can trigger a component to rerender when the data changes using a feature called observable queries
- Support for making queries during server side rendering.
UI Server
If the Web layer is the tomato in our UI tech-stack-hamburger, then the UI Server is most definitely the burger patty.
Node.js
“Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.”
Node.js is the run-time environment we use to run the UI application server, as well as the runtime environment to power the SDK command line interface (CLI).
Express.js
“Fast, unopinionated, minimalist web framework for Node.js”
Express.js provides a lightweight application server to manage HTTP requests and responses. We primarily use it to run Next.js.
Next.js
“The React Framework for Production”
Next.js is the framework in which our next generation UI is built on. Next.js provides support for server-side rendering of React components, routing support, and manages the single page architecture (SPA) that we use in Aurora.
Backend
While not technically part of the UI tech-stack-hamburger, there are several backend technologies that are used to service our new UI.
Java
“Java is a high-level, class-based, object-oriented programming language that is designed to have as few implementation dependencies as possible.”
GraphQL / REST
“GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data.”
In Aurora all of our UI is backed by a public GraphQL API. This ultimately will enable much richer customizations, which were previously limited to the surface area of our existing REST API and did not have support for all the UI in our existing product. Furthermore, this can partially replace the need for Custom REST Endpoints which were sometimes used to piece together data from multiple REST API calls. GraphQL can do this natively.
ElasticSearch / MySQL
“Elasticsearch is a search engine based on the Lucene library.”
“MySQL is an open-source relational database management system.”
Tools
Lastly, we come to the many tools that we use to build our UI application. I like to think of it as the beer that washes down our tech-stack-hamburger.
Custom components are available to be created via the SDK using Handlebars and will soon also be able to be created using React.
Format.JS
“Internationalize your web apps on the client & server.”
FormatJs introduces a standard, non-proprietary, way of localizing our UI application. All text keys and values are brand new in Aurora and use industry standard formats.
Prettier
“An opinionated code formatter”
Storybook
“Storybook is an open source tool for building UI components and pages in isolation.”
Internally, we use Storybook for a number of things: discovering components, exposing component documentation, a sandbox for building components, and testing components. Our intent for the SDK is to use Storybook for two purposes:
- expose a Storybook instance for the core component library that can be used to build custom components in the SDK
- act as a sandbox environment to build custom components prior to being integrated into the Community application.
OpenTelemetry
“High-quality, ubiquitous, and portable telemetry to enable effective observability”
Axe
“Robust, efficient and accurate accessibility testing for all”
Jest
“Jest is a delightful JavaScript Testing Framework with a focus on simplicity.”
ESLint
“ESLint statically analyzes your code to quickly find problems.”
Lighthouse
“Lighthouse is an open-source, automated tool for improving the quality of web pages.”
