guilsa/0_readme.md

## 0_readme.md

      
    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


## 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>

## 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());
      };
  }
})

## 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);
});

## 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;
        }
    };
});

## 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);
});
	<!--
	(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>
	// (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());
	};
	}
	})
	// (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);
	});
	// (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;
	}
	};
	});
	// (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);
	});