module Twack

Sebi · April 25, 2020

Since it's featured in ProcessWire Weekly #310, now is the time to make it official:
Here is Twack!

I really like the following introduction from ProcessWire Weekly, so I hope it is ok if I use it here, too. Look at the project's README for more details!

Twack is a new — or rather newish — third party module for ProcessWire that provides support for reusable components in an Angular-inspired way. Twack is implemented as an installable module, and a collection of helper and base classes. Key concepts introduced by this module are:

Components, which have separate views and controllers. Views are simple PHP files that handle the output for the component, whereas controllers extend the TwackComponent base class and provide additional data handling capabilities.
Services, which are singletons that provide a shared service where components can request data. The README for Twack uses a NewsService, which returns data related to news items, as an example of a service.

Twack components are designed for reusability and encapsulating a set of features for easy maintainability, can handle hierarchical or recursive use (child components), and are simple to integrate with an existing site — even when said site wasn't originally developed with Twack.

A very basic Twack component view could look something like this:

<?php namespace ProcessWire; ?>
<h1>Hello World!</h1>

And here's how you could render it via the API:

<?php namespace Processwire;
$twack = $modules->get('Twack');
$hello = $twack->getNewComponent('HelloWorld');
?>
<html>
    <head>
        <title>Hello World</title>
    </head>
    <body>
        <?= $hello->render() ?>
    </body>
</html>

Now, just to add a bit more context, here's a simple component controller:

<?php namespace ProcessWire;

class HelloWorld extends TwackComponent {
    public function __construct($args) {
        parent::__construct($args);

        $this->title = 'Hello World!';
        if(isset($args['title'])) {
            $this->title = $args['title'];
        }
    }
}

As you can see, there's not a whole lot new stuff to learn here if you'd like to give Twack a try in one of your projects. The Twack README provides a really informative and easy to follow introduction to all the key concepts (as well as some additional examples) so be sure to check that out before getting started.

Twack is in development for several years and I use it for every new project I build. Also integrated is an easy to handle workflow to make outputs as JSON, so it can be used to build responses for a REST-api as well. I will work that out in one section in the readme as well.

If you want to see the module in an actual project, I have published the code of www.musical-fabrik.de in a repository. It runs completely with Twack and has an app-endpoint with ajax-output as well.

I really look forward to hear, what you think of Twack?!

Roych · June 2, 2020

Hi, maybe silly question, but could you tell me how to try out you musical-fabric package (how to install it)? There is only SITE folder inside.

Thank you

R

Sebi · June 6, 2020

Hi @Roych,
sorry for my late response, I am currently a bit busy at work.

The musical-fabrik repository is the main code for the page https://www.musical-fabrik.de , but there are several additional requirements (processwire's core, modules like PageTable and Repeatermatrix and the database-contents) to get the site running locally. Unfortunately I cannot make everything public, so I would recommend you to start a blank site and try to start building a simple component like shown in Twack's readme.

The musical-fabrik page is an example, where everything is built out of nested Twack-components. You can see that in the php-files under /site/templates/, for example site/templates/default_page.php:

<?php
namespace ProcessWire;

$twack = wire('modules')->get('Twack');
$general = $twack->getNewComponent('General');
echo $general->render();

This file is called, when a processwire-page with the template default_page is called. The only thing we do here is loading the Twack-module, initializing the General-component (located under /site/templates/components/general/) and then rendering it. The general-component renders the basic html structure, adds a header and a footer, and adds the default_page component as the main content area between header and footer. default_page registers itself under the global name 'mainContent', which can be used from everywhere else to add content-components to a page:

$this->twack->makeComponentGlobal($this, 'mainContent');

Because of that, the galleries_container-template can add a gallery-grid under the default contents:

<?php
namespace ProcessWire;

$twack = wire('modules')->get('Twack');
$general = $twack->getNewComponent('General');

$content = $twack->getComponent('mainContent');
$content->addComponent('ContentGalleries', ['directory' => 'contents_component', 'title' => '']);

echo $general->render();

I hope, that helps to basically understand the underlaying logic of the site. Twack does not force you to use it that way, you are free to structure your components in many other ways.

I am currently working on the documentation for the ajax-functionality, that lets you render every component as an json-array instead of html, which makes it very useful for app-api-development as well.

Maybe, if you are interested, I could starting to write tutorials for some special Twack-components (like a simple header, footer, ...). The contents-component and my form-component, that builds a bootstrap-html-form from any processwire-template could be useful as well.

Feel free to ask if something is unclear, I am aware that it can be hard to understand the concepts of Twack. But I am also convinced, that it is a great way to structure processwire projects. Thank you very much for your interest in it!

bernhard · June 7, 2020

23 hours ago, Sebi said:

<?php namespace ProcessWire; $twack = wire('modules')->get('Twack');

Hey @Sebi have you thought of registering $twack as API variable?

// in your module
$this->wire('twack', $this);

// in any template
// no need for $twack = $modules->get('Twack');
$general = $twack->getNewComponent('General');

Sebi · June 11, 2020

Hey @bernhard, that looks like a useful improvement. I actually didn't know that it is possible to register API variables.
I will provide a module update in the next days - thank you for your support!

Sebi · June 14, 2020

I have now, as promised, a new version ready for you. Version 2.1.3 includes the improvement that @bernhard suggested. Twack is now available as api-variable. I personally prefer the wire('twack') syntax, but that's a matter of opinion. All code-examples and the project`s readme.

Sebi · July 19, 2020

I have exciting news for you: ?
For the release of my module AppApi I have now also finished the section about the Ajax output of Twack.

Twack and AppApi work together perfectly. The routing and authentication is done by AppApi. Twack can also render JSON instead of HTML-views.

Here you can find out more about routing with AppApi:
https://github.com/Sebiworld/AppApi#example-universal-twack-api

And here is the description of the Ajax (JSON) output of Twack components
https://github.com/Sebiworld/Twack#ajax-output

Sebi · January 4, 2021

Just released version 2.1.4 with an improved documentation. I moved most of the contents from README.md to the repository-wiki. Everything is better structured and more readable ?

Sebi · October 28, 2021

Long time no see! I just released version 2.2.0 of Twack.

With this, Twack now uses the new feature from the AppApi module (if installed) and registers its own route 'tpage' for page calls. This means that the JSON outputs of Twack components can now be requested easily through this Api endpoint:

Route Description
/api/tpage/ Calls the root page of the page-tree
/api/tpage/42 Will call the page with id=42
/api/tpage/my/test/page Calls your page with path my/test/page

spoetnik · February 4

I am looking for good way to implement htmx, and creating some sort of API for this.

The API should return 'parts' in HTML to replace parts in the DOM. These returned parts could be components.

As Twack works with components, and has (JSON)API support, would Twack be the ideal base to build a HTMX frontend on? And how would i do this? Any suggestions?

bernhard · February 4

I've literally yesterday thought of adding this to RockFrontend! I thought I'd add /site/templates/htmx and whatever file you place there would be available as yourdomain.com/htmx/[filename]

So for example placing modal.php there you could use hx-get="/htmx/modal"

What do you think? Not sure what you mean by JSON api support. Maybe I'm missing something?

spoetnik · February 4

What you describe @bernhard would be what i'm looking for. It would even be more ideal if I could expose a component via a HTMX-api. That way I don't have to maintain a separate htmx component.

What I mean bij JSON api, is the AppApi integration with Twack

On 10/28/2021 at 11:00 PM, Sebi said:

Long time no see! I just released version 2.2.0 of Twack.

With this, Twack now uses the new feature from the AppApi module (if installed) and registers its own route 'tpage' for page calls. This means that the JSON outputs of Twack components can now be requested easily through this Api endpoint:

Route Description
/api/tpage/ Calls the root page of the page-tree
/api/tpage/42 Will call the page with id=42
/api/tpage/my/test/page Calls your page with path my/test/page

I would be cool if the output could also be just html, and preferably a part of the template, or component.

Sebi · February 4

Hey @spoetnik,
thank you for your input! I think Twack's base with its component structure could be a good foundation to fit HTMXs needs, but I am a little worried about opening security gaps.

It is certainly possible to build a function that can be used to get each individual Twack component back individually. But we have to make sure that no access-protected information becomes accessible. I usually control the access authorizations on the ProcessWire page - individual components cannot be easily controlled. A good approach could be to request the page as before, but to provide a kind of identifier that ensures that only the subcomponent with this ID can generate an output from the component tree. As a result, the access rights would continue to be active as before and no output can be obtained via the HTMX request that would not already have been contained in the classic request with the output of the entire page. But I'm still not really sure whether this is the best solution for this feature.

Sebi · March 3

Hey @spoetnik,

sorry for the delay. I finally found time to look a bit deeper into it... I have good news and bad news about XHTML.

Bad news: As automatically as I described in my last post, it will not work in Twack to include XHTML support. Each component compiles its own HTML output in the view. The components can be nested and integrated in different places in the layout - it would not be expedient for Twack to intervene automatically and simply not render certain components or something.

The good news, however, is that you should be able to integrate XHTML support with the existing logic without any problems. For example, you can come up with a GET parameter yourself that ensures that only a certain part of the page is rendered in your view.

In order to make the whole thing a little easier to organize, I have just released a new Twack version 2.3.0 with a list feature. You can now also manage the child components for each component in so-called componentLists (e.g. header components, footer components, sections, ...) and output these lists in the appropriate places in the HTML layout. For XHTML, for example, it would be conceivable to output only the HTML of the header components with a ?show-only=header GET parameter. I've added a example in the named-components section at the wiki: https://github.com/Sebiworld/Twack/wiki/6:-Named-components

Sign In

module Twack

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members

Similar Content