(801) 214-81041174 W 230 S, Orem, UT 84058‎Contact
Website Design, Maintenance, Search Engine Optimization (SEO), Website Promotion
  • Home
  • Services
    • Free Consultations
    • Design & Development
    • Website Redesign
    • Utah Website Maintenance
    • eCommerce/Shopping Cart
    • Statistics & Visitor Tracking
    • Website Security Audit
    • SEO Basics
    • SEO Consulting Services
    • Promotion & Marketing
  • Portfolio
  • Pricing
    • Quote Request Form
    • Website Order Form
  • Blog
    • Web Design & Development
    • Web Security & Optimization
    • Website Maintenance
    • Search Engine Optimization
    • eCommerce/Shopping Cart
    • Promotion & Marketing
    • Programming & Coding
    • Server Virtualization
  • More
    • About
    • Contact
    • FAQ / Knowledgebase
    • Webmaster Glossary
    • Agreement Form
    • Terms of Service
    • Privacy Policy

The Modular Approach to the Development of Web-based Applications Using JavaScript: AMD and RequireJS Tutorial

The Modular Approach to the Development of Web-based Applications Using JavaScript: AMD and RequireJS Tutorial

Vitaly Kirkpatrick September 8, 2014 in Programming & Coding 0
The Modular Approach to the Development of Web-based Applications Using JavaScript: AMD and RequireJS Tutorial

RequireJSWhen developing applications with a modular structure in JavaScript there are two problems:

  • description and satisfaction of the dependencies of various parts of the application, the need to connect dependency on the server side;
  • exporting variables into the global scope and their collision.

Both of these problems can be solved using the approach of Asynchronous Module Definition . This approach is reduced to the description of function modules define and connect them with the “require” method. At the moment, there are several tools that implement AMD. I began my acquaintance with them through RequireJS and was surprised how easy and simple it is to describe the module dependencies. I’ll tell you how it works by providing a simple example.

Connecting RequireJS Loader

We have the following directory structure:

siteroot/
  js/
    app.js
    require.js
    jquery.js
    mymodule.js
  index.html

To start, we need to connect to the index.html loader. We will use RequireJS: <script Data-main = “/ JS / app” src = “/ JS / require.js”> </ script>. This is the only tag script, which we need at this time. The rest of the work of connecting the JS scripts is done by a boot loader. Specified in the data-attribute file extension (extension .js for short RequireJS always omitted) is a kind of entry point of the application. In it we will be able to connect the necessary modules using require and carry out its plan of action.

Module Description

We describe our module in “/js/module.js” using define function:

define(
    'mymodule',
    ['jquery'],
    function( $ ){
        return {
            foo : 'bar'
        };
    }
);

The first argument is a string, the name of the module is not required. The second argument passed according to a string array is also optional. The third argument is a factory function, which is performed only after the satisfaction of all the dependencies (download of these files). In its function the arguments are passed as export of the dependent variables. And it should return the module itself. In this case, an object with a single field.

Module Usage

In /js/app.js connect the required modules using JS and execute its code:

require(
    ['mymodule', 'jquery'],
    function( Module, $ ){
        $('body').append( Module.foo );
    }
);

Module is not to be available in the global scope, as well as other variables that are exported from the library dependencies. Despite the fact that the jQuery library version 1.7 supports AMD-architecture, it is an exception: it exports its dollar into the global visible scope. Most likely, this is done to maintain compatibility with an army of plug-ins written for many years.

Configuration

RequireJS has a number of parameters that can be transmitted before use. For this purpose we use require.config object. What to do if you need to connect the module that is not issued in the form of AMD and exports a variable in the global scope? You can, of course, modify the source code, but it is bad practice. For descriptions of these modules we use setting shim. You can manually specify the dependencies and exported variables, and it will become part of our application along with other AMD-items:

require.config = {
    shim: {
        'oldmodule' : {
            deps: [],
            exports: 'OldModule'
        }
    }
};

Now you can specify it as a dependency:

require(
    ['mymodule', 'jquery', 'oldmodule'],
    function(){}
);

In addition to the shim there are still many other parameters: the root directory file connection “baseUrl”, aliases for easier connection “paths”, etc.

Conclusion

I hope you found the concept of AMD interesting as it became for me. It helps to avoid chaos when a large number of JS-files in the design are connected which results in writing reusable code that takes responsibility for connection of the files from a backend. And if you have a really great MVC-application of a couple of dozen files, then such a system is simply irreplaceable.

Here are a few links that will help to further explore AMD & RequireJS:

  • Addy Osmani Article Writing Modular JavaScript With AMD, CommonJS & ES Harmony ;
  • official site RequireJS ;
  • specification of AMD .

Happy hacking!

Share with your friends:
Tweet
Top 10 Website Speed Tests. Online Tools Selecting Content Management System (CMS). Why Do You Need One?

Related Posts

Love at the First Word, or How to Place Words (Write Content) for the Site
Review of the Best Github Repositories for the Week March 27

Comment Here

  • FacebookFacebook(0)
  • DisqusDisqus(0)
  • Google PlusGoogle + (0)
  • WordPressWordPress(0)

Leave a comment Cancel reply

You must be logged in to post a comment.


Blog Categories

  • Blog (2)
  • eCommerce & Shopping Cart (4)
  • Miscellaneous (5)
  • Programming & Coding (9)
  • Promotion & Internet Marketing (7)
  • Search Engine Optimization (SEO) (6)
  • Server Virtualization (1)
  • Video (1)
  • Web Design & Development (14)
  • Web Security & Optimization (8)
  • Website Maintenance (3)

Recent Comments

    Webmaster Services

    Creation of Effective Websites
    Vital Webmaster, LLC creates effective websites of any complexity at affordable prices for all companies and entrepreneurs. My clients can order websites containing the most popular feature sets. There is also the possibility to order an exclusive site with any set of functions and with any design.
    Redesign of Existing Websites
    Website redesign usually affects not only the appearance of the website, but also this process changes the functional part of the site which translates it to another, more convenient and efficient content management system. I offer a comprehensive approach to redesign your site!
    Creation of Banners for the Website
    Creating banners requires a serious thinking, because a beautiful ad unit is a business card for your site and conveys important information about your products or services to your website visitors. Vital Webmaster, LLC will provide your with creative banners that will catch attention of your visitors.
    Programming for the Websites
    Programming for a WEB site helps to make certain graphic elements “live” and fills to their functionality. Vital Webmaster, LLC adds the functionality to your website by programming such applications as photo albums, news, subscription forms, contact forms, applications, registrations, forums, etc.
    Development and Implementation of CMS
    Vital Webmaster, LLC builds web-applications of any complexity (from personal single pages to e-shops or portals) that correspond to the needs of the customer. Also Vital Webmaster, LLC helps to implement CMS for your website that adds additional features and flexibility to managing the content on your site.
    Implementation of Visitors Tracking System
    Site statistics is the most important information for the owner of the site, because you want to know how popular the site is and what products and services your visitors are looking for on daily basis. Vital Webmaster, LLC helps to implement such systems for your website and all your resources on the web.
    Submission to Directories and Search Engines
    Do you have a great website, but no one knows it exists? You’ve come to the right place. Begin the path of traffic to your site today with Vital Webmaster, LLC. I submit your web site to the world-famous search engines and directories. I monitor submissions success and provide you with visible results.
    Website Hosting
    Vital Webmaster, LLC works with great hosting companies that provide hosting services for more than 12 years. The servers are available 24 hours a day, 7 days a week and are easily accessible from any region of the world. When you order my webmaster maintenance services, I make sure that your site is setup and hosted for free.
    Implementation of Website Security
    In recent years, the number of attacks aimed at the Web server, has increased significantly. Vital Webmster, LLC knows how to protect your website against sql-injections, website hackings, choose correct server settings, etc.
    Transfer of the Website to a New Hosting Server
    Often times when transferring to a new hosting provider your old website, many of us find it to be a very complicated process. Vital Webmaster, LLC can do that for you to ensure that your existing website is reachable on a new server.
    Website Maintenance
    Website maintenance is a package of measures aimed at maintaining proper health resource on the Internet. Vital Webmaster, LLC offers ongoing website support services.
    Search Engine Optimization (SEO)
    Vital Webmaster, LLC provides Search Engine Optimization (SEO) services that help to ensure that a particular virtual resource appears high on the popular search engines.
    Internet Marketing
    Internet Marketing is one of the most effective advertising tools on the Internet. Its uniqueness lies in an integrated approach to promote the site. Vital Webmaster, LLC provides a comprehensive Internet marketing services for the website promotion.
    Website Design for eCommerce
    Whether you are starting a new business or continue doing your existing business, Vital Webmaster, LLC can provide eCommerce solutions for you.
    Creation of Logos for the Website
    Logo is not only a mark on the page of a site but is the first commercial brand of the company, where the shape and the font, color, and image have their exceptional value and transmit certain information to the consumer. Vital Webmaster, LLC has experience in creating logos and corporate identity.

    Archives

    • March 2016 (1)
    • February 2016 (1)
    • May 2015 (1)
    • April 2015 (1)
    • March 2015 (5)
    • February 2015 (2)
    • January 2015 (3)
    • December 2014 (3)
    • November 2014 (3)
    • October 2014 (3)
    • September 2014 (6)
    • August 2014 (20)
    • August 2013 (2)
    • May 2013 (1)
    • November 2012 (1)
    • March 2012 (1)

    Archives

    • March 2016 (1)
    • February 2016 (1)
    • May 2015 (1)
    • April 2015 (1)
    • March 2015 (5)
    • February 2015 (2)
    • January 2015 (3)
    • December 2014 (3)
    • November 2014 (3)
    • October 2014 (3)
    • September 2014 (6)
    • August 2014 (20)
    • August 2013 (2)
    • May 2013 (1)
    • November 2012 (1)
    • March 2012 (1)

    Contact Details

    Vital Webmaster, LLC.vitaly
    Attn: Vitaly
    1174 W 230 S
    Orem, Utah 84058

    This e-mail address is being protected from spam bots, you need JavaScript enabled to view it
    P: (801) 214-8104