Become A CoccyxJS MVC Ninja – A Series Of CoccyxJS Mini Tutorials

coccyxjs_ninjaWhen learning how to use a new library there is nothing better than “hands on” experience. So in a series of mini tutorials I will teach you how easy it is to become a master at writing Web applications using CoccyJS. Each mini tutorial will be short and to the point and will be limited in focus to one or two aspects of CoccyxJS.

But before we actually begin with the mini tutorials we will need to create a simple project structure and install http-server (a simple command line server which we will use to serve static content).

Please follow the instructions below which will explain how to create the project structure which will be used throughout the series.

Project Structure

To begin, lets create a root project folder that we will use to contain the files for the mini tutorials. You can name it anything you like.

Once you have created the root project folder create the same project structure as pictured below. Please note that you do not have to create the javascripts/tutorial01.js file now. We will create that file together in the first mini tutorial.

projectstructure

With our project structure now in place, we need to add some JavaScript files to the javascripts folder.

Core JavaScript Library Files

Download CoccyxJS and save it to a file named coccyx.js in the javascripts/libs folder.

Download jQuery and save it to a file named jquery.js in the javascripts/libs folder.

Create a new file in /javascripts/libs and name it shim.js. Then paste the code below into it and save the file.

(function(){
    'use strict';
    window.define =  function define(){
        (arguments[arguments.length - 1])();
    };
}());

index.html

Create a new file in your root project folder and name it index.html. Then paste the markup below into it and save the file.

<!DOCTYPE html>
<html>
<head>
    <title>CoccyxJS Mini Tutorial Series</title>
</head>
<body>
    <h1>CoccyxJS Mini Tutorial Series</h1>
    <d id="container"></d>
    <!-- JavaScripts -->
    <script src="javascripts/libs/jquery.js"></script>
    <!-- Shim file has to be loaded before coccyx.js is loaded!!! -->
    <script src="javascripts/libs/shim.js"></script>
    <script src="javascripts/libs/coccyx.js"></script>
    <script src="javascripts/tutorial01.js"></script>
</body>
</html>

http-server

http-server is a simple command line http server that we will use. Please visit https://npmjs.org/package/http-server and follow the instructions there for installing http-server.

Reference Materials

Please take the opportunity now to read the Guide and scan through the API Reference. They will provide context that will be very helpful as we work through each mini tutorial and you can refer back to them at any time.

With our project structure now in place and http-server installed we are ready to begin with our very first mini tutorial.

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