Mehul Harry's DevExpress Blog

This Blog

News


Mehul Harry is the DevExpress Web Program Manager. Follow him on twitter: @Mehulharry

Subscribe (RSS, Email)

Archives

DevExpress React Controls - New Data Grid (coming soon)

A couple of years ago, Facebook released React, 'a JavaScript library for building user interfaces'. It's been gaining popularity since its release and many developers have asked us, "when will DevExpress support the React library?" Well, we're hyped about React too and I've got great news!

I'm happy to announce that we've been working on a new Data Grid for the React library. We're calling it the 'DevExtreme React Grid' and it'll be available in the coming weeks as a community technology preview (CTP).

DevExpress DevExtreme - DevExtreme React Grid

We're starting with the Data Grid and we have plans to provide even more controls going forward. Now, let's dig into how we designed our React control(s) and how they can help you.

Native not wrapper

Our new DevExtreme React Grid is a native control for the React library. While time consuming, we decided to create a new Data Grid from scratch. An easier approach would have been to re-use the existing (and excellent) DevExtreme Data Grid widget and simply provided a wrapper. However, we listened to your feedback about how you prefer native controls and we agree. Native controls work better for React's architecture.

Creating 'native' React components instead of jQuery wrappers provides benefits like:

  • Can be used in isomorphic apps (server-side + client-side);
  • Utilizing React built-in performance optimization with help of immutable state
  • Stateless (controlled) mode is available for using in Redux-based apps and state persistence.
  • Lightweight due to composable architecture and no extra dependencies (such as jQuery)
  • API is familiar to React developers
  • Leverage "Virtual DOM" - allows React to perform efficient DOM updates and get great client-side performance.

So, to provide you the best UI experience and take advantage of React's features, we are building 'native' React components. To be fair, wrappers are great in some scenarios. For example, the DevExtreme ASP.NET MVC Controls are really the DevExtreme client-side JavaScript widgets that are wrapped as ASP.NET MVC controls. So they provide you the benefit of using client-side DevExtreme widgets as ASP.NET MVC controls in the ASP.NET MVC and .NET Core frameworks.

Themes & other components

Bootstrap

For themes, we've decided to integrate the popular Bootstrap front-end framework. This allows you to use any compatible Bootstrap 3 theme that's available in the vast Bootstrap ecosystem.

It also means that our DevExtreme React Grid works seamlessly with other Bootstrap-based components available in the popular React-Bootstrap library. Currently, we only offer the Data Grid and no 'simple' components such as editors, buttons, etc. So, you can start building your React app using 'simple' React components from open-source libraries like React-Bootstrap. Then make-it-awesome by including our rich business React components like our DevExtreme React Grid.

Material-UI

We're also working on supporting the popular open-source implementation of the 'Material UI' concept for React, Material-UI library. Like the Bootstrap React components, you can also use 'simple' Material UI React components from this library and then add our rich business React components (Data Grid, etc).

Both of these technologies will allow you to apply themes easily and provide simple components that are not in our React component set. Basically, we want to complement the existing popular UI libraries for React. This saves you time when you need simple controls and powerful DevExpress React controls.

Templates

Our DevExtreme React Grid will also provide UI templates that allow you to modify, extend, and customize the markup that is rendered by our DevExtreme React Grid.

Features === Plugins

Our DevExtreme React Grid is packed with great features like:

  • Editing - Create/Update/Delete
  • Data Sorting and Grouping
  • Filter Row
  • Detail Row
  • Paging
  • Multiple Row Selection
  • Virtual Scrolling
  • Templates

We're also looking into adding more features like: Column resizing/reordering, column chooser, fixed columns/rows, header filter, bands, and more.

Composable & Extensible

The Data Grid features listed above will not be part of the grid. Typically, features like editing are included in the component and you simply enable or disable them via a property. However, our DevExtreme React Grid will use a 'Composable and Extensible Plugin-based Architecture'. Therefore, the features are plugins and you enable them through the source code:

DevExpress - DevExtreme React Grid - Plugins

This approach has the following benefits:

  1. Our DevExtreme React Grid will be lighter because it will only load the features that you need.
  2. Plugin architecture allows you to extend our DevExtreme React Grid with custom plugins. If you want a feature that is not supported by our grid then a custom plugin can be written to extend the grid's functionality.

Performance

By building our grid natively in React, we've achieved outstanding performance. We researched and incorporated the performance tricks and best practices provided by the React team. In fact, it's based on a functional approach that utilizes immutability and pure functions. Our 'DevExtreme React Grid' is fast:

DevExpress - DevExtreme React Grid - Fast Performance

To see it in action and learn more, be sure to sign up for the webinar.

Upcoming webinar

Sign up for our upcoming webinar where I'll talk about our DevExtreme React Grid:

Register for webinar

What do you think about our new DevExtreme React Grid? Drop me a line below.

Email: mharry@devexpress.com

Twitter: @mehulharry


Create highly responsive web apps for touch-enabled devices and traditional desktops.

From desktops to mobile devices, DevExtreme HTML5 Data Grid delivers the flexibility you’ll need to build apps that reach the widest audience and deliver touch-first user experiences to power your next great interactive website.

Download a free and fully-functional version of DevExtreme now: Download DevExtreme

Published May 05 2017, 10:41 AM by
Bookmark and Share

Comments

Siddhartha Krishnadat

Great.

Thanks

May 5, 2017 2:10 PM

Siddhartha Krishnadat

Good Job

May 5, 2017 2:17 PM

Anders Wang

great, good job.

May 5, 2017 4:12 PM

Juan Antonio Trujillo Montenegro

Looking forward to try CTP :-)

May 8, 2017 7:25 AM

Mohamed Al Zayani

Any chance of ASP.NET Core support?

May 9, 2017 12:32 AM

jveatch

I've been waiting for this for a while.  I'm excited to learn more!  Thank you!

May 9, 2017 6:08 AM

Jeppe Terndrup

Finally! React is the last integration frontier that DevExtreme needs to make it truly universally usable in the JS world. React is such a great framework, and so is Devextreme. Excited to see how they will play together

May 10, 2017 1:31 AM

About Mehul Harry (DevExpress)

Mehul Harry is an ASP.NET technical evangelist at Developer Express. You can reach him directly at mharry@DevExpress.com. You can also follow him on Twitter: http://twitter.com/mehulharry
LIVE CHAT

Chat is one of the many ways you can contact members of the DevExpress Team.
We are available Monday-Friday between 7:30am and 4:30pm Pacific Time.

If you need additional product information, write to us at info@devexpress.com or call us at +1 (818) 844-3383

FOLLOW US

DevExpress engineers feature-complete Presentation Controls, IDE Productivity Tools, Business Application Frameworks, and Reporting Systems for Visual Studio, along with high-performance HTML JS Mobile Frameworks for developers targeting iOS, Android and Windows Phone. Whether using WPF, ASP.NET, WinForms, HTML5 or Windows 10, DevExpress tools help you build and deliver your best in the shortest time possible.

Copyright © 1998-2017 Developer Express Inc.
All trademarks or registered trademarks are property of their respective owners