I am thinking to use Javascript Framework for my project. But I am confused, should I use a Framework or use simple Javascript. Moreover, one more point I want to make I am not much experienced in Javascript. What would be your suggestions for one who is still at beginner level in Javascript?
I was at beginner level JavaScript when I started working with AngularJS last year. To learn the basics of it is really easy. What's even better is that it helps you do fairly complicated things with very few lines of code. Most of the code you write will be what AngularJS calls directives, which also turn out to be the most reusable pieces.
Some of the advanced concepts can be difficult to understand and will take some time though, but overall, I would say that progressing through AngularJS has given me a better understanding of JavaScript.
This was my experience at least, and this post does not aim to sell AngularJS. In my opinion, learning a programming language is, most of the time at least, better done by digging into the raw features of it on your own. But with JavaScript -- and all its quirks -- I found it very helpful to have something to guide me -- in this case, AngularJS.
When you want to have a large application, with a lot of code and interactions, I've found that frameworks help you a lot. There's a boom of JavaScript frameworks right now, all of which are pretty good. If you want to extend HTML and do declarative programming, there's AngularJS. If you want to work at different levels of abstraction, there's Ember.js. If you want to write most of the implementation yourself, then use Backbone.js. If you're doing a lot of GUI stuff, ExtJS. Most of these frameworks will help you write cleaner, modular and more testable code which greatly improves maintainability in the long run.
The downsides could possibly be:
and, lastly, more like a general rule:
Libraries can be very good. They can help you segment your code, they can help you do a lot of things more easily. I have begun to find backbone particularly helpful for AJAXy web aps. With JQuery, $('#element').hide(); is far easier than document.getElementById('element').style.display = "none";, and JQuery .toggle(); is even better than that. In most cases, they deal with cross browser issues for you very easily as well.
From a design/architecture standpoint, the big disadvantage is the overhead. Once you start using libraries and plug-ins for said libraries, who knows how the code quality is.
From a personal development standpoint, the biggest risk is that you will begin to use libraries as a crutch, and never bother to learn why or how these libraries do what they do. I hate when I see a web page with 15,000 (exageration) <script> blocks in the header, and they leverage perhaps 1/10th of the power of all the plugins and frameworks that they are using. It would be far better to write 5-10 lines of code, than to have an extra HTTP request, and load an entire JS module just to use one function that it contains.
My personal recommendation is to use libraries, but always endeavor to understand what they are doing, and to challenge yourself to write at least part of the JavaScript yourself, until you're at a point where you know what's going on inside JS, and why it's going on. Once you get to that point, you will be much better able to evaluate if a library or plug-in is really what you need, or if you should just write something yourself.