Material-UI聽vs聽Rails

Get Advice Icon

Need advice about which tool to choose?Ask the StackShare community!

Material-UI
Material-UI

558
511
+ 1
156
Rails
Rails

8.6K
5.3K
+ 1
5.3K
Add tool

Material-UI vs Rails: What are the differences?

Material-UI: React components for faster and easier web development. Build your own design system, or start with Material Design. React components for faster and easier web development. Build your own design system, or start with Material Design; Rails: Web development that doesn't hurt. Rails is a web-application framework that includes everything needed to create database-backed web applications according to the Model-View-Controller (MVC) pattern.

Material-UI and Rails are primarily classified as "Front-End Frameworks" and "Frameworks (Full Stack)" tools respectively.

"React" is the top reason why over 51 developers like Material-UI, while over 822 developers mention "Rapid development" as the leading cause for choosing Rails.

Material-UI and Rails are both open source tools. Material-UI with 48.6K GitHub stars and 11K forks on GitHub appears to be more popular than Rails with 43.6K GitHub stars and 17.5K GitHub forks.

Airbnb, Twitter, and Instacart are some of the popular companies that use Rails, whereas Material-UI is used by DeveloperTown, Ratio, and Chattermill. Rails has a broader approval, being mentioned in 2321 company stacks & 796 developers stacks; compared to Material-UI, which is listed in 69 company stacks and 80 developer stacks.

What is Material-UI?

It is a comprehensive guide for visual, motion, and interaction design across platforms and devices.

What is Rails?

Rails is a web-application framework that includes everything needed to create database-backed web applications according to the Model-View-Controller (MVC) pattern.
Get Advice Icon

Need advice about which tool to choose?Ask the StackShare community!

Why do developers choose Material-UI?
Why do developers choose Rails?

Sign up to add, upvote and see more prosMake informed product decisions

Sign up to add, upvote and see more consMake informed product decisions

What companies use Material-UI?
What companies use Rails?

Sign up to get full access to all the companiesMake informed product decisions

What tools integrate with Material-UI?
What tools integrate with Rails?

Sign up to get full access to all the tool integrationsMake informed product decisions

What are some alternatives to Material-UI and Rails?
Kendo UI
Fast, light, complete: 70+ jQuery-based UI widgets in one powerful toolset. AngularJS integration, Bootstrap support, mobile controls, offline data solution.
Flat UI
Flat UI is a beautiful theme for Bootstrap. We have redesigned many of its components to look flat in every pixel.
Ant Design
An enterprise-class UI design language and React-based implementation. Graceful UI components out of the box, base on React Component. A npm + webpack + babel + dora + dva development framework.
react-md
React MD is Google's Material Design specifications implemented with Sass and React. The goal of the project is to create components that adhere to the Material Design specifications.
Angular Material
Sprint from Zero to App. Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop. It allows to create material styled angular apps fast and easy.
See all alternatives
Decisions about Material-UI and Rails
StackShare Editors
StackShare Editors
Angular
Angular
jQuery
jQuery
Objective-C
Objective-C
Swift
Swift
Go
Go
Ruby
Ruby
Java
Java
React
React
Python
Python
Node.js
Node.js
Rails
Rails

By mid-2015, around the time of the Series E, the Digital department at WeWork had grown to more than 40 people to support the company鈥檚 growing product needs.

By then, they鈥檇 migrated the main website off of WordPress to Ruby on Rails, and a combination React, Angular, and jQuery, though there were efforts to move entirely to React for the front-end.

The backend was structured around a microservices architecture built partially in Node.js, along with a combination of Ruby, Python, Bash, and Go. Swift/Objective-C and Java powered the mobile apps.

These technologies power the listings on the website, as well as various internal tools, like community manager dashboards as well as RFID hardware for access management.

See more
Spenser Coke
Spenser Coke
Product Engineer at Loanlink.de | 8 upvotes 132.9K views
atLoanlink GmbhLoanlink Gmbh
HTML5
HTML5
Vue.js
Vue.js
Google Drive
Google Drive
Mailchimp
Mailchimp
Zapier
Zapier
Trello
Trello
GitHub
GitHub
React
React
Node.js
Node.js
.NET
.NET
AngularJS
AngularJS
Rails
Rails

When starting a new company and building a new product w/ limited engineering we chose to optimize for expertise and rapid development, landing on Rails API, w/ AngularJS on the front.

The reality is that we're building a CRUD app, so we considered going w/ vanilla Rails MVC to optimize velocity early on (it may not be sexy, but it gets the job done). Instead, we opted to split the codebase to allow for a richer front-end experience, focus on skill specificity when hiring, and give us the flexibility to be consumed by multiple clients in the future.

We also considered .NET core or Node.js for the API layer, and React on the front-end, but our experiences dealing with mature Node APIs and the rapid-fire changes that comes with state management in React-land put us off, given our level of experience with those tools.

We're using GitHub and Trello to track issues and projects, and a plethora of other tools to help the operational team, like Zapier, MailChimp, Google Drive with some basic Vue.js & HTML5 apps for smaller internal-facing web projects.

See more
Russel Werner
Russel Werner
Lead Engineer at StackShare | 17 upvotes 200.1K views
atStackShareStackShare
Redis
Redis
CircleCI
CircleCI
Webpack
Webpack
Amazon CloudFront
Amazon CloudFront
Amazon S3
Amazon S3
GitHub
GitHub
Heroku
Heroku
Rails
Rails
Node.js
Node.js
Apollo
Apollo
Glamorous
Glamorous
React
React
#FrontEndRepoSplit
#Microservices
#SSR
#StackDecisionsLaunch

StackShare Feed is built entirely with React, Glamorous, and Apollo. One of our objectives with the public launch of the Feed was to enable a Server-side rendered (SSR) experience for our organic search traffic. When you visit the StackShare Feed, and you aren't logged in, you are delivered the Trending feed experience. We use an in-house Node.js rendering microservice to generate this HTML. This microservice needs to run and serve requests independent of our Rails web app. Up until recently, we had a mono-repo with our Rails and React code living happily together and all served from the same web process. In order to deploy our SSR app into a Heroku environment, we needed to split out our front-end application into a separate repo in GitHub. The driving factor in this decision was mostly due to limitations imposed by Heroku specifically with how processes can't communicate with each other. A new SSR app was created in Heroku and linked directly to the frontend repo so it stays in-sync with changes.

Related to this, we need a way to "deploy" our frontend changes to various server environments without building & releasing the entire Ruby application. We built a hybrid Amazon S3 Amazon CloudFront solution to host our Webpack bundles. A new CircleCI script builds the bundles and uploads them to S3. The final step in our rollout is to update some keys in Redis so our Rails app knows which bundles to serve. The result of these efforts were significant. Our frontend team now moves independently of our backend team, our build & release process takes only a few minutes, we are now using an edge CDN to serve JS assets, and we have pre-rendered React pages!

#StackDecisionsLaunch #SSR #Microservices #FrontEndRepoSplit

See more
Julien DeFrance
Julien DeFrance
Principal Software Engineer at Tophatter | 16 upvotes 385.2K views
atSmartZipSmartZip
Amazon DynamoDB
Amazon DynamoDB
Ruby
Ruby
Node.js
Node.js
AWS Lambda
AWS Lambda
New Relic
New Relic
Amazon Elasticsearch Service
Amazon Elasticsearch Service
Elasticsearch
Elasticsearch
Superset
Superset
Amazon Quicksight
Amazon Quicksight
Amazon Redshift
Amazon Redshift
Zapier
Zapier
Segment
Segment
Amazon CloudFront
Amazon CloudFront
Memcached
Memcached
Amazon ElastiCache
Amazon ElastiCache
Amazon RDS for Aurora
Amazon RDS for Aurora
MySQL
MySQL
Amazon RDS
Amazon RDS
Amazon S3
Amazon S3
Docker
Docker
Capistrano
Capistrano
AWS Elastic Beanstalk
AWS Elastic Beanstalk
Rails API
Rails API
Rails
Rails
Algolia
Algolia

Back in 2014, I was given an opportunity to re-architect SmartZip Analytics platform, and flagship product: SmartTargeting. This is a SaaS software helping real estate professionals keeping up with their prospects and leads in a given neighborhood/territory, finding out (thanks to predictive analytics) who's the most likely to list/sell their home, and running cross-channel marketing automation against them: direct mail, online ads, email... The company also does provide Data APIs to Enterprise customers.

I had inherited years and years of technical debt and I knew things had to change radically. The first enabler to this was to make use of the cloud and go with AWS, so we would stop re-inventing the wheel, and build around managed/scalable services.

For the SaaS product, we kept on working with Rails as this was what my team had the most knowledge in. We've however broken up the monolith and decoupled the front-end application from the backend thanks to the use of Rails API so we'd get independently scalable micro-services from now on.

Our various applications could now be deployed using AWS Elastic Beanstalk so we wouldn't waste any more efforts writing time-consuming Capistrano deployment scripts for instance. Combined with Docker so our application would run within its own container, independently from the underlying host configuration.

Storage-wise, we went with Amazon S3 and ditched any pre-existing local or network storage people used to deal with in our legacy systems. On the database side: Amazon RDS / MySQL initially. Ultimately migrated to Amazon RDS for Aurora / MySQL when it got released. Once again, here you need a managed service your cloud provider handles for you.

Future improvements / technology decisions included:

Caching: Amazon ElastiCache / Memcached CDN: Amazon CloudFront Systems Integration: Segment / Zapier Data-warehousing: Amazon Redshift BI: Amazon Quicksight / Superset Search: Elasticsearch / Amazon Elasticsearch Service / Algolia Monitoring: New Relic

As our usage grows, patterns changed, and/or our business needs evolved, my role as Engineering Manager then Director of Engineering was also to ensure my team kept on learning and innovating, while delivering on business value.

One of these innovations was to get ourselves into Serverless : Adopting AWS Lambda was a big step forward. At the time, only available for Node.js (Not Ruby ) but a great way to handle cost efficiency, unpredictable traffic, sudden bursts of traffic... Ultimately you want the whole chain of services involved in a call to be serverless, and that's when we've started leveraging Amazon DynamoDB on these projects so they'd be fully scalable.

See more
John Barton
John Barton
Founder at Hecate | 7 upvotes 30.5K views
atHecateHecate
Material-UI
Material-UI
Go
Go
PostgreSQL
PostgreSQL
Rails
Rails
MobX
MobX
Redux
Redux
React
React

Frontend choice was basically pre-ordained to be React. Seems like a strong choice on merits alone, plus I needed to learn it to stay current. I never liked Redux.js from the first time I tried to work with it, but a mate had recommended MobX and after watching a few videos I felt like I could fit the mental model of hit in my head. Using Material-UI which is a great timesaver and make sure I throw a few bucks their way every month via the open source collective.

Defaulted to Rails with PostgreSQL just because that's where my past strength as a dev had been. First prototype was in Go but was struggling a bit with the quality of libraries I needed so I went back to old faithful.

As soon as TypeScript was supported by default in Create React App I ported everything over. That combined with swagger code gen has given me really good type safety from the API boundary and above. I semi-regret the Go/Rails decision because I miss the type safety despite pain points with libraries.

I will probably look to flip back to Go gradually (probably via lambda) at a point where it makes sense for the business.

See more
Francisco Quintero
Francisco Quintero
Tech Lead at Dev As Pros | 7 upvotes 49.6K views
atDev As ProsDev As Pros
Twist
Twist
Slack
Slack
ESLint
ESLint
JavaScript
JavaScript
RuboCop
RuboCop
Heroku
Heroku
Amazon EC2
Amazon EC2
Rails
Rails
Node.js
Node.js

For many(if not all) small and medium size business time and cost matter a lot.

That's why languages, frameworks, tools, and services that are easy to use and provide 0 to productive in less time, it's best.

Maybe Node.js frameworks might provide better features compared to Rails but in terms of MVPs, for us Rails is the leading alternative.

Amazon EC2 might be cheaper and more customizable than Heroku but in the initial terms of a project, you need to complete configurationos and deploy early.

Advanced configurations can be done down the road, when the project is running and making money, not before.

But moving fast isn't the only thing we care about. We also take the job to leave a good codebase from the beginning and because of that we try to follow, as much as we can, style guides in Ruby with RuboCop and in JavaScript with ESLint and StandardJS.

Finally, comunication and keeping a good history of conversations, decisions, and discussions is important so we use a mix of Slack and Twist

See more
Adebayo Akinlaja
Adebayo Akinlaja
Engineering Manager at Andela | 13 upvotes 20K views
Bit
Bit
Create React App
Create React App
Material Kit
Material Kit
TypeScript
TypeScript
Evergreen
Evergreen
Material-UI
Material-UI
React
React

I picked up an idea to develop and it was no brainer I had to go with React for the frontend. I was faced with challenges when it came to what component framework to use. I had worked extensively with Material-UI but I needed something different that would offer me wider range of well customized components (I became pretty slow at styling). I brought in Evergreen after several sampling and reads online but again, after several prototype development against Evergreen鈥攕ince I was using TypeScript and I had to import custom Type, it felt exhaustive. After I validated Evergreen with the designs of the idea I was developing, I also noticed I might have to do a lot of styling. I later stumbled on Material Kit, the one specifically made for React . It was promising with beautifully crafted components, most of which fits into the designs pages I had on ground.

A major problem of Material Kit for me is it isn't written in TypeScript and there isn't any plans to support its TypeScript version. I rolled up my sleeve and started converting their components to TypeScript and if you'll ask me, I am still on it.

In summary, I used the Create React App with TypeScript support and I am spending some time converting Material Kit to TypeScript before I start developing against it. All of these components are going to be hosted on Bit.

If you feel I am crazy or I have gotten something wrong, I'll be willing to listen to your opinion. Also, if you want to have a share of whatever TypeScript version of Material Kit I end up coming up with, let me know.

See more
Interest over time
Reviews of Material-UI and Rails
No reviews found
How developers use Material-UI and Rails
Avatar of StackShare
StackShare uses RailsRails

The first live version of Leanstack was actually a WordPress site. There wasn鈥檛 a whole lot going on at first. We had static pages with static content that needed to be updated manually. Then came the concept of user-generated content and we made the switch to a full on Rails app in November of last year. Nick had a lot of experience with Rails so that made the decision pretty easy. But I had also played around with Rails previously and was comfortable working with it. I also knew I鈥檇 need to hire engineers with a lot more experience building web apps than I do, so I wanted to go with a language and framework other people would have experience with. Also, the sheer number of gems and tools available for Rails is pretty amazing (shout to RubyToolbox ).

I don鈥檛 see us ever having to move away from Rails really, but I could be wrong. Leanstack was built in Rails 3. For StackShare we decided to upgrade to Rails 4. Biggest issue with that has been caching. DHH decided to remove the standard page and action caching in favor of key-based caching (source)[http://edgeguides.rubyonrails.org/caching_with_rails.html#page-caching]. Probably a good thing from a framework-perspective. But pretty shitty to have to learn about that after testing out your new app and realizing nothing is cached anymore :( We鈥檒l need to spend some more time implementing "Russian Doll Caching", but for now we鈥檝e got a random mixture of fragment and action caching (usually one or the other) based on which pages are most popular.

Avatar of Karma
Karma uses RailsRails

We use Rails for webpages and projects, not for backend services. Actually if you click through our website, you won't notice it but you're clicking though, I think, seven or eight different Rails projects. We tie those all together with a front-end library that we wrote, which basically makes sure that you have a consistent experience over all these different Rails apps.

It's a gem, we call it Karmeleon. It's not a gem that we released. It's an internal gem. Basically what it does is it makes sure that we have a consistent layout across multiple Rails apps. Then we can share stuff like a menu bar or footer or that kind of stuff.

So if we start a new front end project it's always a Rails application. We pull in the Karmeleon gem with all our styling stuff and then basically the application is almost ready to be deployed. That would be an empty page, but you would still have top bar, footer, you have some custom components that you can immediately use. So it kind of bootstraps our entire project to be a front end project.

Avatar of Cloudcraft
Cloudcraft uses Material-UIMaterial-UI

Material UI provides Cloudcraft.co with a clean, professional looking and very easy to use set of UI components build with React. The few issues we've reported to the developers have been quickly fixed each time. I highly recommend using Material UI for both consumer and enterprise web apps. The styling system in particular is very nice to work with, and allows you to easily add your own brand's look and feel throughout the UI.

Avatar of Instacart
Instacart uses RailsRails

Web has always been in Rails from the beginning, so we used Redis for caching our items, which we had, from the beginning. Rails is kind of what we were comfortable with, and we knew we wanted the front end to be really, really snappy, so we de-normalized all the item attributes into Redis, and that's how it got served out.

Avatar of Tim Lucas
Tim Lucas uses RailsRails

Rails 5 (beta 3) provided a nice structure for rendering responses, linking to front-end assets (compiled previously via Webpack), handling sessions w/ tailor made login links via an email button/token, background jobs, and creating an admin behind basic auth to allow managing of users and purchases.

Avatar of Ngakkan Nyaagu
Ngakkan Nyaagu uses RailsRails

For this project rails was ideal due to new features introduced in Rails 5 that allowed us to build a lightweight "API only" project. Developer familiarity and the ability to rapidly iterate, as well as providing an accessible testing framework were additional factors.

Avatar of Kurzor, s.r.o.
Kurzor, s.r.o. uses Material-UIMaterial-UI

We like the pure simplicity of Google's Material UI. It is simply too much overhead today to design custom UI styles.

Avatar of DerEnderKeks
DerEnderKeks uses Material-UIMaterial-UI

Martial UI is used by Admin-on-REST, the frontend used by Gofus.

Avatar of Ambar
Ambar uses Material-UIMaterial-UI

Ambar UI is based on Material UI components

Avatar of Sunny Singh
Sunny Singh uses Material-UIMaterial-UI

Provides Material-based components.

How much does Material-UI cost?
How much does Rails cost?
Pricing unavailable
Pricing unavailable
News about Material-UI
More news