Live Feed & Query Routing Implimentation

ansonphong commented 10 years ago

Hi Michel, Here is some details on an initial implementation of the 'live-feed' Angular directive, in the context of a real-time queryable search interface.

This is how the live-feed directive is activated.

feed_init['search_results'] = {
        preload : 10,
        load_increment : 10,
        view : {
            current : 'detail',
            options : ['list','detail','grid']
        },
        order_by : 'rank_score',
        panel : 'search_results',
        feed_query : 'url'
    };

<div live-feed="search_results"></div>

You will notice that the query_args field is a string 'url' instead of an object of actual query args. This will indicate that the query args are coming from the URL. Details can be seen in the latest documentation (see link below).

ie. realitysandwich.com/search/#/post-type=link&tax-topic=psyche&s=philosophy&orderby=rank_score

Taxonomy Query The 'tax-topic' query var can be used to generate a tax_query field object for pw_query to match value to 'slug' within the custom taxonomy 'tax-{{taxonomy_name}}'. So this would also apply tax-category to the 'category' taxonomy, and tax-section to 'section' taxonomy, etc. Let me know if you have any questions about this, or Haidy should also know. See this for more info : http://codex.wordpress.org/Class_Reference/WP_Query#Taxonomy_Parameters

Basically :

array(
'taxonomy' => 'topic',
'field' => 'slug',
'terms' => 'psyche'
)

Work Plan We can begin by implementing a prototype of the below 'design concept', which feeds query args into pw_query and returns the results real-time. When the feed is loading it can just have a simple 'loading' template which we can customize.

If you have any questions, don't hesitate to ask me. So far I've been impressed by the self-sustainability of the Innuva team, although if anything critical is unclear in the documentation, just let me know.

Thanks!

Wordpress Method:

I suggest making a Wordpress page template called 'Search Results' and set it on a new page called 'Search' with the permalink /search, and then invoking 'live-feed' in there.

Assets:

ngInfiniteScroll http://binarymuse.github.io/ngInfiniteScroll/

Documentation:

POSTWORLD // Angular / JS Functions https://github.com/phongmedia/postworld/tree/master/js

Design Concept:

live-feed-search

michelhabib commented 10 years ago

Phong, the requirements above are crystal clear and i love the way you document things. A couple of questions here, mostly related to the prototype code itself. 1- Is there a specific reason for using an array to describe feed_init? most of that information seems to me [at a first glance] that it can be embedded as attributes or ng-attributes with each component. for the query-url, i think this can be handled by the route as well. 2- Do we have to compile the postworld_feed [postworld.js] ? what is dynamic about it that needs to be compiled at runtime ? at a first glance also, i thought it could be handled with angular directives/controllers/route directly.

Note that i am not absolutely sure of alternatives to the above, I am now building a structure for it, and trying to organize controllers/directives/services in a way that is most suited to Angular.

ansonphong commented 10 years ago

Hi Michel, Good questions. To answer :

1) The method of using feed_init Object is useful, since it's easy to read (for me), easy to add to, and easy to merge with the feed_data Object. This is a fairly common use of activating Javascript actions, as I'm sure you have seen before. It's an interesting idea to use ng-attributes, although I prefer writing in form of a JS object, which is much more flexible in some ways. For instance, how would we otherwise describe multidimensional attributes in an ng-attribute form?

This just doesn't seem as elegant:

<div live-feed="search_results" data-preload="10" data-load-increment="10" ...></div>

So I would prefer to stick with a JS object to initiate the feed settings. Does this answer your question? Are there any points I am missing?

2) I would prefer to NOT have to compile this at runtime - I was not happy with this solution that I came up with, although it seemed like the only way (to somebody new to Angular.) If there is a better way to do it, I am open to that. What is dynamic about it was the real-time ordering, in the context of ng-repeat, although now that we'll be using pw_query to get the actual results, I think that the Angular orderBy becomes cosmetic and lacking the depth of 'all the posts' instead just sorting the 'currently loaded posts', so I'm open to that level of scope influence to fall out of the picture.

Previously I had just hard-coded the ng-repeat something like this :

OLD METHOD :

<div live-feed="front_page_feature">
    <!-- CONTROLLER -->
    <div ng-controller="postworld_feed">
        <div ng-include src="templates.panels.feed_top"></div>
        <!-- REPEAT TEMPLATE -->
        <div class="post"
            ng-repeat="post in posts | orderBy:feed_data.order_by">
            <div ng-include src="get_template(post.post_type)"></div>
        </div>
    </div>
</div>

Although, I would like this plugin to be user friendly and plan to propagate it as open source in the future to other developers and users, so making it very easy to activate a feed became a priority, thus the compiling. Do you see another way to accomplish the same thing?

This is how I would like it to look :

<div live-feed="search_results"></div>

Let me know if you have an elegant solution to this.

Thanks.

michelhabib commented 10 years ago

Just to follow up the thread since our phone discussion, i see your point for Number 1, agreed. for Number 2, i will start with a prototype to do without a compile, if i can't do it i will revert to your method above.

michelhabib commented 10 years ago

@phongmedia Looking at the Design Concept above.i assume that every single parameter in the left search box and the top search box will cause the results to be retrieved from the server. The only exception is the post template, is that correct?

ansonphong commented 10 years ago

Yes that is correct. I suggest we just have a refresh action hooked to a button for development purposes which retrieves the new query according to the new parameters and updates the URL route. Then later we can implement the update methods on the fields.

michelhabib commented 10 years ago

Sure, thanks. Another Question, in the design concept above, do you consider the search fields on the left a panel and the search/order fields on the right another panel? or do you consider the header of the right side is part of the search results that will be always there?

also, in the right search field [above the sorting], what field should be used for that? I didn't find a search option in wp_query [for title and content] http://codex.wordpress.org/Class_Reference/WP_Query i am looking at the keyword search parameter, i will let you know once i find out what that does.

ansonphong commented 10 years ago

Search field in pw/wp_query is called 's', can you see it?

Also, the panel is considered a different panel - we'll want to develop a way with load-panel directive to link the scope of an embedded panel into a parallel controller. What do you think?

On Thursday, October 3, 2013, michelhabib wrote:

Sure, thanks. Another Question, in the design concept above, do you consider the search fields on the left a panel and the search/order fields on the right another panel? or do you consider the header of the right side is part of the search results that will be always there?

also, in the right search field [above the sorting], what field should be used for that? I didn't find a search option in wp_query [for title and content] http://codex.wordpress.org/Class_Reference/WP_Query i am looking at the keyword search parameter, i will let you know once i find out what that does.

— Reply to this email directly or view it on GitHubhttps://github.com/phongmedia/postworld/issues/13#issuecomment-25620795 .

michelhabib commented 10 years ago

Yes, figured that one, thanks. It seems to work on a combination of fields.

I am experimenting with creating multiple instances of load-panel directive, and accessing them from the live feed controller. Angular has many ways to handle this scenario. By design Angular has inheritance by default on nested Elements, all sharing the same scope [or not, if you choose to use isolated scopes] I will keep you posted with my overall design for the whole framework. We should have the full picture this week.

ansonphong commented 10 years ago

Great, thanks for the update.

On Thu, Oct 3, 2013 at 2:09 PM, michelhabib notifications@github.comwrote:

Yes, figured that one, thanks. It seems to work on a combination of fields.

I am experimenting with creating multiple instances of load-panel directive, and accessing them from the live feed controller. Angular has many ways to handle this scenario. By design Angular has inheritance by default on nested Elements, all sharing the same scope [or not, if you choose to use isolated scopes] I will keep you posted with my overall design for the whole framework. We should have the full picture this week.

— Reply to this email directly or view it on GitHubhttps://github.com/phongmedia/postworld/issues/13#issuecomment-25658304 .

michelhabib commented 10 years ago

This is just a quick draft of how the livefeed is structured and how the framework interacts with the main directives and services. design-page-003

ansonphong / postworld