08 Nov

A Comparison of Material Design Frameworks – Samples

A few weeks ago we looked at a few different UI frameworks (Angular Material, LumX, and Materialize) that use material design elements. We compared the Maturity of the library, technologies they use, their design features and the size of each after minimizing the project. You can see the results of our comparison here . Today we are going to create an app to put them to use. Then, we will demo the results. We will create the same app three times in each of the frameworks to see the visual difference. From there we will see how easily each framework is implemented and the design differences of our final project when the app is complete.

We will be creating a real estate review app. This app will allow you to write a review on a property that you have just visited. We are keeping this application simple so we will only let the user see one property. We are going to to mostly use the prebuilt components that come with each framework and customize their styling as little as possible to give you an idea how each framework looks out of the box. This will result in our applications looking slightly different in order to demonstrate the available components and how the untouched version of each framework’s components fits in with the project as a whole.

The requirements for each app are as follows:

  • It will need to have a title bar with the name of the property
  • An image of the property will need to be displayed
  • There will be inputs to write the user’s name and a review
  • A button will exist to toggle from the property to a list of its previous reviews.

Lets see how each framework did when put to this test!

Materialize

imgresWe found material to be the quickest of the three to set up. It was done quickly with an npm install and linking the dependencies in the index of an Angular project. Materialize is a very basic framework and most of the prebuilt elements could be copied and pasted right into the application without much work. I was able to put the UI for this demo together much quicker than the LumX and Angular Material demos. Subjectively it also had the cleanest out of the box UI. Materialize did however fall short was on the javascript and Angular side, there were no prebuilt Angular helpers in any of the components so they all needed to be added custom to the project.

View Project on Github

Pre built components used for this project:

  • Card with reveal
  • Card Title
  • Collections items
  • Button with waves effect

Time from setup to completion:

  • 2 hours and 15mins

Cons:

  • Angular did not come with the framework and needed to be installed

Pros:

  • Really easy to use
  • There were many UI components ready to use and they all dropped right into my project beautifully.

 

Angular Material

angularmaterialAngular Material was also very easy to set up. They have very detailed documentation alongside the framework that gives you the step by step process of how to get going. Once my project was set up I had a bit more of a challenge finding the right UI components than with Materialize to quickly get my application built. In Materialize one of the prebuilt components that they offer is a card with a reveal button, that was perfect for toggling from my add review section to my reviews. In Material I had to get creative and use the sideNav component to reveal the reviews.

View Project on Github

Pre built components used for this project:

  • Card with action buttons
  • Input
  • Primary raised button
  • List with icon

Time from setup to completion:

  • 2 hours and 45mins

Cons:

  • The pre built components come with quite a bit of bloat in the code that you need to chip away at to use them in your own project

Pros:

  • Great documentation on how to get set up
  • Lots of components to choose from
  • Angular Included on install

 

 

LumX

lumxLumX was also quite easy to set up. It had clear documentation and multiple ways to go about getting started. LumX like Angular Material came with Angular as a dependency and had Angular helpers built into some of the components in the demos. Having Angular sped up the process of getting the app running. I do however think this framework fell a bit short on the UI side. The list of prebuilt components did not have as many useful variations as Angular Material and Materialize. I also could not find a component to perform the same functionality as the sideNav from Angular Material and the card with a reveal from Materialize, so I used a ng-hide to toggle the views between add review and read reviews. The Components that LumX did provide were easy to integrate and looked great.

View Project on Github

Pre built components used for this project:

  • Card with image on top
  • Raised button
  • Text field
  • List with icon

Time from setup to completion:

  • 3 hours

Cons:

  • They did not have a component I needed to reveal the previous reviews like the ones I found in Angular Material and in Materialize

Pros:

  • The UI components they had were easy to use
  • Project setup was quick because of good documentation
Side by Side

Now that we’ve discussed the pros and cons, lets take a look at implementations of the same app with these three different UI frameworks side by side.

Review Form

Previous Reviews List

 

Summary

In conclusion if you want to build a quick app that incorporates Google’s Material design all three of these frameworks are great options with their own pros and cons. I personally enjoyed using Materialize the most for this small app. It was the easiest to implement and the pre built components made it so I had to do very little work to build a great looking app.

Reference Links:
Share this

Comments (3)

Anu
March 7, 2017 Reply

Thanks for providing frame work

shivani
March 7, 2017 Reply

Great article !

Leave a reply