updated: 12/14/2025
These indicated the latest versions used in testing on this site as of update.
JQuery Ajax and HeadJS are included in PEANUT
PEANUT for PHP/Typescript was originally developed around 2016 and used several foundational libraries and techniques that have sense become "passe" but not obsolete. Although they could be replaced by more modern alternatives, I believe the core Peanut source should hold up well for the next five or more years.
Here I'll discuss these technologies and techniques and indicate why they were chosen in the first place and suggest alternatives for future exploration.
Knockout JS is a JavaScript library that supports data binding between a viewmodel object and an HTML fragment called the view. This is known as the MVVM (Model-View-Viewmodel) pattern.
It is very much at the heart of the Peanut framework.
Knockout has not been enhanced since 2019, and alternatives such as Angular JS and Vue may be preferred for new projects. Knockout has several virtues though. It is lightweight and reliable. And it is far easier to use than any of the other frameworks. The syntax and technique is so different from the others that it would take considerable effort to replace in the existing code.
Alternatives: Vue.js (https://vuejs.org/) is widely used and well regarded. I'd recommend it if a top-to-bottom redesign is considered.
Use of JQuery was dropped by Bootstrap and many of its core features are obviated in recent JavaScript
versions. In Peanut we are using it for "AJAX" service calls (see pnut/core/Services.ts) and to
dynamically load HTML such as Knockout "views".
Theoretically it may be inefficient to use such a large library for such narrow purposes.
But I have not notices any issues so it is hard to find a compelling reason to change.
Alternatives: Fetch API or Axios
For more see Best Ajax Alternatives
When Peanut was written the current most widely supported versions of JavaScript had standard to support modules and no functionality for dynamic loading of them.
Accordingly we used TypeScript "Namespaces" to define modules. To load modules and other resources we wrote our own code using the (Head JS)[https://headjs.github.io/] to handle the task.
Since then, JavaScript introduced the "Import" and "Export" keywords to define modules. See Modules in the TypeScript manual. Not that since we are not using import/export much, the "reference path" directive is often require and is used in all our TS files:
/// <reference path="..." />But JavaScript still lacks suffient support for ordered asynchronous loading. An a third party library or system is needed. Currently Webpack is the most popular solution.
Replacing our loader with WebPack would require considerable revision to nearly all our Typescript files and it is not clear whether Webpack would serve out purposes.
To get an idea of how our loading system see pnut/core/PeanutLoader.ts. You may note that Head.js is only used in two places and JQuery in another two. If a preferred alternavive to this low level loading function can be found it would be easy to introduce. I'm not really sure one could improve on head.js and JQuery may still be needed for Ajax calls.
To see how our loading routines work or a higher level, examine the init() function in any viewmodel TS file and look for application functions: loadStyleSheets and loadResources. Note that these have a function parameter that executes on load success. This is how we make sure that dependent modules are not loaded in the wrong order.