We have a big project with big amount of front-end code + jQuery.
I would like to have a library to implement into existing project which would let me handle data in a friendly way.
Most annoying thing which happens now is this:
1. grab some data from DOM element. Modify it a bit, filter it.
2. send AJAX with that data.
3. receive AJAX.
4. filter AJAX. Modify it a bit.
5. update DOM with new received modified data.
This can be really automated and I believe there are ways to do so however from my experiments backbone.js, angular.js, ember.js and similar libraries do not work very well in my case as it is too hard to imlement them into existing project. When starting from scratch - they are awesome in my opinion.
I have read about implementing only new parts in them but this seems not to be the case as
I would like to improve existing code.
What I would like - some lightweight module on top of jQuery maybe which would handle these things for me in a more friendly fashion.
Why downvotes?
I am not starting a flamewar, asking for open question or so. I am asking for a tool for a problem. Downvoter - at least give your insight what's wrong with the question.
Related
I'm a beginner in Javascript and web development in general. I'm building a web app that must be highly interactiv, so most of my work is about using Javascript to make this happen.
After having already written a good chunk of code, I feel like it won't be really maintainable and it's already hard to change, because I don't think I organised my code very well.
Essentially, I'm looking to separate the code that does actions on my objects, and the code that displays my objects. I've found that the Widget Factory might be a way to do that, but I can't really understand what it does exactly.
I red lots of documentation on it, but I don't know if it will be of any use for what I want to do.
Can you tell me if it will be useful for me, and if not, what other tools or tutorials I should get my hands on to achieve this ?
Thank you
The widget factory is used to define custom jQuery widgets.
Your questions is very broad and generic to answer, since only you know what kind of objects/models and what kind of interactivity you are expecting to have between clients and the page.
In general you should create widgets when you are implementing a generic solution.
A widget is meant to be something re-usable that handles one particular think/job.
For example if you want a "rate this comment" thingy in your page were users can rate other user's comments, you would create a rate-comment widget and apply it to all your user-comment elements.
I am helping to design a HTML client for a game that I am collaborating with others on.
This client is going to need to have multiple scenes/pages like the login, the lobby, the actual game page, etc.
Normally, I would be just fine with navigating in and out of pages. However, the client needs to have a constant connection with the server via a Websocket, so therefore it cannot navigate away from the page.
Option 1: Put everything in one file
Rather than having each scene in its own separate page, just cram all the HTML together.
Then, when one scene is needed, simply hide all the other scenes.
I do not think that this way is the way to go: from what I know about HTML and web practices, this is not a very smart practice.
Option 2: jQuery's .load()
Using jQuery's handy-dandy .load method, an external HTML file can be easily loaded into the current HTML file.
To me, this seems that this might be the best way. However, I am not very familiar with how this method acts, so I do not know if this will cause bumps in the road ahead.
Option 3: ???
This is where I need help. Unless one of the two above options is the best way, what is the best option for my situation?
Notes
I am not looking for speed here; it's okay if there is some delay between loads.
Not sure about your backend but it seems like you are looking for a single page app solution.
I recommend AngularJS, currently maintained by Google.
Others have mentioned Angular, but I'll just throw out the recommendation of KnockoutJS as well. Knockout has a less steep learning curve than AngularJS, and though it doesn't have as many features as Angular does, the latest version does have better browser support.
Both Knockout and Angular have excellent documentation and tutorials available via their websites.
I would recommend Angular 2. Since you seem like a beginner in front-end (correct me if I am wrong), starting with Angular 2 would be great over 1 because then you can learn this really good JS framework only once. It will help you keep everything organized and will prevent you from making your markup messy.
I tried searching for any questions on StackOverflow that fit this and I believe that I am probably not using the proper language (phrasing the question properly) to pull up those questions. So I apologize if this is a repeat.
I currently am building a site with a high level of DOM changing through JS. Not exactly the best thing to use but works based on my technical skills. I had thought about using AngularJS to build out my project but there is a steep learning curve that is preventing me from making the switch. I did notice that AngularJS has a built in function that generates fake urls based on the data being pulled. Even though the user is not leaving the viewer the url updates to highlight the new information. I was wondering if their was a JS library that could replicate that function until I can pick up AngularJS and rewrite my code in it.
Thank you
Found a few that do what I need. I can't also figure out how to make a comment the accepted answer.
http://millermedeiros.github.io/crossroads.js/
https://github.com/tildeio/router.js/
I have been using JavaScript and jQuery for quite a while now and want to extend my skill set further, during my search I came across two popular names Angular and Backbone and while reading about them I found one line common in both them which somehow also seems to be their USP i.e.
It is designed for developing single-page web applications
This makes my confused.
What is that I cannot do with JS or jQuery and I would require these?
I have created web application on single page, where users can perform CRUD operations on single page through asynchronous calls so why so much importance of for these others libraries?
And as a middle level web developer who has have good hands on JS is it right path to move to these two or here is something else I should look into before these?
Please help?
Structure.
In an ongoing project that started about 4 years ago we built the front end with jQuery. We were able to do just about everything that we needed creating several single page applications that were quite functional.
As the project progressed and the code base grew we started experiencing some major problems with maintainability of the code. We ended up with hundreds or thousands of lines of JavaScript code per page in a tangle that was almost impossible to navigate. This could have been avoided if we were more careful of course but at the time we focused on making sure the back end architecture was robust.
Many years ago the community learned that code needs structure to be maintainable. We developed MVC patterns, multi-tiered applications etc. But JavaScript was never a big player in the field and we largely ignored it.
Over the last 6 months or so we introduced Angular into the project and started sorting out some of the mess in the project. The results are remarkable. Not only is the code simpler and easier to create, the structure makes it easier to implement tests, easier to maintain and generally a huge improvement over what we had before. We still use jQuery but now we have been burnt by the lack of structure and know a thing or two about the architecture of a JavaScript application. Angular and its like provide you with the tools to architect a good application.
When you are creating larger scale web applications it is wise to check out Backbone, Angular or perhaps Meteor. jQuery supports neat tricks, but it does not help you structure your code in a maintainable way. Larger scale web apps build on jQuery need their own vision on how to separate the code into layers with their own responsibility.
The other frameworks give more support.
I would suggest checking out at least one of the libraries. Perhaps you eventually won't use them, but it will benefit how you work in jQuery.
Well Now a days there has been quite a hype about Angular.js and especially SPAs (Single Page Applications). Well to be honest, I had the same question in my mind about a month ago when my team decided to shift from Jquery to Angular.
Whenever it comes to Jquery, one of the first thing that comes in our mind is the DOM manipulation. While using Jquery we always think of manipulating the DOM. Show/hide elements, animating elements, getting data from tags you name it. But Angular offers something more than that. It offers you an architecture, a way to structure your applications at the front end.
So whenever you go for Angular.js, change the way you think about creating web applications (and believe me its worth it). Most of Angular's structure uses the concept of Dependency Injection which is a neat way to maintain your code.
Backbone is only a library whereas Angular.js is a complete framework to create and manage Single Page Applications
Talking about the fact that Angular.js should be used when we are creating large scalable apps, it is true. In my case the team I work with is full of Jquery Ninjas. We have been creating a great app for the last 3 years and believe me it became difficult for us to maintain and debug thousands of lines of Jquery. This is the main reason we have decided to revamp this app into Angular.
Kindly see some of these Helpful links. You will get a better idea.
http://net.tutsplus.com/tutorials/javascript-ajax/3-reasons-to-choose-angularjs-for-your-next-project/
"Thinking in AngularJS" if I have a jQuery background?
For the past six months or so I've been teaching myself Javascript by building a single page application that uses Raphael to create all of the elements the user sees and interacts with (see the landing page for the project for a small-scale example of what the tool will do). As I've been learning more about the language I've been coming across a lot of talk about using something like Backbone to structure the code such that it will be easier to read and maintain. While I'm not in love with the idea of taking what I've written and shoehorning it into an MVP paradigm (which would also require me to learn the paradigm), I am in favor of writing quality code that won't cause me headaches later. However, in the course of doing some google research, I've discovered that backbone doesn't seem to play nicely with SVG elements. True, there are some workarounds posted, but it seems to me that if I have to implement a kludgey work-around in order to get everything to work, the value of implementing Backbone in this case is lost as my code is still wonky, albeit in a different way. (ego compels me to point out that as it stands, the code is reasonably un-spagettified)
Given that I'm relatively new to Javascript, and to serious web programming in general, I'm posting this question here in the hopes of soliciting advice from persons more learned than I in matters such as these. If you were in my position, would you implement Backbone (or some equivalent) or would you proceed without it?
I would suggest you keep doing what you are doing. The website looks good and responsive. Do not change anything as long as you think the code is easily maintainable and readable. When you see heavy loading and spaghetti code, then you might consider about using some JS structure.