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.
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.
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 is supported using Jasmine.
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.
Notice how it import
s its dependencies and how they are export
ed from other files.
The contents of this file are inserted into index.html at the /* STYLE-MARKER */
.
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.
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.
Is this thing working?