Getting to Know the Flynt Ecosystem

In this tutorial we’ll step through all the different components that make up the ecosystem of the Flynt framework for WordPress and build an understanding of how everything fits together.

At the time of writing this article, there are six self-contained components that make up the Flynt ecosystem. All of these projects can be found within the GitHub organization of Flynt. These include:

WordPress Starter Theme

The Flynt WordPress Starter Theme is the place where all of the elements related to WordPress come together. It includes all of our best practices, to help you benefit from the core principles of Flynt:

  • Singularity
  • Reusability
  • Predictability

In order to extend the functionality of the WordPress default content fields, Flynt leverages a premium WordPress plugin called Advanced Custom Fields Pro (ACF Pro). This particular plugin offers both flexibility and a great user experience for all content editors, as well as offering developers an easy way to create custom fields and option pages.

We also use the WordPress plugin Timber, which enables us to separate the logic for data preparation and manipulation from the actual view templates. In relation to a standard 'MVC' framework, Timber provides a set of useful PHP classes that we use in the 'model' layer, and Twig is utilised as the 'View' layer.

In addition to these two WordPress Plugins, our starter theme also uses the Flynt Core and the ACF Field Group Composer plugins, in order to help facilitate working with the given technologies.

With the help of gulp and webpack, every component and every feature that you develop is bundled into a self-contained set of files. The theme also includes a set of default components and features, which we view as blueprints for the custom functionality that we implement in our projects.

The theme can be used in any existing WordPress installation. Just be mindful that you have installed the WordPress plugins, previously mentioned in this article, which are utilised by the theme. Check the readme to get started.

Starter Theme GitHub repository

CLI

The Flynt CLI is a command line tool that helps with boosting productivity. It focuses specifically on the repetitive tasks that might be involved in working on a typical WordPress project.

The tool enables you to create a new Flynt project that uses Bedrock as its project structure, as well as the Flynt Starter Theme as its theme. During the creation process the CLI will also, if necessary, create the database and user, set up and activate WordPress with an admin user that you provide, and then finally install all dependencies with PHP composer, yarn, and bower.

Other tasks covered by the Flynt CLI include setting up existing projects (for example, after cloning the repository of a Flynt project for the first time), as well as installing or upgrading all dependencies with a single command.

For the team at bleech, we’ve found that the most popular functionality and main benefit of the CLI is the ability to easily clone assets, as well as the database, from one environment to another; as well as to deploy code to an environment using ssh. This is essential because while all of our development has a local WordPress project setup, the single source of truth is on an external development server.

CLI GitHub repository

Yeoman Generator

Yeoman provides a command line tool and workflow to help you “kickstart new projects, prescribing best practices and tools to help you stay productive”. The Flynt Yeoman Generator helps you quickly scaffold new components and features in the WordPress Starter Theme. It creates all default files for a component or a feature so that you can get your project built in no time.

Yeoman Generator GitHub repository

Core Plugin

The Flynt Core Plugin provides the base for the entire Flynt approach. It has a minimal public interface to ensure that use is as straightforward as possible.

In a typical WordPress theme, template code is often scattered all over the place. There might be template files that use get_template_part to add at least some structure, but usually there are also many global echo functions and built-in chunks of custom logic. If you look at a theme that was developed by another developer, it can be very hard to find out what code is rendered on a given page.

The Core plugin completely changes this. With it, your goal is to define the general structure of a template as an associative array (or JSON file). Within this array, you solely define components that should be rendered on a page. A component itself can have multiple named areas in which other subcomponents are contained. That way, if you want to find out what will be rendered on a page, you simply have to look at the page template configuration. Additionally, you can also look at all the included components to see if there might be another component that can be added dynamically.

This approach not only gives you as a developer a better overview and understanding of your code, but it also adds the ability to better analyze, debug and benchmark your websites.

Core Plugin GitHub repository

ACF Field Group Composer

While ACF Pro provides a great way to create custom fields and option pages for WordPress, we needed a way to easily reuse the custom fields that we have defined for a component. For this reason we wrote the ACF Field Group Composer plugin, which gives us more flexibility and to allows for a more unified approach.

The ACF Field Group Composer functions as the glue between our component-based approach and the functionalities that ACF Pro offers. In the starter theme, for example, this plugin allows you to reuse the custom fields of a component in any field group as either a set of static fields, as part of a repeater field, or as a layout within a flexible content field.

ACF Field Group Composer GitHub repository

Docker Flynt Build

Docker is a relatively young technology with the potential to change the way that you set up your development and production environments. Similar to virtual machines, you can use Docker to spin up containers to run arbitrary commands in an isolated environment. Containers are started based on a Docker image. A Docker image is a basic definition of an operating system with all of its installed application and environment settings.

The final part of the Flynt ecosystem is the Docker Flynt Build. It is a Docker image with everything needed to install all the dependencies of a Flynt project, and run the build process of the starter theme. We use this image for our continuous integration and deployment workflow, build the files in a container based off of this image, and then deploy the resulting files via ssh.

Docker Flynt Build GitHub repository

Conclusion

Flynt has grown over the past 24 month into a comprehensive approach that we, the team at bleech, use for all of our WordPress projects. This unified approach helps us deal with client projects in a standardized fashion, eliminating the need to discuss issues we have already solved for other projects.

You should now have a good overview of every part of the Flynt framework for WordPress. From here you can check out the individual tools on GitHub, or head directly into the Flynt documentation and deepen your knowledge. You can also dive into our tutorial on how to Develop a Simple Flynt Component in 6 Steps to create your first Flynt component.

Dominik

Dominik is Co-Founder, CTO, and backend developer at bleech. He raves about the latest trends in code architecture and infrastructure, and the occasional karaoke.