55 lines
2.0 KiB
HTML
55 lines
2.0 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
<title>App</title>
|
|
<link rel="stylesheet" href="./3rdparty/highlight/styles/default.css">
|
|
<link rel="stylesheet" href="../css/doctest.css">
|
|
<script src="./3rdparty/highlight/highlight.pack.js"></script>
|
|
<script src="../dist/iwmlib.js"></script>
|
|
<!-- <script type="text/javascript" src="interface.js"></script> -->
|
|
</head>
|
|
|
|
<body onload="Doctest.run()">
|
|
<h1>
|
|
<a href="index.html">lib.</a>Application
|
|
</h1>
|
|
<p>
|
|
IWM Browser Applications follow a common three phase pattern, shared by many programming environments as diverse as Processing, Arduino, Intern, etc.
|
|
<ul>
|
|
<li>Instantiate: Initialize the application, in this case a singleton and it's instance variables</li>
|
|
<li>Setup: Build more complex parts of the application, by loading data, creating the UI...</li>
|
|
<li>Run: Enter and run the main loop of the application.</li>
|
|
</ul>
|
|
This pattern is reflected by the IApp Interface:
|
|
</p>
|
|
<pre><code class="js">
|
|
class IApp extends Interface {
|
|
setup() { return this }
|
|
run() { return this }
|
|
}
|
|
</code></pre>
|
|
<p>In practice the pattern may be more complex, because the setup phase can only be entered after loading things, a main loop cannot be entered because requirements are not met, etc. But the basic structure is always the same:
|
|
</p>
|
|
<script type="module" class="doctest">
|
|
console.log("Innerhalb script type=module")
|
|
import App from "./app.js"
|
|
const app = new App()
|
|
app.setup()
|
|
app.run()
|
|
window.app = app
|
|
</script>
|
|
<p>The setup and run methods can also be chained:
|
|
</p>
|
|
<script type="module" class="doctest">
|
|
app.setup().run()
|
|
</script>
|
|
|
|
<h2>
|
|
References
|
|
</h2>
|
|
<ul>
|
|
<li><a href="https://theintern.github.io/intern/#common-config">Intern. Software testing for humans</a></li>
|
|
</ul>
|
|
</body> |