Trwth is a lightweight JavaScript framework designed to simplify the creation of data-driven single-page applications (SPAs). It empowers both programmers and non-programmers to build efficient, secure, and dynamic applications with ease. By engaging AI and focusing on transparency, extensibility, and connectedness, Trwth allows industries like banking, healthcare, and insurance to transition from complex legacy systems to more agile development environments. Trwth provides users the straightforward what, who, why, and wheres.
This Quick Start guide will walk you through setting up Trwth and building & running a simple application. You'll learn how to:
appConfig.Let's get started!
Open your web browser and navigate to the Trwth GitHub repository.
Open the extracted folder. You should see directories like /apps, /libraries, and others. The /apps directory contains sample applications organized in subdirectories, including the Quickstart.html file you will find in the /demos directory which we'll use.
Ensure you have a test data file named random_generated_loan_data.csv in the /data directory. This CSV file should contain randomly generated loan data that the Quiskstart application will use.
If you don't have this file, create a simple CSV with headers like Portfolio, Branch, Principal, OpenDate, etc., and add some sample data.
random_generated_loan_data.csv into the /data directory within the Trwth framework folder if it's not already in the \data folder.Your directory structure should look like:
/trwth
/apps
/core
/data
random_generated_loan_data.csv
/libraries
...
You can leave random_generated_loan_data.csv in \data or you can copy it to another secure local folder. Note: All data processing and storage occur locally on the user’s machine, minimizing the risk of data breaches. By keeping data within the local environment, Trwth prevents unauthorized access and interception that can occur during data transmission over networks.
/apps/demos directory.Quickstart.html file in your favorite text editor (Visual Studio, Sublime, etc).In Quickstart.html, locate the <script> section where appConfig is defined. Here's the code for reference:
Explanation:
financial library is used to calculate the average principal balance.portfolio field. For example, results of all instances of a particular portfolio will be combined.Branch and Loan Officer.If you made any changes to appConfig, save your changes to Quickstart.html in your text editor.
Quickstart.html to open it in your default web browser.The application should load, provide a button to select loan source where you select test_loan_data.csv, and click run. You should see a table or presentation of data showing the Branch and Principal for loans that meet the criteria specified in your formula.
| Result | |||
|---|---|---|---|
| 200106555 (2) | 23 | 92 | $1,212,609.43 |
| 200102722 (1) | 23 | 92 | $313,590.84 |
Understanding the core components of Trwth is essential for building robust and efficient applications. These components work together to handle data processing, logic execution, and presentation within your single-page applications (SPAs).
Formulas are the heart of Trwth, defining and evaluating the logic of applications and data transformations using a human-readable syntax.
Example Formula:
This formula checks if the loan's open date is between October 31, 2020, and November 3, 2024. If true, it returns the loan principal; otherwise, it returns null.
Functions in Trwth are reusable JavaScript functions used for calculations or data manipulation within your application.
Example Function:
This function calculates the monthly loan payment based on the principal amount, annual interest rate, and the number of amortization months.
Attributes are constants or fixed values used throughout the application. They provide essential data points that can be referenced in formulas and functions.
Example Attribute:
This attribute defines a servicing factor used in calculating loan servicing expenses.
Dictionaries are key-value pairs used for data lookups and mappings. They allow for flexible data retrieval and manipulation based on predefined keys.
Example Dictionary:
This dictionary maps various loan types to their respective identifiers, facilitating easy lookups within formulas and functions.
Libraries are collections of functions, attributes, and dictionaries organized for specific functionalities. They help maintain code organization and reusability.
Example Library Structure:
In this example, the `financial` library contains functions, attributes, and dictionaries related to financial operations, while the `organization` library manages organization-specific data.
These core components interact seamlessly within Trwth to process data, execute logic, and present results. Here's how they work together:
By understanding and effectively utilizing these core components, you can harness the full power of Trwth to build sophisticated and scalable applications.
In the Trwth.js framework, formulas serve as the core mechanism that connects data with functions, enabling powerful interactions. They allow users to perform dynamic calculations across multiple data sources, execute complex financial and analytical operations, and deliver results to defined outputs—all within a consistent, no-code, no-SQL, and human-readable syntax. Before diving deeper, let’s explore the syntax that makes it all possible.
In Trwth.js, formulas act as the kernel of the framework, coordinating the interaction between raw data, advanced operations, and outputs. As the foundation of the system, formulas provide:
Secure Environment
Data Files
Form Content
Data Streams
Functions
Advanced Operations
AI
API Calls
Results in Browser
Trwth.js formulas extract data from local sources securely; leverage lirbraies of functions, advanced operations, AI, and/or API integrations; and deliver dynamic results to the browser in real time. All operations in Trwth.js reside securely within your organization's local infrastructure. Data remains protected while formulas extract, process, and deliver insights.
Secure Environment
loan.csv
Profit
Function
! {{ }} - == *
Operations
AI
Treasury API
Results in Browser
Variables in Trwth.js formulas represent data fields or properties derived from your data sources. They allow formulas to perform operations based on the values of these fields. Here's a breakdown of how to define and use these variables:
Variables such as loan.open are structured as source.field, where:
loan).open).To define these variables, ensure that your data sources are correctly configured in your single page application and that each source contains the necessary fields.
When working with formulas in Trwth.js, it's crucial to understand how to reference your data sources. For detailed instructions on importing and setting up your data, refer to the Setting Up Data Sources section.
In your formula, variables like units and tally are built-in metric properties used by Trwth.js.
Units represent the total number of instances of the groupBy field that have been combined or aggregated.
Tally counts the number of instances within each groupBy field that have a valid result according to the formula.
Trwth.js intuitively connects the data sources required by the formula based on the variable names in formula, for instance;
tally: pulls the count of valid instances per portfolio.units: pulls the total number of portfolios.loan.class, loan.open: Fields from the loan data source.loan.principal: The principal amount from the loan data source.The ! operator is known as the logical NOT operator. It's used to invert the boolean value of an operand. Here’s a quick rundown of how it works: Logical NOT (!): If the operand is true, the result is false, and if the operand is false, the result is true.
Operators that take three operands— a condition followed by a question mark ?, then an expression to execute if the condition is truthy, followed by a colon :, and finally the expression to execute if the condition is falsy. Conditional expressions allow for decision-making:
Format:Note the condition uses > in this code. The > comparison in our framework and most porgamming environments is an evaluation of two values to determine their relationship. This can involve checking if they are equal, not equal, greater than, less than, greater than or equal to, or less than or equal to each other. Here are the main types of comparison operators:
==: Equal to - checks if two values are equal.
5 == '5' (true)===: Strict equal to - checks if two values are equal and of the same type.
5 === 5 (true), 5 === '5' (false)!=: Not equal to - checks if two values are not equal.
5 != '5' (false)!==: Strict not equal to - checks if two values are not equal and not of the same type.
5 !== '5' (true)>: Greater than - checks if the left value is greater than the right value.
10 > 5 (true)<: Less than - checks if the left value is less than the right value.
5 < 10 (true)>=: Greater than or equal to - checks if the left value is greater than or equal to the right value.
5 >= 5 (true)<=: Less than or equal to - checks if the left value is less than or equal to the right value.
5 <= 10 (true)In this example, if the checking account has been open for less than 90 days (checking.daysSinceOpen < 90) include the checking account balance in the result (? checking.balance) else include nothing for this account in the final result (: null)
==: Equal to - checks if two values are equal.===: Strict equal to - checks if two values are equal and of the same type.!=: Not equal to - checks if two values are not equal.!==: Strict not equal to - checks if two values are not equal and not of the same type.>: Greater than - checks if the left value is greater than the right value.<: Less than - checks if the left value is less than the right value.>=: Greater than or equal to - checks if the left value is greater than or equal to the right value.<=: Less than or equal to - checks if the left value is less than or equal to the right value.The 'in' operator enables set inclusion testing, allowing you to check if a value belongs to a predefined set:
Format:Formulas can process date conditions by calculating day differences:
Format:Truth propagation allows certain conditions to “lock” all other conditions within the formula to true once any one condition evaluates as true. Use double curly braces {{ }} to define such locks:
In Trwth.js, Properties are essential elements that define how data is managed, processed, and presented within your single-page applications (SPAs). Properties are categorized into two primary types:
Understanding these categories and their roles will enable you to effectively configure and visualize your data-driven applications.
Presentation Properties dictate how data is displayed to the end-user. They are primarily used within the presentation section of the appConfig to define the structure and content of the data presentation layers, such as tables or charts.
customer.gender).In this example:
branch and principal fields in the data source.Metrics Properties provide quantitative insights into the data by tracking and summarizing specific aspects. In Trwth.js, the primary metrics properties are units and tally.
Units represent the total number of instances of a particular groupBy field that have been combined or aggregated within the application.
In this example:
Portfolio field.units will represent these 5 groups.Tally counts the number of instances within each groupBy field that have a valid result according to the specified formula.
formula.In this example:
Portfolio have an open date between October 31, 2020, and November 3, 2024.groupBy field.groupBy field.formula.groupBy, counts the number of records that satisfy the formula.When used together, Units and Tally offer a comprehensive view of your data:
Example Scenario:
formula).This combination allows stakeholders to quickly assess both the distribution and the quality of the data.
To better understand how Properties function within Trwth.js, consider the following diagram:
/trwth
/apps
/data
test_loan_data.csv
/libraries
/core
/styles
...
The diagram illustrates the hierarchical structure of a Trwth application, highlighting where different components like presentation, units, and tally fit within the overall framework.
units and tally) offer valuable insights into the data's distribution and the effectiveness of your data processing logic.By effectively utilizing both types of Properties, you can create robust, insightful, and user-friendly applications with Trwth.js.
In this section, we'll walk you through building a simple Trwth application using the base template located at apps/template/starter_rename.html. We'll animate the process of filling out the appConfig to help you understand each step clearly.
Start by navigating to the apps/template directory in your Trwth framework folder. Open the starter_rename.html file in your preferred text editor.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="img-src 'self' data:; default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; connect-src 'self' https://trwth.com; object-src 'none';">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../../styles/base.css">
<title></title>
</head>
<body>
<div id="app-container"></div>
<script>
// App configuration
const appConfig = {
libraries: [
],
formula: '',
groupBy: '',
presentation: {
columns: [
{ heading: '', field: '' },
],
}
};
</script>
<script src="../../core/ai.js" defer></script>
<script src="../../core/main.js" defer></script>
<script src="../../core/ux.js" defer></script>
<script src="../../core/charts.js" defer></script>
</body>
</html>
We'll fill out the appConfig object step-by-step to configure our application. Each step will add a new part to the configuration.
Libraries are collections of functions, attributes, and dictionaries that provide specific functionalities to your application. We'll include the financial and organization libraries.
The formula determines the logic for processing data. In this example, we'll filter loans opened between October 31, 2020, and November 3, 2024, and return their principal amounts.
Data sources can be defined through various means, such as importing CSV files or utilizing predefined libraries. Here's how to define a data source:
Assume you have a CSV file named test_loan_data.csv with the following headers:
Portfolio,Branch,Principal,OpenDate,class,zip,birth,customer.gender
Portfolio A,Branch X,5000,2024-05-15,1,12345,1980,M
Portfolio B,Branch Y,3000,2024-03-22,20,67890,1992,F
...This CSV file will serve as the loan data source with fields like Portfolio, Branch, Principal, OpenDate, class, zip, birth, and customer.gender.
appConfigEnsure that your appConfig is set to recognize and utilize the loan data source:
customer.gender (the customer's gender) is not part of the formula but is part of the presentationGrouping allows you to aggregate data based on a common field. We'll group the loans by the Portfolio field.
The presentation section defines how the data will be displayed in the application. We'll display the Branch and Principal for each portfolio.
After defining the appConfig, save the changes to starter_rename.html and run the application to see the results.
Ensure all your changes to starter_rename.html are saved.
apps directory.starter_rename.html to open it in your default web browser.The application should now display a table showing the Branch and Principal for loans that were opened between October 31, 2020, and November 3, 2024, grouped by their respective Portfolio.
Let's break down how Trwth processes the data and renders the application based on our configuration.
test_loan_data.csv.loan.open (the loan's open date) is between the specified dates.loan.principal is included; otherwise, the record is ignored.Portfolio field as specified by groupBy.presentation section:
financial and organization libraries contain functions, attributes, and dictionaries used in the application.Now that you've built a basic application, let's explore how you can customize and enhance it further.
Change the date range in the formula to see how it affects the displayed data.
Example:
Include additional fields in the presentation to display more data.
Example:
If you have functions defined in your libraries, you can incorporate them into your formula to perform more complex operations.
Example:
Here, loanPayment is a function that calculates the loan payment based on principal, rate, and term.
You've successfully built a simple Trwth application using the base template. By defining the appConfig, you configured how the application processes and presents data. Understanding each component of the configuration helps you harness the full power of Trwth to build more sophisticated applications.
Next Steps:
/libraries directory to see what functions and attributes are available.Need Help?
If you encounter any issues or have questions, consider:
/examples directory.Happy coding with Trwth!
Trwth Apps or (SPA) features include reference to a source in the presentation configuration whereby the source data can be used in the presentation and not be included in the formula processing.
core/ai.js
aiTranslater: accepts a data pipe's header or schema keys, and a word or indentifier to translate as arguments. This translator return it's educated guess on the precise header column or schema key that matches the target word. This is used by core Trwth.js code to allow app desginers the flexibility in designing and adapting their applications to multiple data sources. Show some examples of portfolio