Themify Flow First Impression

After writing a short review of LayersWP theme builder, I got contacted by Nick La of Themify.me to do a similar review of their new, free and open source theme builder Flow. I’m always excited about new technologies. Theme builders are no exception. Playing with Flow for a while, I got really enthusiastic about it. However, deep down I’m a programmer so I had to put my feelings aside and carry out an honest testing.

In this review, we’ll talk about Flow in brief, see how it works under the hood, perform a load testing to measure its performance and discuss its source code.

Flow in brief

Flow, similar to other theme builders, enables us to create and stylize post/page templates with a simple dragging and dropping of various modules on their front-ends, i.e. you take a “Text” module, write some text into it and put it under the post’s title — reload the post and see the difference. A picture is worth a thousand words (figure 1).

The theme builder shows itself only on the front-end of a post or a page, not interfering with the back-end editor. It feels snappy and is completely responsive. The main difference between typical theme builders and Flow is that in Flow, you can compose templates which are then assigned to either a specific post/page, a whole category or an archive view while in other theme builders, the design is included in the article’s content (I’m looking at you, ugly shortcodes!). These templates are built out of template parts (e.g. header, sidebar, footer), modularizing it further.

To give you an example, let’s say that we have two specific pages sharing the same header and footer. We build a custom header and footer template parts, use them on a custom template and assign it to these pages. This is a huge time-saver because you don’t have to manually create the PHP templates for specific posts/pages or post types, while being able to reuse the header/footer/sidebar parts.

What is more, as we can observe from the figure 1, styling the templates is fairly easy — just open the styling pane (on the right) and modify fonts, colors, margins, paddings and text properties. Each module has the ability to be styled in this way!

Under the hood

Both Flow templates and template parts are stored as custom post types (tf_template, tf_template_part). To store the created designs, they make use of WordPress shortcodes. Each row, column and module is represented by a custom “tf_” shortcode, for example:

Template with a single row, single column and a “text” module with a simple text

[tf_row class="" gutter="tf_gutter_default" overlay_color="" row_anchor="" row_height="tf_row_height_default" row_width="tf_row_width_default" sc_id="557538b9a1082"]

    [tf_column grid="fullwidth" sc_id="557538b9a22ed"]

        [tf_text tf_module_custom_css_class="" sc_id="557538de2e729"]
            This is a text which will be displayed on a row in a column.
        [/tf_text]

    [/tf_column]

[/tf_row]

Template Part: sidebar with a two rows and two modules (search form and WordPress calendar widget)

[tf_row class="" gutter="tf_gutter_default" overlay_color="" row_anchor="" row_height="tf_row_height_default" row_width="tf_row_width_default" sc_id="557539a599cf8"]

    [tf_column grid="fullwidth" sc_id="557539a59b950"]

        [tf_searchform tf_module_custom_css_class="" sc_id="557539ac2f7b8"]

    [/tf_column]

[/tf_row]

[tf_row class="" gutter="tf_gutter_default" overlay_color="" row_anchor="" row_height="tf_row_height_default" row_width="tf_row_width_default" sc_id="557539a599cf8"]

    [tf_column grid="fullwidth" sc_id="557539a59b950"]

        [tf_widget widget="WP_Widget_Calendar" tf_module_custom_css_class="" sc_id="557539b6463b3"][/tf_widget]

    [/tf_column]

[/tf_row]

These shortcodes are stored as the content of a custom post type (template or template part). So, if you have some posts in a previous theme and switch to Flow, the content of these posts will stay the same — only the Flow templates will be assigned to these posts so you can build them outside of your articles’ texts.

I would prefer Flow to use pure HTML with CSS instead of custom shortcodes — it would be easier to switch to a different theme — but I’m aware that shortcodes provide more flexibility and options.

Have you noticed the sc_id= numbers in the code above? That numbers are unique identifiers of Flow modules which can then be styled. These styles are stored as serialized PHP arrays in the postmeta table to a particular template or template part. For example, a simple “text” module, styled to be bold, UPPERCASE and have a center alignment, will be stored as the following array (unserialized):

Array
(
    [557538de2e729] => Array
        (
            [module] => text
            [settings] => Array
                (
                    [tf_module_text_container] => Array
                        (
                            [tf_background_properties] => {"style":"fullcover"}
                            [tf_font_properties] => {"italic":"","bold":"bold","underline":"","linethrough":"","nostyle":"","texttransform":"uppercase"}
                        )

                    [tf_module_text_p] => Array
                        (
                            [tf_background_properties] => {"style":"fullcover"}
                            [tf_font_properties] => {"align":"center"}
                        )
                )
        )
)

Loading a post, step by step

To give you a better overview of what is related to what, I’ll describe the loading process of a post:

1. You request a post on a Flow-powered WordPress site.
2. WordPress queries the database for the post.
3. Flow queries the database for the template of that post.
4. The template of that post queries the database for the header, footer and sidebar template parts.
5. The original post, template of the post and template parts of that template query the database for their postmeta (custom data, styling, etc).
6. Shortcodes in the template and template parts are processed.
7. Post is displayed.

As you might have noticed, due to the architecture of Flow, additional database queries have to be made during each post/page load. We will talk about the performance implications in the next section.

Performance

Theme builders are usually heavy, taking quite a lot of server resources (memory and CPU), thus slowing down the site. Not in the Flow’s case. Want a proof? Read more…

Load testing Flow

Load testing is a process of sending requests to a server, usually to an URL endpoint, and measuring the server’s response time as well as its CPU and memory usage. As I’m writing an open source book on WordPress performance optimizations, I wanted to load test a site with Flow theme builder. For load testing, we need both a server on which the Flow-powered website will run and a service which will send the requests.

I’m using DigitalOcean.com (referral) as my server provider: the smallest droplet (server configuration) – 1 CPU, 500MB of RAM, Ubuntu 14.04 x64. To provision the server, I’m using my WordPress-Ansible Playbooks so it’s easy for me to switch between various server stacks (HHVM, PHP-FPM, Nginx, Apache, etc). On the server, I’m using Htop process viewer to measure the RAM and CPU usage during the load testing.

Loader.io (referral) is my favorite service for sending the requests and performing the load testing. I’ve created several Loader.io tests which will send from 1 to 250 concurrent requests (clients) to the site (simulating real visitors), measuring the response times as well as number of successful requests.

After installing a fresh WordPress, there is a “Hello World” article with a comment. We are going to benchmark Flow on loading this article and compare it to loading this article in the default Twenty Fifteen WordPress theme.

Nginx with PHP-FPM

Flow

---

Twenty Fifteen

---

Nginx with HHVM (Flow)

To illustrate the power of HHVM, let’s perform the same benchmark after switching from PHP-FPM to HHVM.

Above charts show us that Flow is rather fast and not that memory-hungry (difference of 14 MB). From the Loader.io test results pages, we can also observe that the server is able to respond to about 510 requests when using Flow while responding to 770 of them when using Twenty Fifteen — keep in mind that Twenty Fifteen is a pretty light and fast theme!

Database queries

In the previous chapter, I’ve outlined the process of loading a post in a Flow-powered site. Using the excellent Query Monitor, I’ve discovered that while the Twenty Fifteen theme does 27 database queries, Flow does 44 of them. It shows on the overall performance (as could be seen from the above charts) but not that much.

Profiling Flow

Using xhprof, I profiled the loading process of that “Hello World” article both in Flow and Twenty Fifteen. The comparison is depicted in the following figure:

You can safely ignore the “Incl. Wall Time” and “Incl. CPU” statistics because they do not represent a proper load testing.

---

From all of the statistics above, I’m confident in saying that — for a dynamic, time-saving theme builder — performance of Flow is perfectly fine. What is more, we can increase it easily by using HHVM and employing browser as well as page caching.

Source code

The final step is to look into Flow’s source code. Here is a list I’ve compiled from my quick eye-scan of its source code:

• Code organization: nice folder structure, easy to navigate and find what you want (includes, templates, classes, etc)
• Code documentation: satisfactory, almost every function is documented with a simple description, @since, @access, @param(s) and @return. I must say that some of the descriptions suffer from little grammatical mistakes, no problem though (WordPress Core has millions of them :D)
• Class usage: reasonable usage of PHP classes, have good visibility. It is also fairly straightforward to create a custom Flow module as there is a base class which can be extended (similar to WordPress Widget API)
• JavaScript: using Backbone (WordPress Core using too) with collections, mixins, models and views. Code looks fine, I like it

Conclusion

You made it here? Congratulations! Although it is a long and tedious review, I hope I’ve touched all parts of the theme builder and presented enough data for you to decide if Flow is for your site or not. As far as my opinion is concerned, I like Flow and will probably use it for my next projects (maybe migrating Lamosty.com to it). If I had a theme builder review scale though, I would give Flow 9 out of 10. I’m still waiting for that ultimate and perfect theme builder. 🙂 And thanks goes to Nick La for having the patience to answer some of my silly questions and giving me valuable feedback.