What would be a good mini-project to get intimate with JavaScript, as an advanced 'introduction' to the language? I want to actually code an application in JS, not hook up bits of it to enhance a web application.
A lot of stuff you could learn by doing an RSS reader on a page. Google shows what can be done. The whole lection concentrates on javascript, network access, security restrictions and medium data mangeling.
If you have the ability to do any sort of backend programming than AJAX is really neat to do. You can get a lot of good effects with less efforts. A good thing to build on up.
I would argue that if you're really an advanced programmer then the exercises above would not really give you any insight into the language as they are just variations on things you probably have already done. Javascript's strongest suit is it's LISP style ability to grow. Write something AI(ish) that creates new functions. Most people don't utilize the language in this way, but, its ability to augment its own classes on the fly is, I would argue, it's most unusual and most powerful feature.
Although not a project, watch the Douglas Crockford videos at YUI theater.
The biggest web based Javascript projects are going to deal with the DOM. Do some nifty stuff with JQuery. Make a table with rows that highlight when you hover. Make them update themselves through AJAX and JSON when you click on them.
If you're really looking for something magical and usefull write a scrollable table with fixed headers and footers for IE8.
If you want to stay away from the WEB use the JDK 1.6 and run Javascript code in that. You could do TONS with that.
Whenever I'm trying to get familiar with a language, I will work on Project Euler problems with it.
I would implement a simple game like sokoban first.
The second application would be an AJAX-based multiuser chat application, first fetching other people's responses by polling, later with AJAX push.
Interesting question.
Really you could do any sort of application. In order to make sure you're using the latest and greatest stuff, I'd try making a simple CRUD style application using DHTML and AJAX. Perhaps a contacts list or calendar. If you're feeling really energetic, you could write the back-end in JavaScript as well.
Unless you want to get really friendly with the DOM and browser compatibility, I'd learn Javascript through the mask of one of the nice frameworks like Jquery or Prototype.
The Holy Grail - a WYSIWYG editor. They wouldn't need to complete it, but just seeing their plan of attack would be interesting. Plays right into patterns and OO.
I suggest you create a Google Gadget. You can create one for free and perhaps make something useful out of it. If you don't have a Google account, sign up for one. Then add the Google Gadget Editor to begin writing your code.
With the gadget, you'll be able to mess with JavaScript, JSON, CSS, etc. Furthermore, you'll be able to store the file on Google's server so you can work on it from any computer.
I created a simple RSS reader and wrote JavaScript to get the feed (using Google's API) then dealing with that JavaScript object because it came back as JSON. I then developed some JavaScript to hide/show div tags.
It was a good starter project for me to learn JavaScript.
Get JavaScript the Good Parts by Douglas Crockford. Also check out his web site: http://www.crockford.com
Key reason: just because JavaScript looks like C/C++/Java/C# doesn't mean it actually is like them. Things are significantly different. I suggest reading his book to get a grasp of those differences.
Otherwise, I would look at the JQuery web site. JavaScript is cool and all, but a good framework will save you from a lot of the pitfalls and make you much more productive faster.
try making an advanced AJAX application like for example try to recreate the google calander.
How about a firefox plugin to monitor StackOverflow? It could use RSS to monitor feeds and let you know when new questions are asked with your tags.
It could also be grown as your js skills progress.
Write yet another javascript framework, but focused specially in something, ie game programming.
Related
I have learned and can read/write code in JavaScript. I am a backend engineer by profession and want to learn how to build websites. I have gone to the point where I can build wireframes and start writing basic HTML. I've never succeeded in creating a complete webpage, because they always looked awful midway through.
I've seen many JavaScript frameworks (like Bootstrap, Backbone.js, and others) that one can use to create websites.
Which framework(s), if any, should I use? Which would you recommend I use to start building websites (and why, if applicable)?
I wouldn't recommend you using a JavaScript-framework to build your entire website. I would only recommend JavaScript to enhance your website with cool features.
I'm not sure what type of website we're talking about, but if you're planning on getting traffic from search engines — think twice.
Google aren't that good at reading content embedded in JavaScript. Meaning: your SEO will be terrible if you choose to build the website entirely in JavaScript.
HTML/CSS is easy, man. I'm sure you'll be able to learn that in a one day — tops! You're a backend engineer by profession for gods sake, HTML can't possibly be that hard to get a grasp of :)
I was in your exact shoes not so long ago - I'm a programmer and had no issues picking up the backend programming that is required of websites, but when designing the web page is something I just could not do. I would end up with terrible looking web pages which was very discouraging.
One great way to get around this is use HTML/CSS templates - there are plenty free ones available. Download one you like, then go through the CSS and change as much of it as you need to personalise your site. This process will also give you a great understanding of how CSS works, and how it should be used to design a page.
After doing this a couple of times, you will be confident/able enough to design a webpage from scratch. If not, continue using the templates. No harm in that.
As others have already mentioned, for a powerful, dynamic website you will need a server side language as well. Javascript frameworks like jQuery are nice for the front-end for the website. For the back-end you can try CakePHP, CodeIgniter etc., or just code the back-end from scratch. Doesn't seem that would be a problem for you.
Some sites that provide free HTML/CSS templates:
CSS Creme
FreeTemplatesOnline
Most of them are optimized for 1024x768 which might seem a little outdated for a few. Try tweaking the CSS code to make the template suitable for your purposes - change images, width etc.
You can't exactly build a website using JavaScript. You could, but that would be very inefficient...I recommend going through some HTML tutorials, as you (and the websites you build in the future) will benefit a lot from the fact that you use HTML primarily, and enhance it with JavaScript. After all, JavaScript can't do much in comparison to HTML (since in order to build a site with JavaScript (or my interpretation of what that is), you need to have a basic understanding of HTML).
Unless I misunderstood your question, then that's about it. Frameworks like jQuery can really enhance a page and make it beautiful and, fortunately, much more user-friendly.
You can't create a website (at least a dynamic one) without a server side language. There you can pull from a number of languages.
If you are just a JavaScript fan, then you can use server-side JavaScript code as Node.js. On the client side you can use jQuery and you can have a supporting database like MySQL.
I have been a user of jQuery (and some of its minor plugins) for a while. The Javascript code I've developed over the years could be described best as... messy. It used a ton of global variables and functions here and there, didn't use standard ways of organizing the code, nor any design patterns whatsoever.
I am currently building the new version of a website, and I have completed doing the backend with PEAR::MDB2 and Smarty templates. The rest is just homebrew PHP with some classes.
Now I am at the point where I'll add the Javascript layer on top of the website to improve the user-friendliness of some features. (while making sure everything degrades gracefully) I want to write better, cleaner, more organized Javascript than I used to, so I did a little research. I read Stefanov's Object-Oriented Javascript to have a better grasp on some concepts I knew only loosely about (prototypes, constructors, etc.) as well. Now I'm stuck at a point where I wonder which Javascript frameworks I should use, and how to organize it all.
After conducting my research, I understood Cappuccino & Objective-J, and Sproutcore were not what I was looking for. To quote Cappucino's about page:
Cappuccino is not designed for building web sites, or making existing sites more "dynamic". We think these goals are too far removed from those of application development to be served well by a single framework. Projects like Prototype and jQuery are excellent at those tasks
So there's that. Then I found out about Coffee Script, which is more of a one-to-one "compiler" and wouldn't help me with the actual organization of my code.
I also stumbled on some articles that give guidelines:
Using Inheritance Patterns to Organize Large jQuery Applications
A JavaScript Module Pattern
I also found out about Backbone.js, Shoestring, JavaScriptMVC, Google Loader, jQuery Tools, jQuery UI. I don't really know what to do of all this... The things I know:
I don't want to invest too much time in learning something too complex, I want to keep things simple and flexible as much as possible (that is why I don't use Symfony on the backend, for example), yet clean and organized.
I want to use jQuery, the question is, what should I use with it? (that is compatible too)
Right now, I'd use jQuery and jQuery Tools and "organize" all that in a simple namespace/object literal with simple properties and methods and also, since the site is localized, I just plan on using the simple vsprintf (as I do on the backend) with key:value pairs loaded from an object literal provided by the backend. JavaScriptMVC seems interesting, but I fear it would bring way too much complexity for a project that is fairly small sized. That is where I need your advice! Thank you very much in advance.
Ok, my attempt at an answer:
There is no 'best' to way to do it. You now know what's there and I think you might have a preference for yourself for what you want. In that case, pick a framework and learn it inside-out. (sorry to burst your bubble, but each framework has a learning curve, some steep, some very easy, but in the end to use it well you have to invest in it. Just do it, you won't be sorry).
You of course have an preference for clean code, so you might take some considerations into account. You also say you have a preference for jQuery, which is fine, but there are some limitations (as also pointed out in the link provided by eskimoblood).
There are some nice lectures / and tutorials with advice on how to structure your code in jQuery:
How to manage large jquery apps
On Large jQuery apps
Essential Javascript and jQuery patterns (free ebook)
Some style guides:
Jquery core UI Styleguide
Google Closure Javascript Style Guide
Tools for checking your code
JSLint
JSHint (a more forgiving/practical fork)
Closure Linter (haven't tried it yet, but intend to)
Standard works (javascript)
Everything by Douglas Crockford
Quirksmode
There might be more.. perhaps more people can contribute, but I also think that you've almost reached the end of what you can learn before getting your hands dirty. Many of these guides are written in a very generic way, but the interesting thing is that javascript is called upon in many specific situations. It might be useful to just post some of the code that you regard as "messy" and we can help you figure out how to do it better. Good luck!
You should watch the video and read the links in this article and then you should ask yourself again if jquery is the right tool. Maybe you will use dojo, that is much better for larger projects or you take a look at backbone and where you can stay with jquery. After all both of them are more "javascriptish" then something like sproutcore, cappuciono or even GWT. And also much easier to understand when you come from jquery.
One framework that is to consider is definitely ReactJS from Facebook. This framework is pretty slick in many ways.
First thing you have to know is that it is a view framework. It can be used server-side to do the pre-rendering of pages, but it really shines on client side. Since it's a view framework, it can be used with backbone or any other "back-front"-end framework.
One of the main point of React is its rapidity. It keeps a virtual DOM in memory and virtualize all the webpages events. So the virtuals event are used to keep events browser agnostics.
The virtual DOM kind of make programming a dynamic site as if you were programming an old static website. You can just shoot the whole HTML to render to the view engine (as if you were "re-rendering" the whole page) and it will manage the DOM operations. It does a diff between the new virtual DOM and the current virtual DOM and only inserts nodes that needs to be inserted. This way you reduce the number of DOM ops and thus increase your render speed by a lot.
A good place to start is this tutorial which shows how to use "Flux" (the web flow designed by Facebook for its site) in order to realize a Todo application!
I started out with Rails development, but soon I realized Rails without JS is pretty much useless. So, I am trying to play with JS in my free time.
So, what are the "tools of trade (IDEs if any)" for JS development?
My primary focus is usage of APIs, Ajax etc, so that I don't get lost when I get develop Rails apps which uses JS.
There are many tutorials for using JS for Open graph API or twitter API, but that is to get things done and abstract some feature sets which a beginner should know.
I generally start learning a language by making a calculator, end to end (always works for me). But I cannot make a calculator and use API/Ajax calls.
So, what are your suggestions?
PS: I am aware about Douglas Crockford's video lectures, they are awesome, but I need some thing more concrete.
UPDATE:
My 2 original questions:
1. What are the tools of trade for JS? Like Eclipse:Java::X:Javascript, What is X (multiple Xs are allowed)?
2. What sample app do you recommend for me to start with?
I think the most important thing is: Know your language!
JavaScript libraries are useful, but if your do not know the language, you have no chance of getting something done that cannot be achieved using your library of choice. For example: JavaScript's prototype-system is very valuable and important for building robust applications. I really recommend that you experiment with this before diving into something you barely know. Closures are also very important to understand.
One thing is important, though: Do not spend too much time on browser incompatibilities. This is what most libraries are for. What you need to know is how the language works. Implementation-specific things are not worth learning (in most cases), since somebody already fixed those for you.
#PS: Douglas Crockford indeed does a pretty awesome job on explaining how JavaScript really works. You should keep watching this.
#UPDATE:
I think the X has it's origin in JavaScript's MIME-type: application/x-javascript. My tool of choice for web-development (including JavaScript) is NetBeans IDE. I use it in my workplace and it is very reliable and comfortable to work with. This is subjective (of course). Most other IDE's will do, too.
This is difficult to answer. I will update my post if something comes to my mind.
(I realize my comments below typically refer to using javascript with regards to websites, so ymmv if you're using js for a different environment, like couchDB)
For an ide, any text editor will do, but I prefer convenient features like:
syntax coloring (because it's so pretty)
(s)ftp plugins - makes saving files convenient
I would probably go with something like notepad++, or aptana studio (although I find aptana to be a bit of overkill at times, but very powerful). Adobe Dreamweaver works nicely too, if you wanna pay. Otherwise, the bare minimum would be notepad and an ftp client (again, with regards to front-end web development work)
For debugging or trying out quick javascript, I find safari's and chrome's built-in development tools handy, but on firefox, it's firebug all the way. Firebug is awesome.
I notice that in my work environment that some people (particularly the business side) use the words javascript and the DOM interchangably, but I find that their attempts at explaining something simply leads to confusion. That being said, if you're writing web apps, I find the mozilla DOM reference to be pretty awesome and used to hit it up all the time before I got familiar: https://developer.mozilla.org/en/DOM
Actually developer.mozilla.org is overall pretty awesome.
Other than that, getting started is simply a matter of learning the syntax. I would probably get used to the syntax first (which should be pretty quick anyways) before I start thinking about other concepts like learning how to prototype and whatnot (which you can look up on this site).
A framework like jQuery is very convenient for various repetitive tasks, but I wouldn't necessarily jump straight into using jQuery without being familiar with the js syntax first.
The most important thing you should learn is jQuery. It is now the de facto standard javascript library.
jQuery is great regardless of what you are doing with it, but since you mentioned AJAX, I'll point out that jQuery makes AJAX stupid easy, because you can do things like this:
$.ajax({
url: 'some/ajax/endpoint',
success: function(data) {
// do something with data
}
});
Obviously there are a lot of other options you can pass along, but the basic structure is really simple and easy to use.
jQuery also has a really powerful syntax for selecting parts of the DOM and adding events. For example, if you wanted to catch anytime some clicked on an image and tell them the image src, you can do something like this:
$('img').click(function() {
alert($(this).attr('src'));
});
I have some experience in AJAX development, mostly on .NET and MooTools. However, I want to learn more and see what others out there thought about the various other options available. I am looking more for advice about the front end. The back end, I will most probably be coding it in .NET using c# and WCF services.
Please feel free to provide me as much information as you can. Also, I would appreciate any links to resources.
List of Options (feel free to add)
Write my own Javascript
Use a framework like MooTools, JQuery, etc. Which one is better?
Use Google Web Toolkit. Am I tying myself to the limitations of GWT? Or are there not limitations?
ASP.NET AJAX
WPF (Will this run on non-IE browsers?)
Flash (it'll be a pain to learn action script)
Thanks
Jaspreet
Writing your own Javascript often means reinventing the wheel when it comes to trying to attain cross-browser compatibility. Frameworks such as jQuery and MooTools take care of much of that grunt work for you.
Personally, I would suggest picking a Javascript framework or using GWT, but really it's just a matter of personal preference at that point, much like choosing a programming language. Pick that one that is best for your purposes, or that you're most familiar with.
I'd go with jQuery.
jQuery will be bundled with the next version of Visual Studio. Google uses jQuery. jQuery has the largest user-base of any of the frameworks out there.. And speaking of not re-inventing the wheel: jQuery also has the largest plugin-repository of any of the frameworks out there.. Including its own official UI library which is in constant development.
.. And if you're a fan of books; there's 3-4 books about the framework out currently.
Oh, yeah! Check out Douglas Crockford's website for great vanilla JavaScript tips and tricks.
Just my two cents :)
jQuery
prototype
MooTools
dojo
GWT
ExtJS
Those will all have you working with very solid code, which is usually the best way to improve your own skills. And don't forget all their extensions/plugins.
I would recommend jQuery. It's more extensible and light-weight than most other JavaScript libraries I've seen (and you can have it Google-cached with the AJAX APIs).
For Flash-based AJAX web apps, Flex is a better solution.
Since this is a fairly subjective question I will put in my 2 cents.
I've developed using the Dojo toolkit and found it very well rounded. However, if you don't do a custom build on your library it slows everything down. It has a steeper learning curve than other frameworks, but seems to sit pretty close to heart of Javascript.
But this isn't an advertisement for dojo. I'm working on a Ajax web app currently and my goal is to try and avoid using a framework. Why? A few reasons.
The biggest reason is complete control over the code. Not that I don't trust toolkits, I just like my custom code. I don't have any code that I don't use, and all of my abstractions are custom made for my purposes. At times I am in fact reinventing the wheel*, but its always a bit different because it's purpose built.
The other big reason is the amount of knowledge I gain. I'm confident that I could pick up any framework much faster, because of not using one for a project. I understand so much more than I did previously. Before It was more like a voodoo mystery box, and now even frameworks make more sense to me.
The fact of the matter is if you do any non-trivial javascript you will end up with a framework (or a mess). In reality it may not be the fastest way to write web apps, but it isn't all that hard with a little practice. You can be amazed at what creative things you can come up with that didn't exist before.
*Reinventing the wheel is a terrible analogy that we all use. We reinvent wheels all the time. First made of stone, then lighter wood, tires, etc... My truck doesn't have the same wheels as my sedan.
Like other responders I prefer to use frameworks, but my favorite is dojo -- clean and well-designed architecture, good books (my favorite being Matthew Russel's), and a particularly impressive approach to using browser extensions (such as Google Gears or Microsoft Silverlight) if the user has them installed, while falling back gracefully (e.g. to Ajax-interfaced server-side storage) if no suitable browser extensions (or sufficiently advanced browsers, with HTML5 support) are present.
Dojo is, currently, slightly less popular than jquery (e.g., [jquery ajax] has 8.4 million hits on Google Search, vs 4.3 million for [dojo ajax]), but that's still way popular enough to ensure it won't go away any time soon;-).
You must check ExtJS.
Most libraries I've seen have usable core but lack the widget/control library that will blend-in with each other. Sure you can get a vast number of controls for jQuery, but do you have the time to find out which ones have intended functionality and tweak their visual appearance to match the rest of controls? ExtJS gives you just that. Core is core. It works and it works great. But the vast selection of compatible and functionality rich controls is the main driver that will make your life easier.
I've used ExtJS with Asp.Net and WCF services and it was a really nice experience overall. You will need some time to get to know ExtJS component model to extend it even further (as you would need to do the same with other libs), but when you do, you start loving it even more.
One more thing: since MS ships jQuery with MVC it doesn't mean it's the best. It only means it's one of the best (and much better than Microsoft's in-house Ajax) but with the most relaxed open source license.
Edit: Now that Silverlight 3 has shipped it became apparent it will shake things a bit with its offline support and rich graphics support. As well as standalone desktop like web apps. Definitely something to consider...
Please note that WPF has nothing to do with ajax.
AJAX = Asynchronous javascript and xml
WPF = a windows-only UI display technology. The only option there for in-browser use is to create an Xbap. The more-suited-for-the-web counterpart is silverlight (say, like flash but from microsoft), so perhaps you should look into that as well... it's like using flash, but with familiar MS technologies.
Concerning your question about which framework to use in case of ajax: I prefer jQuery. It's short syntax and chaining allow you to reach your goals very fast in an intuitive way.
Also, GWT is a Java framework that also renders stuff on the client, as far as i know. So you would have the limitation of Java as backend language...
GWT has made considerable leaps and bounds over the past 7 months. The mutiple GWT widget libraries have received a good deal of attention, and Google's work on the library has been impressive. Going GWT limits you to:
Using GWT widgets
Possibly becoming a GWT widget developer
The benefits include:
Coding in Java
Debugging in Java
Skipping the parts of JavaScript that make you pull your hair out
GWT is the step past AJAX. It buries the HTML / JavaScript so that you don't need to deal with it, but also provides access in case you do want to deal with it.
Overall, you will spend less time trying to get small things working, and more time adding awesome to your application.
there is also prototype.js
Try the Yahoo! User Interface Library (YUI)
Pick a library to learn, then pick up the others--but I don't think I'd reinvent the wheel.
I picked MooTools and have picked up jQuery/Prototype since. (Picked Mootools because their site, at the time, was the only one that validated, figured clean html meant clean javascript).
Side note about MooTools:
An often overlooked feature of MooTools is the download builder. You can download just enough of the framework source to get your AJAX working, and nothing else.
There's the BBC's open source javascript library called Glow
I have a few .NET developers who only want to use the MS AJAX Toolkit and think JavaScript (and any JS Library) is evil. I tried to explain that if you treat client-side development like a grown-up language you can build maintainable code ... but I assume that the classic ASP days have left a mark on these guys. Anyone have a suggestion to help convince this type of developer that learning jQuery will actually benefit them in the long run as the industry is trending back to "lets get close to the metal again" w/ MVC for example?
Tell them microsoft endorses jquery and that it's shipping with MVC
If they don't realize that jQuery is the bee's knees - they're living under a rock - tell them about all of the people that are using jQuery (Google, Dell, MLB, Bank of America.....the rest of a good list is in the middle of the jQuery home page) - or just tell them that every time they go to their Netflix account they are using jQuery or if they visit the president's web site (which could backfire I guess.... ;)
Emphasize that learning a 'technology' that is becoming that ubiquitous can only help your career.
Point them to this article by Scott Guthrie.
Quick quote from the article explains all:
I'm excited today to announce that
Microsoft will be shipping jQuery with
Visual Studio going forward. We will
distribute the jQuery JavaScript
library as-is, and will not be forking
or changing the source from the main
jQuery branch. The files will
continue to use and ship under the
existing jQuery MIT license.
Ask if they like server-round-trips. (To make them understand that client-side-stuff is necessary.)
Ask if they want to write code that works in 3 different places at the same time? (To make them understand the need for a library that almost erases browser differences.)
Show them a list of who's using jQuery.
If they fancy elegant code, they will get what you're saying. Otherwise I think they'll be really hard to convince.
Implement something that has value for your organisation/clients using jQuery to prove that it works well in your context - even better if it's something that would be difficult to implement, more complex or take longer in the MS AJAX Toolkit.
Developers often find practical examples of running code in a context that applies to them more persuasive than general endorsements or lists of who else is using it (every practical technology can come up with a good list of users).
And if your developers don't like JavaScript, perhaps you should ask them what they think the AJAX Toolkit is running on the client side. The AJAX Toolkit is a JavaScript library on the client side - just one that's designed to be easily integrated into ASP.NET.
Getting up to speed on the dominant tool in a given area is always a good idea. JQuery is the dominant JS library. For some anecdotal evidence, take a look at the tags here on StackOverflow:
JQuery: 1809 items
asp.net-ajax: 272 items
ajaxtoolkit: 54 items
Tell them they can do more with less - and understanding jQuery/javascript will help them understand AJAX.NET even more. It's a big huge leaky abstraction in my books - since switching to jQuery it made web programming more fun and I could build way cooler apps.