Need advice about which tool to choose?Ask the StackShare community!
jQuery vs React: What are the differences?
React is a JavaScript library for building user interfaces using a component-based approach. jQuery, on the other hand, is a fast and concise JavaScript library that simplifies DOM manipulation and provides cross-browser compatibility. Here are the key differences between React and jQuery:
Approach to DOM Manipulation: jQuery focuses on direct manipulation using functions and methods, while React takes a declarative approach with a virtual DOM and component-based architecture. React efficiently updates the DOM based on state changes, while jQuery provides a broader set of functions for various DOM manipulation tasks.
Component-based Development: React is a component-based library, while jQuery is not inherently component-oriented. React encourages reusable and self-contained components, facilitating the management of complex UI structures with reusability, modularity, and separation of concerns. On the other hand, jQuery focuses on providing utility functions for working with the DOM but does not enforce a specific component-based architecture.
Virtual DOM and Performance: When state changes occur in a React application, React creates a virtual representation of the updated UI in memory. It then efficiently updates only the necessary parts of the actual DOM to reflect the changes. This results in better performance compared to directly manipulating the entire DOM, as done in jQuery.
Learning Curve and Complexity: jQuery has a lower learning curve compared to React. Its API is straightforward and intuitive. jQuery's focus on direct DOM manipulation allows developers to quickly start working with HTML elements and perform common tasks. React, on the other hand, has a steeper learning curve due to its component-based architecture, JSX syntax, and the concepts of virtual DOM and state management.
Ecosystem and Community: React has a large and vibrant community, which has resulted in a rich ecosystem of libraries, tools, and community-driven resources. jQuery also has a significant community and ecosystem, but it may not be as extensive or focused on modern application development as React.
In summary, React is a component-based library that uses a virtual DOM for efficient UI updates, while jQuery focuses on direct DOM manipulation. React is well-suited for building complex and dynamic UIs, while jQuery's simplicity and utility functions make it useful for smaller projects or specific DOM manipulation needs.
I love Node.js and MongoDB (A database that goes well with Node). I will use it for embedded systems and backends for web apps. I have questions for frontend JS:
Which front end JavaScript framework is good for web apps
Which front end JS framework is good for PWAs(progressive web apps)
Backstory: I experimented with Javascript. Built lots of things with it. I want to organize my Javascript toolset by seeing which tool is useful when(e.g. use Angular for enterprise, use Vanilla for fun, etc.)
I have a view that Angular js changed its design patterns too frequently and messed up while trying to be too obsessive. Vue 3 is simple powerful, high performance and brings the composition API that also brings overall simplicity. It can be done using pure JavaScript and in my view that's a plus point in development, if you are experienced developer and avoid type mistakes etc..
Most other frontend frameworks support Vue. For e.g. Ionic..
The server side rendering can bring magic of SEO friendly sites while being single page application.
I've been using AngularJS and Vue.js extensively and can recommend AngularJS in a more enterprise environment and Vue.js for personal projects. AngularJS has, in my humble opinion, a lot of boilerplate code, which is useful keeping things organised in a team setup. Vue.js has a more minimalistic approach.
Defenetly don't use AngularJs. It ended on Dec 2021!! between React and Vue, well Vue is much easier to learn an use. But I prefer react. React has a bigger community and alot of jobs. If you are new to JavaScript, and have time, I'd say start with Vue.
I would recommend trying out all three products on a test case involving a database or a dummy rest interface, to get some first hand experience with the technologies and the differences between them. You’ll find my step by step instructions here: https://starters.toreingolf.net
Hi. I’m a lead developer in charge of designing the build for version 2.0 of our startup SaaS website which is currently a traditional Drupal 7 site. I’m just looking for some peer advice that I am headed down an ok path now the product has grown & changed. tl;dr; 1) Is building a decoupled/headless Drupal 10 site with a JavaScript framework a dumb idea? 2) Should I look to a different headless CMS? 3) React or Vue.js or (other) in 2022?
Our requirements for our new site include
- White labeling / multisite spawning (will need separate databases for each)
- Complex permissions and several user roles
- Robust security
- Mobile app capability for iOS (for now - Android in the future)
- Multilingual capability
- Easy user management/creation by non-devs
- Reporting capabilities
- Some basic “marketing” pages (but this could be separate from the web app I suppose)
- A large amount of hosted video/image assets on AWS or similar
- Weekly/daily CRON jobs to send out emails & reports
Being that I am experienced in Drupal & PHP, my thought was to build a headless site with a Vue.js or React as the front end in Drupal 10. I've only got minimal experience in either JS framework so I'm not sure which I should choose to skill up. Does this seem reasonable or am I barking up the wrong tree?
You can use: - craftcms for headless or not (paid version) - contentful cms - prismic - storyblok
I know this is a fairly common question, but I feel like this stuff is pretty dynamic, and things fall in/out of fashion over time.
So here it is: I am an aspiring front-end web developer (eventually full stack, but focused on front-end for the time being). I feel pretty comfortable with HTML5, CSS/Sass, and I know enough JavaScript to get by.
I am an adult student doing the self-teaching route, and while my grasp on vanilla JS isn't stellar, I feel like it would be a good idea to start incorporating a framework into my learning. I just have no idea which to choose. To be honest, Svelte looks the best to me, BUT I am looking to be marketable in the future, so it's probably best to start with a more popular framework.
React seems to be the obvious answer popularity-wise, but I want to hear updated opinions from people in the field. While I haven't completely defined my focus, I like creating UI's and really have fun with CSS/Sass.
Thanks in advance, and I hope you're all having a great and safe weekend.
I am glad you like Svelte! and I am glad you didn't listed Angular.
I would go with my point of view, if you're considerably new to javascript, I would consider to focus on sharpening those skills. You will need them in order to build anything with those 3 options. You may be surprised how important is to get into the market, so, I would recommend 2 options: * Vue.js has a lot of acceptance nowadays, it's robust enough and ecosystem grows and thrives. Also I consider by my own experience the simplest to learn. Nonetheless, in my experience I don't see vue thriving as much as react. * React.js is the most popular, the one that would probably teach you best javascript and probably for. new learners the least simple to learn. However, once you get it, you would never look back and wonder why you took the decision. React.js is not going anywhere, it would be the option to choose for quite long time. Has wide market acceptance and ecosystem is fantastic.
You could always learn them at the same time tho! It's really up to you! Have fun
While it's hard to recommend any framework/library, I'd recommend you start with something that is relatively popular and has a little more maturity. I recommend react because it is arguably the most popular out of the three, so you'll easily find support, and most importantly, a job with this. Vue is a good second option, and also great to learn. To my knowledge, it was actually created by some of the original devs of React. Not sure if that's actually true or not. On to Svelte. This one is actually really great, and I love the approach they took with doing all of the "dirty work" at compile-time. The problem is that it's relatively new, not as mature, and while you're never guaranteed to find a job with any language/framework, your chances are considerably less.
All of this being said, while I do recommend what to start with, just to get yourself into the industry. My personal recommendation for your future career, and just for fun, is to learn them all.
Start by looking at the jobs in the area where you want to live, if you can look at history to see if there is significant growth in one of the frameworks you are considering. If there is no significant change over time pick the one with the most jobs or pick the one with the most jobs at the companies you are interested in joining.
Then learn the one that has the most upside based on your employment research.
If it is purely to learn, pick one and move through all three at a rudimentary level, then pick one to deep dive.
I had some experience with jquery before angularjs (v1) then react and then vue. I like vue is simple to start, like jquery. You could activate a button or a form without unnecesary complexity. For more complexity, vue scales very good as you require. With more experience you could make apps like with react. May be react is like a good car, more expensive to start and drive. Vue could be like a car too, but also like a motorcycle, or a bike. You can use it without transpiling or packing, for easy flow in prototyping ideas, or with webpack, for production versions, as you require.
Although React is the most popular and well rounded library out there, I suggest starting with Svelte. My reasoning for this is the fact that Svelte has a very easy learning curve, since this framework encourages one style of writing components, CSS, state management e.t.c. Whereas React provides flexibility in that manner. I suggest you to learn the basics using Svelte, once you’ve figured out all aspects of writing apps with this framework, move on to React + TypeScript. It will bring joy to your learning process and you will start building apps immediately.
I use jQuery at the moment because I use it for a lot of years already, but now Bootstrap 5 decided to switch to JavaScript, I am thinking of switching to an alternative.
I use jQuery only for the DOM integration, animations and ajax calls because JavaScript calls to a class looks such a long call. I like the way of jQuery with $(document).on('click','.something',function() {});
By the way, I like to keep using HTML, PHP and Bootstrap as I do now.
Hi Adan,
Javascript has changed quite a bit in the recent years and lot of it was inspired from jquery. Now almost all modern browsers support javascript syntax everything that jquery does with few elaborate / sometimes better alternatives. So, if you like to switch, find the equivalents of what portions of jquery you use and replace those parts. Btw, jquery is still nicer sometimes with its method chaining and a lot simpler syntax - the equivalent in js may not be that sugary syntactically.
I was like you two years ago, used to jquery and didn't want to switch, but if you're willing to use js frameworks in your projects(React, Vuejs...), I advise you to switch asap, and get used to normal javascript, because in the end, it's the core language, but there are some new ways in it (especially in ES6) that will make your life easier, like you can replace the document.querySelector()
with $()
and document.querySelectorAll()
with $$()
, using this line of code:
const $ = e => document.querySelector(e), $$ = e => document.querySelectorAll(e);
then you can select a p element just by writing: $('p')
, and multiple p elements like that: $$('p')
.
I hope my advice helped you in any way.
What is the best MVC stack to build mobile-friendly, light-weight, and fast single-page application with Spring Boot as back-end (Java)? Is Bootstrap still required to front-end layer these days?
The idea is to host on-premise initially with the potential to move to the cloud. Which combo would have minimal developer ramp-up time and low long-term maintenance costs (BAU support)?
React might be a good option if you're considering a mobile app for the future, because of react native. Although, Vue.js has the easiest learning curve and offers a better developer ramp-up time. Vue.js is great to build SPAs, very clean and organized and you won't have a lot of long-term maintenance problems (like AngularJS, for example). Bootstrap can still be used, but with flexbox there's no need anymore.
I recommend React because of less memory occupant compare to Angular, but this will depend on your organisation flexibility. When you use React you need to import different libraries as per your need. On the other side angular is a complete framework.
Performance-wise I vote for react js as it loads up quickly and lighter on the mobile. You can make good PWA with SSR as well.
If you are new to all three react will be a good choice considering, react-native will be useful if you want to build cross platform mobile application today or tomorrow. If you are talking about bootstrap styling framework than it's a choice you can style ur components by ur self or use bootstrap 4.0 framework. The complete stack mentioned above is platform agnostic u can run it anywhere you want be it cloud or on-premise.
Simple datepickers are cumbersome. For such a simple data input, I feel like it takes far too much effort. Ideally, the native input[type="date"]
would just work like it does on FF and Chrome, but Safari and Edge don't handle it properly. So I'm left either having a diverging experience based on the browser or I need to choose a library to implement a datepicker since users aren't good at inputing formatted strings.
For React alone there are tons of examples to use https://reactjsexample.com/tag/date/. And then of course there's the bootstrap datepicker (https://bootstrap-datepicker.readthedocs.io/en/latest/), jQueryUI calendar picker, https://github.com/flatpickr/flatpickr, and many more.
How do you recommend going about handling date and time inputs? And then there's always moment.js, but I've observed some users getting stuck when presented with a blank text field. I'm curious to hear what's worked well for people...
In my view, the upside of React is you're likely to find more existing, robust design systems (e.g. sets of components containing anything from buttons to datepickers) in the React ecosystem than Vue. UI frameworks aside, momentjs comes in when you want operate on the date(times) you get back from whatever datepicker you choose (e.g. date formatting, date match).
I find using Vue.js to be easier (more concise / less boilerplate) and more intuitive than writing React. However, there are a lot more readily available React components that I can just plug into my projects. I'm debating whether to use Vue.js or React for an upcoming project that I'm going to use to help teach a friend how to build an interactive frontend. Which would you recommend I use?
I've used both Vue.js and React and I would stick with React. I know that Vue.js seems easier to write and its much faster to pick up however as you mentioned above React has way more ready made components you can just plugin, and the community for React is very big.
It might be a bit more of a steep learning curve for your friend to learn React over Vue.js but I think in the long run its the better option.
I chose to use Vue.js a few years ago mainly for the easy learning curve. I have no experience with React, so I won't make any comparison here. Regarding available components, I never felt locked in because of Vue when looking for components. It happens that a component I wish to use is not available as a Vue component (and nobody published any Vue wrapper for it), but in such cases I was able to quickly hack a Vue wrapper component. In the end I don't think a decision to choose one framework over another should be made solely because of the number of components available. (And not all components in either framework is maintained, bug free, documented or easy to use)
I would also go with React. The learning curve can be a little more difficult but as soon as you got the concepts it's really easy to create things. As everybody has mentioned the React community is huge and it keeps growing, anything you may need for your project there are super high probabilities that you will find it.
React is great, Vue.js is also great. But I'm personally using React, because React is changing the way I look at how JavaScript should be. This is a really big plus for me. Vue is good, but it's just another alternative. Also, too many big companies are using React, that means you can trust it for big projects.
I'd have to concur that I'd advise React. In addition to the reasons mentioned, the developer pool is significantly larger (and also slightly more expensive) for React. In time, engineering costs will even out as more and more teams adopt it. The community support is fantastic, and the available components significant.
Anything that interacts with the Internet, websites, applications, etc., while it may be more complex to build, will be easier to maintain in the long run. React
offers more flexibility, a much larger support base for knowledge and opinion, and is just as stable asVue
.
To make the best comparison in my opinion, think of React
as the Android OS and Vue
more like iOS. While Vue
may be advantageous in some cases, it is limited by constricting parameters. On the other hand, while React
may be more complex and incorporate more open-source/third-party constructs, it is supported by over 50,000 npm packages and allows for the use of JSX. Which I might add, once learned, becomes second nature to employ and offers more flexibility.
Having developed in both Vue.js and React, I agree with your assessment of Vue. It does feel light and easier to understand and therefore learn. Seeing that Vue has some genetic roots with React, I would say start your friend out on Vue. If they need to learn React later, that should give them a good foundation. If you have a Pluralsight subscription, look for my course on Vue.js and feel free to use the demo project as a starting point.
Both have their pro's and con's; however to agree what has been mentioned here before; Using Vue.js will be easier as it's learning curve isn't steep; plus learning Vue.js will teach you fundamentals which (in a sense) can be applied to React as well. Community support for React is indeed very big, but Vue.js is also still growing. Component wise, I wouldn't worry to much about that, writing your own components is also a good tool for learning a language.
Would start with Vue especially if you want to progress more quickly and don't want/need to spend time learning React just for the sake of it. You can always pick up React later if necessary. I would caution about using "more readily available React components" just because they exist.
It all depends. Vue.js is smaller, and from what I saw (benchmarks) faster. It's also slightly more intuitive and easier to grasp. React is more popular, and the adoption rate is much higher.
Again, it all depends.
If I may, my personal choice would perhaps be either React or Svelte.
We did a comparison between React, Vue and Angular and while found each capable of supporting our needs, we ended up using VueJS because of its ease of use, the ability to use templates, large and growing community and good documentation. After developing on it for a around 4 months we re-evaluated and agreed that we had made the right choice and continue to migrate our products/platform to it.
I would recommend both of them since Vue is a UI library and helps you to design beautiful website while react allows you to handle backend problems like comment management and onspot reloading more efficiently also react includes useState and react is a framework while vue is a library
It is hard to say which is good. I've used both. Vue is easier. But I feel more comfortable with React. That is why I chose React.
VueJS hands down. Which components do you need? Have a look at Vuetify, mature project, plenty of components ready to plug and play. If on the other side you need more customization, have a look at tailwindcss. VueJS is much cleaner and IMO will overtake React soon. It's simply a better React.
Virtual dom and JSX. Vue is just a baby to the race. React has it's mobile platform version as react native . so it would be easy for you and you wont reinvent the wheel again for mobile apps.
As others have stated there are more canned components available for React, but your observation about it's complexity is an important one. There are architectural aspects of Vue.js that lead to cleaner more concise solutions. As React apps get bigger they become a little unwieldy. Depending on your requirements you need to weigh those competing concerns. Our team is using React, but I am beginning to question that choice as time goes on. Another consideration is that Vue.js is becoming more mature as we speak. Also as others join the project, react developers should be productive in Vue.js within days. Just my 2 cents...
This will be weird. I have pretty aggravating ADHD that makes project organization and planning tricky. I was finding myself torn on how to sort my React components and the resources they require in a manner that made sense to me, but it resulted in a lot of projects being re-initialized repeatedly because "it's not quite right".
Vue destroyed that anxiety with its single-file component (SFC) model and composition API. When a single .vue
file can pack its relevant requirements into a script, template, and style tag, I no longer need to consider how dependencies need to be organized. I just write exactly what the component needs into the file, and save it wherever I require it.
As for static assets, Vite helped with this by defaulting root paths to the /public
folder, keeping my imports short and my assets away from my code.
My current portfolio project uses /src
, /src/components
, and /src/modules
for the Vue parts, and /public
contains my logos, images, stylesheets, etc. The level of specificity has helped me compartmentalize my tasks and make the development process feel manageable and digestible, no matter how large it gets.
We are heavy Rails users. As such, whenever possible, we try to use plain javascript, HTML views, and tons of partials.
However, our menu interface required high levels of interactivity, tons of moving parts and a complex state.
There is absolutely no way we could have built what we have without a good UI framework.
I had worked with an old version of Angular and I still get shivers any time I recall that jig. Ultimately we preferred React over Vue, Preact and any other framework for a simple reason: maintenance.
Being backed by a mega corporation like Facebook, we know that problems will be fixed, performances will keep improving and that while best practices will shift, our codebase will ultimately benefit from that change.
As a startup, we need the maximum flexibility and the ability to reach our customers in a more suitable way. So a hybrid application approach is the best because it allows you to develop a cross-platform application in a unique codebase. The choice behind Ionic is Angular, I think that angular is the best framework to develop a complex application that needs a lot of service interaction, its modularity forces you (the developer) to write the code in the correct way, so it can be maintainable and reusable.
I chose to replace React with Preact because the latter is much lighter and faster, than Facebook's library.
Replacing was simple as well - all I had to do is to add a few lines of text to my project, and voila!
The change was not a problem for me at all, and I significantly reduced my blog's bundle size.
Both React's community and component library are far more robust than that of Vue. Not only that, but more companies seem to use React, so it only makes sense to learn it so that one can maximize their opportunity. I also love the way React forces you to think when designing things as it truly is OOP as its finest.
We choose React for our client-side implementation because of React's virtual DOM implementation and component rendering optimization. It can help our app to be more stable and easier to debug. Also, react has strong support from the dev community. There is an enormous amount of reacting libraries we could use, which will speed up our development process.
As a backend dev, it was quite easy to go with vue over react. Important note that Im now talking about Vue2 maybe the are crucial changes in third version, but the second one is super easy to get into without spending too much time learning concepts. And vue-cli is just a breeze to start a project with.
What a debate to wade into - React vs. Vue.js. Prototyping of applications is much, much faster in Vue.js. React, I believe, has a much heavier developer learning experience - so hiring pure Javascript developers allows us to work in a much more framework agnostic way. However, React still has a place within our application stack - it's much more performant out of the box.
Starting a new company in 2020, with a whole new stack, is a really interesting opportunity for me to look back over the last 20 years of my career with web software and make the right decision for my company.
And, I went with the most radical decision– which is to ignore "sexy" / "hype" technologies almost entirely, and go back to a stack that I first used over 15 years ago.
For my purposes, we are building a video streaming platform, where I wanted rapid customer-facing feature development, high testability, simple scaling, and ease of hiring great, experienced talent. To be clear, our web platform is NOT responsible for handling the actual bits and bytes of the video itself, that's an entirely different stack. It simply needs to manage the business rules and the customers experience of the video content.
I reviewed a lot of different technologies, but none of them seemed to fit the bill as well as Rails did! The hype train had long left the station with Rails, and the community is a little more sparse than it was previously. And, to be honest, Ruby was the language that was easiest for developers, but I find that most languages out there have adopted many of it's innovations for ease of use – or at least corrected their own.
Even with all of that, Rails still seems like the best framework for developing web applications that are no more complex than they need to be. And that's key to me, because it's very easy to go use React and Redux and GraphQL and a whole host of AWS Lamba's to power my blog... but you simply don't actually NEED that.
There are two choices I made in our stack that were new for me personally, and very different than what I would have chosen even 5 years ago.
1) Postgres - I decided to switch from MySql to Postgres for this project. I wanted to use UUID's instead of numeric primary keys, and knew I'd have a couple places where better JSON/object support would be key. Mysql remains far more popular, but almost every developer I respect has switched and preferred Postgres with a strong passion. It's not "sexy" but it's considered "better".
2) Stimulus.js - This was definitely the biggest and wildest choice to make. Stimulus is a Javascript framework by my old friend Sam Stephenson (Prototype.js, rbenv, turbolinks) and DHH, and it is a sort of radical declaration that your Javascript in the browser can be both powerful and modern AND simple. It leans heavily on the belief that HTML-is-good and that data-* attributes are good. It focuses on the actions and interactions and not on the rendering aspects. It took me a while to wrap my head around, and I still have to remind myself, that server-side-HTML is how you solve many problems with this stack, and avoid trying to re-render things just in the browser. So far, I'm happy with this choice, but it is definitely a radical departure from the current trends.
Have you ever stuck with the question that which one is the best front-end framework for you?
With continuous web development progress, the trends of the latest front-end technologies are also continuously changing with more and more sophisticated web features. These top front-end frameworks and libraries have made your complex web tasks more flexible and efficient.
Check out top front end frameworks and their features at https://www.nmtechedge.com/2020/09/24/top-4-trending-front-end-frameworks-2020/
Pros of jQuery
- Cross-browser1.3K
- Dom manipulation957
- Power809
- Open source660
- Plugins610
- Easy459
- Popular395
- Feature-rich350
- Html5281
- Light weight227
- Simple93
- Great community84
- CSS3 Compliant79
- Mobile friendly69
- Fast67
- Intuitive43
- Swiss Army knife for webdev42
- Huge Community35
- Easy to learn11
- Clean code4
- Because of Ajax request :)3
- Powerful2
- Nice2
- Just awesome2
- Used everywhere2
- Improves productivity1
- Javascript1
- Easy Setup1
- Open Source, Simple, Easy Setup1
- It Just Works1
- Industry acceptance1
- Allows great manipulation of HTML and CSS1
- Widely Used1
- I love jQuery1
Pros of React
- Components832
- Virtual dom673
- Performance578
- Simplicity508
- Composable442
- Data flow186
- Declarative166
- Isn't an mvc framework128
- Reactive updates120
- Explicit app state115
- JSX50
- Learn once, write everywhere29
- Easy to Use22
- Uni-directional data flow21
- Works great with Flux Architecture17
- Great perfomance11
- Javascript10
- Built by Facebook9
- TypeScript support8
- Server Side Rendering6
- Speed6
- Feels like the 90s5
- Excellent Documentation5
- Props5
- Functional5
- Easy as Lego5
- Closer to standard JavaScript and HTML than others5
- Cross-platform5
- Easy to start5
- Hooks5
- Awesome5
- Scalable5
- Super easy4
- Allows creating single page applications4
- Server side views4
- Sdfsdfsdf4
- Start simple4
- Strong Community4
- Fancy third party tools4
- Scales super well4
- Has arrow functions3
- Beautiful and Neat Component Management3
- Just the View of MVC3
- Simple, easy to reason about and makes you productive3
- Fast evolving3
- SSR3
- Great migration pathway for older systems3
- Rich ecosystem3
- Simple3
- Has functional components3
- Every decision architecture wise makes sense3
- Very gentle learning curve3
- Split your UI into components with one true state2
- Image upload2
- Permissively-licensed2
- Fragments2
- Sharable2
- Recharts2
- HTML-like2
- React hooks1
- Datatables1
Sign up to add or upvote prosMake informed product decisions
Cons of jQuery
- Large size6
- Sometimes inconsistent API5
- Encourages DOM as primary data source5
- Live events is overly complex feature2
Cons of React
- Requires discipline to keep architecture organized41
- No predefined way to structure your app30
- Need to be familiar with lots of third party packages29
- JSX13
- Not enterprise friendly10
- One-way binding only6
- State consistency with backend neglected3
- Bad Documentation3
- Error boundary is needed2
- Paradigms change too fast2