Jump to content



Recommended Posts

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');
        <title>Hello World</title>
        <?= $hello->render() ?>

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) {

        $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?!

  • Like 12
Link to comment
Share on other sites

  • 1 month later...

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:

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:

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!

  • Like 1
Link to comment
Share on other sites

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');


  • Like 2
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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.


  • Like 1
Link to comment
Share on other sites

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:

And here is the description of the Ajax (JSON) output of Twack components

  • Like 5
Link to comment
Share on other sites

  • 5 months later...
  • 9 months later...

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...