Front end material design stack with angular.js

Question

I am trying to get better at coding and am trying to figure out exactly what front end stack I need. I have red a lot and about a lot of tools but it is too much and I don't know which ones work good together or not.

Currently my idea is to do a web app with the design principles of Material Design from google and use angular for the logic of the front end.

I have red about and used these tools: Angular.js, Material Design Lite, Angular-material, polymer, ionic, bootstrap, Materialize and other various material design frameworks.

I am playing with this demo that I wanted to try out Material Design Lite but went too further and ended up needing Polymer for some input drop-down components. Playing further more with MDL I found out that it is not sufficient as bootstrap as I am used to work and would like to have this in it, but don't get me wrong I like MDL.

ionic has some good features for the local server and easy set up of template app as well other nice things like export to ios,android app, push notifications, but I ended up deleting ionic.css cause it was interfering with MDL and Polymer

I am asking some more experienced web app developers to help me out with this stack dilemma. I would like to get this out of my mind so I can be free and develop more.

Also tools like GRUNT, BOWER and so on? which one is the best in my case?

note: if u got interested the back end would be cakePhP and Mysql and the data type is going to be JSON (angular will send json to php into DB).

Answer 1

i would recommend you to use angular-material for your project if :

• you have good knowledge of angularjs or if you find it interesting to learn
• you have gone through google design and you want to implement it in angularjs way

• try implementing missing features or take online help

  Angular-material team is working on adding more and more features as already build in directives and services. Check releases on github page & demo guide

  ( Drop downs are already there in latest version as menu)

Few points

• Google has an awesome open source guide for design.

  Angular-material is a framework that helps you implement and follow that design language and principles using angularjs.

• Bootstrap is just a framework which gives implementation of css, js related to front end work. Look and feel will be entirely different from google design.
• Ionic is again a completely different framework which provides implementation and guide for mobile app development.

You can read about diff in angular-material/bootstrap/ionic in my post here

Bower/Grunt

• bower ( package manager) and grunt ( task runner) are tools which work in node environment.
• if your development environment is nodejs you should use them to get work done quickly and efficiently. Check there sites for more information.

cakePhp/mySql

If your backend runs on these and you have angularjs in frontend. Angularjs can make restfull calls in JSON to your api and it would all work good.

Answer 2

It can be overwhelming trying to learn all the tools and using them at the same time. My advice is to just use the tools when you need to.

If your web app is simple you may not even need a framework like angular. If you want to play with material design, you can do that with the css classes that MD lite offers no matter if you use angular / polymer / or plain javascript. ( If you want to use Polymer you already have some material design styles included. )

Some people prefer starting with the most simple solution and keep adding more sophisticated tools gradually. Others prefer starting with a more complex solution that has integrated the best practices, and in that case using a "Starter kit" may be useful.

Regarding Grunt/gulp... etc. You could worry about that later when you need to have a "build system" to do tasks like compressing files, optimising images and other things that are important for publishing.

After years doing frontend development i realised that is not possible to master all the tools available ( and having a life outside code ). You eventually settle for some tools (everybody have different preferences) and the important experience comes with solving real problems.