Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I've lately realized that I would like to jump into AngularJS framework. I was developing with jQuery for few years now.
I want to create some application that helps user to modify webpage dom (some sort of browser WYSIWYG editor). It just loads page normally and adds some custom sidebar with tools - like managing css styles, adding new elements, editing curent content. So basically there is only one view added - sidebar. Main part is normal page that has nothing to do with my editor.
I'm in the middle of work and I was doing it with jQuery - but it requires a lot of same, repeating DOM manipulation.
So do you think guys it's good to make it with AngularJS?
I would have features like:
a lot of inputs for various css styles that will modify styles of selected item in real item (last clicked item would be active or something like this)
options like duplicate item, remove item, restore default styles, sort with other items
adding new items ( for now I'm doing it with jQuery UI Dragging and Sorting)
and so on that you can imagine it would need.
My goal is to focus on business logic of this (and there is a lot of this) and leave all those events, checking item propeties, updating them etc to framework.
Also what other frameworks are good for this? jQuery is great for DOM modifications but in this case all of them are very similar to each other.
Thanks.
At first glance, I would say that Angular is not likely to be a good fit for this project. Most of the power of Angular comes from directives, which are generally applied by adding attributes to your markup. Since the main bulk of the markup in the page is out of your control, much of what angular does won't help you modify the underlying page. Angular might help you with your own UI, but most likely jQuery would be more useful for applying the styles to the elements on the original page.
I think angular is great for any client side coding, automatic updating of async data & organization of code in an MVC structure. Just give it a try.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
I'm learning ReactJS, I know that react is about declaring the way something should render, giving it some data and poof, when the data changes, it renders those changes.
But if I want to manipulate the DOM, an example change a color, create a accordion, make animations, add and remove a class, etc.
React can do that? Could I migrate my jQuery projects to Reactjs without any problem?
There are many approaches for that task, a complete list is here in the official Docs. Either use React as a Wrapper on top of your jQuery Application or Translate your jQuery App to a React App.
From the official Docs
React is unaware of changes made to the DOM outside of React. It determines updates based on its own internal representation, and if the same DOM nodes are manipulated by another library, React gets confused and has no way to recover.
This does not mean it is impossible or even necessarily difficult to combine React with other ways of affecting the DOM, you just have to be mindful of what each is doing.
The easiest way to avoid conflicts is to prevent the React component from updating. You can do this by rendering elements that React has no reason to update, like an empty .
Here is a medium article that may help you.
How-my-team-converted-our-website-from-jquery-to-react-in-small-steps
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 3 years ago.
Improve this question
I often heard that it is bad idea to combine react and jquery but I think it is more easier for me to make change on DOM with jQuery
Example:
<a className="toggleLink">Click Here to toggle Menu</li>
<div className="contentToToggle">content to toggle</div>
For jquery, I will write to function extend then I can use again for many cases or I can use click event directly by class. This class will also used again.
jQuery.fn.extend({
toggle: function(element){...}
});
but in react, I feel quite complex, each click on each component, I have to make a state to return for that component only.
Expose that I have 10 click events: First to toggle, second to addClass, third for showing popup...
So it should be bad idea to use React in this case. Is it right?
I want someone here can help me with this situation. Thanks
It is always preferred to not mix React and JQuery and it might make things more complicated.
Both of them have different ideologies. JQuery modifies actual DOM whereas React plays around with Virtual DOM.
Coding things with React may seem little bit heavy and cumbersome initially but it keeps things much more clear and less abstract going forward. Hope this helps !
No no no no no and some more no 😉😂
They are two different approaches to building a web app. Using JQuery means React could no longer be handling state, events and UI rendering. Which can causes conflicts, almost like two builders trying to build the same road at the same time using different materials and approaches.
If you using React you should use React's approach to manipulating and updating the DOM. That being said you don't have to use React if you don't want to. If you're familiar with JQuery build the site the way you know how if that will get it done quicker and React is not a requirement.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 years ago.
Improve this question
My question is the following. Should I avoid using any kind of jQuery code in Angular application as it seems legit to have only one thing interacting with DOM.
Another question is if anyone came across problems where he couldn't find any other solution but writing a quick hack with jQuery.
Thank YOU!
Yes it's a bad practice, but sometimes it will save you much time, especially when you are looking for a plugin,
Do it when necessary only, and keep a note to switch it back when other solutions are available.
The first thing you should do is to read this thread on SO "Thinking in AngularJS" if I have a jQuery background?. This will give you some perspective.
When it comes to Angular, it the model that drives the view and most of the times direct DOM manipulation is not required.
For example if you are using DOM manipulation to show\hide element, add remove class or set style, then better to use ng-show\ng-class\ng-style directive.
But there are cases when DOM manipulation is required and that is the time you write directives and either use jqLite or jQuery to manipulate DOM.
My suggestion would be to avoid jQuery unless you have to incorporate a jquery plugin that is dependent on jQuery.
While developing always look if the inbuilt directives that can serve your purpose. If not can jqLite be used to achieve what is desired. Your final resort should be jQuery.
Well it's just two large resources, which makes your app "heavy". Otherwise it's only a preference thing. Personally I don't use jQuery with any of the reactive frameworks (Vue, React nor Angular).
Remember that anything jQuery can do, you can do with vanilla JS.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
Being a front-end developer working in a team, I have found myself solving a recurring problem many times.
For example, much of our frontend javascript code is written using jQuery and CSS selectors (mostly targeting a CSS "class"). The problem is, is that many times another developer that is fixing some CSS code will remove a class or will change the DOM element nesting it under another element making the JS code break.
To prevent this, my idea was to use/add a "data-js" attribute to each element that we want to use for Javascript. However I am not sure about the performance of a jQuery selector written like this:
$('[data-js="my_js_selector"]').click();
Another idea I had, was to add a js-specific class to a dom element that is somehow manipulated by Javascript:
link
and then calling it simply with $('.js-link').click()
It would be very nice that you could only look into HTML and tell that some element has some Javascript manipulations attached without actually looking into the JS code.
Is this a good idea? Or are there some other best practices to separate JS-triggering from CSS styling?
In Scalable and Modular Architecture for CSS (SMACSS), Jonathan Snook teaches that a "state" class such as the one you proposed with .js-link is the best approach.
The relevant discussion is in the section on State Rules:
Sub-module styles are applied to an element at render time and then
are never changed again. State styles, however, are applied to
elements to indicate a change in state while the page is still running
on the client machine.
For example, clicking on a tab will activate that tab. Therefore, an
is-active or is-tab-active class is appropriate. Clicking on a dialog
close button will hide the dialog. Therefore, an is-hidden class is
appropriate.
This contradicts what two commenters said. CSS code and classes should be flexible; CSS developers should be able to refactor and improve code without worrying about breaking functionality not related to presentation.
The point made by #ArunPJohny supports the state class approach. Engines are unfortunately not optimized to recognize data- attributes any more than they are to recognize arbitrary custom attributes, such as foo-.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I'm sure there are many questions and articles on the subject, I just cant seem to find exactly what I'm looking for...
I have a form where one of the fields excepts a number (1 to 30), I the want to create x elements, where x is the number selected, all elements should have about the same HTML structure, differing only in their id's. the elements are complex, and I think I should format them using HTML/CSS, as I feel that js should only hold the business logic, sort of MVC style.
I suppose my question is two fold:
Is a "philosophical" question: Is it a good idea to try and keep the "view" (format/layout/design) in the HTML/CSS and the "control" (logic) in js? I'm new to web dev, and I'm not sure of web dev architecture philosophy...
Considering I want to keep formatting out of my js, how do I go about dynamically adding/duplicating HTML elements, whilst keeping the HTML in the same file where it belongs. My first thought was to create as many elements as I might need, hidden, and and show the right number of them when needed, but this can't be the best way to do this... My second thought was to use the jquery.clone() function, but this would create duplicate id's.
thanks.
I think you would really benefit from using a client side compositing framework (like KnockoutJs, but there are loads of others like Ember, Angular).
That way you can keep your model (viewmodel in the case of Knockout) in JavaScript and only worry about the implentation of the view in your templated HTML.
Check out the cool knockout tutorials, maybe its what you're looking for
http://learn.knockoutjs.com/
var inputCount = paraeInt$('input').val()),
elementMarkup = $('<div class="dynamic- div"/>');
for(var i; i < inputCount; i++){
$('body').append(elementMarkup);
}