My experience and some feedback for frontity

🙋Get Help
1

Hi there, I wanted to write this post a few weeks ago but I didn’t have time. So now that I’m on vacation I want to share with you all my experience and give some feedback for Frontity.

First I want to explain my case. I needed to create an IO games portal such a http://iogames.space/ or https://www.crazygames.com/c/io. This portal does not have to be cool or perfect, it is just a marketing tool that I’m going to use in the future. Another requirement was that it has to be easy to maintain because is another person who will be in charge of the content.

So my main concern was that I didn’t want to spend too much time on it. I know React very well, I don’t know Wordpress or PHP. So my conclusion was, what if I use WordPress as the backend and I just have to focus on the Frontend with React. That means I don’t have to deal with database servers or even admin panel.

Frontity makes a lot of sense for it. Let’s go then :slight_smile:

The rest API problem
Instead of installing WordPress on my server I tried to use a free site on worpress.com and the problem was that they don’t support the /wp-json endpoint. Instead, you have to use something like this:

https://public-api.wordpress.com/wp/v2/sites/instajuegos.home.blog/posts/

That drove me crazy because it was so difficult to find that endpoint on forums etc. I realize that wordpress.com was very limited so I decided to install WordPress on my server. But the /wp-json endpoint still does not work because I didn’t have something called permalink. Again google and forums looking for the answer.

I think this is a very important part because is the way you connect your backend with your frontend. So, in my opinion, the docs are a bit poor explaining all of these cases.

What I would do is create a small tool inside of the docs where you can type the URL of your site and then it tells you what endpoints can be used. Checking first /wp-json then /?rest_route=/. or even the wordpress.com format.

Images
There is no example of loading an image on the default demo. I really missed a logo on the header. I had to go to the docs to know how to do that such a simple thing.

I discussed this also in other post: Static files would be great to import statics directly without using import. Is much more intuitive.

Memory leak on Chrome
Chrome memory goes crazy after a while if I have the Dev Tools opened when frontity dev. It does not happen when frontity serve. If the dev tools are closed everything is fine. Didn’t experience that in Firefox either.

Adding Google Analytics is not trivial
A small guide on how to add or load custom scripts. I believe that Frontity will grow a lot and I guess some people will just use templates and that’s it. Don’t ask them to deal with useEffect just to add analytics.

Custom fields
In my case, I needed custom fields for the Thumbnails and the Url. I missed a tutorial on Frontity that drive me to that purpose. I had to google a lot finding this plugin https://wordpress.org/plugins/advanced-custom-fields/ and also configuring it. If you want send me a DM and I can give more info about the whole configuration. It wasn’t very trivial.

Update fields or custom fields
I’d like to add a “rating game field” where people can give one or five stars to the game. I googled but didn’t found an easy solution. Again this is a “toy” project so I don’t want to expend to much time on it.

And I close with this conclusion and thoughts. Not sure if update fields and custom fields are possible in WordPress. But if possible, I think it is the final feature for almost all cases.

I mean think about it. You have the best CMS as your backend, If you can “modify” the database adding the fields you need and those fields can be updated on the front you can build whatever you want. Not only blogs. And you just have to learn React which is becoming like the standard for all UI experiences.

I did the Frontend in one day. And two or three days stuck withe stupid things. Now, that I know how Frontity works I would say that I can make this site in one day or less. http://tusjuegos.io/

I see myself making complex sites in the future using Frotity when fast development is required. In my opinion, you are making a very powerful tool for developers and going in the right direction.

Good job and keep working guys!

Cheers!

6 Likes
2

:clap: :clap: :clap:

3

Hey @josema.enzo thanks a lot for sharing your thoughts. This kind of detailed feedback is really useful for us, and helps us improve the framework. I’m sure the @development-team will be able to turn your suggestions into actionable tasks.

1 Like
4

Can you open source how you got advanced custom fields to work? That’s a pretty huge feature missing from vanilla frontity as far as I can tell. Or at least I’ve not seen it done. And acf is basically a required WordPress plugin if you want to do any kind of robust post Metadata level stuff.

1 Like
5

Adding custom fields to REST API is not that hard, try this methods:
https://www.gavick.com/blog/adding-custom-fields-in-the-wordpress-rest-api

1 Like
6

ah yeah I see. This is a WP side thing. I think the Frontity devs are already working on a plugin to address that then.

7

Just drop this code in /wp-content/plugins/ and the endpoint will include custom_fields

Just drop this code in /wp-content/plugins/ and the endpoint will include custom_fields

<?php
/**
 * Plugin Name: PXE Rest Api ACF
 * Plugin URI:        
 * Description: 
 * Version: 1.0.0
 * Author: Pixie
 * Author URI: http://www.pixie.com.uy/
 * License: MIT
 * Licence URI: https://opensource.org/licences/MIT
 * 
 */

defined('WPINC') or die;

if (!class_exists('PXE_Rest_Api_ACF')) :

    class PXE_Rest_Api_ACF {

        protected static $instance = NULL;

        public static function get_instance() {
            if (null === self::$instance) {
                self::$instance = new self;
            }
            return self::$instance;
        }

        public function __construct() {
            add_action('rest_api_init', __CLASS__ . '::color_add_data');
        }

        public static function color_add_data() {
            register_rest_field('post', 'acf', array(
                'get_callback' => __CLASS__ . '::get_acf_data',
                'schema' => null,
            ));
        }

        public static function get_acf_data( $object ) {
            $post_id = $object['id'];
            $post_meta = get_post_meta( $post_id );
            foreach ($post_meta as $key => $value) {
                if (strpos($key, '_') !== 0) {
                    $filtered_post_meta[$key] = $value;
                }
            }
            return $filtered_post_meta;
        }
    }

    $PXE_Rest_Api_ACF = new PXE_Rest_Api_ACF;
    
endif;

image

2 Likes
8

Thanks! This is excellent :slight_smile:

9

Hi, great job!
Just one note, I prefer to use the ACF get_field_objects function to get structured data, in your version every subfield of a repeater field is seen as a single one in one line and not aggregated to the main one.

     public static function get_acf_data( $object ) {
        $post_id = $object['id'];

        $fields = (array) get_field_objects($post_id);

        foreach ( $fields as $field )
            $label = $field["name"];
            $filtered_post_meta[$label] = json_encode($field);
        }

        return $filtered_post_meta;
    }
10

:clap: :clap: :clap:

11

Maybe you would prefer the “field name - value” pair:

        /*...*/
        $fields = (array) get_field_objects($post_id);

        foreach ($fields as $field) {
            $label = $field["name"];
            $filtered_post_meta[$label] = $field["value"];
        }

        return $filtered_post_meta;
        /*...*/

image

1 Like
12

True!
I was using the full field for debug purpose, and I forgot to change it here. My bad :slight_smile:

13

I’m sorry I’ve been busy.

This is the plugin I used for custom fileds https://wordpress.org/plugins/advanced-custom-fields/. Is very customizable. After adding your fields on the admin, you have to edit functions.php on the Theme Editor. And this is the snippet I have.

// Add the plugin
add_action( 'rest_api_init', 'add_custom_fields' );
// Helpers
function get_custom_fields( $object, $field_name, $request ) {
	return get_field($field_name);
}
function add_custom_fields($field_name) {
	register_rest_field(
		'post', 
		$field_name, //New Field Name in JSON RESPONSEs
		array(
			'get_callback'    => 'get_custom_fields', // custom function name 
			'update_callback' => null,
			'schema'          => null,
			 )
	);
}
// Adding fields previously created on admin
add_custom_fields('url_main');
add_custom_fields('thumbnail_image');
add_custom_fields('thumbnail_video');
add_custom_fields('short_description');

I still don’t know if is possible to create a form on the front and update these custom fields. It would be a great feature IMO.

1 Like
14

I have discovered that this problem is due to the current scheduler which we are going to change to solve this other problem: https://github.com/frontity/frontity/issues/236

15

I run my Frontity app locally in the Google Chrome browser. I usually have the dev tools open. After a few minutes the site becomes unusable due to the memory leak.

I tried closing Dev Tools as suggested and that seems to fix the issue. I run my Frontity app locally using npx frontity dev. Is there a way to use Chrome Dev tools and not experience the memory leak?

I’ve attached a screenshot from Chrome task manager showing the offender :slight_smile:

Screen Shot 2021-02-01 at 1.14.33 PM
Screen Shot 2021-02-01 at 1.14.33 PM901Ă—150 21.1 KB

Thank you in advance.

1 Like
16

Hey, sorry for the issue. Yes, you can solve by disabling the React DevTools. They work on Firefox though.

It will be fixed once we merge this PR: Migrate Frontity Connect to react easy state [21pt] by luisherranz · Pull Request #415 · frontity/frontity · GitHub

Sorry this is taking so long :sweat_smile: