I am new to react and am wondering why everyone is using Ant Design for the front end design over other front-end libraries. Please explain to me why should I go with Ant Design.
Thanks in advance
Ant design have rich components which are easily customizable, since its popular enough it gets a good community support.
But Ant design bundle size is huge due to css .It uses momentjs for datatime related operations so momentjs copies all the localization files so try to configure the webpack as per your needs.
Enterprise-class UI designed for web applications.
A set of high-quality React components out of the box.
Written in TypeScript with predictable static types.
Whole package of design resources and development tools.
Internationalization support for dozens of languages.
Powerful theme customization in every detail.
Most of the International languages supported
Encourage natural user behavior and an object-oriented approach.
Ant Design aims to avoid complicated, messy designs and focuses on ensuring user certainty with consistent appearances.
Related
Good day! I have a question. It is planned to develop a large web project, which will be scaled in the future. I would like to know what is better to choose EmberJS or React? There is experience with EmberJs, but I would like to hear the opinion of experts who have experience with both frameworks. I've heard that react is lighter, but at the same time, you need to include a lot of libraries to add functionality like ember js. Tell me, please. It would be great to see some benchmarks in various conditions. Thanks guys!
I started with React and later moved to Ember. The truth of the matter is that the core problems teams face when developing frontend / single-page-apps are about the same regardless of what tool you're using. Those problems are going to include learning the business, learning the history, struggling with how to not over-use the framework, and instead using "the platform" (using MDN more than framework docs, etc). Generally, it takes way more time to learn a business / existing product than it does to learn a framework.
For some benefits of ember's whole ecosystem, which React does not have:
Ember has a more cohesive ecosystem which makes upgrades much more straight forward.
Ember's goal in frontend is to reduce the meanial differences between apps so that you can focus on features. This includes stuff like state management, routing, etc. For comparison, there are features in Next.JS that landed in the last month or so that Ember has had since the beginning.
Ember's discord is an invaluable tool of helpful people. A bit US-work-week centric at times, but it is the go-to place to get more synchronous help outside of your own team. Link here: https://discord.gg/emberjs (which is found on the community page: https://emberjs.com/community/) -- React also has a discord, but I found it way less welcoming due to the sheer volume of people moving through there.
Conventions is key to any framework in the single-page-app approaching SDK space. Conventions are optional guidance that are happy-path defaults that, once memorized, bring productivity ahead of where it would be without the conventions
Ember is mostly "Just JS". React has this same claim, and maybe that was true back when they were using classes for things, but with everything needing hooks now, and the over-use of useEffect, Folks end up writing more React than they write JS. With Ember, you still write more JS than the framework. Ember has tried very hard to allow you to stick to MDN for for anything but reactivity and routing. State management is even allow "normal JS" (with some conventions due to limitations of JS, itself)
I've heard that react is lighter, but at the same time, you need to include a lot of libraries to add functionality like ember js.
This is true, however, It stops mattering very quickly. Ember is only 100KB (min+gzip) -- React (at a minimum, I think is ~40kb (min+gzip), with no libraries (react + react-dom)), and the size of your underlying framework begins to not matter in comparison to the rest of your app's code very quickly.
Unless you're targeting low-connectivity areas and trying to also get your site to load in < 0.1s, the framework choice w/r/t size also doesn't matter. (I'd say this of Angular, too!).
Fwiw, and maybe this is a bit of a disclaimer, I feel like React is a modern day jQuery (usage in the vernacular is nearly the same as jQuery). Nearly everyone is using it because nearly everyone knows it. It doesn't matter if the tool is good or not, it's everywhere, yet holds no opinions about anything and relies on the broader community tot learn how to use it. You can't build products out of just React.
And kind of more cynical, React is an avenue to very cheap labor for employers to hire straight out of bootcamps.
As an aside, one thing I've noticed about frameworks, is that most of the "cool stuff" (that you'd want to use day to day) isn't documented in the framework docs. It's knowledge derived from knowledge of both the framework, and what the web can do on its own.
For example:
handling form submissions without a ton of wireup: https://twitter.com/nullvoxpopuli/status/1502682732178124805
dynamic imports / await importing a component: https://twitter.com/nullvoxpopuli/status/1507715367581462531
testing with MSW:
https://twitter.com/nullvoxpopuli/status/1525509103317041152
https://twitter.com/nullvoxpopuli/status/1525508184353406978
Filtering local data: https://twitter.com/nullvoxpopuli/status/1496512125237440515
Integrating Tailwind: https://twitter.com/nullvoxpopuli/status/1481993894430658568 (the lazy way)
Thinking about template syntax: https://twitter.com/nullvoxpopuli/status/1474037335583080449
I've an architectural question.
I have a component-based Design System library that I share across multiple projects. Everything is developed in ReactJS. One project is a monolyth and another is microfrontend-driven (with SingleSPA). As soon as the projects get big and the UX/UI needings grow up, I'm encountering some difficulties in sharing it across those projects.
An example could be that project A needs some sort of css customization, but that customization completely breaks project B. So I end up fixing that for B but I've got drawbacks for A and so on.
As a general rule I adopted, I want to avoid as much as possible inline styles and css files inside the projects, writing all the style code inside the Design System.
I want to understand if my approach is fine or I'm taking the wrong path.
Thinking about "famous" design systems (AntD, Material, Bootstrap, ...) they are all abstract and it's the final application that relies on them, while I'm trying to develop on the D.S. what I need on the final projects.
Is there a way to improve my technique?
Recently I was going through React and Angular Comparison online (latest versions) & found both are good fit for Web Application UI.
While I was also wondering, there must be some differences which must be focused while deciding between two of them.
Lets suppose, I have one Java based web application with Spring MVC framework , Hibernate & JSF/JSP. Assuming this application is doing massive backend operations & displaying data on UI.
If in todays date, if I want to rebuild this type of application with latest Technology then how I should go for decision making out of React /Angular/other UI framework. For backend may be I will prefer to use Spring Boot which is advanced version of Spring MVC, but its really difficult to make choice on UI side.
Few points which I came across after googling are-
React is best when real time data update is required frequently.
React requires lot of Java script skills so it takes time develop web apps.
Now a days React is most preferred JS library which has more flexibility & big MNC's are also migrating from Angular to React.
While Angular has speedy development & also trying to improve on lacking points per release like Bundle Size, Performance etc.
Angular is preferred when web application is stable and not much enhancement are required.
Do we have some guidelines on when to use React / Angular?
Most of the time, both frameworks do the trick. Chose the framework that matches your team. If you like opinionated frameworks - i.e. frameworks that guide you - chose Angular. If you need a lot of freedom or if you don't like TypScript, chose React.
Small Angular applications have a surprisingly large memory footprint. So I'd prefer React for small things like Wordpress plugins. However, if you're writing a large application, memory and AFAIK even performance are in the same league.
Angular assumes it's owning the entire HTML page. So it's a bit difficult to embed Angular in an existing page, or to write microfrontends with Angular. But that's possible, too: just convert your Angular app into a webcomponent.
In any case, both frameworks are mature and have a huge community. The market share of React is larger, but if you're looking at the absolute download figures, both frameworks are popular and even growing. So #James is right, it's largely opinion based.
You gave some clues by mentioning the old application. If your team has a strong Java background, they'll probably prefer Angular. Modern React encourages to abandon object-oriented programming in favor of functional programming. That's pretty cool, but if you're a long-term JSF programmer (like 10+ years), you're already busy learning HTML, CSS, and TypeScript. Maybe it's a bit much to add a new programming paradigm to the stack of stuff to learn. But again - every team is different. Let your team decide!
I'm a new developer with about six months of experience in the backend side, some months ago I started a company with a business partner, we are developing a business intelligence solution, since then we was working at the back-end part, I have started at the front-end world about 1 month ago, I did a React course where I learned router, redux saga, hooks and other things as styled-components. Our intention is to recreate the front-end part of the system which current is a MVP did by one freelancer.
As I do not have any experience at the frontend, we are planning to use some React theme, this way we decrease the chance of doing wrong decisions during the development of the pages, as in the architecture side.
I'm searching for a dashboard theme based in React which I can edit to our needs, after talk with some friends with more experience, we decided build the pages using pure CSS together with styled-components because I'm a little familiar with it (at the React course I did some exercises with React and styled-components), also because it is easy to use, easy to future developers maintain, also for faster development, as will not need to create a design pattern from scratch and also some front-end developers told me they develop faster in pure CSS in comparison to use some UI framework. Also a reason to do not use UI frameworks is because our costumers use the solution more from mobile than desktop, then soon we will need to create the an app with React Native and styled-components are compatible with it, and Material UI and Bootstrap frameworks that are the most famous framework are not by compatible with React Native by default according the research I did.
The problem is I'm not finding a dashboard theme without UI framework, all the dashboard themes that I have found are UI frameworks as Material UI and Bootstrap, so I'm asking my self why I can't find dashboard themes using only styled-components, without UI frameworks, maybe because is not common and also is not a good practice create a system not using some UI framework? or it is normal and also is a good practice?
If yes, some suggestion where I can find it? Preferable open source. Other thing which I'm asking my self, why does not have or why is not popular open source themes at GitHub?
Design is ALOT of work
In my opinion it's probably a mistake to not use a design framework especially when you don't have extended knowledge and resources in design & UX. A design framework makes it alot easier to create a consistent, responsive and polished look especially if you are not a design professional / don't have someone exclusively working on design & UX. Design is alot of work especially when designing for mobile, users expect a certain amount of fluidity and animation that is time intensive and hard to get right when you are unexperienced. Talking about user expectations; this is is another reason why using a framework can be handy. If you use a framework that is well known you'll allready know how other apps using this framework are structured and it will be easier to find a structure for you own app. On the other hand users can transfer their knowledge about workflows from other apps that use a similiar style. Your app will be easier to use.
Development Time & Speed
Also I don't understand how not using a framework would save you time rather than cost you time. The only time thats ever going to be true is if you have design ideas so specific that you don't end up using any of the styles provided by the framework or you spend so much time customizing the styles of the framework that you could have done it from scratch aswell. In either of these cases you need a developer that is heavily / purely dedicated to design & UX and it doesn't sound like you would wanna do that.
Theme vs. Framework
Lastly you should ask yourself where you draw the line between framework and "theme", and why you are so eager to distinguish them. What would be the point of finding a "theme" and then manually applying the style to all your components rather than using a framework that allready provides you with components that are styled appropiately?
P.S.: afaik Material-Ui is definetly a thing for React Native and has a pretty big following too.
We are working on a Mind map based webapp as our final year college project. It will be a website where users will be able to create mind maps collaboratively. The user interface will be very similar to what https://bubbl.us/beta/ and hxxp://www.mindmeister.com/ have.
In a nutshell, the users will have access to whiteboard and drawing tools to create mind maps on a whiteboard. The changes made by one user will be visible to other session users. e.g. A session has three users A, B and C. If A changes mind map, it will be visible on whiteboards of B and C.
We were considering Flex, Openlaszlo few days ago but having limited time (about 3 months) for project completion, we binned those. For Flex we will have to learn Actionscript3 and for Openlaszlo there is no IDE support. So both of them won't be good choices.
We have shortlisted Silverlight and Vaadin frameworks as viable choices but we are confused as we don't have any experience with either of them. We need to take these points into consideration while selecting a framework:
Time frame for project - about 3 months, give or take 2-3 weeks
Learning curve for framework - should be easy (Very relative term indeed..In the context, we are familiar with VB6, PHP, Javascript and Core Java)
Necessary graphics related features supported - such as whiteboard, drag-drop widgets, animations(need not be fancy stuff) etc.
Availability of tutorials and good documentation
There are 2 open source mind mapping applications that can be useful for this webapp.
Silverlight - hxxp://silverdraw.codeplex.com/ (a webapp) - More like a POC design.
Java - hxxp://www.xmind.net/ (a desktop app) - Most of the mindmapping features we need are present. If we use Vaadin, we can re-use some code which is a huge plus point.
We are open to other suitable frameworks. Which framework would you choose?
P.S.: Excuse for obscure URLs'. New users are limited to only one hyperlink.
Disclaimer: I'm a member of the Vaadin Team, and do not know Silverlight very well.
I believe both Silverlight and Vaadin would be good candidates for your application, and for both the biggest challenge will be the client-side implementation of the visual mind-map component.
I took a quick look at XMind and it seems to be Swing based, so I'm afraid that the only way to re-use that would be to wrap the mapping component into an applet. You can easily do this with Vaadin, but it will require the Java plugin in the browser.
If you consider implementing the mindmap component without plugins, you have the following options:
Use the Vaadin core components (eg. the Tree, live example here) to visualize the mind map. Vaadin supports drag & drop, so this would be very fast to implement, and you would need to work with only server side Java stuff.
Create a HTML5 component with Vaadin integration for the mind-map. You can do this with the HTML5 canvas, and wrapping it in a Vaadin component is easy, but it'll require that you code the component with GWT. There are several examples on how to manipulate the canvas with Vaadin and GWT.
Create a SVG component with Vaadin integration for the mind-map. As far as I know SVG supports interactive stuff a little better than Canvas, and there are examples on how to interact with SVG using GWT and Vaadin. Note that the support for SVG is lacking especially with the older IE versions.
All of these options are feasible to implement within your timeframe (depending on what extra functionality you want). The first option is by far the easiest to do, but it might not be fancy enough for your requirements.
We have strived to make Vaadin as easy to learn and use as possible, and I daresay that our documentation is very good. In addition we have a very lively community filled with helpful experts. If you need more information on Vaadin just come over to our forums and we'll help you out.
You are kind off answering your own question. Use vaadin it will be a little extra work but then your saving huge amount of time on the mindmap coding.