neo.mjs 8.31.1 → 8.33.0

package/README.md

@@ -11,87 +11,170 @@
   <a href="./CONTRIBUTING.md"><img src="https://img.shields.io/badge/PRs-welcome-green.svg?logo=GitHub&logoColor=white" alt="PRs Welcome"></a>
 </p>
 
-# Modern Enterprise-Ready JavaScript Framework
-Neo.mjs provides a new approach for building feature-rich web applications. Increase productivity by leveraging a vast
-component library and harness the power of multi-threading for extreme real-time performance.
+# Build Ultra-Fast, Scalable, and Extensible Web Apps :zap:
+:rocket: **Break Free from the Main Thread – Experience True Multi-Threading**
 
-Neo.mjs is the first frontend framework which can run a JavaScript module based dev mode
-without compilations. This makes debugging easier and reduces development costs.
-
-In case you care about scalability, extensibility or solid architectures, congratulations,
-you have found the right spot.
+Neo.mjs enables the creation of highly dynamic web applications by running everything **inside an App Worker**.
+From components and state providers to view controllers, everything operates within the worker,
+allowing the main thread to focus only on **DOM updates** and **delegating UI events**.
+This ensures **high performance, smooth reactivity**, and **extensibility** for both **multi-window** and **SPA applications**.
 
 <p align="center">
   <a href="https://youtu.be/pYfM28Pz6_0"><img height="316px" width="400px" src="https://raw.githubusercontent.com/neomjs/pages/master/resources_pub/images/neo33s.png"></a>
   <a href="https://youtu.be/aEA5333WiWY"><img height="316px" width="400px" src="https://raw.githubusercontent.com/neomjs/pages/master/resources_pub/images/neo-movie.png"></a>
 </p>
 
-## Content
-1. <a href="#introduction">Introduction</a>
-2. <a href="#use-cases">Potential Use Cases</a>
-3. <a href="#slack-channel">Slack Channel for questions & feedback</a>
-4. <a href="#examples">Examples</a>
-5. <a href="#getting-started">Getting Started</a>
-6. <a href="#cli">Command-Line Interface</a>
-7. <a href="#blog">Blog</a>
+</br></br>
+## 🔍 Why Neo.mjs?
+Neo is a worker thread-driven frontend framework designed to create multithreaded GUIs using JavaScript.
+By leveraging the **Off Main Thread (OMT) paradigm**, Neo ensures that your application’s UI remains responsive,
+even during computationally intensive tasks.
+
+Unlike traditional single-threaded frameworks, Neo distributes workloads across multiple threads, unlocking new levels of performance and scalability.
+Whether you’re building a small app or a large-scale enterprise solution, Neo’s architecture grows with your needs.
+
+Key Benefits of Neo.mjs
+1. **Multithreading for Performance**:
+   - Neo’s OMT paradigm moves tasks like data processing, state management, and rendering to worker threads, keeping the main thread free for rendering and user interactions.
+   - This approach eliminates UI freezes and ensures a smooth user experience, even for complex applications.
+2. **Declarative Class Configuration**:
+   - Neo’s class config system allows you to define and manage classes in a clean, reusable way. This reduces boilerplate code and makes your codebase more maintainable.
+   - With declarative configurations, you can focus on building features instead of wrestling with setup and initialization.
+3. **Modular and Scalable Architecture**:
+   - Neo’s modular design makes it easy to build scalable applications. Components are self-contained and reusable, promoting a clean separation of concerns.
+   - Whether you’re building a small app or a large-scale enterprise solution, Neo’s architecture grows with your needs.
+4. **Ease of Use**:
+   - Neo’s intuitive API and comprehensive documentation make it easy to get started, even for developers new to multithreaded programming.
+   - The framework’s design prioritizes developer productivity, allowing you to focus on solving real-world problems.
+5. **Future-Proof Technology**:
+   - Neo is built on modern web standards like JavaScript modules and worker threads, ensuring compatibility with the latest browser features.
+   - By embracing the OMT paradigm, Neo is uniquely positioned to take advantage of future advancements in web development.
+
+**Real-World Applications**
+
+Neo is ideal for:
+- **Data-intensive applications**: Handle large datasets and complex calculations without compromising UI responsiveness.
+- **Real-time dashboards**: Build dynamic, real-time dashboards that update seamlessly.
+- **Enterprise solutions**: Scale your application to meet the demands of large organizations.
+
+**Why Choose Neo Over Traditional Frameworks?**
+
+Traditional single-threaded frameworks often struggle with performance bottlenecks, especially when handling complex UIs or large datasets.
+Neo’s **multithreaded architecture** addresses these challenges head-on, delivering a responsive and scalable solution for modern web applications.
+
+With Neo, you get:
+- ✅ **Responsive UIs**: No more UI freezes or janky animations.
+- 🚀 **Scalability**: Build applications that can handle increasing complexity without compromising performance.
+- 💻 **Developer Productivity**: Spend less time optimizing and more time building features.
+  </br></br>
+## 🌟 Key Features
+🎭 **Actor Model**:</br>
+The App Worker acts as the central actor, handling application state and logic, independent of the main thread.
+This drives the OMT (off the main thread) paradigm into perfection,
+since it is keeping the main thread free for non-blocking DOM updates and UI interactions.
 
-</br><h2 id="introduction">1. Introduction</h2>
-Neo.mjs drives the OMT (off the main thread) paradigm into perfection,
-which is intended to move expensive tasks into Workers.
+<img src="./resources/images/workers-focus.svg">
 
-> So, what are the most expensive tasks we are dealing with?
+🔄 **Reactive State Management**:</br>
+Built-in reactivity allows dynamic, efficient updates between components and state providers.
 
-The answer is simple: a Framework and the Apps which we build with it.
+⚡ **Instant JavaScript module based Development Mode**:</br>
+**Zero builds or transpilations** required. Run your app directly in the browser, modify reactive properties in real-time, and see instant updates.
+This gives you an **unmatched debugging experience**, saving time and reducing development costs.
+You can even build **entire apps inside the console** if you wish.
 
-Neo.mjs moves most parts of the framework and your App(s) including their Components
-into an Application Worker.
+📊 **Hierarchical State Management**:</br>
+Seamlessly manage state between parent and child components with nested state providers.
+Each component binds to the state data from its **closest** provider,
+even combining data from multiple providers inside one binding.
 
-This enables us to re-use existing Component instances and mount & unmount them
-several times. Even into different Browser-Windows.
+🧩 **Clean Architecture**:</br>
+View controllers ensure a **separation of concerns**, isolating business logic from UI components for easier maintenance and testing.
 
-Neo.mjs also provides sharing state across multiple Browser-Windows.
+🌐 **Multi-Window & SPAs**:</br>
+Easily build and manage complex, highly interactive applications that require multiple windows or traditional SPAs.
+No native shell required.
 
-So far, it is the only Framework which enables us to build complex multi-Window Apps
-without the need for a native shell.
+🌀 **Dynamic Component Management**:</br>
+Unmount, move, and remount components across the UI or even in separate browser windows
+— without losing the component’s state or logic. This **runtime flexibility** is a game-changer, **preserving JS instances** while still updating the UI dynamically.
 
-<img src="./resources/images/workers-focus.svg">
+:dependabot: **No npm dependency hell**:</br>
+Neo.mjs apps do not need any dependencies at all, just some dev dependencies for tooling.
+</br></br>
+## :bulb: Perfect for Complex Use Cases
+Need a **web-based IDE, banking dashboard**, or an **enterprise-grade multi-window app**? Neo.mjs is built for it.
 
+</br></br>
+## 📦 Declarative Class Configuration
+Neo’s class config system allows you to define and manage classes in a declarative and reusable way.
+This simplifies class creation, reduces boilerplate code, and improves maintainability.
+
+```javascript
+import Component from '../../src/component/Base.mjs';
+
+class MyComponent extends Component {
+    static config = {
+        className    : 'MyComponent',
+        someProperty_: 'defaultValue',
+        domListeners : {
+            click: 'onClick'
+        }
+    }
+
+    afterSetSomeProperty(value, oldValue) {
+       console.log('someProperty changed:', value, oldValue)
+    }
+    
+    onClick(data) {
+        console.log('Clicked!', data)
+    }
+}
+
+export default Neo.setupClass(MyComponent);
+```
+With Neo.mjs’s class config system, you can:
+
+* Define default properties and methods in a clean, structured way.
+* Easily extend and reuse configurations across classes.
+* Keep your codebase organized and scalable.
+
+For more details, check out the <a href="https://neomjs.com/dist/production/apps/portal/index.html#/learn/gettingstarted.Config">Class Config System documentation</a>.
 
-Neo.mjs is **not** intended for rather simple & static websites.
+</br></br>
+## 🚀 Get Started
+Quick Start
 
-The Framework does not focus primarily on a fast first rendering experience for new users,
-but instead on a super-fast update & navigation experience for returning users.
+Run the following command in your terminal, and your new Neo app will be created, the local web server will start, and your app will open in a new browser window:
 
+```bash
+npx neo-app@latest
+```
+This one-liner sets up everything you need to start building with Neo, including:
+- A new app workspace.
+- A pre-configured app shell.
+- A local development server.
+- Opening your app inside a new browser window
 
-</br><h2 id="use-cases">2. Potential Use-Cases</h2>
-1. Finance (Banking & Trading Apps)
-2. Data Science
-3. Web-based IDEs
-4. Multi-Window Data Visualisation
-5. Complex dynamic Forms
-6. "Desktop-like" Apps
-7. Enterprise Apps in general (e.g. Admin Dashboards)
+:book: More details? Check out our <a href="./.github/GETTING_STARTED.md">Getting Started Guide</a>
 
-</br><h2 id="slack-channel">3. Slack Channel for questions, ideas & feedback</h2>
-Join our community:</br>
-<a href="https://join.slack.com/t/neomjs/shared_invite/zt-6c50ueeu-3E1~M4T9xkNnb~M_prEEOA"><img src="https://img.shields.io/badge/Slack-neo.mjs-brightgreen.svg?logo=slack&style=for-the-badge" alt="Join the Slack channel"></a>
+:student: Make sure to dive into the <a href="https://neomjs.com/dist/production/apps/portal/#/learn/gettingstarted.Setup">Learning Section</a>
 
-</br><h2 id="examples">4. Examples</h2>
-Some exciting Examples are listed here: <a href="https://neomjs.com/dist/production/apps/portal/#/examples">Neo.mjs Examples</a>
+:brain: The most advanced tutorial to help you with getting up to speed is this one:
+<a href="https://neomjs.com/dist/production/apps/portal/#/learn/tutorials.Earthquakes">Earthquakes Tutorial</a>
 
-Many more are included inside the repos `src/apps` & `src/examples` folders.
+Next steps:
+* :star: **Explore exciting Examples here**: <a href="https://neomjs.com/dist/production/apps/portal/#/examples">Neo.mjs Examples</a>
+* Many more are included inside the repos <a href="https://github.com/neomjs/neo/tree/dev/apps">apps</a>
+  & <a href="https://github.com/neomjs/neo/tree/dev/examples">examples</a> folders.
+* :blue_book: All Blog Posts are listed here: <a href="https://neomjs.com/dist/production/apps/portal/#/blog">Neo.mjs Blog</a>
+  </br></br>
+## :handshake: Join the Community
 
-</br><h2 id="getting-started">5. Getting Started</h2>
-* Take a look at the <a href="./.github/GETTING_STARTED.md">Getting Started Guide</a>
-* Make sure to dive into the <a href="https://neomjs.com/dist/production/apps/portal/#/learn/gettingstarted.Setup">Learning Section</a>
-* The most advanced tutorial to help you with getting up to speed is this one:</br>
-   <a href="https://neomjs.com/dist/production/apps/portal/#/learn/tutorials.Earthquakes">Earthquakes Tutorial</a>
+:speech_balloon: Have questions? Join our <a href="https://join.slack.com/t/neomjs/shared_invite/zt-6c50ueeu-3E1~M4T9xkNnb~M_prEEOA">Slack channel</a> and connect with other developers.
 
-</br><h2 id="cli">6. Command-Line Interface</h2>
-You can find an in-depth description here: <a href="./buildScripts/README.md">Neo.mjs CLI</a>
+:hammer_and_wrench: Want to contribute? Check out our <a href="https://github.com/neomjs/neo/blob/dev/CONTRIBUTING.md">Contributing Guide</a>.
 
-</br><h2 id="blog">7. Blog</h2>
-All Blog Posts are listed here: <a href="https://neomjs.com/dist/production/apps/portal/#/blog">Neo.mjs Blog</a>
 
 </br></br>
 Copyright (c) 2015 - today, <a href="https://www.linkedin.com/in/tobiasuhlig/">Tobias Uhlig</a>

package/apps/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='8.31.1'
+         * @member {String} version='8.33.0'
          */
-        version: '8.31.1'
+        version: '8.33.0'
     }
 
     /**

package/apps/finance/app.mjs

@@ -0,0 +1,6 @@
+import Viewport from './view/Viewport.mjs';
+
+export const onStart = () => Neo.app({
+    mainView: Viewport,
+    name    : 'Finance'
+});

package/apps/finance/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="UTF-8">
+    <title>Neo.mjs Finance Dashboard</title>
+    <link rel="icon" href="./resources/images/neo_logo_favicon.svg">
+</head>
+<body>
+    <script src="../../src/MicroLoader.mjs" type="module"></script>
+</body>
+</html>

package/apps/finance/model/Company.mjs

@@ -0,0 +1,37 @@
+import Model from '../../../src/data/Model.mjs';
+
+/**
+ * @class Finance.model.Company
+ * @extends Neo.data.Model
+ */
+class Company extends Model {
+    static config = {
+        /**
+         * @member {String} className='Finance.model.Company'
+         * @protected
+         */
+        className: 'Finance.model.Company',
+        /**
+         * @member {Object[]} fields
+         */
+        fields: [{
+            name        : 'change',
+            defaultValue: null,
+            type        : 'Float'
+        }, {
+            name: 'name',
+            type: 'String'
+        }, {
+            name: 'sector',
+            type: 'String'
+        }, {
+            name: 'symbol',
+            type: 'String'
+        }, {
+            name: 'value',
+            type: 'Float'
+        }]
+    }
+}
+
+export default Neo.setupClass(Company);

package/apps/finance/neo-config.json

@@ -0,0 +1,7 @@
+{
+    "appPath"    : "apps/finance/app.mjs",
+    "basePath"   : "../../",
+    "environment": "development",
+    "mainPath"   : "./Main.mjs",
+    "themes"     : ["neo-theme-dark"]
+}

package/apps/finance/resources/data/companies.json

@@ -0,0 +1,103 @@
+[
+    {"symbol": "ADBE",  "name": "Adobe Inc.",                     "sector": "Information Technology"},
+    {"symbol": "AMD",   "name": "Advanced Micro Devices",         "sector": "Information Technology"},
+    {"symbol": "ABNB",  "name": "Airbnb",                         "sector": "Consumer Discretionary"},
+    {"symbol": "GOOGL", "name": "Alphabet Inc. (Class A)",        "sector": "Communication Services"},
+    {"symbol": "GOOG",  "name": "Alphabet Inc. (Class C)",        "sector": "Communication Services"},
+    {"symbol": "AMZN",  "name": "Amazon",                         "sector": "Consumer Discretionary"},
+    {"symbol": "AEP",   "name": "American Electric Power",        "sector": "Utilities"},
+    {"symbol": "AMGN",  "name": "Amgen",                          "sector": "Health Care"},
+    {"symbol": "ADI",   "name": "Analog Devices",                 "sector": "Information Technology"},
+    {"symbol": "ANSS",  "name": "Ansys",                          "sector": "Information Technology"},
+    {"symbol": "AAPL",  "name": "Apple Inc.",                     "sector": "Information Technology"},
+    {"symbol": "AMAT",  "name": "Applied Materials",              "sector": "Information Technology"},
+    {"symbol": "APP",   "name": "AppLovin",                       "sector": "Information Technology"},
+    {"symbol": "ARM",   "name": "Arm Holdings",                   "sector": "Information Technology"},
+    {"symbol": "ASML",  "name": "ASML Holding",                   "sector": "Information Technology"},
+    {"symbol": "AZN",   "name": "AstraZeneca",                    "sector": "Health Care"},
+    {"symbol": "TEAM",  "name": "Atlassian",                      "sector": "Information Technology"},
+    {"symbol": "ADSK",  "name": "Autodesk",                       "sector": "Information Technology"},
+    {"symbol": "ADP",   "name": "Automatic Data Processing",      "sector": "Industrials"},
+    {"symbol": "AXON",  "name": "Axon Enterprise",                "sector": "Industrials"},
+    {"symbol": "BKR",   "name": "Baker Hughes",                   "sector": "Energy"},
+    {"symbol": "BIIB",  "name": "Biogen",                         "sector": "Health Care"},
+    {"symbol": "BKNG",  "name": "Booking Holdings",               "sector": "Consumer Discretionary"},
+    {"symbol": "AVGO",  "name": "Broadcom",                       "sector": "Information Technology"},
+    {"symbol": "CDNS",  "name": "Cadence Design Systems",         "sector": "Information Technology"},
+    {"symbol": "CDW",   "name": "CDW Corporation",                "sector": "Information Technology"},
+    {"symbol": "CHTR",  "name": "Charter Communications",         "sector": "Communication Services"},
+    {"symbol": "CTAS",  "name": "Cintas",                         "sector": "Industrials"},
+    {"symbol": "CSCO",  "name": "Cisco",                          "sector": "Information Technology"},
+    {"symbol": "CCEP",  "name": "Coca-Cola Europacific Partners", "sector": "Consumer Staples"},
+    {"symbol": "CTSH",  "name": "Cognizant",                      "sector": "Information Technology"},
+    {"symbol": "CMCSA", "name": "Comcast",                        "sector": "Communication Services"},
+    {"symbol": "CEG",   "name": "Constellation Energy",           "sector": "Utilities"},
+    {"symbol": "CPRT",  "name": "Copart",                         "sector": "Industrials"},
+    {"symbol": "CSGP",  "name": "CoStar Group",                   "sector": "Real Estate"},
+    {"symbol": "COST",  "name": "Costco",                         "sector": "Consumer Staples"},
+    {"symbol": "CRWD",  "name": "CrowdStrike",                    "sector": "Information Technology"},
+    {"symbol": "CSX",   "name": "CSX Corporation",                "sector": "Industrials"},
+    {"symbol": "DDOG",  "name": "Datadog",                        "sector": "Information Technology"},
+    {"symbol": "DXCM",  "name": "DexCom",                         "sector": "Health Care"},
+    {"symbol": "FANG",  "name": "Diamondback Energy",             "sector": "Energy"},
+    {"symbol": "DASH",  "name": "DoorDash",                       "sector": "Consumer Discretionary"},
+    {"symbol": "EA",    "name": "Electronic Arts",                "sector": "Communication Services"},
+    {"symbol": "EXC",   "name": "Exelon",                         "sector": "Utilities"},
+    {"symbol": "FAST",  "name": "Fastenal",                       "sector": "Industrials"},
+    {"symbol": "FTNT",  "name": "Fortinet",                       "sector": "Information Technology"},
+    {"symbol": "GEHC",  "name": "GE HealthCare",                  "sector": "Health Care"},
+    {"symbol": "GILD",  "name": "Gilead Sciences",                "sector": "Health Care"},
+    {"symbol": "GFS",   "name": "GlobalFoundries",                "sector": "Information Technology"},
+    {"symbol": "HON",   "name": "Honeywell",                      "sector": "Industrials"},
+    {"symbol": "IDXX",  "name": "Idexx Laboratories",             "sector": "Health Care"},
+    {"symbol": "INTC",  "name": "Intel",                          "sector": "Information Technology"},
+    {"symbol": "INTU",  "name": "Intuit",                         "sector": "Information Technology"},
+    {"symbol": "ISRG",  "name": "Intuitive Surgical",             "sector": "Health Care"},
+    {"symbol": "KDP",   "name": "Keurig Dr Pepper",               "sector": "Keurig Dr Pepper"},
+    {"symbol": "KLAC",  "name": "KLA Corporation",                "sector": "Information Technology"},
+    {"symbol": "KHC",   "name": "Kraft Heinz",                    "sector": "Consumer Staples"},
+    {"symbol": "LRCX",  "name": "Lam Research",                   "sector": "Information Technology"},
+    {"symbol": "LIN",   "name": "Linde plc",                      "sector": "Materials"},
+    {"symbol": "LULU",  "name": "Lululemon Athletica",            "sector": "Consumer Discretionary"},
+    {"symbol": "MAR",   "name": "Marriott International",         "sector": "Consumer Discretionary"},
+    {"symbol": "MRVL",  "name": "Marvell Technology",             "sector": "Information Technology"},
+    {"symbol": "MELI",  "name": "MercadoLibre",                   "sector": "Consumer Discretionary"},
+    {"symbol": "META",  "name": "Meta Platforms",                 "sector": "Communication Services"},
+    {"symbol": "MCHP",  "name": "Microchip Technology",           "sector": "Information Technology"},
+    {"symbol": "MU",    "name": "Micron Technology",              "sector": "Information Technology"},
+    {"symbol": "MSFT",  "name": "Microsoft",                      "sector": "Information Technology"},
+    {"symbol": "MSTR",  "name": "MicroStrategy",                  "sector": "Information Technology"},
+    {"symbol": "MDLZ",  "name": "Mondelez International",         "sector": "Consumer Staples"},
+    {"symbol": "MDB",   "name": "MongoDB Inc.",                   "sector": "Information Technology"},
+    {"symbol": "MNST",  "name": "Monster Beverage",               "sector": "Consumer Staples"},
+    {"symbol": "NFLX",  "name": "Netflix, Inc.",                  "sector": "Communication Services"},
+    {"symbol": "NVDA",  "name": "Nvidia",                         "sector": "Information Technology"},
+    {"symbol": "NXPI",  "name": "NXP Semiconductors",             "sector": "Information Technology"},
+    {"symbol": "ORLY",  "name": "O'Reilly Automotive",            "sector": "Consumer Discretionary"},
+    {"symbol": "ODFL",  "name": "Old Dominion Freight Line",      "sector": "Industrials"},
+    {"symbol": "ON",    "name": "Onsemi",                         "sector": "Information Technology"},
+    {"symbol": "PCAR",  "name": "Paccar",                         "sector": "Industrials"},
+    {"symbol": "PLTR",  "name": "Palantir Technologies",          "sector": "Information Technology"},
+    {"symbol": "PANW",  "name": "Palo Alto Networks",             "sector": "Information Technology"},
+    {"symbol": "PAYX",  "name": "Paychex",                        "sector": "Industrials"},
+    {"symbol": "PYPL",  "name": "PayPal",                         "sector": "Financials"},
+    {"symbol": "PDD",   "name": "PDD Holdings",                   "sector": "Consumer Discretionary"},
+    {"symbol": "PEP",   "name": "PepsiCo",                        "sector": "Consumer Staples"},
+    {"symbol": "QCOM",  "name": "Qualcomm",                       "sector": "Information Technology"},
+    {"symbol": "REGN",  "name": "Regeneron Pharmaceuticals",      "sector": "Health Care"},
+    {"symbol": "ROP",   "name": "Roper Technologies",             "sector": "Information Technology"},
+    {"symbol": "ROST",  "name": "Ross Stores",                    "sector": "Consumer Discretionary"},
+    {"symbol": "SBUX",  "name": "Starbucks",                      "sector": "Consumer Discretionary"},
+    {"symbol": "SNPS",  "name": "Synopsys",                       "sector": "Information Technology"},
+    {"symbol": "TTWO",  "name": "Take-Two Interactive",           "sector": "Communication Services"},
+    {"symbol": "TMUS",  "name": "T-Mobile US",                    "sector": "Communication Services"},
+    {"symbol": "TSLA",  "name": "Tesla, Inc.",                    "sector": "Consumer Discretionary"},
+    {"symbol": "TXN",   "name": "Texas Instruments",              "sector": "Information Technology"},
+    {"symbol": "TTD",   "name": "Trade Desk (The)",               "sector": "Communication Services"},
+    {"symbol": "VRSK",  "name": "Verisk Analytics",               "sector": "Industrials"},
+    {"symbol": "VRTX",  "name": "Vertex Pharmaceuticals",         "sector": "Health Care"},
+    {"symbol": "WBD",   "name": "Warner Bros. Discovery",         "sector": "Communication Services"},
+    {"symbol": "WDAY",  "name": "Workday, Inc.",                  "sector": "Information Technology"},
+    {"symbol": "XEL",   "name": "Xcel Energy",                    "sector": "Utilities"},
+    {"symbol": "ZS",    "name": "Zscaler",                        "sector": "Information Technology"}
+]

package/apps/finance/resources/images/neo_logo_favicon.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 157 157" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;">
+    <style>
+        path {
+            stroke: #3E63DD;
+        }
+        @media (prefers-color-scheme: dark) {
+            path {
+                stroke: #fff;
+            }
+        }
+    </style>
+    <path d="M8.841,127.508L33.676,144.928L33.675,105.744L33.675,94.343L43.023,100.871L112.335,149.272L135.026,135.569L8.841,46.576L8.841,127.508Z" style="fill:white;fill-opacity:0;fill-rule:nonzero;stroke-width:11.89px;"/>
+    <path d="M144.867,30.661L120.032,13.241L120.033,52.425L120.034,63.826L110.686,57.298L41.374,8.897L18.682,22.6L144.867,111.593L144.867,30.661Z" style="fill:white;fill-opacity:0;fill-rule:nonzero;stroke-width:11.89px;"/>
+</svg>

package/apps/finance/store/Companies.mjs

@@ -0,0 +1,37 @@
+import CompanyModel from '../model/Company.mjs';
+import Store        from '../../../src/data/Store.mjs';
+
+/**
+ * @class Finance.store.Companies
+ * @extends Neo.data.Store
+ */
+class Companies extends Store {
+    static config = {
+        /**
+         * @member {String} className='Finance.store.Companies'
+         * @protected
+         */
+        className: 'Finance.store.Companies',
+        /**
+         * @member {String} keyProperty='symbol'
+         */
+        keyProperty: 'symbol',
+        /**
+         * @member {Neo.data.model} model=CompanyModel
+         */
+        model: CompanyModel,
+        /**
+         * @member {Object[]} sorters=[{property:'name',direction:'ASC'}]
+         */
+        sorters: [{
+            property : 'name',
+            direction: 'ASC'
+        }],
+        /**
+         * @member {String} url='../../apps/finance/resources/data/companies.json'
+         */
+        url: '../../apps/finance/resources/data/companies.json'
+    }
+}
+
+export default Neo.setupClass(Companies);

package/apps/finance/view/GridContainer.mjs

@@ -0,0 +1,58 @@
+import BaseGridContainer from '../../../src/grid/Container.mjs';
+
+/**
+ * @class Finance.view.GridContainer
+ * @extends Neo.table.Container
+ */
+class GridContainer extends BaseGridContainer {
+    static config = {
+        /**
+         * @member {String} className='Finance.view.GridContainer'
+         * @protected
+         */
+        className: 'Finance.view.GridContainer',
+        /**
+         * @member {Object} bind
+         */
+        bind: {
+            store: 'stores.companies'
+        },
+        /**
+         * @member {Object[]} columns
+         */
+        columns: [{
+            dataField: 'id',
+            text     : '#',
+            type     : 'index',
+            width    : 40
+        }, {
+            dataField: 'symbol',
+            text     : 'Symbol',
+            width    : 100
+        }, {
+            dataField: 'name',
+            text     : 'Name',
+            width    : 250
+        }, {
+            dataField: 'sector',
+            text     : 'Sector',
+            width    : 200
+        }, {
+            cellAlign: 'right',
+            dataField: 'change',
+            locale   : 'en-US',
+            text     : 'Change',
+            type     : 'currency',
+            width    : 120
+        }, {
+            cellAlign: 'right',
+            dataField: 'value',
+            locale   : 'en-US',
+            text     : 'Value',
+            type     : 'currency',
+            width    : 120
+        }]
+    }
+}
+
+export default Neo.setupClass(GridContainer);

package/apps/finance/view/Viewport.mjs

@@ -0,0 +1,43 @@
+import BaseViewport          from '../../../src/container/Viewport.mjs';
+import GridContainer         from './GridContainer.mjs';
+import ViewportController    from './ViewportController.mjs';
+import ViewportStateProvider from './ViewportStateProvider.mjs';
+
+/**
+ * @class Finance.view.Viewport
+ * @extends Neo.container.Viewport
+ */
+class Viewport extends BaseViewport {
+    static config = {
+        /**
+         * @member {String} className='Finance.view.Viewport'
+         * @protected
+         */
+        className: 'Finance.view.Viewport',
+        /**
+         * @member {Neo.controller.Component} controller=ViewportController
+         */
+        controller: ViewportController,
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            module   : GridContainer,
+            reference: 'grid'
+        }],
+        /*
+         * @member {Object} layout={ntype:'fit'}
+         */
+        layout: {ntype: 'fit'},
+        /**
+         * @member {Neo.state.Provider} stateProvider=ViewportStateProvider
+         */
+        stateProvider: ViewportStateProvider,
+        /**
+         * @member {Object} style
+         */
+        style: {padding: '2em'}
+    }
+}
+
+export default Neo.setupClass(Viewport);

package/apps/finance/view/ViewportController.mjs

@@ -0,0 +1,35 @@
+import Controller from '../../../src/controller/Component.mjs';
+
+/**
+ * @class Finance.view.ViewportController
+ * @extends Neo.controller.Component
+ */
+class ViewportController extends Controller {
+    static config = {
+        /**
+         * @member {String} className='Finance.view.ViewportController'
+         * @protected
+         */
+        className: 'Finance.view.ViewportController'
+    }
+
+    /**
+     *
+     */
+    onCompaniesStoreLoad() {
+        let me             = this,
+            companiesStore = me.getStore('companies'),
+            items          = [];
+
+        companiesStore.items.forEach(record => {
+            items.push({
+                symbol: record.symbol,
+                value : Math.random() * 1000
+            })
+        });
+
+        this.getReference('grid').bulkUpdateRecords(items)
+    }
+}
+
+export default Neo.setupClass(ViewportController);