import { Badge } from 'terra-application/package.json?dev-site-package'; # Terra Application A React-based application framework from Cerner. ## Getting Started - Install with [npmjs](https://www.npmjs.com): - `npm install terra-application` ## Why create an application framework? As we have developed web applications at Cerner we have found that there are many questions that must be answered at the outset of an application's development and that many of those questions have a common answer that can be provided by an application framework. - How will this application provide accessible, consistent navigation? - When javascript errors in an highly composable application happen, how do we prevent the entire page from breaking? - How do we offer a consistent overlay experience? - How do we ensure modals are accessible and prevent multiple on the page at once? How can composable components flex between being presented as page content and modal content? - How can we prevent single page navigation while unsaved changes are present? - How does content get presented in a slide panel? - How do we enable responsive behavior in applications without sacrificing performance? - How do components provide a localized experience? - How do we theme highly composed applications? - How will this application consume existing components developed for other applications? How will interoperability be defined? How will dependencies be managed? - How will this application have a user experience that is consistent with that of other applications? How will that consistency be maintained over time? The terra-application framework seeks to answer these questions and simplify the process of maintaining web applications. ## Overview Terra Application contains many components designed to help solve common web application problems. ### Application Base The ApplicationBase component is the entrypoint into the Terra application framework. Applications must render ApplicationBase around their content to provide the content with ApplicationBase's features. - [Application Base API](/application/terra-application/components/application-base) ### Application Navigation Consistent navigation throughout Cerner applications helps provide a positive user experience by teaching users what to expect when interacting with applications. The ApplicationNavigation component provides a styled layout and controls used for navigating within an application. - [Application Navigation API](/application/terra-application/components/application-navigation) ### JS Error Handling Typically when a javascript error occurs in a web application, the entire page will be broken. Using [react error boundaries](https://reactjs.org/docs/error-boundaries.html), Terra provides a way to isolate the error to prevent the entire application from being taken down. - [Application Error Boundary API](/application/terra-application/components/application-error-boundary) ### Overlays Presenting overlays over content being loaded or saved to a server is a common application pattern. Terra provides an application overlay to overlay loading content, as well as an application overlay provider to redefine what portion of the page should be overlaid. - [Application Overlay API](/application/terra-application/components/application-loading-overlay) - [Application Overlay Provider API](/application/terra-application/components/application-loading-overlay-provider) ### Status Views Presenting status views to show the current state of the page is a common application pattern. Terra provides an application status view to present a status view over the content, as well as an application status view provider to redefine what portion of the page should be overlaid. - [Application Status View API](/application/terra-application/components/application-status-overlay) - [Application Status View Provider API](/application/terra-application/components/application-status-overlay-provider) ### Notification Banners Notification Banners are used to bring the user's attention to important displayed information. This common interface pattern requires strategic placement and ordering on the application screen to be effective. Terra Application provides banner management to align with these needs. - [Notification Banners API](/application/terra-application/components/notification-banner) ### Modal disclosure Presenting content within a modal is a common, yet tricky pattern. To help reduce this complexity Terra provides API's, through the disclosure manager, to present modal content. - [Disclosure Manager API](/application/terra-application/contexts/disclosure-manager-context) ### Unsaved Changes Unsaved form data is another common pattern. Terra provides the Navigation prompt to prevent navigating away from unsaved changes. - [Navigation Prompt API](/application/terra-application/components/navigation-prompt) ### Slide panel disclosure Presenting content to a slide panel is less common, yet still tricky. Similar to modal manager we provide the disclosure manager api to disclose content to slide panels, as well as a slide panel manager to define the slide panel in the application. - [Slide Panel Manager](/application/terra-application/components/slide-panel-manager) - [Disclosure Manager API](/application/terra-application/contexts/disclosure-manager-context) ### Active Breakpoints Many applications respond to the current active breakpoint to adjust for screen size. We provide the active breakpoint as a context to limit the number of component that listen to the browser resize event. - [Active Breakpoint Context API](/application/terra-application/contexts/active-breakpoint-context) ### Internationalization Terra applications must work for many locales, The Application Intl Context provides access to the frameworks i18n APIs. - [Application Intl Context API](/application/terra-application/contexts/application-intl-context) ### Theming Applications commonly switch between light and dark modes. Terra provides theme APIs to allow theming of custom components within a terra application. - [Theme Context API](/application/terra-application/contexts/theme-context) ### Component Composition The framework provides a large number of features using React's Context APIs. An application built with the framework is guaranteed to have access to these framework features and reusable components can be developed with the assumption that the framework will provide them. Any components requiring the same major version of terra-application will be interoperable. The terra-application package brings all the required framework logic into a single location, resulting in a simplified dependency that is easy to manage across the suite of developed components. ### UX Consistency The framework utilizes the full suite of Terra's components to ensure visual consistency and accessibility for applications. The framework also provides simplified APIs for common design patterns like loading overlays, modals, and error view presentation to further promote consistency.