Releas #7 – requirejs

Posted: April 14, 2014 in Programming
Tags: , , , , , ,

Good Sunday evening! I am coming to the end of the semester and to my final release in OSD. I would say, that it was and it is a great class that opens new horizons to students and possible opportunities to their future. I am so happy that I was and I am involved with such great companies as CDOT and Mozilla.

Previous week was the hardest one for me in terms of time, all the assignment presentations and assignment deadlines were there. Also I finished reading a great Sci-Fi book “Calculating God” last Sunday.

Lets get back to my work throughout the last week.
I was working on implementation GA events to goggles – bug968291, I was continuing this bug from the week before the last week. I became a little bit harder than I excepted, but it even better. It turned out that, from this bug we started 3 more new bugs, , which I took already:

Basically, all 3 bugs related to the same problem/feature: to update goggles to use requireJS whenever its possible. Why 3 bug? Because, in this way it’s easier to stay on track.
I started to work on bug995318 (my commit with progress) and made progress on that already. The main idea of the requireJS is to optimize in browser use and it makes app more efficient and work faster.
I would provide short guide on how it works.
The tree of directories:

  • project-directory/
    • index.html
    • js/
      • main.js
      • require.js
      • browser-screen.js
      • sso-override.js
      • sub/
        • util.js
        • jquery.js

Sample index.html file

<!DOCTYPE html>
<html>
    <head>
        <title>My Project</title>
        <!-- data-main attribute tells require.js to load
             js/main.js after require.js loads. -->
        <script data-main="js/main" src="js/require.js"></script>
    </head>
    <body>
        <h1>My index.html file</h1>
        <p class="test">Some weird text here</p>
    </body>
</html>

main.js – special configuration file in requireJS

requirejs.config({
  baseDir:'/js', // this dir will be used as home for our js files
  paths: {       // do not specify file extension, it assumes that it is .js
    'jquery':           'sub/jquery',  
    'text':             '/bower/text/text',
    'localized':        '/bower/webmaker-i18n/localized',
    'languages':        '/bower/webmaker-language-picker/js/languages',
    'list':             '/bower/listjs/dist/list.min',
    'fuzzySearch':      '/bower/list.fuzzysearch.js/dist/list.fuzzysearch.min',
    'browser-screen':   'browser-screen',
    'sso-override':     'sso-override',
    'utils':            'sub/utils'
  }
});

// Now you specify which scripts will be loaded after require.js is fired in index.html
require(['browser-screen', 'sso-override', 'jquery', 'utils'],
  // you can give more instructions here
});

Now, inside one of your js file, you do the following.
utils.js

require(['jquery'], function($) {
  $(.test).text("your new text");
});

With this example, you don’t need to include jQuery script in html file. This approach is really efficient in terms of coding, speed of application and code management. Also, it is much more easier to add more functionality in the future with such application structure.

Also, during this week, I pushed to PR and merged small css bug where I had to fix the alignment in navigation area when user logged in.

I am looking forward to continue my contribution to Mozilla and CDOT 🙂 Cheers!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s