Overview

Material-UI

Stacks2.3K

Followers3.7K

Votes445

DevExtreme

Stacks93

Followers205

Votes1

GitHub Stars1.9K

Forks655

DevExtreme vs Material-UI: What are the differences?

Introduction

DevExtreme and Material-UI are both popular frameworks used to build user interfaces for web applications. While they have some similarities, there are key differences that set them apart. In this article, we will explore six major differences between DevExtreme and Material-UI.

Design Philosophy: DevExtreme is a comprehensive HTML5 and JavaScript framework that aims to provide a complete set of UI components and tools. It focuses on providing a consistent and unified experience across different platforms and devices. On the other hand, Material-UI is a React UI framework that follows the Material Design guidelines by Google. It emphasizes a clean and visually appealing user interface with smooth transitions and animations.
Component Ecosystem: DevExtreme offers a wide range of pre-built UI components, including data grids, charts, calendars, and more. These components are highly customizable and feature-rich, making it suitable for complex enterprise applications. Material-UI, on the other hand, provides a set of ready-to-use React components that follow the Material Design principles. These components are designed to be versatile and can be easily integrated with React applications.
Programming Language: DevExtreme supports multiple programming languages such as JavaScript, TypeScript, and Angular, allowing developers to choose the language that best suits their needs. Material-UI, on the other hand, is primarily built for React applications and utilizes JavaScript as the primary programming language. This makes it a suitable choice for developers already familiar with React and JavaScript.
Integration with Frameworks: DevExtreme offers seamless integration with popular frameworks like Angular, Vue.js, and React. It provides dedicated libraries and tools to facilitate integration and enhance the development experience. Material-UI, on the other hand, is specifically built for React applications and offers extensive support and integration with React. It provides a set of React components that are optimized for performance and can be easily integrated into React projects.
Community and Support: DevExtreme has an active community and provides comprehensive documentation, tutorials, and support resources. It also offers dedicated support channels for licensed users. Material-UI also has a thriving community with numerous open-source contributors. It provides extensive documentation, examples, and a helpful online community for developers to seek assistance and share knowledge.
Customization and Theming: DevExtreme offers extensive customization capabilities, allowing developers to tailor the UI components to match their specific requirements. It also provides a theme builder tool that enables users to create their own custom themes. Material-UI, on the other hand, follows the theming principles of Material Design and provides a flexible theming system. It allows developers to easily customize the color palette, typography, and other visual aspects of the components to maintain a consistent design language.

In summary, DevExtreme is a comprehensive framework that aims to provide a complete set of UI components and tools, supporting multiple programming languages and offering seamless integration with popular frameworks. Material-UI, on the other hand, is a React UI framework that follows the Material Design guidelines, providing a set of versatile and visually appealing components optimized for React applications.

Advice on Material-UI, DevExtreme

Abigail

Dec 10, 2019

Decided

Fonts and typography are fun. Material Design is a framework (developed by Google) that basically geeks out on how to assemble your typographical elements together into a design language. If you're into fonts and typography, it's fantastic. It provides a theming engine, reusable components, and can pull different user interfaces together under a common design paradigm. I'd highly recommend looking into Borries Schwesinger's book "The Form Book" if you're going to be working with Material UI or are otherwise new to component design.

https://www.amazon.com/Form-Book-Creating-Printed-Online/dp/0500515085

766k views766k

Comments

Detailed Comparison

Material-UI	DevExtreme
Material UI is a library of React UI components that implements Google's Material Design.	From Angular and React, to ASP.NET Core or Vue, it includes a comprehensive collection of high-performance and responsive UI widgets for use in traditional web and next-gen mobile applications. The suite ships with a feature-complete data grid, interactive charts widgets, data editors, and much more.
Tables; Forms; Snackbars; Buttons; Theming	A Feature-Complete HTML5 JavaScript Data Grid Widget; Client-Side Widget Optimized for Multi-Dimensional Data Analysis;Collection of High-Performance Data Visualization Widgets;Client-Side Tree View and List View Hybrid;Google, Bing, and Vector Maps
Statistics
GitHub Stars -	GitHub Stars 1.9K
GitHub Forks -	GitHub Forks 655
Stacks 2.3K	Stacks 93
Followers 3.7K	Followers 205
Votes 445	Votes 1
Pros & Cons
Pros 141 React 82 Material Design 60 Ui components 30 CSS framework 26 Component Cons 36 Hard to learn. Bad documentation 29 Hard to customize 22 Hard to understand Docs 9 Bad performance 7 For editable table component need to use material-table	Pros 1 Components Cons 4 Large transfer size 1 Customisation
Integrations
React Emotion Next.js styled-components Node.js	Ionic AngularJS Knockout Vue.js React Angular Visual Studio jQuery ASP.NET Core ASP.NET

What are some alternatives to Material-UI, DevExtreme?

Bootstrap

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

Foundation

Foundation is the most advanced responsive front-end framework in the world. You can quickly prototype and build sites or apps that work on any kind of device with Foundation, which includes layout constructs (like a fully responsive grid), elements and best practices.

Semantic UI

Semantic empowers designers and developers by creating a shared vocabulary for UI.

Materialize

A CSS Framework based on material design.

Material Design for Angular

Material Design is a specification for a unified system of visual, motion, and interaction design that adapts across different devices. Our goal is to deliver a lean, lightweight set of AngularJS-native UI elements that implement the material design system for use in Angular SPAs.

Blazor

Blazor is a .NET web framework that runs in any browser. You author Blazor apps using C#/Razor and HTML.

Quasar Framework

Build responsive Single Page Apps, SSR Apps, PWAs, Hybrid Mobile Apps and Electron Apps, all using the same codebase!, powered with Vue.

Nuxt.js

Nuxt.js presets all the configuration needed to make your development of a Vue.js application enjoyable. You can use Nuxt.js for SSR, SPA, Static Generated, PWA and more.

UIkIt

UIkit gives you a comprehensive collection of HTML, CSS, and JS components which is simple to use, easy to customize and extendable.

Tailwind CSS

Tailwind is different from frameworks like Bootstrap, Foundation, or Bulma in that it's not a UI kit. It doesn't have a default theme, and there are no build-in UI components. It comes with a menu of predesigned widgets to build your site with, but doesn't impose design decisions that are difficult to undo.