25

I'm a new graduate, but I have been doing web development for about six months. When I was finishing university the server side languages (PHP, Java) were more important then client side languages. JavaScript was only used to validate data or use AJAX to beautify the page. The server side validation was of course done anyways.

As I dive into more projects, I can see that JavaScript is used a lot. It's mostly to create visual effects, but an important part is used to convey data (JSON) and make requests (AJAX). In a project I'm following, JavaScript takes up 30%-40% of the codebase!

My question is: "Is JavaScript that important?".

My first impression was not good, but I also realize that it requires skill to write good JavaScript. It seems to be very easy to write, so it's so damn hard to manage and very hard to identify the flow of JavaScript.

P/s: A lot of tricks, tips, library(like JQuery) and tutorials are out there, they are a lot but I don't know the best way to start. So I'm very grateful if someone could give me an advice.

UPDATE: As now i'm on the way with javascript, thanks for all helpful advices. I will try to summarize the answers, so that it can be a good source for anyone with the same problem.

Javascript:

Why it good:

  1. Best User interface
  2. Lots of good framework
  3. Server side javascript (MongoDB & Node.js)
  4. Many success application built from it (Gmail is an example)
  5. Object-oriented able
  6. Good support (HTML5 included)

Important Concept

  1. Closure (event handling)

Best practice

  1. Nothing global. Try to use "namespaces/libraries and classes"
  2. Never function (controversial). I still use function, and it seems not very bad.

Resources

  1. Mozilla Developer Network
  2. Douglas Crockford
  3. W3Schools (starter)
  4. Tizag
  5. Javascript - The definite guide (ebook) (recommended by Douglas Crockford)
  6. Head first Javascript (ebook)
  7. Head first Ajax (ebook)
  8. Head Rush Ajax (ebook)
  9. Object-Oriented JavaScript: Create scalable, reusable high-quality JavaScript applications and libraries by Stoyan Stefanov.
  10. Javascript Koans

Framework

  1. Mootools
  2. Prototype
  3. Dojo
  4. ExtJS
  5. YUI
  6. GWT
  7. Server side: MongoDB & Node.js

Alternative for Javascript (thanks Mike Samuel)

  1. GWT : code.google.com/webtoolkit (java)
  2. coffee script (python)

Again, I want to thank you for all the answers and opinion, as I got great benefit from all of them. Still, due to the fact that I just only can accept one answer, the answer of Renesis, for his mention about closure, which is helpful for me.

Nicole
  • 28,111
  • 12
  • 95
  • 143
Hoàng Long
  • 856
  • 1
  • 12
  • 19
  • Yes, yes it is. Aside from doing the validation-beutification part, it has some features that can take you down new no-javascript paths. See this SO question: http://stackoverflow.com/questions/831967/what-is-a-good-example-for-functional-style-web-programming-using-javascript – Tom Jan 21 '11 at 03:48
  • Not really an answer, so I thought I'll just write it here: Don't forget that JavaScript can and has been used for server-side development. Here are a couple of examples: http://en.wikipedia.org/wiki/Comparison_of_Server-side_JavaScript_solutions – jon2512chua Jan 21 '11 at 04:56

8 Answers8

16

At the moment, JavaScript is essential for a web application or web site unless you are simply going to have static pages. You need to learn it.

I am a big proponent of learning the language itself, but if you must also use it practically and do not already have or need a custom framework, I would use and learn jQuery. It is a great framework in both its design and its functionality.

Make sure to learn how closures work (defined basically: functions as variables) and this will help you understand a lot of how jQuery's underpinnings work.

One important tip, that if not followed, will let code get out of control very quickly: Try not to ever use the global space for anything but namespaces/libraries and classes! (Never functions!)

Nicole
  • 28,111
  • 12
  • 95
  • 143
  • Just curious. Do you often use closures? I can read it, but can't write. Too hard. – Benjamin Jan 21 '11 at 05:43
  • 1
    @Benjamin: Closures are used everywhere and understanding them is vital to professional level JavaScript development. – Josh K Jan 21 '11 at 06:00
  • Unfortunately I disagree with the 'never functions' part, as if you're developing with ASP.NET and you need to have inline variables, then you cannot put them into external files. For example, if you have a user control that can appear 3 times on the same page, you must use say `<%= txtName.ClientID %>` in your javascript function to reference the control. You cannot put this into an external JS. – NibblyPig Jan 21 '11 at 08:42
  • @SLC It doesn't mean that you can't have inline JS. Can't you at least namespace it? – Nicole Jan 21 '11 at 17:04
  • @Benjamin: What @Josh said. Closures are especially useful for event handling and for asynchronous programming. Recently I had to rewrite a test framework in ActionScript and made heavy use of closures so that we could chain asynchronous functions together into one cohesive test case. It looks like: `rpcClient.save(asyncCallback.success(loadAnd(assertUserInfo, expectedUser)), asyncCallback.error(), expectedUser);`. `assertUserInfo` and the return values of `loadAnd`, `success`, and `error` are all `Functions`. – Nicole Jan 21 '11 at 18:24
  • There are non-JavaScript alternatives to static web pages such as GWT : http://code.google.com/webtoolkit/ – Mike Samuel Jan 22 '11 at 19:04
  • @Mike Samuel - do you use GWT? I had a negative experience with it - thoughts [here](http://programmers.stackexchange.com/questions/38441/when-not-to-use-google-web-toolkit/38447#38447) – Nicole Jan 22 '11 at 19:08
  • @Renesis, Some people love it. I've already invested the time to learn JS, so it's not all that compelling for me. The reason I commented was to disagree with "if you want to write dynamic web apps, you must learn JavaScript." For people who haven't learned JavaScript, there are alternatives : GWT for the java crowd, coffeescript for the python crowd. – Mike Samuel Jan 22 '11 at 20:42
  • 4
    closures aren't 'functions as variables' – FinnNk May 16 '11 at 20:32
  • @FinnNk There's a reason why the best teachers aren't pedants. – Nicole May 16 '11 at 20:34
  • 1
    That's not being pedantic - function as a value is not the same concept at all as a closure – FinnNk May 17 '11 at 12:03
  • @SLC, your ASP.net example is bogus. You ought to use a static initializer to add an external js file for managing your *controls* **once**. No reason to repeat the code all over the place. HTML belongs in HTML files, CSS belongs in CSS files, and JS belongs in JS files. – zzzzBov Jun 15 '11 at 04:46
  • @FinnNk is correct - "Functions as variables" and "closures" are two completely separate, unrelated concepts. – Izkata Jan 16 '12 at 03:02
6

Yes

JavaScript is absolutely essential for doing web development.

Client Side & General

I wrote a list of JavaScript best practices not too long ago, though you still have to watch out for some JavaScript "gotcha's" that sneak up. Understanding the basics of functional programming are a very good start. Keep things in local scope, create libraries to contain your objects and functions. Be consistant, use JSLint.

I recommend starting at the Mozilla Developer Network, more specifically the JavaScript section. There is a lot of really excellent information there about how JavaScript works, and common tips and advice.

Server Side JavaScript

Another thing I would highly recommend is taking at JavaScript based tools, specifically MongoDB and node.js. MongoDB is a "NoSQL" database that used SpiderMonkey under the hood to run queries and manipulate data. Node.js is enabled evented low level connections, higher level HTTP connections, and a whole bunch of other goodies for writing server-side JavaScript.

Josh K
  • 23,019
  • 10
  • 65
  • 100
6

Yes

Short answer is yes, because UI matters, and it matters a lot these days, it has always mattered and it will always matter. It is not only about nifty effects anymore, better UIs make you work differently, and that matters to every user.

But wait, there is more.

Front-end applications, not decor

Before underestimating javascript (which most of us do at some point), you should know that javascript is capable of more than one might think at start. If you take a look at what can be done with javascript nowadays (aside from client-side web development) not only you will be surprised, but inspired, take a look:

Javascript is being used more and more as a backend language, just google "node.js".

Don't underestimate javascript

Even with its design flaws, developers have gotten around to build great things with it, as I exemplified earlier. To understand javascript, perhaps there is no one better to listen to than Douglas Crockford. My first serious approach to javascript, thankfully, was through this little talk by him:

"The Javascipt Programming Language" (Part 1, Part 2, Part 3, Part 4)

Personal note: I somehow managed to find that talk just at the right moment, that being already during the development of a project idea I sold and that came to production successfully... when I was a total javascript noob (at the "make the webpage ask your name and display it" level).

jQuery and Mootools

I know I might get tomatoes thrown in the face for this, but don't try jQuery before you try Mootools, why?, jQuery is popular because, in truth, any script kiddie (*dodges tomato*) can do very nifty stuff, and quickly.

The problems come afterwards, in the form of tasty spaghetti code, and that is the one thing that makes me stay away from jQuery: the code does not scale, meaning the more you add to your UI/application, the more spaghetti code you end having.

I'm not saying jQuery is bad, I'm just saying that you can do better code with other frameworks. I always recommend Mootools above any other framework, because it leads to clean object-oriented and well architected modular javascript, and in general you can say it makes javascript a better language. There is even a pure server-side javascript version of the framework of Mootools in the downloads page.

The only thing I want you to take from this is the following: broaden your spectrum before sticking with jQuery.

Some other great frameworks:

*wiping tomatoes off-face*

To understand Mootools' nature a little bit more I recommend you check the following:

Finally, remember that frameworks are only tools, not religions, you can use many at the same time, even jQuery and Mootools at the same exact time (see Object Oriented jQuery With MooTools (Pigs Take Flight)), and as any tool, it is only good if it suits your needs. If you need easy DOM manipulation and quick & dirty and/or readily available nifty scripts jQuery is for you, OTOH, if you are going to rely on javascript for your client-side application and you want a real and clean javascript architecture, Mootools is for you.

Learning it

Some resources I've found useful:

dukeofgaming
  • 13,943
  • 6
  • 50
  • 77
  • 1
    You're first tomato comes from me. MooTools changes how you write JavaScript by manipulating object prototypes. Serious do not do! jQuery is great because it's a seamless addition. You don't have to learn new Object syntax, class structure, and gain a lot in terms of cross browser compatibility, event bindings, and DOM traversing. jQuery is a library, MooTools is a framework. – Josh K Jan 21 '11 at 05:27
  • Yeah, I felt that one coming, lol. It is a common point against Mootools & Prototype: modifying object prototypes, however, once you actually reap the benefits you understand why such language flexibility is taken advantage of; have a look at this question: http://stackoverflow.com/questions/1127423/what-are-your-favorite-mootools-prototype-native-object-prototypes . Modifying native prototypes is dangerous, but not bad. – dukeofgaming Jan 21 '11 at 05:35
  • @dukeofgaming: Anything you can do, I can do better, *simpler* and with *far less conflicts* by rolling my own. MooTools and Prototype are *nice* but they act as insulators to real JavaScript. What happens when you move to server side development? Are using external libraries or code that *depends on the native prototype*? – Josh K Jan 21 '11 at 05:40
  • I built an entire application completely in JavaScript. Apache served static HTML, everything else was either Node.js or raw frontend JavaScript. Using jQuery is a no-brainer. It's simple, lightweight, and all I have to do is use it for selectors and bindings! It doesn't get in the way of anything. **Bonus!** Introducing new developers is easy because they don't have to learn the complex prototype modifications implemented by other frameworks. – Josh K Jan 21 '11 at 05:41
  • Congratulations, have a cookie. Mootools works better for me (and a lot of people) because **I do software architecture for javascript applications, not just no-brainer scripts** (as you said), and I'm sorry you don't understand it. You really are exagerating the **prototypitis** (non-)problem you describe, as it is not a real problem in production practice because most developers that use Mootools know exactly what they are doing. Kudos for the passion. – dukeofgaming Jan 21 '11 at 05:53
  • 1
    @dukeofgaming: I explained that is't not a bunch of "no-brainer" scripts, it's a full on UI that was developed *purely in JavaScript* with help from jQuery for bindings and selectors. If you need something more then you don't fully understand how JavaScript works and your exposure to MooTools will limit you once you step outside that. – Josh K Jan 21 '11 at 06:01
  • @duke: Also please try to reply @Josh otherwise I have to manually check for your response. The point is software architecture for JavaScript based applications can be done without the help (harm?) of a modified prototype object. You just have to understand how JavaScript works, be aware of any edge cases, and plan correctly. Sure it's not as controversial as saying "Hey, I use MooTools" but it's a lot more efficient. – Josh K Jan 21 '11 at 06:05
  • @Josh See "MooTools as a General Purpose Application Framework" http://www.youtube.com/watch?v=6nOVQDMOvvE so you really understand why javascript is not limited to what you say. IMHO, modifying prototypes in javascript and extending the language can be as useful and well-spirited (and perhaps misunderstood) as aspect oriented programming. – dukeofgaming Jan 21 '11 at 06:09
  • 1
    @duke: I'll finish tomorrow, but a major point is he says *"JavaScript doesn't have classes, and this is bad for a lot of developers."* JavaScript is a functional prototype language, it's not designed to have classes like an imperative programming language would. Like I said, understand the core without the wrapping paper and you will be better off. – Josh K Jan 21 '11 at 06:14
  • 1
    @Josh There is a lot of (moot) debate about wether javascript is object oriented or not. See Douglas Crockford's word on this: http://www.crockford.com/javascript/javascript.html. Javascript is prototyped **and** object oriented, just not in the classical or perhaps "complete way", this is what Mootools provides; prototypal inheritance is beautiful, add the **"classy"** model on top of that and you've got a killer tool. – dukeofgaming Jan 21 '11 at 06:20
  • 1
    @Josh @duke This is an interesting discussion (wish we had somewhere to go into more detail). I agree with duke that JS is *prototype* OO (see http://en.wikipedia.org/wiki/Prototype-based_programming). Prototype-based is opposed to class-based. Interestingly Wiki refers to JS as imperative *and* functional. Regardless, I do agree with Josh that extending native prototypes is bad (http://perfectionkills.com/whats-wrong-with-extending-the-dom/). Aside from those issues it's just confusing. Wrappers FTW :) – Nicole Jan 21 '11 at 18:19
  • Rephrasing myself: js is prototype oriented and can be used as object oriented. However, there is no class inheritance, but prototypal inheritance. – dukeofgaming Jan 21 '11 at 18:47
  • @dukeofgaming I meant, there is no question: it is object-oriented. You are right, it is prototype-based, not class-based. – Nicole Jan 21 '11 at 19:01
  • @Renesis: Correct, it's an object oriented, prototyped based, functional language. Really the best of a few worlds. If you don't really understand it you will find yourself hoping to find classical inheritance and trip up. – Josh K Jan 21 '11 at 19:33
2

JavaScript is an interpreted programming language that is mostly used to turn static web pages into dynamic and interactive pages after a web browser has finished downloading a web page. Generally, web pages should use JavaScript to enhance the user's experience, rather than depend on it. And, it's embedded in HTML pages to interact with DOM objects. Gmail uses JS as much of its interface logic in implemented in JS. And, according to Douglas Crockford (currently a senior JavaScript architect at Yahoo!), JS is World's Most Misunderstood Programming Language.

There are some other application where JS is used other than web application like Microsoft's Gadgets, Yahoo! Widgets, Google Desktop Gadgets, etc.

For learning it, I prefer Head First JavaScript. And, There is Head First Ajax and Head Rush Ajax, these are pretty enough for beginners. Have a look on them.

Abimaran Kugathasan
  • 1,083
  • 2
  • 13
  • 23
2

If you're talking about web applications, instead of web sites, the long-term trend is to write the entire UI in JavaScript, or to write none of it in JavaScript.

The reason for this is that people have figured out that separating UI state across the client and server is awkward. As a result, there are a lot of solutions that try to bring the UI code fully onto the client or fully onto the server. If it's on the server, you end up with frameworks like ASP.NET, and you don't write much javascript code. If it's on the client, you end up with frameworks like ExtJS and Dojo, and you end up treating the server as a data store (with validation for security).

If you favor a client-centric approach, like I do, then you'll have to really learn JavaScript. Read Douglas Crockford's book, learn one of the big JS component frameworks (ExtJS is my favorite). If you favor a server-centric approach, don't bother with JavaScript. Either approach will let you build top-class web apps, but the required skillset is very different.

What I can tell you is that if you use it right, JavaScript is as clean as any other language. Many people write JavaScript as if it's PHP, throwing everything on top of a big global pile of mud. If you want to see what JavaScript can do when used correctly, look at the ExtJS examples.

Joeri Sebrechts
  • 12,922
  • 3
  • 29
  • 39
1

Object-Oriented JavaScript: Create scalable, reusable high-quality JavaScript applications and libraries by Stoyan Stefanov.

Don't be mislead by the name, it does not assume any previous knowledge of JavaScript. It is a beginner in depth book about JavaScript (not programming beginner). I think it would be a lot more famous if not for the title.

I was facing the same choice recently and after trying a number of recommended books, I ended up reading and loving this one. The other books either assumed too much JavaScript knowledge of read like a dictionary. This one has a lot more interesting examples/problems and introduces interesting subtleties of the language explicitly to save you frustration.

zhenka
  • 1,688
  • 10
  • 22
1

You might find the Javascript Koans a fun way to learn a bit about the (good bits) of the Javascript language.

I'd love some additional koan contributions; just fork & send a pull request.

David Laing
  • 111
  • 2
0

Just for fun check this link for an explanation of this bit of Javascript code

($=[$=[]][(__=!$+$)[_=-~-~-~$]+({}+$)[_/_]+($$=($_=!''+$)[_/_]+$_[+$])])()[__[_/_]+__[_+~$]+$_[_]+$$](_/_)

As mentioned in the other answers don't underestimate JavaScript, the language is remarkably powerful and because it allows the above kinds of obfuscation it does require that you take the time to get to know it. Sooner or later you may have to decipher something similar that another "clever" programmer left in some code that you have to maintain.

kloucks
  • 209
  • 1
  • 4
  • 1
    -1. Reading a string of javascript operators on reddit and thinking it's neat isn't valid answer to this question. – Incognito Jan 22 '11 at 20:02
  • @user1525 the question was "Is JavaScript that important?" and serendipitously reddit had a blindingly good example just why JavaScript is important and clearly you didn't even read past the 1st line of my post or you would see that I did answer his question. – kloucks Jan 22 '11 at 20:14
  • 2
    +1 for showing me the "annoying part" of javascript, specially, security part. But I don't want to see this in my project, for sure :| – Hoàng Long Jan 24 '11 at 04:53
  • 1
    I'm really sorry that you believe showing an example of obfuscation in JavaScript answers "importance of javascript and the best way to learn it?" – Incognito Feb 01 '11 at 19:09