background preloader

Require

Facebook Twitter

Using jQuery UI with AMD. Note: This documentation refers to functionality made available in jQuery UI 1.11.

Using jQuery UI with AMD

As of jQuery UI 1.11, all of the library's source files support using AMD. This means that you can manage your jQuery UI dependencies without using Download Builder, and load jQuery UI's source files asynchronously using an AMD loader such as RequireJS. In this article we'll walk through the process of using AMD with jQuery UI. Let's start by discussing the files we'll need. We'll need to download three things to get up and running: jQuery core, jQuery UI, and an AMD loader. Plugins · jrburke/requirejs Wiki.

RequireJS allows you to write loader plugins that can load different types of resources as dependencies, and even include the dependencies in optimized builds.

Plugins · jrburke/requirejs Wiki

Some plugins may also work with other AMD loaders like curl and backdraft, compatibility isn't ensured though, some plugins may require access to RequireJS internal methods to work. For info about how to use and/or write plugins, check the documentation. List of plugins curated by the community. Understanding AMD & RequireJS. You have probably already noticed that JavaScript is becoming the virtual machine of the web.

Understanding AMD & RequireJS

And it seems like Jeff Atwood’s law, “any application that can be written in JavaScript, will eventually be written in JavaScript” is working. If you are a developer, I’m sure you are familiar with, as I like to call it, "script hell. " RequireJS shim configuration, jQuery plugins and enforceDefine » unitstep.net. If you’re using RequireJS’s shim configuration to load jQuery plugins while setting enforceDefine: true in your configuration, you probably noticed the following uncaught error in your JavaScript console: (The following example is for the iCheck plugin) Uncaught Error: No define call for iCheck Reading the documentation at that URL, yields the following important tidbit.

RequireJS shim configuration, jQuery plugins and enforceDefine » unitstep.net

(Emphasis mine) This occurs when enforceDefine is set to true, and a script that is loaded either:Did not call define() to declare a module. Or was part of a shim config that specified a string exports property that can be checked to verify loading, and that check failed.Or was part of a shim config that did not set a string value for the exports config option. Using jQuery and jQueryUI Widget Factory plugins.

(For more resources related to this topic, see here.)

Using jQuery and jQueryUI Widget Factory plugins

We must declare the jquery alias name within our Require.js configuration file. If a jQuery plugin does not register itself as AMD compatible, we must also create a Require.js shim configuration to make sure Require.js loads jQuery before the jQuery plugin. We will now be able to dynamically load a jQuery plugin with the require() method. // Dynamically loads a jQuery plugin using the require() methodrequire(["somePlugin"], function() {// The callback function is executed after the pluginis loaded});

Jquery. How to Load jQuery Plugins With RequireJS - Simone Web Design. RequireJS is a useful script loader library.

How to Load jQuery Plugins With RequireJS - Simone Web Design

Even if your site/app isn’t super big, it’s usually a good idea to use RequireJS: it makes your code maintainable. The problem Often we need to include external plugins that depend on jQuery. Those plugins usually do expect to find a global jQuery ($) object, and then they just extend it. Of course not all plugins behave like that, but most of them do, and we must deal with it. By the way, loading jQuery as a global variable is not really a good idea. The solution. Example-jquery-shim/www/js/lib at master · requirejs/example-jquery-shim.

How to make a jQuery plugin loadable with requirejs. Full Stack JavaScript: Backbone, Node, Express & More. The Story So, you and your co-founder have this great idea for a business, right?

Full Stack JavaScript: Backbone, Node, Express & More

You’ve been adding features in your mind. Frequently, you ask potential customers for their opinions, and they all love it. Ok, so people want it. Mike Dellanoce's Blog: Zero-friction Javascript Minification with RequireJS and Express. Roll Your Own Controllers with Express and Require.JS - The UrBlog. I’m a Grails developer at work, so I’ve gotten used to convention over configuration for controllers.

Roll Your Own Controllers with Express and Require.JS - The UrBlog

I just create a class with a name that ends in Controller and place it the controller folder. Each method in the controller is an action and it allows me to access that method via /controller/action/id. While Node and Express have full blown Rails copies (such as Geddy), I want something simpler. Requirejs-middleware. Connect middleware for RequireJS compiling Middleware for Connect & Express that runs the RequireJS optimizer on demand.

requirejs-middleware

Production-ready and used by Mozilla Popcorn Maker. Auto-optimization with Express and RequireJS. Requirejs-middleware/server.js at master · jbuck/requirejs-middleware. Jbuck/requirejs-middleware. Writing Modular JavaScript With AMD, CommonJS & ES Harmony. When we say an application is modular, we generally mean it's composed of a set of highly decoupled, distinct pieces of functionality stored in modules.

Writing Modular JavaScript With AMD, CommonJS & ES Harmony

As you probably know, loose coupling facilitates easier maintainability of apps by removing dependencies where possible. When this is implemented efficiently, its quite easy to see how changes to one part of a system may affect another. Unlike some more traditional programming languages however, the current iteration of JavaScript (ECMA-262) doesn't provide developers with the means to import such modules of code in a clean, organized manner. It's one of the concerns with specifications that haven't required great thought until more recent years where the need for more organized JavaScript applications became apparent. Instead, developers at present are left to fall back on variations of the module or object literal patterns. Javascript-playground/backbone-require-example. Using Backbone.js with Require.js - Greg Franko. Backbone.js is a great client-side MV* (not MVC) JavaScript framework that provides structure to JavaScript applications by providing View, Model, Collection, and Router classes.

Backbone also provides a pub sub (publish subscribe) mechanism, by allowing each of it’s objects to trigger and bind to events. Backbone Views act as a combination of traditional MVC Views and Controllers, since they allow you to organize all of your JavaScript event handlers while also providing a mechanism for adding dynamic HTML to your page through the optional use of JavaScript templates. Views will also often be where you set data on your Models. Here is an example Backbone View class: Backbone Models store all of your applications business logic and data.

Here is an example Backbone Model class: SlexAxton/require-handlebars-plugin. Using Handlebars with Backbone and RequireJS and Precompiling templates. Note: I did discover something a little strange...that this process doesn't work if there is only one template file that you are compiling. When my 'templates' dir had more than one .hbs file in it, then everything worked just fine.

Guybedford/require-less. Guybedford/require-less. Using The RequireJS Build / Optimizer To Concatenate Modularized CSS Files. A little while back, I started looking at RequireJS as away to organize and modularize my JavaScript code. And, while I am still getting my feet wet in modular JavaScript web application development, I can tell you that I have really enjoyed using RequireJS - and, that I plan to continue to integrate it into my development process.

The asynchronous loading and the on-demand loading of JavaScript modules are nice feature of RequireJS; but the real "ah ha! " API. Usage§ 1 Load JavaScript Files§ 1.1 RequireJS takes a different approach to script loading than traditional <script> tags. While it can also run fast and optimize well, the primary goal is to encourage modular code. As part of that, it encourages using module IDs instead of URLs for script tags. Improving frontend web performance using RequireJS optimiser.