I have used MDL (Material Design Lite) and i realy like it, but I want to use something similar in Polymer, for example: mdl-grid (or others clases), does polymer have a component or similar to make a grid system like in MDL? or what do you recomend to use in Polymer to have a similar efect of those MDL clases?
Thanks a lot.
I recommend checking out customelements.io. It's a community page for web-components offering many reusable elements for Polymer.
Specifically the ag-grid and fin-hypergrid elements.
https://customelements.io/search/grid
Related
I'm going to start a react project. I want a little clarification about the choice of Material UI over Reactstrap. Material UI is better than Bootstrap as mentioned in another comparison of Bootstrap vs Material UI for React?. But I'm a little confused about Reactstrap after going through Pros & Cons of Material UI and Reactstrap as shown in the below images. Or should I use both of them as per requirement in the same project?
I would like to use ready made UI components like Collapse-able Side Menu, Tables with pagination, Auto complete Select etc.
react-bootstrap is more popular than reactstrap. I will speak about react-bootstrap and Material UI.
I have more experience with Material UI. I don't even know how Material UI became that popular while it was very bad when it was released. It used inline styling and it was a nightmare to customize anything. Its performance was very poor. Still, it became very popular and it improved a lot. I used it in my latest project and the performance was great and I used its new CSS in JS solution combined with styled-components. I think it will be a bit harder to use than react-bootstrap but it has more components out of the box.
For most people, react-bootstrap would be an easier choice.
I can't tell you which one to use but I can give you some things to think about and decide yourself:
Which design do you prefer?
If you have more experience with bootstrap, go with react-bootstrap.
If you prefer sass go with react-bootstrap. If you prefer CSS in JS go with Material UI.
If react-bootstrap is missing some components you would need that exists in Material UI go with Material UI but remember that you can add other external components to your project anyway so I think this may not be a limitation.
It depends on your choices, yes, it's a little bit of complicated to customized material, but the looks and feels is outstanding, for tables and all, better to use Material-UI it has inbuilt pagination if you are not comfortable in that you can try this one it also comes inbuilt pagination and much more https://github.com/react-bootstrap-table/react-bootstrap-table2
I agree with comments about the cons referred in your question seems to be more opinions than facts; probably the only fact we can say after compare the two packages is that Material UI has some more built in components.
Once said that it's hard to take a decision without knowing the specification of your project.
Probably the best suggestion we can give you is simply use the one you are more comfortable with.
Hope this helps.
Refer to my experience, if it is an commerial/external project that needs minimal branding, and you are looking for basic reuse-able component to create Admin Portal or CMS, I prefer reactstrap/CoreUI. My main concern is Theme Overriding.
Not enough documentation about overriding material ui style, had quite a hard time to edit and test the theme setting again and again, while reactstrap/CoreUI allow you to import your own .css file, or overriding its class css. So you can simply change the textfield padding at once in css while your designer request to.
Neither material ui and reactstrap/CoreUI can fulfil your need. You may install other useful npm like react-select, multiple datetime picker, autosize textarea, or color picker. Then you try to make its style to be consistent as other Textfield. Styling a component like material ui is quite hard because of its behavior, e.g. label zoom out while focus. But Styling like reactstrap/CoreUI is much easier, you can even reuse the bootstrap classname.
If you are trying to deliver something fast & small without designer, material ui is a good choice, cover most of your use cases. If it is a long-term project and designer is watching you, I am afraid material ui is not a good choice.
Anyway, case by case.
I would say it is your Choice. But if you are good at bootstrap-4, best to go with Reactstrap which is component based library for react.
In my Company we are using Reactstrap and things go quite well. But this doesn't mean we are not using our own media queries and flexbox,styled-jsx which we obviously do.
Even though you will be using ready made Components available in Reactstrap, as you progress in the project you will have to use other libraries 'React-Final-Forms' to handle forms and form data efficiently having high performance when compared with normal forms available in ReactStrap.
Similarly you will need a library known as 'React-select' to handle drop downs, which will give me more options than normal ReactStrap select form Component.
As for now, I am doing project on Next.js and Material-UI. I was also looking for such comparison between Bootstrap(reactstrap)/Material/Ant. And I am agreed with Daniel Ricci with choosing Material-UI.
Why's that?
First of all, I have spoken with my better experienced friend (he has contributed to his own (DEVExpress) React Component Library, so he was know what he has talking about)
Project Management Side pros:
Material itself has a very useful style guidelines from Google. So it is also not about library components, but about styles / colors / design. So you could always customize yourself and create your own theme. But as for you, it will be easier to understand why you are using Roboto:400 at H3 title, and «what color I should pick as secondary?», if you decide to choose primary color.
As a result, it's much easier to find a UI/UX designer for your project. And you always know how your project should looks like.
Default react Material-UI component library is quite rich and very good described with examples. (As you may already noticed). And also there are a lot of plugin libraries components, which is ready-to-use out of the box. In my own case I was needed for a editable material react tables, and have found them in via google in 5 seconds or so. In my project tables are everything and they present the product (price comparison) so that's why I choose material myself.
You could compare component libraries via google trends or github stars, but in your own case with: Collapse-able Side Menu, Tables with pagination, Auto complete Select I would choose MaterialUI.
As for cons, visually Material Style is very populated by devs (cause it's Android's app default theme) and some people thinks that it looks a bit ugly, but I thought it couldn't be a problem because you could always customize your own theme.
And as mentioned Kleo is his original answer:
If you have the time, dedication and resources, there is really nothing wrong with mixing them together. But you just need to think about the time/cost/benifit of it. DIY to make the end user happy, even if you mix them. Totally yourself is remaking the wheel, but you can always pull in boostrap styles etc.
Can we drag and drop md-list item or md-cards in angular material design using jQuery or other framework?
I can give a partial answer to this. It is not recommended to add jQuery to an Angular project. Angular is controller-centric while jQuery is focused on manipulating the DOM. They are really different approaches, and while you could possibly get something to work using jQuery and Angular together--it would tend to be a fragile and overly complex solution.
The same holds for Angular Material. It's not a great basis for jQuery operations.
That having been said, see also my comment on your question. I read through all the documentation on http://material.angularjs.org and found nothing that suggests built-in support for drag/drop operations in general nor for dragging cards around in a list.
I realize the framework is still pretty new but I am surprised to find that something as essential to the Material Design concept as dragging cards around a list simply wasn't addressed. So perhaps you and I both are confused or missing something that should be glaringly obvious.
Recently, in working with AngularJS, I really like many of the features, like creating custom abstract data factories, etc.
KendoUI also has similar features like MVVM, SPA routes, etc. that AngularJS offers, so I'm curious about what the benefits are of mixing the two (other than the rich UI features of KendoUI)?
-- Update --
I'm asking this question for clarification, and for those who may be slightly confused about the benefits of each, and why one would use both in a project, rather than one over the other.
For example - Javascript unit testing capabilities (simply done with Angular controllers, but have not seen anyone doing this with KendoUI).
It seems like Kendo is trying to do it all, but does UI best.
Thanks.
-- Update --
Since writing this question I have gone through and integrated the KendoUI grid with Angular using OData and have written a tutorial here at www.whatsinyourlunch.com on how to accomplish this, in hopes that this will be useful for others.
The stack is AngularJS, KendoUI, OData, WebAPI2, .Net MVC5, C#, Entity Framework accessed through a generic repository.
I know this is old but here is my two cents. The more you use Angular the more you will realize you don't need Kendo. The Kendo/Angular integration is a bit of a hack but it seems to get the job done. The only reason I find to use Kendo is the grid. I've tried the Angular grids out there and they are riddled with bugs and formatting issues.
I think it's important not to be a purist and to just use whatever combination of tools that accomplish what you need. I tend to try to move away from being dependent on paid commercial libraries but the grid is just solid. Any paid product will probably have more support and upkeep, as well as personal access to the development team (vs. well maintained free products from large companies or single developer projects that waste away). I have seen so many great free products get abandoned. However, if you want a great free grid and can't stomach paying Telerik $1000.00 for just a grid, DataTables.net is a great alternative and what I currently use.
You have to love Telerik's support which is the best reason to use their stuff in my opinion. They are lacking some things in Kendo like a good date range calendar, tag cloud, etc. The charts are also lacking compared to say Highcharts. I use the date range calendar from Keith Wood, although he doesn't seem to respond to emails. I found some great angular controls for other things like drop downs, etc. as well. I used to not understand why people use a hodge podge of stuff, but it is the best tool for the job that is important.
I personally would not go any further than using the rich UI features of KendoUI in Angular directives. The rest should be Angular. Or use KendoUI exclusively.
Mixing them works fine. You don't have to use all of the framework code (MVVM, etc.) included with Kendo and can just focus on the rich UI features. We use several of their controls, including a highly customized version of the grid. Angular is perfect for this because we built directives to wrap the Kendo controls and encapsulate the 80% configuration that happens every time so the developer could focus on the 20% that is different in their page/module/whatever. Our project successfully engages over 20 developers in a distributed team on a project with tens of thousands of lines of code and we've had great success using the UI features of Kendo with Angular.
On our current project we're using both Angular and Kendo (mainly for the grid). We didn't mix the two and this would also be my suggestion. Angular should be the one responsible for your application logic and Kendo should only be concerned with managing the widgets.
Kendo provides there own kendo-angular library, which contains directives for most of their widgets.
Here are a couple of points of my experience which doesn't favor the mixing of KendoUI with AngularJs:
Though there are kendo directives for AngularJs, a lot of UI related stuff will end up in the controller (configuration, events, complex templates) and it's difficult to keep jQuery out of it.
The initialization and display of kendo components does add a serious time penalty to each page (grid, tabstrip, ...)
Events and method arguments are not coherent across the kendo framework (i.e. select method of grid vs listview vs combobox)
The use of templates with the grid (or listview) or responding to grid events does not feel like AngularJs.
Components behave differently than the native controls they try to replace (i.e. event order and databinding of combobox vs native select)
As soon as the look and feel of the kendo components has to be customized, one has to become familiar with the CSS classes used by kendo.
The KendoUI grid is great, but if the project doesn't need it, there's nothing to be gained by mixing the two.
I think mixing of them is not a good approach. you should ask yourself a question "witch one is more required and useful in my project"
I had decided to use kendo beside angular because of its rich grid components. But I canceled it.
The main controls of kendoUI is grid. But you need to watch every element of it to have a complete binding and it make it slow. Also dataItem of a row in grid does not return the original data.
you need to watch paging, filtering , sorting ....
But for other controls of kendo we have fewer problems.
My requirement is a build a web form designer in a browser - just like how Zoho Creator (or something similar to other browser based designer tools like proto.io, protoshare, gomockingbird, lucidcharts etc).
Have a tool box/palate on one side, a canvas and a properties box that always shows the properties of the selected control.
I definitely don't think that using JQuery and working with DOM elements will give a scalable solution like these (proto.io, lucidchart etc.). After numerous trials, I feel that AngularJS is the way to go, but it does not have native support for drag-drop and hence I want inputs from community members like you may have more experience with AngularJS on whether what I am setting out to do, is Angularjs the right framework to use for this kind of a solution?
See screens shots of tools like Proto.io - something very similar to what I am setting out to build. Just that my palate will contain form controls like textbox, label etc which I will drag and drop on the canvas instead of the shapes that proto.io has.
Angular is fine. But the main idea of these kind of frameworks like Angular, Dojo, backbone is to structure your application with a specific designed pattern.Hence getting benefit from that pattern. And Angular will help you construct your app into MV* pattern. i may think what you need now is a graph library that support things with canvas , drag-drop , palettes, templates, overview, etc. Some may be useful are JointJS, MxGraph,Draw2D, Data-driven Documents, gojs, mindfusion.
Draw2D supports Angular as well. The lib has a boilerplate app whichs shows
how to use the draw2d stuff in combination with angluar.
The examples shows how to structure your app with Controller, Factories and two way
data binding.
I think you can use the draw2d boilderplate with any other DragDrop lib. It's just
a pattern how to integrate a third party lib into angular.
Angular has many hooks and pattern which supports any kind of lib
Greetings
Andreas
I want to build a mobile site in Sencha which showing HTML content on a tablet device, containing many objects/divisions/containers with similar layouts and properties.
Take this example window:
Is there a best practice or recommended way to achieve reusability and DRY for writing those containers in Sencha Touch 2?
What types of objects would you use? Does it make sense to use HTML div objects + CSS?
Also, does it make sense to use Sencha in this case?
Here is how you would achieve that layout using Sencha Touch:
Unfortunately it is pretty hard to explain, but hopefully it makes sense.
I've also created a very simple example of this layout, viewable here: http://www.senchafiddle.com/#jxiA8 (make sure you press Run).
As for which objects/components; they would all be Ext.Containers. Ideally you would use the MVC structure to create custom classes (which would extend Ext.Container) for each of these items.
This is definitely a great use case for Sencha Touch. It is great for creating rich applications like this.
Best approach to render the list of items in the Orange and Yellow containers is probably with a DataView.
Relying on itemTpl to draw each item as per the official documentation of the Ext.dataview.DataView component or using an item renderer, as per the dive into dataview article. (Note that the code in that article may not work as sencha as changed a lot between the different beta versions - #rdougan's associated demo on github may be more recent).
I did expand on the layout code contributed by #rdougan to add an example of how to implement the Reusable dataviews (gist).
That demo code also contains a quickly baked solution for data injection (applyStore and injectStore), so to make it possible to define an "OrangeContainer" once and only once and pass down different data for the "highlighted" and "list" versions of the views at the top and bottom of the screen, respectively. I have no idea whether this is a good or reliable way to do it. I would be interested in feedback on this.