I want to apply angular-material in my recent project, but I am afraid that it will be very difficult to find other components which are not available currently. Like treeview, date/time picker, carousel and so on...
How can I deal with these things? any opinions?
I've just tried to use Angular-Material in a site with an existing style, and found a number of issues that I wasn't able to resolve:
- Site UI was feeling very sluggish
- There was a paralax script that became extremely slow and lagged when there was a quick scroll.
- Odd behavior with fonts when it loaded (when I re-sized the screen and back again it was working again) in chrome.
This became a real issue - for the most part it doesn't feel complete. I was really hoping for something like Material-UI, which appears to rely on React.
However, I have come across this https://fezvrasta.github.io/bootstrap-material-design/bootstrap-elements.html which appears to be suitable and works with bootstrap.
There's a really good answer : Using Bootstrap for Angular and Material design for Angular together for some of the issues you will face when using Material with bootstrap.
Also, I tested on a mobile phone and the site was terrible (in performance), you'd never want to get site up with that type of performance.
Also, there's lumx if you want angularjs support (e.g directives etc...). My other issue with lumx and angularjs material is that swapping over libraries is not an easy task. I'm not sure whether this is the norm, and heading this way in the future - but I'm from the Jquery days where my markup remained consistent and I can activate features. However, both lumx and angularjs material require specific tags which means that swapping over libraries requires me to edit my mark-up.
Maybe here is another view of using Angular Material.
I have been using Angular Material as the only web component for my work projects. Angular Material is still in beta version, and like you said, many components such as table, color picker, and sidenav are still missing. If you have to use those components in your projects and not able to implement yours, Angular Material may not be a right choice. Something like Angular-UI or Polymer is probably what you are looking for.
The reason we choose Angular Material at work rather than other nearly complete web component library/collection is because it is being very actively maintained. Currently there are 900+ open issues and lots of pull requests are still going on. For me, a complete version will be more guaranteed. Treeview, date/time/color picker, table these kinds of components are already in the open issues. Here you can search for it.
https://github.com/angular/material/issues
Currently we will find workaround or overwrite the material to solve problems. Or we will open issues if there is no solution. And again, it is still in beta version, you should decide whether you want to use it in your project. But you can definitely look at their available components to determine if Angular Material is a right choice for you.
https://material.angularjs.org/latest/#/
Related
I jumped into React recently, so I'm very confused about many things. One of them is about how most of people design UI in React.
Before jumping in, I used Bootstrap to design UI of my website by using pre-made components such as buttons, modal views, navigations, and so on. But, figured out I can't use it anymore in React, but I can use React-Bootstrap instead. Is React-Bootstrap still the most popular UI framework in React as well? I'm asking that because I found some other UI frameworks such as Semantic UI or Material UI for React.
Also, I found styled-components. However, styled-components makes me feel like I need to make every component by myself to use which sounds like taking too long time.
As a very beginner, I'm curious about how people usually work on UI in React?
Firstly, There is no clear answer for the problem. In general purpose of styled-components not mean don't use another ui framework. And the companies solve the problems which is spesific with their Engineering Team. They have their own architecture though. But the alone programmers are choose some open source solutions.
Well, Some people use together or alone. It's totally about your project or your style of architecture. But still i would say some stuffs for giving point of view.
In the other hand; the UI Frameworks are solve modular problems. An example: You cannot create a modal with only css even styled-components. you know, you need JavaScript for that.
To use both:
You can use on Elements Semantic-UI(ReactJS or direct element with the className),
You can use styled-components instead of css file for spesific part of your project. As e.g: Main, Aside, Article, Post, TopNavigation etc.
If you prefer to use the styled-components, also you can use same components in React Native. (There is no css file support for React Native. You'll need inline CSS)
To use only div instead of the spesific component, you'll confused after project being bigger. I would recommended you to create for each meaningful Element.
You can combine the open source community UI parts with your own CSS.
You won't need a CSS(Less, Sass) file when you use styled-components. That's mean, you'll work only on your JS files instead CSS files, so you can do dynamic things in your components. styled-components supports almost all CSS features.
To use standalone Semantic-UI:
I prefer Semantic-UI-React instead of ReactJS bootstrap frameworks.
You cannot use the CSS of Semantic-UI-React in React Native. You should choose which is another solution or actually make your own your components architecture.
You are ready to go with every project with Semantic-UI-React for web/mobile site.
You have to learn basics of less-lang.
You can change everything from your theme files which variables.
Lastly,
If you have big project or goal though; nevertheless, i think you should use a UI Framework in learning and adaptive process.
If you are still not sure what you should do you then, you have to try all of them to find your own architecture.
I think in learning process, you have to concern about ReactJS needs(Redux, Router etc.) before CSS.
It's my first answer at Stackoverflow. Hopefully, the answer will help you for your concern.
I have a web app that is built aimed primarily at iPads on full screen mode. I've got to implement a select-able grid/matrix that has two levels of selections - one main item selection and one sub item selection. It looks something like this from our design:
First picture has main item selection, and
The application is built on AngularJS, and Bootstrap3. Right now we have implemented a working version of the grid using a custom jQuery plugin we authored and now are wondering why we ever did it. The code is buggy and constantly throws up new bugs. We are looking for an alternative form of implementation, hopefully a pure AngularJS one.
The criteria we're looking for are:
1. Responsiveness across devices - iPad/desktop
2. Stable DOM structure compatible with filtering (search bar at the top needs to work - not shown in figures).
3. Quick rendering from dynamically changing AJAX data.
4. Touch friendly
What are the best methods/ng-modules to implement something like this? We are on the verge of deciding to write a custom module, but don't wanna reinvent the wheel!
We did see ng-grid, but it still seems to be in Beta. We need a stable module.
SmartTable seems to be the most decent option as of now.
TIA!
Have you Tried Angular Material Gridlist I think it must something more clean. I frequently use it rather than bootstrap. Hope it helps
Take a look at Angular Grid. I know it works on iPad, the scrolling uses touch gestures. It performs very well in comparison to other AngularJS grids. I've used it with large grids on iPads and Androids.
Go for Ionic Framework in conjuction with angular-material.
Both have you covered in terms of UI elements and grid needs, and are very reliable. Both are very active frameworks.
They both reached v1 very recently.
You should seriously consider the time you're going to gain, even if at first you have to drop Bootstrap. I was anxious as well to drop ui-bootstrap, but really, you won't regret it (and you'll be wondering why you didn't do it before).
Docs are impeccable, Codepens and Plunkrs are all over the place, Blog posts abound...
Learning curve is... well... judge for yourself.
I have been looking for a component set for a start-up project which would be based on AngularJS.
After some research, I have found three common component sets which can be applicable.
The first is AngularJS Bootstrap UI. It seems clear, but there are no enough examples and documentation.
The second is angular-strap. I have seen that it is a simple implementation of bootstrap.js with some additional features, but it seem very simple.
And the last one is QuantumUI. I have seen that it is amazing, but it seems very new.
What is the experience with these frameworks? Can you list pros cons for them?
I am owner of QuantumUI and is is not truth to say anything about other's projects.
However I can say that in short;
ui-bootstrap: is pure angular based, but it is old and not compatiable with new angular versions. Also it's plugins are very simple.
Also angular-strap is a implementation of bootstrap.js. Namely, it isn't a project of angular thinking.
However QuantumUI is a compact angular solution. It's components are powerful, server and developer friendly and also there is no Jquery dependency. All components are results of angular thinking.
I want to create a popup using angularjs in Extjs Page.This is my current situation.I have manually bootstrapped angular link when they click.now the issue is ext-all.css and bootstrap.css files are conflicting.So How can i avoid this conflict.Can any one suggest idea?any conflict arise in js file if its in same page? Lot of thanks in advance
AngularJS + ExtJS - another question in stackoverflow read this before considering to combine both.
I have tried doing it for my websites for curiosity's sake but it creates more problems then it solves. I would strongly recommend sticking to one framework.
You can combine Jquery and ExtJS without problems because they do not have any conflicting elements.
Your conflict probably arises from the same naming and calling that might or might not exist within the libraries of these two frameworks. The way I see to fix it would be to go within a library and start solving the conflicts. That will be very tedious to say the least.
I wouldn't really mix these frameworks together in a single project. ExtJs is a fully fledged component based framework which should provide most, if not all the functionality that you need. If you are missing something then you should look at the Sencha forums section on user plugins and extensions or even build it yourself.
ExtJs provides most, if not all of the functionality of AngularJs already but adds visual components such as grids, forms, windows, treepanels etc. If your using Ext already for your project you should really stick by it. Adding another framework adds complexity and additional libraries to download, increasing load times etc.
I'm really enjoying learning to use AngularJS. Now I'm looking for components I can use with it. I've been looking at Angular-UI components but I'd like to know if it's possible to use the nice, supercharged components in ExtJS. Does anyone have experience with this? Any hints or tips or Angular directive libraries?
The company I work for is making a similar move. We currently rely heavily on an older version (3.x) of ExtJS, and the effort to upgrade to the current (5.0) version is at least equal to the effort required to move to angular.
To answer the question (to the best of my limited knowledge):
They can exist together in the same JS application.
Can you use UI elements of ExtJs with Angular?
You can put angular in control of markup via HTML templates in Ext.
Is this a wise idea?
Probably not.
Why would I consider doing this?
I need absolute control over the markup and don't care about possible page load issues
I need to serialize or de-serialize in some special way that Ext doesn't innately provide
I need to do something special like pub/sub (still totally possible with Ext)
In our case, it is a proof of concept for a few modals. If I am biased, I am biased in the direction of ExtJs (which is a huge statement given my background). The more exposure I have to ExtJS, the more I personally like it. I've used several frameworks in the past like Ember, Backbone, KnockoutJs and AngularJs and they are excellent tools that are reaching a level of maturity that makes them excellent choices. That said, they don't follow the same development model/pattern that ExtJs does, and I don't think a direct compare is fair to either side.
It would be almost like comparing Ext to Node (silly, I know).
If your project requires some special functionality that you don't believe is possible in Ext, you are probably like me and have limited experience with it. If you have a lot of experience with Ext, and want to try what we are trying, I say go for it. The single downfall of Ext is the size of the built package that is delivered. Another small framework isn't going to help that, but it also isn't going to cause more pain.
In the end, for me, I just love JS and expanding my knowledge of how things work now and in the future.
For the post above asking about the lack of traction for Ext: the answer is simple... it's not free, and thus not an option for many of us who aren't writing commercial software that fits well with the license.
In our AngularJS app at work, we have integrated a 3rd party ExtJS app with it, not for its UI components though. We open certain popups of that app based on user input and when the user commits data in the popup, we respond to ExtJs events to refresh our app. AngularJS is flexible enough to integrate with any other Javascript code/libraries as long as the library has public events to respond to. I would recommend going through the Directive and scope documentation on how to effectively create directives and respond to scope events.
Personally I do not feel ExtJS and AngularJS would be needed together, unless you are forced to use it like me. There is http://angular-ui.github.io/ that brings in a lot to the table. Again any given JQuery plugin can be integrated using directives, filters etc in AngularJS. So you may want to investigate into that before trying to bother with ExtJS.
Why do you need AngularJS anyway if you have ExtJS? I agree learning Ext can be somewhat difficult though once you've bitten through it there is nothing better at the moment. The only disadvantage is the heavier footprint but who cares? It's not like it's causing any problems... We use nothing but ExtJS at work and the progress in our apps is amazing. It integrates seamlessly with Spring MVC. We don't need to hack in HTML directly which I consider more of an advantage than a disadvantage: no more writing tags, no more open/close tag issues, you can still use css and Ext handles any browser incompatibilities so what else do you need more?? Angular is just the new kid on the block but in total it can not (yet) compete with ExtJS. It doesn't even com close. Just my 2$.
Sencha is planning to add support in the framework. Please find the link at the bottom for reference:
At SenchaCon in Las Vegas on November 7-9 2016, Sencha will be introducing the ability to use Ext JS components, layouts, and themes within an Angular 2 application, which we are currently calling the Ext JS Bridge to Angular 2 (also known as ‘The Bridge’).
https://www.sencha.com/blog/first-look-ext-js-bridge-to-angular-2/