{"action":"created","issue":{"url":"https://api.github.com/repos/edx/ux-pattern-library/issues/108","labels_url":"https://api.github.com/repos/edx/ux-pattern-library/issues/108/labels{/name}","comments_url":"https://api.github.com/repos/edx/ux-pattern-library/issues/108/comments","events_url":"https://api.github.com/repos/edx/ux-pattern-library/issues/108/events","html_url":"https://github.com/edx/ux-pattern-library/pull/108","id":92082297,"number":108,"title":"Adding RequireJS","user":{"login":"clrux","id":2112024,"avatar_url":"https://avatars.githubusercontent.com/u/2112024?v=3","gravatar_id":"","url":"https://api.github.com/users/clrux","html_url":"https://github.com/clrux","followers_url":"https://api.github.com/users/clrux/followers","following_url":"https://api.github.com/users/clrux/following{/other_user}","gists_url":"https://api.github.com/users/clrux/gists{/gist_id}","starred_url":"https://api.github.com/users/clrux/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/clrux/subscriptions","organizations_url":"https://api.github.com/users/clrux/orgs","repos_url":"https://api.github.com/users/clrux/repos","events_url":"https://api.github.com/users/clrux/events{/privacy}","received_events_url":"https://api.github.com/users/clrux/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":4,"created_at":"2015-06-30T12:41:53Z","updated_at":"2015-07-02T15:24:28Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/edx/ux-pattern-library/pulls/108","html_url":"https://github.com/edx/ux-pattern-library/pull/108","diff_url":"https://github.com/edx/ux-pattern-library/pull/108.diff","patch_url":"https://github.com/edx/ux-pattern-library/pull/108.patch"},"body":"# Adding RequireJS to the Pattern Library\r\n\r\nThis large piece of work brings in [RequireJS](http://requirejs.org) and modifies existing JavaScript files to be loaded through it. Additionally, it does some significant refactoring and clean up including:\r\n* removing the concatenation and renaming process from the `gulp` workflow\r\n* modularizing the `ui.js` script which was previously loose functions\r\n* breaking out the `Tabs` function into its own file\r\n\r\n---\r\n\r\n## Using RequireJS\r\nRequireJS works by `require`(ing) immediately needed files, and then in each subsequently loaded file, `define`(ing) dependencies for each respective file.\r\n\r\nThis allows us to specify on a per-file basis, the requirements and dependencies for given JS files. For example, in `assets-secondary.html` rather than including the pattern library JS and the documentation site JS, we simply point to RequireJS and give it a `data` file to load (the required files).\r\n\r\nIn `required.js`, we define those files that need to load up-front (required) and then any dependencies.\r\n\r\nIn subsequent files that are loaded, __those__ files in turn have their own sets of required files and dependencies. Files are loaded on an as-needed basis, rather than all at once, ultimately saving download overhead, speeding up the site in general, and giving us control over which files are used where.\r\n\r\n### Concatenation and minification\r\n\r\nSince we need to load each file individually, we can no longer concatenate all of the JS files into single, minified versions. We can still minify them individually though. Instead of bundling all of the files together and minifying them, we're only loading the JS files as they're needed, using their minified versions.\r\n\r\n### Immediate load\r\nIn the `assets-secondary.html` included partial, RequireJS is being loaded as the _only_ JS file as so:\r\n```\r\n<script data-main=\"{{ site.baseurl }}public/pldoc/js/required.js\" src=\"{{ site.baseurl }}public/js/require.js\"></script>\r\n```\r\n\r\nI've also included here a `data-main` attribute which points to the file handler that we want to load when the site loads. So in this case `required.js` defines all of the subsequent files that we want to call.\r\n\r\n### Dependencies\r\nTo call a script, we use the following:\r\n```\r\ndefine([\"path/to/file\"], function(callsign) {});\r\n```\r\n\r\nNote that you should omit the `.js` extension as RequireJS assumes it. The `callsign` is a handle (or nickname?) for the file you're loading. You can then reference that file via that handle.\r\n\r\n---\r\n\r\n__Reviewers:__\r\n- [x] @talbs for overall cleanliness and functionality; make sure things work as expected\r\n- [x] @AlasdairSwan for RequireJS work and assistance"},"comment":{"url":"https://api.github.com/repos/edx/ux-pattern-library/issues/comments/118067365","html_url":"https://github.com/edx/ux-pattern-library/pull/108#issuecomment-118067365","issue_url":"https://api.github.com/repos/edx/ux-pattern-library/issues/108","id":118067365,"user":{"login":"AlasdairSwan","id":2052185,"avatar_url":"https://avatars.githubusercontent.com/u/2052185?v=3","gravatar_id":"","url":"https://api.github.com/users/AlasdairSwan","html_url":"https://github.com/AlasdairSwan","followers_url":"https://api.github.com/users/AlasdairSwan/followers","following_url":"https://api.github.com/users/AlasdairSwan/following{/other_user}","gists_url":"https://api.github.com/users/AlasdairSwan/gists{/gist_id}","starred_url":"https://api.github.com/users/AlasdairSwan/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/AlasdairSwan/subscriptions","organizations_url":"https://api.github.com/users/AlasdairSwan/orgs","repos_url":"https://api.github.com/users/AlasdairSwan/repos","events_url":"https://api.github.com/users/AlasdairSwan/events{/privacy}","received_events_url":"https://api.github.com/users/AlasdairSwan/received_events","type":"User","site_admin":false},"created_at":"2015-07-02T15:24:28Z","updated_at":"2015-07-02T15:24:28Z","body":"@clrux I reviewed and there are 3 files that need minor changes. Also, a note on consistency. For passed in events you sometimes use 'e' and sometimes 'event', for ease of reading could you please always use the full 'event' variables. When assigning jQuery object to variables it would be good if you could always prefix the var with $.\r\n\r\nOnce these changes are made we are good to go :+1: "}}