Do not “learn” jQuery, learn backbone.js and require.js
So you wanna join the little HTML5 party some of us are having? Great! It’s not that packed yet, quite comfortable actually. And the main gigs haven’t even played yet. So no, you’re not late. Quite one time actually.
* Dear JavaScript pros: This is a blog post for beginners. So don’t shoot me for simplifying things. *
Many developers (especially from the Flash / ActionScript community, but not only them) are currently wanting to “learn” HTML5. Some want to focus on websites, others want to build (single-page-) apps. Some want to do shiny advertising’ish projects, others want to focus more on “products”. And many say, that therefore they need to learn jQuery now.
Do not learn jQuery, just use it!
When someone asks you if you’re into jQuery, just confirm. Chances are, that clients/employers won’t mind to ask, since they assume that you do.
My prediction is, that you’ll use 10 jQuery methods max in the beginning. When starting with jQuery, using jQuery is mostly understanding HTML and CSS (you understand HTML and CSS, right?). Anyway, api.jquery.com is your friend. In a year from now, you’ll probably laugh about your jQuery code, but that’s ok for now, you have bigger problems.
How to produce clean code in JavaScript
The more important question is, how to build clean, manageable, understandable and maintainable JavaScript code. And unlike two years ago there are two industry standards now: backbone.js and require.js.
Backbone enables you to write a class-like code structure, that fulfills all the aforementioned criteria. And – most importantly – since it so widespread many people already know it. For me, working with backbone made working in big teams possible (you want to work in big teams, right?). There are many other frameworks out there, lots of them with a strong feature set. However, what I like about Backbone that it does not have a big feature set.
Require on the other side, not only encourages you to write loosely coupled and granular parts of code but also helps you to structure the JS files that hold your code. It makes you create JavaScript modules in a standardized way, so that you can easily plug them together. I know first hand, how hard it is in the beginning to decide how to organize the JavaScript files/folders and how to get them into the application. Require.js is there for exactly that.
So how to learn them then?
While understanding require is quite straight forward (the documentation will do), the learning curve of backbone is harder. Try to avoid the famous ToDo list example. It gives the impression that backbone applications are always big and/or complicated. The truth is backbone can be extremely simple. Start with something waaaaay simpler.
Unlike other coding communities, the JavaScript community is almost entirely based on open source. It basically lives on github. This includes backbone and require. So if you don’t already have a github account – go and get one. And hang out there for a while.
Other things you might want to check on github:
* HTML5 Boilerplate (especially the .htaccess file is very interesting)
* Twitter Bootstrap issues
* Modernizr
* Good list of things to look into
Good post. I guess many (Flash) developers getting into JS these days (like me) need just that: a point to get started from. There is no magic about jQuery since it’s so simple you can just grab the docs and start using it – at least that’s what I experienced.
And since I was curious to learn about best practices and how to write _clean_ JavaScript right away, I found Stoyan Stefanov’s “JavaScript Patterns” an extremely helpful book. Aside from how to build Modules and Objects, it tells you about all the common pitfalls and makes you aware of why they’re tricky in the first place.
Found it more helpful for getting an initial grip than the highly sophisticated “JavaScript: The Good Parts” which is probably a decent read once I’ve gathered a little more experience.
There are two problem areas when it comes to building HTML RIAs. The first is the language itself. For those who want a more class-based structure and an expanded API, we have things like backbone and even CoffeeScript.
The other issue is the UI component library. This is more of an issue. jQuery UI is all right for basic things, but coming from Flex, I want a full-featured library. That narrows your choices to ExtJS and the Closure library.
I’ve tried both and FWIW, ExtJS has the most going for it. The component library is great, the component lifecycle is very similar to Flex, and a very large chunk of knowledge gained from building Flex RIAs applies to ExtJS RIAs.
As a bonus, Ext has its own (very well done) class system and language API, so if you want to you can build apps without even needed to drop into things like require or backbone. I just use the Ext library and API, and write it all in CoffeeScript. So far this is working out very well. Just my two cents.
Yeah i love Backbone and require.js.
Especially as someone who has exclusively worked with the flash platform for the last 10 years this feels really familiar. It`s like a really natural transition. Html is my new MXML and Backbone my new component/class model. Require.js helps with dependencies and namespacing plus you get all the flexibility of js and css. Would have never thought it could be so much fun!
BTW this was my first month in 10 years that i haven`t done any Flash/Flex work at all :-)
Here is a nice introduction to get started with backbone: http://addyosmani.github.com/backbone-fundamentals/
@ Michel Totally agree! If I had only one book to recommend it’d be “JavaScript Patterns”.
@Brian Thanks for sharing. I havent had the need for a UI framework yet. Will look into it at some point.
@Benz Yap, backbone-fundamentals is quite good.
I think a nice follow up post for Ex-Flashers would be about the toolset for html development. So much choice! I`ve gone from eclipse to webstorm to coda and for now settled with sublime text which i`m really happy with. What`s your favorite?
@Benz I used Textmate for quite a while and now I’m super happy with Sublime Text 2. Thanks for the idea of a HTML5-Tools-post. Might gonna do that. :)