DevExtreme JavaScript — UI Template Gallery (v22.2)

DevExtreme Team Blog
16 August 2022
As you already know, the DevExtreme distribution includes:
  • A set of more than 70 feature-rich UI components.
  • Productivity tools such as ThemeBuilder and CLI tools.
  • A set of responsive application templates.
In our next release, we’ll extend the capabilities of our component library with a set of responsive UI templates. These ready-to-use UI “blocks” will allow you to focus efforts on application logic and minimize energy spent on app/UI design.
The information contained within this blog post details our current/projected development plans. Please note that this information is being shared for INFORMATIONAL PURPOSES ONLY and does not represent a binding commitment on the part of Developer Express Inc. This blog post and the features/products listed within it are subject to change. You should not rely or use this information to help make a purchase decision about Developer Express Inc products.

What are Responsive UI Templates?

You can think of Responsive UI Templates as common view layouts used within modern line-of-business (LOB) applications (set of common UI patterns/UX workflows).
To better understand overall needs/requirements and deliver relevant UI templates to market, we surveyed users last year. Our customers told us to focus initial efforts on the following application categories:
  • CRM
  • Project/task management and planning
  • BI and analytics dashboards
Common views/screens will be available for each app category. We’ll also introduce multiple variations for certain UI templates. You can copy/paste an entire view or just a fragment and adapt it to your needs. (UI templates are broken into smaller reusable components that you can copy/paste and use "as is”).
Note: Our UI templates will be responsive and will target both desktop and mobile devices. All UI templates are built atop DevExtreme’s responsive component set and leverage the adaptivity features of target frameworks.





What about the Backend API?

In the past, we did our best to create fully functional, “real-world” application demos (with underlying business logic). This approach had a few key drawbacks:
  • In many instances, our business logic could not be reused. Business workflows vary – sometimes to a large extent.
  • Complicated business logic made it harder to understand demo source code and integrate it within an actual app.
  • We spent resources implementing “fake” workflows, instead of addressing needs/requirements.
With these drawbacks in mind, we decided to keep UI templates as simple as possible (in terms of backend complexity). We only use the demo backend API to populate UI templates with sample data. In certain instance, we may implement primitive actions (such as CRUD operations). The bottom line is this – you simply need to copy/paste the appropriate UI template, bind it to data, and implement the necessary business logic on the backend.

Note: If you target .NET for your backend API, be sure to check out Web API Service and register your FREE copy today. The Solution Wizard scaffolds an OData v4 Web API Service (.NET 6) with integrated authorization & CRUD operations powered by EF Core 5 and our XPO ORM library. You can use OAuth2, JWT or custom authentication strategies alongside tools like Postman or Swagger (OpenAPI) for API testing. The built-in Web API Service also filters out secured server data based on permissions granted to users. To use the free Solution Wizard (which creates the Web API Service) run the Universal Component Installer from the DevExpress Download Manager.

What Target UI Platforms are Supported?

In our v22.1 release cycle, we published a few Angular UI templates on GitHub (as a preview). We are now extending our UI template-set to React/Vue and adding new templates to our distribution.
Note: Support for other platforms such as jQuery or ASP.NET Core is under consideration. To help us refine our long-term plans in this regard, please take a moment to answer the following survey question:

Distribution - The UI Template Gallery

We plan to publish all UI templates in the demo section of our website. You will be able to try them live, view and copy/paste source code, switch themes and preview templates in a standalone demo app. We’ll also add descriptions for each template - with a brief explanation of its purpose structure and potential business workflow. The name of the new website section will be “UI Template Gallery.”

Your Feedback Matters


Free DevExpress Products – Get Your Copy Today

The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the DevExpress Support Center at your convenience. We’ll be happy to follow-up.