neo.mjs 6.9.10 → 6.9.12

package/resources/data/deck/training/p/2023-10-01T18-29-19-158Z.md

@@ -0,0 +1,76 @@
+Neo.mjs is a framework used to create browser-based applications.
+
+Some key features and benefits of Neo.mjs are:
+
+<div type="expander" caption="Multi-Threaded">
+<p>
+When a Neo.mjs application starts, the framework spawns three web-workers. 
+Web-workers are each run in their own thread. As a result, a typical Neo.mjs application
+has four threads:
+<ol>
+<li>The _main_ thread, where DOM updates are applied
+<li>An _application_ web-worker where normal application locic is run
+    <li>A _data_ web-worker were HTTP and socket calls are run
+<li>A _view_ web-worker that manages delta updates
+</ol>
+</div>
+
+<div type="expander" caption="Extreme Speed">
+<p>
+The Neo.mjs web-worker proccesses are automatically run in parallel, on separate CPU cores.
+</p>
+<p>
+By contrast, other JavaScript frameworks run in a single thread. That means 
+in a typical framework all business logic, data handling, and DOM rendering compete for 
+CPU reasources.
+</p>
+<p>
+This means Neo.mjs applications run and render faster. This is 
+particularly beneficial for processor- and data-intensive applications, 
+and applications that need to rapidly update what's viewed. In testing, Neo.mjs applications 
+easily apply over 20,000 DOM updates per second. 
+</p>
+<p>
+If the default four threads aren't enough, you're free to launch additional web-worker threads 
+to run other specialized logic. 
+</p>
+</div>
+
+<div type="expander" caption="Quick Application Development">
+<p>
+Neo.js classes let you specify properties in a way that allows code to detect "before" and "after"
+changes. This makes it easy to handle value validation and transformation, and react to changes. 
+</p>
+<p>
+Neo.mjs also has elegant yet powerful state management features that make it easy to create shared,
+bindable data. For example, if two components are bound to the same propery, a change to the 
+property will automatically be applied to both components.
+</p>
+</div>
+
+<div type="expander" caption="Multi-Window Applications">
+<p>
+Neo.mjs applications can also launch as _shared web workers_, which allows you to have a single 
+application run in multiple browser windows; those windows could be moved to multiple monitors.
+</p>
+<p>
+For example, you can have a data analysis application with a control panel on one monitor, 
+tabular data in another, and charts on another &mdash; all sharing the same data, handling events
+across windows, running seamlessly as a single application. 
+</p>
+</div>
+
+<div type="expander" caption="Open-Source and Standards-Based">
+<p>
+Neo.mjs is an open-source library. Features needed for the community can be added to the
+library via pull-requests. And since Neo.mjs uses the standard JavaScript class system, 
+all Neo.mjs classes can be extended.
+</p>
+<p>
+Neo.mjs uses standard modular JavaScript, so developers don't need to learn non-standard language
+syntax, and there's no need for special pre-compilers or WebPack modules.
+That means fewer dependencies and easier configuration. Furthermore, the use of
+standard JavaScript makes debugging easier: any statement you write while developing your
+applcation can also be run in the debugging console.
+</p>
+</div>

package/resources/data/deck/training/p/2023-10-07T19-18-28-517Z.md

@@ -0,0 +1,102 @@
+Neo.mjs classes are standard JavaSript classes. Every source file
+you write will be a class definition, extending some Neo.mjs
+class.
+
+<pre class="neo">
+import Base from '../../../node_modules/neo.mjs/src/core/Base.mjs';
+
+class Mammal extends Base {
+    static config = {
+        className: 'Simple.example.Mammal'
+    }
+}
+
+const myMammal = Neo.create(Mammal);
+
+Neo.applyClassConfig(Mammal); // Where Neo.mjs initialializes the class config. 
+export default Mammal;        // Makes the class available elsewhere.
+</pre>
+
+In the example above, we're extending the Neo.mjs base class. The static
+config block describes the class we're defining. 
+
+All classes specify the `className`; you'll add other config properties to describe the class.
+
+The `const myMammal = Neo.create(Mammal);` statement creates an instance of
+our class. For the sake of our discussion we're putting that statement in the same source
+file where the class is defined, but normally your code would import the class elsewhere, 
+and create instances as needed.
+
+Let's add a `name` propery to the class.
+
+<pre class="neo" style="color:gray">
+import Base from '../../../node_modules/neo.mjs/src/core/Base.mjs';
+
+class Mammal extends Base {
+    static config = {
+        className: 'Simple.example.Mammal',
+
+        <span style="color:#b91010">name: 'Anonymous'</span>
+    }
+}
+
+const myMammal = Neo.create(Mammal);
+console.log(<span style="color:#b91010">myMammal.name</span>);           // Logs "Anonymous"
+<span style="color:#b91010">myMammal.name</span> = 'Herbert';
+console.log(<span style="color:#b91010">myMammal.name</span>);           // Logs "Herbert"
+
+Neo.applyClassConfig(Mammal);
+
+export default Mammal;
+</pre>
+
+In Neo.mjs, instance properties are usually added in the `static config` block.
+The `static config` block does two things: 
+- It formally describes the properties API for your class.
+- It lets Neo.mjs manage the initialization and lifecycle of those properties.
+
+Think of the `static config` block as "these are the properties
+that can be set as instances are created." Config properties can be introduced 
+anywhere in the class hierarchy. 
+
+Since our class defines a `name` property, we can specify that when creating
+the instance, using the second argument to the `create` method. 
+
+<pre class="neo" style="color:gray">
+const myMammal = Neo.create(Mammal, <span style="color:#b91010">{
+    name: 'Creature'
+}</span>);
+console.log(myMammal.name);           // Logs "Creature"
+</pre>
+
+
+Since _you_ define those properties, you can
+look for them in class methods and use them as needed.
+Let's add a `speak()` method that uses the `name` property.
+
+<pre class="neo" style="color:gray">
+import Base from '../../../node_modules/neo.mjs/src/core/Base.mjs';
+
+class Mammal extends Base {
+    static config = {
+        className: 'Simple.example.Mammal',
+
+        name: 'Anonymous'
+    }
+    <span style="color:#b91010">speak(){
+        console.log(`${this.name} is grunting`);
+    }</span>
+}
+
+const myMammal = Neo.create(Mammal, {
+    name: 'Creature'
+});
+<span style="color:#b91010">myMammal.speak();</span>        // Logs "Creature is grunting."
+
+Neo.applyClassConfig(Mammal);
+
+export default Mammal;
+</pre>
+
+
+

package/resources/data/deck/training/p/2023-10-08T20-20-07-934Z.md

@@ -0,0 +1,75 @@
+In Neo.mjs you sub-class and override methods in the usual way. 
+
+Here, we'll extend `Mammal` and override the `speak()` method. 
+(For brevity, we'll exclude `export` and `import` statements.)
+
+<pre class="neo">
+class Mammal extends Base {
+    static config = {
+        className: 'Simple.example.Mammal',
+
+        name: 'Anonymous'
+    }
+    speak(){
+        console.log(`(${this.name} is grunting)`);
+    }
+}
+Neo.applyClassConfig(Mammal);
+</pre>
+<pre class="neo">
+class Human extends Mammal {
+    static config = {
+        className: 'Simple.example.Human',
+    }
+    speak(){
+        console.log(`Hello! My name is ${this.name}. I am ${this.married?'':'not'} married.`);
+    }
+}
+
+const myMammal = Neo.create(Human, {
+    name: 'Herbert'
+});
+myMammal.speak();        // Logs "Hello! My name is Herbert. I am not married."
+
+Neo.applyClassConfig(Mammal);
+</pre>
+
+Any class in the hierarchy is free to add new properties and methods. Let's add
+a property and behavior (method) to the Human class.
+
+<pre class="neo">
+import Base from '../../../node_modules/neo.mjs/src/core/Base.mjs';
+
+class Mammal extends Base {
+    static config = {
+        className: 'Simple.example.Mammal',
+
+        name: 'Anonymous'
+    }
+    speak(){
+        console.log(`(${this.name} is grunting)`);
+    }
+}
+</pre>
+<pre class="neo">
+class Human extends Mammal {
+    static config = {
+        className: 'Simple.example.Human',
+        name: 'J. Doe',
+        married: false
+    }
+    speak(){
+        console.log(`Hello! My name is ${this.name}. I am ${this.married?'':'not'} married.`);
+    },
+    yodel(){
+        console.log('Yodelay hee hoo!');
+    }}
+
+const myPerson = Neo.create(Human, {
+    name: 'Herbert'
+});
+myPerson.speak();        // Logs "Hello! My name is Herbert. I am not married."
+myPerson.yodel();        // Logs "Yedelay hee hoo!"
+
+Neo.applyClassConfig(Human);
+</pre>

package/resources/data/deck/training/p/2023-10-08T21-58-25-809Z.md

@@ -0,0 +1,68 @@
+To call a super-class method use the `super` keyword.
+
+<pre class="neo" style="color:gray">
+class Mammal extends Base {
+    static config = {
+        className: 'Simple.example.Mammal',
+
+        name: 'Anonymous'
+    }
+    doSomething(){
+        console.log(`${this.name} is doing something mammals do`)
+    }
+}
+Neo.applyClassConfig(Mammal);
+</pre>
+<pre class="neo" style="color:gray">
+class Human extends Mammal {
+    static config = {
+        className: 'Simple.example.Human',
+    }
+    doSomething(){
+        <span style="color:#b91010">super.doSomething();</span>
+        console.log(`${this.name} is doing something humans do`)
+    }
+}
+
+const myPerson = Neo.create(Human, {
+    name: 'Herbert'
+});
+myPerson.doSomething();
+
+Neo.applyClassConfig(Mammal);
+</pre>
+
+Sometimes you aren't sure if a super class has a method. In that case use the
+conditional chaining operator &mdash; `?.`
+
+<pre class="neo" style="color:gray">
+class Mammal extends Base {
+    static config = {
+        className: 'Simple.example.Mammal',
+
+        name: 'Anonymous'
+    }
+    doSomething(){
+        console.log(`${this.name} is doing something mammals do`)
+    }
+}
+Neo.applyClassConfig(Mammal);
+</pre>
+<pre class="neo" style="color:gray">
+class Human extends Mammal {
+    static config = {
+        className: 'Simple.example.Human',
+    }
+    doSomething(){
+        <span style="color:#b91010">super?.doSomething();</span>
+        console.log(`${this.name} is doing something humans do`)
+    }
+}
+
+const myPerson = Neo.create(Human, {
+    name: 'Herbert'
+});
+myPerson.doSomething();
+
+Neo.applyClassConfig(Mammal);
+</pre>

package/resources/data/deck/training/p/2023-10-14T19-25-08-153Z.md

@@ -0,0 +1,119 @@
+If you haven't already done it, run `npx neo-app` to create a Neo.mjs workspace.
+
+<img src="resources/images/learn/NeoWorkspace.png" style="height: 400px;">
+
+As you can see, a Neo.mjs workspace is a conventional npm workspace. If you run 
+the script `npm run server-start` from the workspace, Neo.mjs launches a web
+serve whose doc root is the workspace. 
+
+<img src="resources/images/learn/ServerRoot.png" style="height: 400px;">
+
+If you drill down into the `src` directory you'll see your applications.
+The `docs` directory holds the Neo.mjs API docs. Examples are in the `examples` directory.
+
+In order to discuss the structure of an app, we'll create a simple starter 
+app. To do that, run this command from the workspace.
+
+`npm run create-app-empty`
+
+At the first prompt, name the app `Foo`, and accept the default for everything else.
+The script creates an application structured as follows.
+
+<img src="resources/images/learn/FooFolder.png" style="height: 400px;">
+
+These files are part of the typical structure of a Neo.mjs application. The files `index.html`, `app.mjs`, `neo-config.json`, `view/Viewport.mjs` are rarely modified.
+You will, however, edit the main container, and its associated "controller" and "model",
+as well as create new views, new controllers, etc. 
+
+Now let's look at a source file. This is the contents of `MainView.mjs`.
+
+<pre class="neo">
+import Base from '../../../node_modules/neo.mjs/src/container/Base.mjs';
+import Controller from './MainViewController.mjs';
+import ViewModel from './MainViewModel.mjs';
+
+class MainView extends Base {
+    static config = {
+        className: 'Foo.view.MainView',
+        
+        controller: {module: Controller},
+        model: {module: ViewModel},
+
+        layout: {ntype: 'fit'},
+        items: [],
+    }
+}
+
+Neo.applyClassConfig(MainView);
+
+export default MainView;
+</pre>
+
+Neo.mjs views are composed of components. A component can be a "container", which means it
+visually holds or groups other components, or a regular component, like a button. 
+
+The main view is a container because it extends `Base`, which is a reference to the 
+container base class imported in the first statement. The items in a container are configured 
+in `items:[]`, which is empty in this starter code.
+
+This view also has a _controller_ and _model_. We'll talk about those later, but in a nutshell,
+a controller is where event handling and app logic goes, and a model is where you set up shared
+bindable data.
+
+We'll go into a lot more depth about view, controllers, and models in other topics, but to let
+you see how a component is configured let's put a button in the container. 
+
+First, we need to import the class that defines buttons. Then we'll describe the new button in the
+`items:[].`
+
+<pre class="neo">
+
+import Base        from '../../../node_modules/neo.mjs/src/container/Base.mjs';
+import Controller  from './MainViewController.mjs';
+import ViewModel   from './MainViewModel.mjs';
+import Button      from '../../../node_modules/neo.mjs/src/button/Base.mjs';
+
+class MainView extends Base {
+    static config = {
+        className: 'Foo.view.MainView',
+        
+        controller: {module: Controller},
+        model: {module: ViewModel},
+
+        layout: {ntype: 'fit'},
+        items: [{
+            module: Button,
+            text: 'Button'
+        }],
+    }
+}
+
+Neo.applyClassConfig(MainView);
+
+export default MainView;
+</pre>
+
+Note the entry in +items:[]+. That's a description of the button that'll be created as the single
+item in our container. In Neo.mjs terms we're _configuring_ the button. Neo.mjs is _declarative_,
+which components and objects are _described_. It's an abstraction. In other words we're saying 
+what we want, but not how it's done. We want a button with some text &mdash; how that's done
+isn't important here in the container. A non-declarative approach would be more focused on _how_,
+where you might way "I want a &lt;button> HTML element with its innerHTML set to some value." 
+
+In another topic you'll learn about the Neo.mjs config system and declaratively describing
+views, controllers, and other things.
+
+If you run the +foo+ app you'll see one huge button. That's because the container is configured to 
+use the "fit" layout, which means the container is designed to hold one and only one component,
+and that component will take up all available space. We could get a more normal looking button
+by changing the layout.
+
+`layout: {type:'vbox', align:'start},`
+
+Change that line and look at the running application. 
+
+Neo.mjs has scores of component classes.
+You can extend them to create your own reusable components and sets of components.
+
+Other topics discuss coding applications, how the config system works, controllers,
+and bindable data. However, as long as we're here