Frdlweb: Frdlweb Software}

Webfan UI - Concept 4

Melanie Wehowski — Thu, 09 Apr 2026 16:08:53 +0000

Webfan is now testing the new successor of an UI concept implementing components that has been around in the stack since years.

It is based in the following components or forks of them:

StartDir\Html\Container Compiles and renders HTML. It uses
- ivopetkov/html-server-components-compiler fork Webfan\Webfat\HTMLServerComponentsCompiler and the insane PHP-NodeJs-styler Webfan\Script\Modules
- krzksz/phcompile for Angularifary!
Angularifary scopify-fetch Directive is used to asynchronous update the pre-rendered Server-HTML in the browser: Example: scopify-fetch url="https://webfan.de/@subject; ?>/actor.json" interval="35" increaseinterval="15" global removemissing="false" assign="ItemActor" transform="actorTransform" >
mmamedov/page-cache is needed in the front/top of the UI-Controller as the above rendering can be extremely slow!!!

Example Code-Snippet:

First register shut down function to output the HTML-Document finally:

$ShutdownTasks = \frdlweb\Thread\ShutdownTasks::mutex(); $ShutdownTasks(function($ItemUpdater){ $str = @$ItemUpdater->context()->html()->compileScope( Config::get('context.scope') ); $str = str_replace([''], [''], $str).''; echo ' '.$str.''; }, $ItemUpdater);

Then write HTML:

$ItemUpdater::context()->html()->write(' ');



webfan.js | Frdlweb.js - Markdown Components
Melanie Wehowski — Mon, 25 Dec 2023 21:37:40 +0000
The framework parses everything that is in the innerHTML of an element wich has the attribute or the class frdl-markdown as markdown and then purifies the HTML result. So for example:
**fat**
…will be parsed into:
fat
…and the result looks like:
fat


Darkmode added to the framework
Melanie Wehowski — Sat, 23 Dec 2023 19:21:06 +0000
Thanks to darkmode-js, a darkmode was added to the framework:
    async function darkmode(Webfan){
        try{
            if(true !== Webfan.c.website.darkmode.enabled && 'true' !== Webfan.c.website.darkmode.enabled){
              return;    
            }
            (new Webfan.Darkmode(Webfan.c.website.darkmode.options)).showWidget();
        }catch(err){
          console.warn(err);    
        }
    }
Read here how you can change the options: https://frdl.de/blog/view/1208/webfanjs-webfan-websitejs-configuration-parameters
 


webfan.js | Frdlweb.js Configuration Parameters
Melanie Wehowski — Sat, 23 Dec 2023 19:17:39 +0000
As you may have noticed we have appended the injection-Url for the webfan.js in the example by a “configuration query”:
 
'DEBUG.enabled=true&website.consent.ads=false&angularjs.html5mode.rewriteLinks=false&angularjs.html5mode.enabled=false'
These query-attributes are objects in the “dot-notation”. You can alter the query and it will be merged into the configuration object.
To get the defaults of the configuration object and to get wich attributes/members you can use/alter, you can read and study this file:
https://cdn.startdir.de/@webfan3/common/config-defaults.js 
…
DEF.angularjs.html5mode.enabled = true; //null !== document.querySelector('base');
DEF.angularjs.html5mode.requireBase = null !== document.querySelector('base');
DEF.angularjs.html5mode.rewriteLinks = null !== document.querySelector('a[ui-sref]');
…
It will be compiled into every current webpack built.
You can edit this options runtime as described above.


RSS Viewer - Frdlweb.js Component
Melanie Wehowski — Sun, 26 Nov 2023 05:39:10 +0000
Display merged RSS Feed items in random order (example limited to 60 items displayed initially, loads more on scrolling):
The webfan.js has to be injected to run the component.
Customize item sorting
There are 3 modes of sort order available:
rand : random order (default)
asc: oldest items first
desc: newest items first
You can configure the sorting by the webfan-rss-sorting-attribute of the component. 
Example to display neswest items first:
    
          webfan-rss-headline="h4" webfan-rss-max-items="5" webfan-rss-sorting="desc" style="max-height:1536px;">
@Todo:
To provide the correct order by timestamps after merging the feeds, in the next version we will implement our @frdl/sortpackage! It is available via npm: 
npm i @frdl/sort
https://www.npmjs.com/package/@frdl/sort
It is just not implemented yet due to my time on other projects.


Performance
Melanie Wehowski — Sun, 17 Sep 2023 04:01:37 +0000
Although most things are cached now, the "boostrap process" is too slow.
Does anyone have any suggestions to increase performance on this?
https://github.com/frdlweb/webfat/blob/cd8280643f1f4ebefd7adb9ceeda98c5ff16deb0/public/index.php#L5074


Introducing IO4/Webfat Facades
Melanie Wehowski — Sun, 17 Sep 2023 03:52:10 +0000
Import shortcuts and facades into ANY namespace
You can now import the facades into ANY namespace.
So this works:
  
namespace MyNamespace1;
  echo   Helper::toUUID4() ; 
    echo '-'; 
    echo Config::get('appId');    
…and this works also…:
  
namespace MyOtherNamespace2;
  echo   Helper::toUUID4() ; 
    echo '-'; 
    echo Config::get('appId');    
The snippet from container-entry “script@inc.common.bootstrap” does it and it now looks like
if($container->has('config.IO4_FACADES_ENABLE') && true === $container->get('config.IO4_FACADES_ENABLE')
     && $container->has('config.app.core.code.facades.$import')
    ){
      $import = $container->get('config.app.core.code.facades.$import');
      $container->get('app.runtime.stubrunner')->withFacades(
           $import['baseName'],           
           $import['namespace']          
      );
 } 
It uses the “statical library”.


Introducing Webfat "Scope/d" - FRDL_HOME
Melanie Wehowski — Thu, 17 Aug 2023 04:13:23 +0000
The environment variable “FRDL_HOME” defines the global root directory of the frdl-context (the directory where the apps global scope lives in, different to the public www webdirectory).
You can now customize the scope by the init method or the environment variable “IO4_WORKSPACE_SCOPE”.
IO4_WORKSPACE_SCOPE can have the values
@cwd - current working directory - getcwd()
 @www -   public www web directory - $_SERVER['DOCUMENT_ROOT']
@global - USER HOME (Users HOME of current process or webspace) - the first directory in the cwd path wich is readable and writable by the current PHP process.
@www@parent - the superior directory of  $_SERVER['DOCUMENT_ROOT']
@www@root' -  the first directory in the $_SERVER['DOCUMENT_ROOT'] path wich is readable and writable by the current PHP process.
custom directory - set a path/directory in IO4_WORKSPACE_SCOPE
Code from Webfat:
if(null === $scope){
 $scope = !empty(getenv('IO4_WORKSPACE_SCOPE')) ? getenv('IO4_WORKSPACE_SCOPE') : null;
}
    
switch($scope){
    case '@cwd' :
           $__home =  getcwd();
     break;        
    case '@www' :
           $__home =  $_SERVER['DOCUMENT_ROOT'];
     break;    
    case '@www@root' :
           $__home =  $getRootDir($_SERVER['DOCUMENT_ROOT']);
     break;    
    case '@www@parent' :
           $__home =  dirname($_SERVER['DOCUMENT_ROOT']);
     break;    
    case '@global' :
    case null :
           $__home = $HOME_DEFAULT;
      break;
    default :
          $__home = is_dir(getenv('IO4_WORKSPACE_SCOPE')) ? getenv('IO4_WORKSPACE_SCOPE') : $HOME_DEFAULT;
     break;
}
 
$__home = @is_readable($__home) && @is_writable($__home) ? $__home : $getRootDir($_SERVER['DOCUMENT_ROOT']);
$_ENV['FRDL_HOME'] = $__home;    
putenv('FRDL_HOME='.$_ENV['FRDL_HOME']);
 


Transforms (PHP)
Melanie Wehowski — Mon, 31 Jul 2023 15:14:22 +0000
Transforms for multiple purposes. (E.g. transports, migrations, …)
namespace Webfan\Transform;

interface TransformInterface
 {
	const RIGHT = 1;
	const LEFT = -1;	
    public function detect($payload) : int;
    public function up($payload);	
	public function down($payload); 
	public function __invoke($payload);
 }
 
Examples in the RemoteObjects API:
use Webfan\Transform\Sequence;
use Webfan\Transform\UrlsafeBinaryTransform;
use Webfan\Transform\OpisTranform;
use Webfan\Transform\TransformCallbacks;
Transform in the registry
 


PSR-11 Container Manager with remote-fallback
Melanie Wehowski — Sat, 15 Jul 2023 21:02:18 +0000
Added: 
IO4\Container\ContainerCollectionInterface
Final Fallback-Container
Remote-Container as Final Fallback-Container
in webfats index.php:
    $this['Container']->setFinalFallbackContainer(new \IO4FallbackContainerClient (             $this['Container']->get('proxy-object-factory.cache-configuration'),         $this['Container']->get('app.runtime.codebase')      ->getRemoteApiBaseUrl(\Frdlweb\Contract\Autoload\CodebaseInterface::ENDPOINT_CONTAINER_REMOTE)   ) );  
The addContainer -Method adds a PSR-11 Container to the Containers-Stack.
The setFinalFallbackContainer -Method sets the final container wich is resolved as the last conainer in the stack, even if you add other containers later. This is where you CAN/SHOULD put a/the Remote-Container.
Reference:
PSR-11 Container
ContainerCollectionV2