This lessons covers
- Improving selectors for better performance
- Organizing your code in modules
- Loading modules with RequireJS
- Managing dependencies with Bower
- Creating SPAs with Backbone.js
If you’ve read all the previous lesson, you’ve hopefully learned how to write beautiful and concise code using jQuery, how to extend its features, and how to unit-test your code. Now that you know jQuery, you’re ready to learn when it isn’t enough and the use of another library or even a framework is required.
In this lesson, the last of this app, we’ll broaden our focus to several tools, frameworks, and patterns not strictly related to jQuery but that can be used to craft fast, solid, and beautiful code.
The main purpose of jQuery is to help you manipulate the DOM. DOM manipulation is usually slow, so you need to understand how you can tweak the performance of your jQuery code to perform operations as quickly as possible. You also have to understand how to easily integrate jQuery into large projects and how to correctly structure your code in modules to improve the maintainability of your code base.
One of the most important challenges developers deal with is the creation of performant code. Many people often underestimate this task, but optimizing your JavaScript-based source is always rewarding. It may happen that improving the performance is hard due to poorly written code that needs a deep refactoring, but other times it’s as easy as selecting elements properly. In the first section of this lesson, we’ll discuss extensively how you can improve the performance of code written with jQuery by selecting elements the right way.
When you work on large projects there’s a strong need for a better code organization. If you don’t manage it properly, when you add new features or refactor your code, you’ll find yourself dealing with a complete mess. One way to address this issue is to apply some common and reliable patterns. The practice of organizing your code in modules, which is the second topic covered in this lesson, allows you to have a better overview of the whole project. It also allows you to easily organize the project so that different developers can work on different modules.
Splitting a project into modules is a good way to keep it organized but it introduces a problem. A given module may depend on others in order to work, so you need to be careful about the order in which you include them in your web pages. If you deal with a couple of modules, this issue is easy to manage, but when developing large projects, it isn’t so simple. In situations where many modules, plugins, libraries, or frameworks come into play, each of them with its own dependencies, you need a professional and reliable method to include them in the right order. One of the possible approaches is to adopt RequireJS, a library that we’ll cover in section 15.3.
In the previous paragraph we mentioned plugins, libraries, and frameworks. When developing a web project, it takes time to write everything from scratch, so you usually rely on third-party software. Examples of such software are jQuery and Modernizr. To include these components in your project, you visit the respective websites, download the files needed, and put them into a folder. Although this process works, it’s slow and boring. In addition, it leaves you with the burden of manually checking for new versions. To automate this activity you can employ Bower, which we’ll introduce in section 15.4.
Finally, in the last section of this lesson, we’ll take a look at Backbone.js. The section isn’t meant as a complete guide to this framework, but we want to give you an idea of what’s next in your learning path and how jQuery integrates with frameworks such as Backbone.js to create complex applications.
Leave a Reply