{"id":48333,"date":"2013-03-01T13:27:42","date_gmt":"2013-03-01T10:27:42","guid":{"rendered":"https:\/\/www.altoros.com\/blog\/?p=48333"},"modified":"2020-10-27T11:01:39","modified_gmt":"2020-10-27T08:01:39","slug":"commonjs-for-rails","status":"publish","type":"post","link":"https:\/\/www.altoros.com\/blog\/commonjs-for-rails\/","title":{"rendered":"CommonJS for Ruby on Rails"},"content":{"rendered":"<p>This blog post is for those who feel that <a href=\"https:\/\/github.com\/sstephenson\/sprockets\" rel=\"noopener noreferrer\" target=\"_blank\">Sprockets<\/a> is not enough to structure the JavaScript code in a Ruby-on-Rails app. If you\u2019re not satisfied with the <code style=\"color: black; background-color: #e6e6e6;\">#= require<\/code> and <code style=\"color: black; background-color: #e6e6e6;\">window.Global<\/code> mess, come under the cut.<\/p>\n<p>&nbsp;<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-transparent ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.altoros.com\/blog\/commonjs-for-rails\/#Alternatives_at_hand\" >Alternatives at hand<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.altoros.com\/blog\/commonjs-for-rails\/#CommonJS_by_Alex_MacCaw\" >CommonJS by Alex MacCaw<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.altoros.com\/blog\/commonjs-for-rails\/#Starting_with_CommonJS\" >Starting with CommonJS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.altoros.com\/blog\/commonjs-for-rails\/#Further_reading\" >Further reading<\/a><\/li><\/ul><\/nav><\/div>\n<h3><span class=\"ez-toc-section\" id=\"Alternatives_at_hand\"><\/span>Alternatives at hand<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>As you might suggest, the JavaScript community knows a lot about structuring large apps. Here\u2019s a great <a href=\"https:\/\/addyosmani.com\/writing-modular-js\/\" rel=\"noopener noreferrer\" target=\"_blank\">overview<\/a> of what the community can offer. In two words, the main practical alternatives are <a href=\"https:\/\/en.wikipedia.org\/wiki\/CommonJS\" rel=\"noopener noreferrer\" target=\"_blank\">CommonJS<\/a> and <a href=\"https:\/\/en.wikipedia.org\/wiki\/Asynchronous_module_definition\" rel=\"noopener noreferrer\" target=\"_blank\">asynchronous module definition<\/a> (AMD). Instead of considering the pros and cons of each approach, we\u2019ll focus on CommonJS. It\u2019s very simple and a solution of choice for Node.js, by the way.<\/p>\n<p>If you\u2019d like to know other people\u2019s opinion, explore the <a href=\"https:\/\/tomdale.net\/2012\/01\/amd-is-not-the-answer\/\" rel=\"noopener noreferrer\" target=\"_blank\">limitations of the AMD approach<\/a> and learn about <a href=\"https:\/\/blog.millermedeiros.com\/amd-is-better-for-the-web-than-commonjs-modules\/\" rel=\"noopener noreferrer\" target=\"_blank\">AMD advantages<\/a> over CommonJS modules.<\/p>\n<p>&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"CommonJS_by_Alex_MacCaw\"><\/span>CommonJS by Alex MacCaw<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>As CommonJS is simply a <a href=\"http:\/\/www.commonjs.org\/specs\/modules\/1.0\/\" rel=\"noopener noreferrer\" target=\"_blank\">specification<\/a>, we have a bunch of different <a href=\"http:\/\/www.commonjs.org\/impl\/\" rel=\"noopener noreferrer\" target=\"_blank\">implementations<\/a>. There is also a number of Ruby-based solutions, but I\u2019ll promote one of them\u2014<a href=\"https:\/\/github.com\/maccman\/sprockets-commonjs\" rel=\"noopener noreferrer\" target=\"_blank\">sprockets-commonjs<\/a>. Yep, it\u2019s based on Sprockets, so don\u2019t forget to install it unless you are riding Ruby on Rails v3.1 or higher.<\/p>\n<p>The rest of this article is the CommonJS quick-start guide. It may be helpful if you\u2019re not satisfied with the <a href=\"https:\/\/blog.alexmaccaw.com\/sprockets-commonjs\/\" rel=\"noopener noreferrer\" target=\"_blank\">official documentation<\/a>.<\/p>\n<p>&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Starting_with_CommonJS\"><\/span>Starting with CommonJS<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Go to Gemfile and add the following command.<\/p>\n<div style=\"color: black; background-color: #e6e6e6;\">\n<div class=\"highlight\">\n<pre class=\"highlight\"><code>   gem 'sprockets-commonjs'\r\n<\/code><\/pre>\n<\/div>\n<\/div>\n<p>If you are not using Ruby on Rails v3.1 or higher, you may also need this command.<\/p>\n<div style=\"color: black; background-color: #e6e6e6;\">\n<div class=\"highlight\">\n<pre class=\"highlight\"><code>   gem 'sprockets-rails'\r\n<\/code><\/pre>\n<\/div>\n<\/div>\n<p>After that, you\u2019ll be able to create CommonJS modules instead of ordinary JavaScript files. To do that, simply prefix a file extension with <code style=\"color: black; background-color: #e6e6e6;\">module<\/code>. For example, <code style=\"color: black; background-color: #e6e6e6;\">widget.js.coffee<\/code><br \/>\nshould become <code style=\"color: black; background-color: #e6e6e6;\">widget.module.js.coffee<\/code>. Now, you get two new keywords.<\/p>\n<ol>\n<li><code style=\"color: black; background-color: #e6e6e6;\">require()<\/code> loads modules necessary for the current keyword.<\/li>\n<li><code style=\"color: black; background-color: #e6e6e6;\">module.exports<\/code> specifies what should be returned if another module will require this keyword.<\/li>\n<\/ol>\n<p>Let\u2019s assume we have our <code style=\"color: black; background-color: #e6e6e6;\">widget.module.js.coffee<\/code> file inside of <code style=\"color: black; background-color: #e6e6e6;\">app\/assets\/javascripts\/modules\/<\/code>.<\/p>\n<figure class=\"highlight\">\n<pre><code class=\"language-javascript\" data-lang=\"javascript\"><span class=\"kd\">class<\/span> <span class=\"nx\">Widget<\/span>\r\n  <span class=\"nx\">draw<\/span><span class=\"p\">:<\/span> <span class=\"o\">-&gt;<\/span>\r\n    <span class=\"p\">...<\/span>\r\n\r\n<span class=\"nx\">module<\/span><span class=\"p\">.<\/span><span class=\"nx\">exports<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">Widget<\/span><\/code><\/pre>\n<\/figure>\n<p>To use it in another module (for example, <code style=\"color: black; background-color: #e6e6e6;\">\/modules\/specific\/window.module.js.coffee<\/code>),<br \/>\nwe just need to use the following command.<\/p>\n<figure class=\"highlight\">\n<pre><code class=\"language-javascript\" data-lang=\"javascript\"><span class=\"nx\">Widget<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">require<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">..\/widget<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span>\r\n\r\n<span class=\"kd\">class<\/span> <span class=\"nx\">Window<\/span> <span class=\"kd\">extends<\/span> <span class=\"nx\">Widget<\/span>\r\n  <span class=\"nx\">draw<\/span><span class=\"p\">:<\/span> <span class=\"o\">-&gt;<\/span>\r\n    <span class=\"k\">super<\/span>\r\n    <span class=\"p\">...<\/span>\r\n\r\n<span class=\"nx\">module<\/span><span class=\"p\">.<\/span><span class=\"nx\">exports<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">Window<\/span><\/code><\/pre>\n<\/figure>\n<p>We can also use a dot.<\/p>\n<figure class=\"highlight\">\n<pre><code class=\"language-javascript\" data-lang=\"javascript\"><span class=\"nx\">require<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">.\/..\/widget<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span><\/code><\/pre>\n<\/figure>\n<p>An absolute path can be used, as well.<\/p>\n<figure class=\"highlight\">\n<pre><code class=\"language-javascript\" data-lang=\"javascript\"><span class=\"nx\">require<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">modules\/widget<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span><\/code><\/pre>\n<\/figure>\n<p>The <code style=\"color: black; background-color: #e6e6e6;\">module<\/code> extension wraps your code with this command.<\/p>\n<figure class=\"highlight\">\n<pre><code class=\"language-javascript\" data-lang=\"javascript\"><span class=\"nx\">require<\/span><span class=\"p\">.<\/span><span class=\"nx\">define<\/span><span class=\"p\">({<\/span><span class=\"dl\">'<\/span><span class=\"s1\">path\/to\/module<\/span><span class=\"dl\">'<\/span><span class=\"p\">:<\/span> <span class=\"kd\">function<\/span><span class=\"p\">(<\/span><span class=\"nx\">exports<\/span><span class=\"p\">,<\/span> <span class=\"nx\">require<\/span><span class=\"p\">,<\/span> <span class=\"nx\">module<\/span><span class=\"p\">){<\/span> <span class=\"cm\">\/* your code *\/<\/span> <span class=\"p\">}});<\/span><\/code><\/pre>\n<\/figure>\n<p>This callback is executed only if the module is required somewhere. That\u2019s why you can no longer worry about the correct <code style=\"color: black; background-color: #e6e6e6;\">#= require<\/code> chain. A single <code style=\"color: black; background-color: #e6e6e6;\">#= require_tree .\/modules<\/code> in <code style=\"color: black; background-color: #e6e6e6;\">application.js<\/code> would be enough.<\/p>\n<p><code style=\"color: black; background-color: #e6e6e6;\">require<\/code> is the only global variable exposed by <code style=\"color: black; background-color: #e6e6e6;\">sprockets-commonjs<\/code>. Except the module definition, it also allows for requiring modules from non-modules. In this case, don\u2019t forget about the <code style=\"color: black; background-color: #e6e6e6;\">#= require<\/code> precedence.<\/p>\n<p>&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Further_reading\"><\/span>Further reading<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li><a href=\"https:\/\/www.altoros.com\/blog\/2-days-with-solr-or-25x-speed-up-of-reindex\/\" rel=\"noopener noreferrer\" target=\"_blank\">Two Days with Solr, or 25x Speed Up of Reindexing<\/a><\/li>\n<li><a href=\"https:\/\/www.altoros.com\/blog\/why-should-startups-investors-and-developers-care-about-ruby-on-rails\/\" rel=\"noopener noreferrer\" target=\"_blank\">Why Should Startups, Investors, and Developers Care About Ruby on Rails?<\/a><\/li>\n<li><a href=\"https:\/\/www.altoros.com\/blog\/la-ruby-conference-where-is-my-scalable-api\/#more-2715\" rel=\"noopener noreferrer\" target=\"_blank\">LA Ruby Conference: Where Is My Scalable API?<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>How to structure your Rails&#8217; JS even more with sprockets-commonjs ruby gem<\/p>\n","protected":false},"author":63,"featured_media":58266,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"content-type":"","footnotes":"","_links_to":"","_links_to_target":""},"categories":[214],"tags":[1000,895],"class_list":["post-48333","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-github","tag-research-and-development"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>CommonJS for Ruby on Rails | Altoros<\/title>\n<meta name=\"description\" content=\"Learn how to structure your JavaScript code in a Ruby-on-Rails app using Sprockets.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.altoros.com\/blog\/commonjs-for-rails\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CommonJS for Ruby on Rails | Altoros\" \/>\n<meta property=\"og:description\" content=\"How to structure your Rails&#039; JS even more with sprockets-commonjs ruby gem\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.altoros.com\/blog\/commonjs-for-rails\/\" \/>\n<meta property=\"og:site_name\" content=\"Altoros\" \/>\n<meta property=\"article:published_time\" content=\"2013-03-01T10:27:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-10-27T08:01:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.altoros.com\/blog\/wp-content\/uploads\/2013\/03\/commonjs-for-ruby-on-rails.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"576\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Eugene Okhrimenko\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Eugene Okhrimenko\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.altoros.com\\\/blog\\\/commonjs-for-rails\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.altoros.com\\\/blog\\\/commonjs-for-rails\\\/\"},\"author\":{\"name\":\"Eugene Okhrimenko\",\"@id\":\"https:\\\/\\\/www.altoros.com\\\/blog\\\/#\\\/schema\\\/person\\\/cf846b97d6582c98cafbb2e34cfc2159\"},\"headline\":\"CommonJS for Ruby on Rails\",\"datePublished\":\"2013-03-01T10:27:42+00:00\",\"dateModified\":\"2020-10-27T08:01:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.altoros.com\\\/blog\\\/commonjs-for-rails\\\/\"},\"wordCount\":436,\"commentCount\":3,\"image\":{\"@id\":\"https:\\\/\\\/www.altoros.com\\\/blog\\\/commonjs-for-rails\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.altoros.com\\\/blog\\\/wp-content\\\/uploads\\\/2013\\\/03\\\/commonjs-for-ruby-on-rails.png\",\"keywords\":[\"GitHub\",\"Research and Development\"],\"articleSection\":[\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.altoros.com\\\/blog\\\/commonjs-for-rails\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.altoros.com\\\/blog\\\/commonjs-for-rails\\\/\",\"url\":\"https:\\\/\\\/www.altoros.com\\\/blog\\\/commonjs-for-rails\\\/\",\"name\":\"CommonJS for Ruby on Rails | Altoros\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.altoros.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.altoros.com\\\/blog\\\/commonjs-for-rails\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.altoros.com\\\/blog\\\/commonjs-for-rails\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.altoros.com\\\/blog\\\/wp-content\\\/uploads\\\/2013\\\/03\\\/commonjs-for-ruby-on-rails.png\",\"datePublished\":\"2013-03-01T10:27:42+00:00\",\"dateModified\":\"2020-10-27T08:01:39+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.altoros.com\\\/blog\\\/#\\\/schema\\\/person\\\/cf846b97d6582c98cafbb2e34cfc2159\"},\"description\":\"How to structure your Rails' JS even more with sprockets-commonjs ruby gem\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.altoros.com\\\/blog\\\/commonjs-for-rails\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.altoros.com\\\/blog\\\/commonjs-for-rails\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.altoros.com\\\/blog\\\/commonjs-for-rails\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.altoros.com\\\/blog\\\/wp-content\\\/uploads\\\/2013\\\/03\\\/commonjs-for-ruby-on-rails.png\",\"contentUrl\":\"https:\\\/\\\/www.altoros.com\\\/blog\\\/wp-content\\\/uploads\\\/2013\\\/03\\\/commonjs-for-ruby-on-rails.png\",\"width\":1024,\"height\":576},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.altoros.com\\\/blog\\\/commonjs-for-rails\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.altoros.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CommonJS for Ruby on Rails\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.altoros.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.altoros.com\\\/blog\\\/\",\"name\":\"Altoros\",\"description\":\"Insight\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.altoros.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.altoros.com\\\/blog\\\/#\\\/schema\\\/person\\\/cf846b97d6582c98cafbb2e34cfc2159\",\"name\":\"Eugene Okhrimenko\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.altoros.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/11\\\/evgeny-ohrimenko1.png\",\"url\":\"https:\\\/\\\/www.altoros.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/11\\\/evgeny-ohrimenko1.png\",\"contentUrl\":\"https:\\\/\\\/www.altoros.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/11\\\/evgeny-ohrimenko1.png\",\"caption\":\"Eugene Okhrimenko\"},\"description\":\"Eugene Okhrimenko is a skilled Ruby Developer with proven expertise in designing robust, scalable, and secure systems. He is able to contribute to all the phases of the development life cycle. Eugene is knowledgeable about relational databases and has a good understanding of cloud technologies.\",\"url\":\"https:\\\/\\\/www.altoros.com\\\/blog\\\/author\\\/evgeny-ohrimenko\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CommonJS for Ruby on Rails | Altoros","description":"Learn how to structure your JavaScript code in a Ruby-on-Rails app using Sprockets.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.altoros.com\/blog\/commonjs-for-rails\/","og_locale":"en_US","og_type":"article","og_title":"CommonJS for Ruby on Rails | Altoros","og_description":"How to structure your Rails' JS even more with sprockets-commonjs ruby gem","og_url":"https:\/\/www.altoros.com\/blog\/commonjs-for-rails\/","og_site_name":"Altoros","article_published_time":"2013-03-01T10:27:42+00:00","article_modified_time":"2020-10-27T08:01:39+00:00","og_image":[{"width":1024,"height":576,"url":"https:\/\/www.altoros.com\/blog\/wp-content\/uploads\/2013\/03\/commonjs-for-ruby-on-rails.png","type":"image\/png"}],"author":"Eugene Okhrimenko","twitter_misc":{"Written by":"Eugene Okhrimenko","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.altoros.com\/blog\/commonjs-for-rails\/#article","isPartOf":{"@id":"https:\/\/www.altoros.com\/blog\/commonjs-for-rails\/"},"author":{"name":"Eugene Okhrimenko","@id":"https:\/\/www.altoros.com\/blog\/#\/schema\/person\/cf846b97d6582c98cafbb2e34cfc2159"},"headline":"CommonJS for Ruby on Rails","datePublished":"2013-03-01T10:27:42+00:00","dateModified":"2020-10-27T08:01:39+00:00","mainEntityOfPage":{"@id":"https:\/\/www.altoros.com\/blog\/commonjs-for-rails\/"},"wordCount":436,"commentCount":3,"image":{"@id":"https:\/\/www.altoros.com\/blog\/commonjs-for-rails\/#primaryimage"},"thumbnailUrl":"https:\/\/www.altoros.com\/blog\/wp-content\/uploads\/2013\/03\/commonjs-for-ruby-on-rails.png","keywords":["GitHub","Research and Development"],"articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.altoros.com\/blog\/commonjs-for-rails\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.altoros.com\/blog\/commonjs-for-rails\/","url":"https:\/\/www.altoros.com\/blog\/commonjs-for-rails\/","name":"CommonJS for Ruby on Rails | Altoros","isPartOf":{"@id":"https:\/\/www.altoros.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.altoros.com\/blog\/commonjs-for-rails\/#primaryimage"},"image":{"@id":"https:\/\/www.altoros.com\/blog\/commonjs-for-rails\/#primaryimage"},"thumbnailUrl":"https:\/\/www.altoros.com\/blog\/wp-content\/uploads\/2013\/03\/commonjs-for-ruby-on-rails.png","datePublished":"2013-03-01T10:27:42+00:00","dateModified":"2020-10-27T08:01:39+00:00","author":{"@id":"https:\/\/www.altoros.com\/blog\/#\/schema\/person\/cf846b97d6582c98cafbb2e34cfc2159"},"description":"How to structure your Rails' JS even more with sprockets-commonjs ruby gem","breadcrumb":{"@id":"https:\/\/www.altoros.com\/blog\/commonjs-for-rails\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.altoros.com\/blog\/commonjs-for-rails\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.altoros.com\/blog\/commonjs-for-rails\/#primaryimage","url":"https:\/\/www.altoros.com\/blog\/wp-content\/uploads\/2013\/03\/commonjs-for-ruby-on-rails.png","contentUrl":"https:\/\/www.altoros.com\/blog\/wp-content\/uploads\/2013\/03\/commonjs-for-ruby-on-rails.png","width":1024,"height":576},{"@type":"BreadcrumbList","@id":"https:\/\/www.altoros.com\/blog\/commonjs-for-rails\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.altoros.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CommonJS for Ruby on Rails"}]},{"@type":"WebSite","@id":"https:\/\/www.altoros.com\/blog\/#website","url":"https:\/\/www.altoros.com\/blog\/","name":"Altoros","description":"Insight","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.altoros.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.altoros.com\/blog\/#\/schema\/person\/cf846b97d6582c98cafbb2e34cfc2159","name":"Eugene Okhrimenko","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.altoros.com\/blog\/wp-content\/uploads\/2018\/11\/evgeny-ohrimenko1.png","url":"https:\/\/www.altoros.com\/blog\/wp-content\/uploads\/2018\/11\/evgeny-ohrimenko1.png","contentUrl":"https:\/\/www.altoros.com\/blog\/wp-content\/uploads\/2018\/11\/evgeny-ohrimenko1.png","caption":"Eugene Okhrimenko"},"description":"Eugene Okhrimenko is a skilled Ruby Developer with proven expertise in designing robust, scalable, and secure systems. He is able to contribute to all the phases of the development life cycle. Eugene is knowledgeable about relational databases and has a good understanding of cloud technologies.","url":"https:\/\/www.altoros.com\/blog\/author\/evgeny-ohrimenko\/"}]}},"_links":{"self":[{"href":"https:\/\/www.altoros.com\/blog\/wp-json\/wp\/v2\/posts\/48333","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.altoros.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.altoros.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.altoros.com\/blog\/wp-json\/wp\/v2\/users\/63"}],"replies":[{"embeddable":true,"href":"https:\/\/www.altoros.com\/blog\/wp-json\/wp\/v2\/comments?post=48333"}],"version-history":[{"count":11,"href":"https:\/\/www.altoros.com\/blog\/wp-json\/wp\/v2\/posts\/48333\/revisions"}],"predecessor-version":[{"id":58275,"href":"https:\/\/www.altoros.com\/blog\/wp-json\/wp\/v2\/posts\/48333\/revisions\/58275"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.altoros.com\/blog\/wp-json\/wp\/v2\/media\/58266"}],"wp:attachment":[{"href":"https:\/\/www.altoros.com\/blog\/wp-json\/wp\/v2\/media?parent=48333"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.altoros.com\/blog\/wp-json\/wp\/v2\/categories?post=48333"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.altoros.com\/blog\/wp-json\/wp\/v2\/tags?post=48333"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}