Skip to content

Instantly share code, notes, and snippets.

@guilsa

guilsa/0_readme.md

Last active February 14, 2024 10:24
Show Gist options
  • Save guilsa/391a75dc49dfa67ed66470f83501e5dd to your computer and use it in GitHub Desktop.
Save guilsa/391a75dc49dfa67ed66470f83501e5dd to your computer and use it in GitHub Desktop.
Download ZIP
Steps for implementing Bower, RequireJS and Knockout
Raw
0_readme.md

##Purpose

To learn basic configuration of RequireJS and require.config.

##Why RequireJS

RequireJS is useful for building modularized enterprise JavaScript applications.

  • we no longer have to control file loading, RequireJS does it elegantly for us
  • creation of modules (even though ES6 provides module loading, RequireJS came prior and is very stable)
  • lazy loading of app resources makes enterprise apps lightweight (incrementally loading things as needed)

##Project structure setup

  • npm install bower
  • bower init
  • touch .bowerrc (then open it and add this)
  • bower install requirejs --save
  • touch index.html
  • mkdir js && cd js
  • touch main.js
  • mkdir modules
  • cd ..

How that should look like:

├── bower.json
├── index.html
└── js
    ├── libs
    │   └── requirejs
    │       ├── LICENSE
    │       ├── README.md
    │       ├── bower.json
    │       └── require.js
    ├── main.js
    └── modules

##Implementing KnockoutJS

  • bower install knockout.js --save
  • cd js
  • touch app.js (then open it and add this)
  • add Knockout's data binding attributes to our view index.html like this
  • tell RequireJS about our modules locations (knockout, app, etc) - see step4_main.js below
Raw
step1_index.html
<!--
(Step 1)
Set up RequireJS for file loading
-->
<script src="js/libs/requirejs/require.js"
data-main="js/main"
type="text/javascript"></script>
<!-- so this file should look like the following -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/libs/requirejs/require.js"
data-main="js/main"
type="text/javascript"></script>
</head>
<body>
</body>
</html>
Raw
step2_b_app.js
// (Step 2) continued
// Wrap call to libraries like Knockout in a "require block"
define(['knockout'], function (ko) {
return function app() {
this.firstName = ko.observable('Elaine');
this.capitalizeFirstName = function() {
var currentVal = this.firstName();
return this.firstName(currentVal.toUpperCase());
};
}
})
Raw
step2_main.js
// (Step 2)
// Wrap main js file in a "require block" (step 2 of implementing RequireJS)
// where knockout and app are modules we have
require(['knockout', 'app'], function (ko, appViewModel) {
ko.applyBindings(new appViewModel());
})
// where buyer is perhaps another module we have
require(['buyer'], function (buyer) {
name = 'John Smith';
console.log(name + " enters the system");
var result = buyer.buyThing(name);
console.log("sale success " + result);
});
Raw
step3_buyer.js
// (Step 3)
// Wrap any js modules into a "define block" (step 3 of implementing RequireJS)
// here our example is a random `buyer` module
// /js/modules/buyer.js
define(function () {
return{
/**
* Buyer for obtaining Thing
* for an authenticated name.
* @param {type} name
* @returns {undefined}
*/
buyThing: function (name) {
console.log(name + " is trying to buy");
return true;
}
};
});
Raw
step4_main.js
// (Step 4)
// ... continues from the same main.js from step 2
// Tell RequireJS where our modules are located (step 4 of implementing RequireJS)
require.config({
baseUrl: './',
paths: {
knockout: 'js/libs/knockout/knockout',
app: 'js/app',
buyer: 'js/modules/buyer'
},
waitSeconds: 2
});
// so this file should look like the following
require.config({
baseUrl: './',
paths: {
knockout: 'js/libs/knockout/knockout',
app: 'js/app',
buyer: 'js/modules/buyer'
},
waitSeconds: 2
});
require(['knockout', 'app'], function (ko, appViewModel) {
ko.applyBindings(new appViewModel());
})
require(['buyer'], function (buyer) {
name = 'John Smith';
console.log(name + " enters the system");
var result = buyer.buyThing(name);
console.log("sale success " + result);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment