Re: Re-vamping the history tab

Hi again,

After having some conversations on our team, we've had some new thoughts
about when/where to start bringing in React:

We're working on the tree state being re-opened when the user re-opens the
app. We were originally planning to do this change within the existing
framework, but were having difficultly bringing it in. We are running into
the same repeated server group bug that was causing the feature tests to
fail.

This feels like a place where pulling in react will help manage state in
the tree, and make the code more maintainable. So we're going to use this
as an opportunity to demonstrate react in the codebase. Hopefully this will
make it easier to have a conversation about react in the context of pgadmin.

Of course there is still plenty of useful conversation we can have before
anything is ready to demo. Let us know your thoughts.

Thanks,

Tira & George

On Thu, Mar 23, 2017 at 9:51 AM, Atira Odhner <aodhner(at)pivotal(dot)io> wrote:

> Why anything new? Adding any library needs to be fully justified, and
>> adding one this large, that gives similar capabilities to one we
>> largely already have is going to require a significant amount of
>> convincing before it would be added.
>
> Of course. That's why we're starting this conversation early. :)
>
>> In this case I can't see any reason why this feature couldn't be quite
>> simply added using just jQuery to make Ajax calls to get the history,
>> and (possibly) get the history detail when a row is selected, assuming
>> it's decided that that info should be retrieved on demand rather than
>> all at once. Additional rows can be added to the UI in response to
>> query results being received (and of course, saved to the SQLite
>> database at the backend for future sessions to read).
>
>
>
> In this case I don't even think using backbone.js (our existing MVC
>> library) would buy a huge amount, though it may be a little more
>> convenient.
>
>
> We will use jquery to make ajax calls that fetch the history data, but
> actually rendering that data and managing the data once it has been fetched
> will be handled with React.
>
> Backbone is not as powerful as React, and does not provide the ease of
> ensuring a consistent state:
> for example, which tree node is expanded and which context menu applies to
> each node.
>
> Granted, the history tab has less state to manage than the tree. It still
> has some:
> which row is highlighted in the left panel and which data is displayed in
> the right.
>
> That's part of why I think the history tab is a good place to start with
> React. it is a simple demonstration of the way React will drop in.
>
> Backbone tends to leak memory over time unless you are very careful about
> unbinding events when re-rendering. So users switching between various
> items in history tab may have a degraded experience over time if we use
> backbone.
>
> Using react will make it easier to avoid situations like the one that has
> developed with the server tree bug.
>
> Pgadmin4 is a heavily client-side application, and its Javascript code
> needs to be treated as a first class citizen. The same principles of
> needing to be highly componentized, easily understood by future developers,
> and readily changeable should be applied to the front end code.
>
> Here are some resources on react for the interested:
>
> React vs Backbone: http://www.code-experience.com/react-js-vs-traditional-
> mvc-backbone-ember-angular/
>
> React vs Angular: https://medium.com/@paramsingh_66174/angularjs-vs-
> reactjs-e651a194dfcb#.oopgbfq3z
>
> Another quick take on why react: https://www.syncano.io/
> blog/reactjs-reasons-why-part-1/
>
>> For review purposes, that's fine. Please ensure such patches are
>> clearly marked as WIP or for comment only so we know not to commit
>> them.
>
>
> Sounds good!
>
> Please be careful to only create RMs for distinct new features, as
>> that list is used as the changelog for users so we need it to make
>> sense to them. They dont care about incremental changes or
>> infrastructure changes unless the fix a specific bug or add a specific
>> feature.
>
>
> Ah! That's really useful clarification on how we should be using Redmine.
> Please continue to provide us feedback about whether our Redmine stories
> are at the right level.
>
> Tira & George
>
>
>
> On Thu, Mar 23, 2017, 5:17 AM Dave Page <dpage(at)pgadmin(dot)org> wrote:
>
>> Hi
>>
>> On Wed, Mar 22, 2017 at 7:09 PM, Atira Odhner <aodhner(at)pivotal(dot)io> wrote:
>> > Hi Hackers,
>> >
>> > We want to give you a heads up on some of the changes we are planning
>> and
>> > get your input on the implementation plan.
>> >
>> > The Redmine issue is here: https://redmine.postgresql.org/issues/2282
>> >
>> > Over the past month we have been doing many user interviews and one of
>> the
>> > major asks is that the History tab could store the complete query text.
>> From
>> > this feedback we started several threads on the design:
>> >
>> > https://www.postgresql.org/message-id/CAPG3WN7YxVO+n3qbDOWQB
>> WY0rkscq1ar-5V-PJBSEPPZNsT_qw(at)mail(dot)gmail(dot)com
>> > https://www.postgresql.org/message-id/CAPG3WN6yLGkD8DkAvdO0M
>> WnNXFEisU5UXJgrLX%3D-kcMnrwaT2A%40mail.gmail.com
>> >
>> > The user level, here are the changes we want are:
>> > Complete query text stored in the History tab
>> > Complete messages text stored in the History tab
>> > Redesign of the tab in order to allow for both of the above in an easily
>> > browsable format.
>>
>> I've been impressed with the process that's taken us this far. It's
>> worked well.
>>
>> > Implementation Plan
>> >
>> > In order to accomplish this the plan is to rip out the existing History
>> tab
>> > code, and rewrite it in React.
>> >
>> > Why React:
>> > React gives us better state management, an ability to ensure that we are
>> > rendering consistent state in the history feature. React is highly
>> > performant with a shadow-dom that re-renders only changed components.
>> It is
>> > also modular and easy to create components that are self-contained and
>> > reusable.
>>
>> Why anything new? Adding any library needs to be fully justified, and
>> adding one this large, that gives similar capabilities to one we
>> largely already have is going to require a significant amount of
>> convincing before it would be added.
>>
>> In this case I can't see any reason why this feature couldn't be quite
>> simply added using just jQuery to make Ajax calls to get the history,
>> and (possibly) get the history detail when a row is selected, assuming
>> it's decided that that info should be retrieved on demand rather than
>> all at once. Additional rows can be added to the UI in response to
>> query results being received (and of course, saved to the SQLite
>> database at the backend for future sessions to read).
>>
>> In this case I don't even think using backbone.js (our existing MVC
>> library) would buy a huge amount, though it may be a little more
>> convenient.
>>
>> > Why rip out history as it exists:
>> > We want to test the history feature as we build it and it’s not
>> currently
>> > built in a way that is testable. It is baked into sqleditor.js and not
>> well
>> > isolated from other features.
>> >
>> > As previewed in the design, the setup is quite different and we believe
>> it
>> > will be faster to re-write this feature than to make these changes
>> in-place.
>>
>> How you develop is up to you, however the master branch needs to
>> remain in a releasable state in case we have any security bugs
>> reported the necessitate a prompt release.
>>
>> > Also:
>> > We will need a JS build step in order to pull in React (or any
>> framework) as
>> > we do not want to add it as a vendorized dependency because of its size.
>> >
>> > Pre-feature-parity commits:
>> > Since we are re-writing this history feature, we will be submitting
>> patches
>> > as we build it to regularly communicate our progress before we have one
>> > gigantic patch.
>>
>> For review purposes, that's fine. Please ensure such patches are
>> clearly marked as WIP or for comment only so we know not to commit
>> them.
>>
>> > Once we have achieved parity, we will create new redmine stories to
>> bring in
>> > the additional improvements such as highlighting failed queries and
>> making
>> > it easy to copy the historical query.
>>
>> Please be careful to only create RMs for distinct new features, as
>> that list is used as the changelog for users so we need it to make
>> sense to them. They dont care about incremental changes or
>> infrastructure changes unless the fix a specific bug or add a specific
>> feature.
>>
>> Thanks for your work on this!
>>
>> --
>> Dave Page
>> Blog: http://pgsnake.blogspot.com
>> Twitter: @pgsnake
>>
>> EnterpriseDB UK: http://www.enterprisedb.com
>> The Enterprise PostgreSQL Company
>>
>