mathdoodle/README.md

## README.md

      
    Raw
  

              README.md
            
          
    The Practical Minimum

Abstract

This brief example demonstrates some Best Practices for developing your programs:

Modularity,
Documentation, and
Unit Testing.

It also explains how the various files work together.
For information on specific libraries, e.g. WebGL Graphics and Geometric Algebra, please see the examples and consult the links in the Properties menu.
Modularity

It is extremely beneficial to be able to split your application or library into multiple files, each with a cohesive purpose. Up until recently, re-assembling them in JavaScript was error prone because of the need to manually manage file dependencies. But no more! The ES6 modules specification allows you to easily describe the dependencies between the modules that comprise your application so that the system-wide module loader, System can load them strictly according to their dependencies.
Documentaion

Documentation of your software can take many forms. STEMCstudio supports the Markdown format making it easy to create application- or library-level documentation. The contents of the README.md file, transpiled to HTML, are displayed while your application is not running. The README.md file is also a prominent artifact in GitHub.
Unit Testing

Unit Testing is supported using Jasmine.
How It Works

index.html

You may define many views in one project, but this file is recognized by name as the default view.
Your ES6 modules are inserted at the // CODE-MARKER.
Importing your top-level module, e.g. index.js using
System.import('./index.js')

will begin the execution of your program.
The System module loader will manage dependencies for you through import and export statements.
index.ts

Notice how it imports its dependencies and how they are exported from other files.
style.css

The contents of this file are inserted into index.html at the /* STYLE-MARKER */.
Dependencies

External dependencies are defined using the Properties menu and are included as <script> elements at the <!--- SCRIPTS-MARKER -->.
You may add other external dependencies directly to the index.html file.
README.md

Refer to the README.md file to see how the following HTML was created.
#h1
##h2
###h3
####h4
emphasis
bold
code

MathJax: \[\nabla M \ne 0\]
Copyright (c) 2016 David Geo Holmes.

  
## index.html
<!DOCTYPE html>
<html>
  <head>
    <!-- STYLES-MARKER -->
    <style>
    /* STYLE-MARKER */
    </style>
    <script src='https://jspm.io/system.js'></script>
    <!-- SCRIPTS-MARKER -->
  </head>
  <body>
    <script>
    // CODE-MARKER
    </script>
    <script>
        System.import('./index.js')
    </script>
  </body>
</html>

## index.ts
console.log("Is this thing working?")

## package.json
{
  "name": "the-practical-minimum",
  "version": "0.1.0",
  "description": "The Practical Minimum",
  "dependencies": {},
  "operatorOverloading": false,
  "keywords": [
    "Getting Started",
    "Best Practices",
    "Minimum",
    "Practical",
    "Tutorial",
    "Modularity",
    "Computer Science"
  ],
  "author": "David Geo Holmes"
}

## style.css
body {
    background-color: yellow;
}
	<!DOCTYPE html>
	<html>
	<head>
	<!-- STYLES-MARKER -->
	<style>
	/* STYLE-MARKER */
	</style>
	<script src='https://jspm.io/system.js'></script>
	<!-- SCRIPTS-MARKER -->
	</head>
	<body>
	<script>
	// CODE-MARKER
	</script>
	<script>
	System.import('./index.js')
	</script>
	</body>
	</html>
	{
	"name": "the-practical-minimum",
	"version": "0.1.0",
	"description": "The Practical Minimum",
	"dependencies": {},
	"operatorOverloading": false,
	"keywords": [
	"Getting Started",
	"Best Practices",
	"Minimum",
	"Practical",
	"Tutorial",
	"Modularity",
	"Computer Science"
	],
	"author": "David Geo Holmes"
	}