I see many material elements both in Polymer and AngularJS Material. As I know, both of them are google's products about Material design, Are there any relationships between them? Are there any plans for Material for Angular v2?
Material design is a new design language spec that many frameworks, widget libraries, and 3rd authors can adopt and implement.
Polymer is the reference implementation of material design for the web. As an added bonus, turns out web components lend themselves extremely well to the design/patterns of material design (css scoping, compartmentalization, declarative, etc.)
Polymer.dart is simply a Dart port of Polymer. Since it's a port, the paper-* (material design) elements should be very similar to their JS counterparts. Ideally, there would be no port of the elements themselves, but true dart/js interop is lacking right now.
Angular has their own interpretation of the material design spec. Not sure how closely it adheres to the spec.
Related
Hi everyone. I am currently building a new project using React, MongoDB and Express (MERN Stack basics)
Is there any other recommendations as to what material library source I can use, to veer away from Bootstrap.
With Angular, it's Angular Material is ofcourse a winner, but I am specifically looking for React Material Libraries without hassles.
Please leave your recommendations for me, I'd appreciate it tremendously!
You can use mui library src is MUI
MUI comes with dozens of ready-to-use components in the core. These components are an incredible starting point but when it comes to making your site stand out with a custom design, it can be simpler to start from an unstyled state. Introducing the system:
The system lets you quickly build custom UI components leveraging the values defined in your theme.
I went through the home page of materializecss and materialUI. The first one mentions A modern responsive front-end framework based on Material Design and the later one mentions React components that implement Google's Material Design. Both of them implements material design and both of them give me components to use. Where exactly is the difference between both of them?
Both materialize and material UI implement Google's Material Design But in two different way. For instance grid system is one of differences.
As material UI mention in it's documentation, materialize has these differences :
1- Materialize supports a wider range of browsers than Material-UI does, for instance, they support IE 10 while we only support IE 11. Only supporting IE 11 allows us to take full advantage of the flexbox layout. IE 10 has many issues with flexbox.
2- Materialize uses SCSS, a styling architecture Material-UI moved away from 2 years ago.
(https://material-ui.com/getting-started/comparison/#materialize)
Although material UI is the most popular React component library because it has a large set of React components.
Some communities like gem, meteor and ember have ability to include Materialize their projects.
I had experience with using materialize with angularjs. materialize provides directives for using materializecss features in angularjs (https://krescruz.github.io/angular-materialize/). most of them work properly but input-field directive cause problem in application performance.
As far as I have seen, there are no support for animations in the current (v0.9.0) Angular Material Design library. It's neither documented at official docs. Although it is explained breafly at Google Material Design apecification.
So, how should we go ahead implementing animations, and in particular state trantitions, with Angular? I believe that there are different alternatives such as use of CSS, JQuery, ++ but what direction should we aim for?
Angular Material doesn't aim to provide any animations. It provides css classes that you can use to "link" your own animations to (enter/leave classes).
Also the official angular page to animation states:
Animations in AngularJS are completely based on CSS classes.
So probably this should be the way to go. Also because regarding animations nowadays you can do almost everything with pure CSS (no js needed).
As far as I read, many use animate.css in combination with Angular Material.
I've just came with a SO answer mentioning that Foundation and AngularJS do not play well together.
That raises the question: When deciding between Bootstrap and Foundation, do any of them integrate better with MVC frameworks? Or is it just AngularJS case since it takes over so many things?
Foundation and Bootstrap provide their own widgets, and AngularJS might be take over more things beyond plain MVC (like Backbone). Is there any consideration regarding freedom to chose MVC frameworks?
As plain grid framework, I really like Foundation, but I am concerned if the popularity of Bootstrap can provide a road with less surprises when combining other projects.
AngularJS is a different beast when compared to other frontend MV* frameworks (Backbone at least) due to the way it manipulates the DOM, much of the javascript from projects like Foundation and Bootstrap becomes obsolete.
The angular-ui team have an angular-bootstrap project, one of the aims is to reimplement the Bootstrap widgets in a via Angular directives, the javascript has been rewritten. A side effect is that those directives can easily be applied to other frontend ui frameworks, such as Foundation, by merely providing a new html template. For example, tabs or an accordion have the same functionality regardless of framework, once you implement the functionality in AngularJS you can apply any template and it still works the same.
There a very interesting google groups post that explains the reasons in more detail.
If you want to use AngularJS, until the Foundation widgets have been integrated with angular-bootstrap, a potential middle way would be using Foundation css for layout with angular-bootstrap widgets.
If you are going to work with Angular, in my view go with BootStrap. There is even a openSource project called AngularStrap which combines bootstrap css classes in to directives. Have a look here. This in my opinion integrates better with Angular
It's still being developed, but I'm using angular with the angular-foundation project and it seems solid. Angular does stomp on foundation a bit so it's not ideal.
I wonder what the relationship between AngularJS and AngularUI is?
A quick look at the contributors' list seems to say that both projects are developed by independent teams.
Does anyone know more about the relationship between these two projects?
What's especially interesting is the question whether things provided by AngularUI will (one day) become merged into AngularJS. This would be extremly useful for things such as ui-router.
Anyone know more than me ;-)?
AngularUI is an organization that originally started off as one project to consolidate efforts people were making early on across the entire community to create defacto widgets and directives for AngularJS (like jQueryUI is to jQuery). Although it started off as one project with multiple widget wrappers, it's evolved into an organization with multiple teams and projects with different focuses.
Although we didn't start off with any AngularJS core team members, we have been working very closely with them to improve the AngularJS community and today we have 2 of our team members (Pete Bacon Darwin & Pawel Kozlowski) who have been added to the AngularJS core team.
Some of the projects include:
AngularUI (soon to be broken up into 0-dependency utilities and widget wrappers)
UI-Bootstrap: A reimplementation of all Bootstrap components in native AngularJS (as per popular demand by both the community and the core team itself)
UI-Router: An attempt to create defacto solution to complex/nested routing that we hope to eventually get merged into the core
uiBot (UniBot): IRC bot for the #angularjs channel
NG-Grid: A SlickGrid-inspired virtual grid solution for AngularJS
We've also been actively talking to Jim Hoskins (the guy behind ngmodules.org) to create an AngularJS-based package distribution and organization system/standards for the community as a whole.
Basically AngularJS is the MVC framework itself, while AngularUI is a bunch of UI components built over Angular. Think of in the same way as jQuery and jQueryUI.
There are a few utility directives, like ui-router, ui-keypress and ui-event, but it is mostly about pre-built widgets.
You will see no such widgets in AngularJS project. There is no tab, button, calendar or any other widget. Only the raw directives, resources and tools to allow you to develop anything your project need.
Adding a third related project, while AngularUI uses Twitter Bootstrap layout, there is a project from AngularUI team called UI Bootstrap that is the implementation of Bootstrap components over AngularJS instead of jQuery.
It is possible that some base directive/service, like ui-event or ui-keypress, to become part of the project, but there is no plans, at least not explicity plans, to merge both projects due to its nature. In other words, it's hardly possible that the widgets (ui-calendar, ui-button, ui-date) will be merged.