You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@echarts.apache.org by Yi Shen <sh...@gmail.com> on 2019/11/25 13:02:36 UTC
[INFO] Rewrite the document page to improve the user experience
Hi,
The document page of echarts has been complained about bad user experience
for a very long time. There are some main reasons I can think of.
1. The page will load a whole option.json. It can take a very long time on
a bad network. In the Google Page Insight test, it only scores 58 on
desktop[1]
2. The scrollbar on the page is a js component. It's hard to do searching
on the page.
3. The hierarchy on the right is not so clear. Some of our developers even
don't know the card can't be expanded to get more information.
4. The MOST important is the missing of fuzzy search. I created a JIRA
ticket to describe it before[2]
So I forked from the original repo and started rewriting the whole document
page two weeks ago. The latest code is in the
https://github.com/pissang/incubator-echarts-doc . You can preview it on
https://pissang.github.io/incubator-echarts-doc/public/en/option.html#title
In the new version, I did the following improvements to try to solve the
problems.
1. Separate the JSON and only load the necessary content. The score can be
95 on Google Page Insight after optimized.
2. Use native scrollbar to support browser searching on the page.
3. Optimize UI of document content on the right. The hierarchy is more
clear. Also the first level will be expanded by default so developers can
find most of the information by simply searching on the page.
4. Add full-text search support.
Basically, all the improvements are focused on helping developers getting
what they needed more conveniently.
The new document will be merged and integrated into the official website
when all the PPMC agree it's ready to be published.
[1]
https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fecharts.apache.org%2Fzh%2Foption.html%23title&tab=desktop
[2] https://issues.apache.org/jira/browse/ECHARTS-10
[3]
https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fpissang.github.io%2Fincubator-echarts-doc%2Fpublic%2Fen%2Foption.html%23title&tab=desktop
--
Yi Shen
Apache ECharts(incubating) PPMC
Re: [INFO] Rewrite the document page to improve the user experience
Posted by Yi Shen <sh...@gmail.com>.
Just created a JIRA ticket https://issues.apache.org/jira/browse/ECHARTS-12
On Thu, Nov 28, 2019 at 3:03 PM siwen su <su...@gmail.com> wrote:
> Hi Yi:
>
> Yes, the code, the example I found uses 'x' option in title, which is
> outdated.
>
> Yi Shen <sh...@gmail.com> 于2019年11月28日周四 下午3:00写道：
>
> > Hi siwen.
> >
> > Do you mean the code in the example?
> >
> > I will create a JIRA ticket to track this issue.
> >
> > On Wed, Nov 27, 2019 at 9:57 PM siwen su <su...@gmail.com> wrote:
> >
> > > May be we should update Examples? Because I saw some using outdated .
> > >
> > > https://www.echartsjs.com/examples/zh/editor.html?c=pie-simple
> > >
> > > This by example.
> > >
> > > siwen su <su...@gmail.com> 于2019年11月27日周三 下午9:51写道：
> > >
> > > > Great, I have tried the new version, It better than new one.
> > > >
> > > > Ovilia <ov...@gmail.com> 于2019年11月26日周二 下午9:25写道：
> > > >
> > > >> I tried with it and it's definitely helpful when searching for
> certain
> > > >> APIs.
> > > >> Good job, Yi!
> > > >>
> > > >> Thanks
> > > >>
> > > >> Wenli
> > > >>
> > > >>
> > > >> On Mon, Nov 25, 2019 at 9:03 PM Yi Shen <sh...@gmail.com>
> wrote:
> > > >>
> > > >> > Hi,
> > > >> >
> > > >> >
> > > >> > The document page of echarts has been complained about bad user
> > > >> experience
> > > >> > for a very long time. There are some main reasons I can think of.
> > > >> >
> > > >> >
> > > >> > 1. The page will load a whole option.json. It can take a very long
> > > time
> > > >> on
> > > >> > a bad network. In the Google Page Insight test, it only scores 58
> on
> > > >> > desktop[1]
> > > >> >
> > > >> > 2. The scrollbar on the page is a js component. It's hard to do
> > > >> searching
> > > >> > on the page.
> > > >> >
> > > >> > 3. The hierarchy on the right is not so clear. Some of our
> > developers
> > > >> even
> > > >> > don't know the card can't be expanded to get more information.
> > > >> >
> > > >> > 4. The MOST important is the missing of fuzzy search. I created a
> > JIRA
> > > >> > ticket to describe it before[2]
> > > >> >
> > > >> >
> > > >> > So I forked from the original repo and started rewriting the whole
> > > >> document
> > > >> > page two weeks ago. The latest code is in the
> > > >> > https://github.com/pissang/incubator-echarts-doc . You can
> preview
> > it
> > > >> on
> > > >> >
> > > >>
> > >
> >
> https://pissang.github.io/incubator-echarts-doc/public/en/option.html#title
> > > >> >
> > > >> >
> > > >> > In the new version, I did the following improvements to try to
> solve
> > > the
> > > >> > problems.
> > > >> >
> > > >> > 1. Separate the JSON and only load the necessary content. The
> score
> > > can
> > > >> be
> > > >> > 95 on Google Page Insight after optimized.
> > > >> >
> > > >> > 2. Use native scrollbar to support browser searching on the page.
> > > >> >
> > > >> > 3. Optimize UI of document content on the right. The hierarchy is
> > more
> > > >> > clear. Also the first level will be expanded by default so
> > developers
> > > >> can
> > > >> > find most of the information by simply searching on the page.
> > > >> >
> > > >> > 4. Add full-text search support.
> > > >> >
> > > >> >
> > > >> > Basically, all the improvements are focused on helping developers
> > > >> getting
> > > >> > what they needed more conveniently.
> > > >> >
> > > >> >
> > > >> > The new document will be merged and integrated into the official
> > > website
> > > >> > when all the PPMC agree it's ready to be published.
> > > >> >
> > > >> >
> > > >> > [1]
> > > >> >
> > > >> >
> > > >>
> > >
> >
> https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fecharts.apache.org%2Fzh%2Foption.html%23title&tab=desktop
> > > >> >
> > > >> > [2] https://issues.apache.org/jira/browse/ECHARTS-10
> > > >> >
> > > >> > [3]
> > > >> >
> > > >> >
> > > >>
> > >
> >
> https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fpissang.github.io%2Fincubator-echarts-doc%2Fpublic%2Fen%2Foption.html%23title&tab=desktop
> > > >> >
> > > >> >
> > > >> > --
> > > >> > Yi Shen
> > > >> > Apache ECharts(incubating) PPMC
> > > >> >
> > > >>
> > > >
> > >
> >
> >
> > --
> > Yi Shen
> > Apache ECharts(incubating) PPMC
> >
>
--
Yi Shen
Apache ECharts(incubating) PPMC
Re: [INFO] Rewrite the document page to improve the user experience
Posted by siwen su <su...@gmail.com>.
Hi Yi:
Yes, the code, the example I found uses 'x' option in title, which is
outdated.
Yi Shen <sh...@gmail.com> 于2019年11月28日周四 下午3:00写道：
> Hi siwen.
>
> Do you mean the code in the example?
>
> I will create a JIRA ticket to track this issue.
>
> On Wed, Nov 27, 2019 at 9:57 PM siwen su <su...@gmail.com> wrote:
>
> > May be we should update Examples? Because I saw some using outdated .
> >
> > https://www.echartsjs.com/examples/zh/editor.html?c=pie-simple
> >
> > This by example.
> >
> > siwen su <su...@gmail.com> 于2019年11月27日周三 下午9:51写道：
> >
> > > Great, I have tried the new version, It better than new one.
> > >
> > > Ovilia <ov...@gmail.com> 于2019年11月26日周二 下午9:25写道：
> > >
> > >> I tried with it and it's definitely helpful when searching for certain
> > >> APIs.
> > >> Good job, Yi!
> > >>
> > >> Thanks
> > >>
> > >> Wenli
> > >>
> > >>
> > >> On Mon, Nov 25, 2019 at 9:03 PM Yi Shen <sh...@gmail.com> wrote:
> > >>
> > >> > Hi,
> > >> >
> > >> >
> > >> > The document page of echarts has been complained about bad user
> > >> experience
> > >> > for a very long time. There are some main reasons I can think of.
> > >> >
> > >> >
> > >> > 1. The page will load a whole option.json. It can take a very long
> > time
> > >> on
> > >> > a bad network. In the Google Page Insight test, it only scores 58 on
> > >> > desktop[1]
> > >> >
> > >> > 2. The scrollbar on the page is a js component. It's hard to do
> > >> searching
> > >> > on the page.
> > >> >
> > >> > 3. The hierarchy on the right is not so clear. Some of our
> developers
> > >> even
> > >> > don't know the card can't be expanded to get more information.
> > >> >
> > >> > 4. The MOST important is the missing of fuzzy search. I created a
> JIRA
> > >> > ticket to describe it before[2]
> > >> >
> > >> >
> > >> > So I forked from the original repo and started rewriting the whole
> > >> document
> > >> > page two weeks ago. The latest code is in the
> > >> > https://github.com/pissang/incubator-echarts-doc . You can preview
> it
> > >> on
> > >> >
> > >>
> >
> https://pissang.github.io/incubator-echarts-doc/public/en/option.html#title
> > >> >
> > >> >
> > >> > In the new version, I did the following improvements to try to solve
> > the
> > >> > problems.
> > >> >
> > >> > 1. Separate the JSON and only load the necessary content. The score
> > can
> > >> be
> > >> > 95 on Google Page Insight after optimized.
> > >> >
> > >> > 2. Use native scrollbar to support browser searching on the page.
> > >> >
> > >> > 3. Optimize UI of document content on the right. The hierarchy is
> more
> > >> > clear. Also the first level will be expanded by default so
> developers
> > >> can
> > >> > find most of the information by simply searching on the page.
> > >> >
> > >> > 4. Add full-text search support.
> > >> >
> > >> >
> > >> > Basically, all the improvements are focused on helping developers
> > >> getting
> > >> > what they needed more conveniently.
> > >> >
> > >> >
> > >> > The new document will be merged and integrated into the official
> > website
> > >> > when all the PPMC agree it's ready to be published.
> > >> >
> > >> >
> > >> > [1]
> > >> >
> > >> >
> > >>
> >
> https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fecharts.apache.org%2Fzh%2Foption.html%23title&tab=desktop
> > >> >
> > >> > [2] https://issues.apache.org/jira/browse/ECHARTS-10
> > >> >
> > >> > [3]
> > >> >
> > >> >
> > >>
> >
> https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fpissang.github.io%2Fincubator-echarts-doc%2Fpublic%2Fen%2Foption.html%23title&tab=desktop
> > >> >
> > >> >
> > >> > --
> > >> > Yi Shen
> > >> > Apache ECharts(incubating) PPMC
> > >> >
> > >>
> > >
> >
>
>
> --
> Yi Shen
> Apache ECharts(incubating) PPMC
>
Re: [INFO] Rewrite the document page to improve the user experience
Posted by Yi Shen <sh...@gmail.com>.
Hi siwen.
Do you mean the code in the example?
I will create a JIRA ticket to track this issue.
On Wed, Nov 27, 2019 at 9:57 PM siwen su <su...@gmail.com> wrote:
> May be we should update Examples? Because I saw some using outdated .
>
> https://www.echartsjs.com/examples/zh/editor.html?c=pie-simple
>
> This by example.
>
> siwen su <su...@gmail.com> 于2019年11月27日周三 下午9:51写道：
>
> > Great, I have tried the new version, It better than new one.
> >
> > Ovilia <ov...@gmail.com> 于2019年11月26日周二 下午9:25写道：
> >
> >> I tried with it and it's definitely helpful when searching for certain
> >> APIs.
> >> Good job, Yi!
> >>
> >> Thanks
> >>
> >> Wenli
> >>
> >>
> >> On Mon, Nov 25, 2019 at 9:03 PM Yi Shen <sh...@gmail.com> wrote:
> >>
> >> > Hi,
> >> >
> >> >
> >> > The document page of echarts has been complained about bad user
> >> experience
> >> > for a very long time. There are some main reasons I can think of.
> >> >
> >> >
> >> > 1. The page will load a whole option.json. It can take a very long
> time
> >> on
> >> > a bad network. In the Google Page Insight test, it only scores 58 on
> >> > desktop[1]
> >> >
> >> > 2. The scrollbar on the page is a js component. It's hard to do
> >> searching
> >> > on the page.
> >> >
> >> > 3. The hierarchy on the right is not so clear. Some of our developers
> >> even
> >> > don't know the card can't be expanded to get more information.
> >> >
> >> > 4. The MOST important is the missing of fuzzy search. I created a JIRA
> >> > ticket to describe it before[2]
> >> >
> >> >
> >> > So I forked from the original repo and started rewriting the whole
> >> document
> >> > page two weeks ago. The latest code is in the
> >> > https://github.com/pissang/incubator-echarts-doc . You can preview it
> >> on
> >> >
> >>
> https://pissang.github.io/incubator-echarts-doc/public/en/option.html#title
> >> >
> >> >
> >> > In the new version, I did the following improvements to try to solve
> the
> >> > problems.
> >> >
> >> > 1. Separate the JSON and only load the necessary content. The score
> can
> >> be
> >> > 95 on Google Page Insight after optimized.
> >> >
> >> > 2. Use native scrollbar to support browser searching on the page.
> >> >
> >> > 3. Optimize UI of document content on the right. The hierarchy is more
> >> > clear. Also the first level will be expanded by default so developers
> >> can
> >> > find most of the information by simply searching on the page.
> >> >
> >> > 4. Add full-text search support.
> >> >
> >> >
> >> > Basically, all the improvements are focused on helping developers
> >> getting
> >> > what they needed more conveniently.
> >> >
> >> >
> >> > The new document will be merged and integrated into the official
> website
> >> > when all the PPMC agree it's ready to be published.
> >> >
> >> >
> >> > [1]
> >> >
> >> >
> >>
> https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fecharts.apache.org%2Fzh%2Foption.html%23title&tab=desktop
> >> >
> >> > [2] https://issues.apache.org/jira/browse/ECHARTS-10
> >> >
> >> > [3]
> >> >
> >> >
> >>
> https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fpissang.github.io%2Fincubator-echarts-doc%2Fpublic%2Fen%2Foption.html%23title&tab=desktop
> >> >
> >> >
> >> > --
> >> > Yi Shen
> >> > Apache ECharts(incubating) PPMC
> >> >
> >>
> >
>
--
Yi Shen
Apache ECharts(incubating) PPMC
Re: [INFO] Rewrite the document page to improve the user experience
Posted by siwen su <su...@gmail.com>.
May be we should update Examples? Because I saw some using outdated .
https://www.echartsjs.com/examples/zh/editor.html?c=pie-simple
This by example.
siwen su <su...@gmail.com> 于2019年11月27日周三 下午9:51写道：
> Great, I have tried the new version, It better than new one.
>
> Ovilia <ov...@gmail.com> 于2019年11月26日周二 下午9:25写道：
>
>> I tried with it and it's definitely helpful when searching for certain
>> APIs.
>> Good job, Yi!
>>
>> Thanks
>>
>> Wenli
>>
>>
>> On Mon, Nov 25, 2019 at 9:03 PM Yi Shen <sh...@gmail.com> wrote:
>>
>> > Hi,
>> >
>> >
>> > The document page of echarts has been complained about bad user
>> experience
>> > for a very long time. There are some main reasons I can think of.
>> >
>> >
>> > 1. The page will load a whole option.json. It can take a very long time
>> on
>> > a bad network. In the Google Page Insight test, it only scores 58 on
>> > desktop[1]
>> >
>> > 2. The scrollbar on the page is a js component. It's hard to do
>> searching
>> > on the page.
>> >
>> > 3. The hierarchy on the right is not so clear. Some of our developers
>> even
>> > don't know the card can't be expanded to get more information.
>> >
>> > 4. The MOST important is the missing of fuzzy search. I created a JIRA
>> > ticket to describe it before[2]
>> >
>> >
>> > So I forked from the original repo and started rewriting the whole
>> document
>> > page two weeks ago. The latest code is in the
>> > https://github.com/pissang/incubator-echarts-doc . You can preview it
>> on
>> >
>> https://pissang.github.io/incubator-echarts-doc/public/en/option.html#title
>> >
>> >
>> > In the new version, I did the following improvements to try to solve the
>> > problems.
>> >
>> > 1. Separate the JSON and only load the necessary content. The score can
>> be
>> > 95 on Google Page Insight after optimized.
>> >
>> > 2. Use native scrollbar to support browser searching on the page.
>> >
>> > 3. Optimize UI of document content on the right. The hierarchy is more
>> > clear. Also the first level will be expanded by default so developers
>> can
>> > find most of the information by simply searching on the page.
>> >
>> > 4. Add full-text search support.
>> >
>> >
>> > Basically, all the improvements are focused on helping developers
>> getting
>> > what they needed more conveniently.
>> >
>> >
>> > The new document will be merged and integrated into the official website
>> > when all the PPMC agree it's ready to be published.
>> >
>> >
>> > [1]
>> >
>> >
>> https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fecharts.apache.org%2Fzh%2Foption.html%23title&tab=desktop
>> >
>> > [2] https://issues.apache.org/jira/browse/ECHARTS-10
>> >
>> > [3]
>> >
>> >
>> https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fpissang.github.io%2Fincubator-echarts-doc%2Fpublic%2Fen%2Foption.html%23title&tab=desktop
>> >
>> >
>> > --
>> > Yi Shen
>> > Apache ECharts(incubating) PPMC
>> >
>>
>
Re: [INFO] Rewrite the document page to improve the user experience
Posted by siwen su <su...@gmail.com>.
Great, I have tried the new version, It better than new one.
Ovilia <ov...@gmail.com> 于2019年11月26日周二 下午9:25写道：
> I tried with it and it's definitely helpful when searching for certain
> APIs.
> Good job, Yi!
>
> Thanks
>
> Wenli
>
>
> On Mon, Nov 25, 2019 at 9:03 PM Yi Shen <sh...@gmail.com> wrote:
>
> > Hi,
> >
> >
> > The document page of echarts has been complained about bad user
> experience
> > for a very long time. There are some main reasons I can think of.
> >
> >
> > 1. The page will load a whole option.json. It can take a very long time
> on
> > a bad network. In the Google Page Insight test, it only scores 58 on
> > desktop[1]
> >
> > 2. The scrollbar on the page is a js component. It's hard to do searching
> > on the page.
> >
> > 3. The hierarchy on the right is not so clear. Some of our developers
> even
> > don't know the card can't be expanded to get more information.
> >
> > 4. The MOST important is the missing of fuzzy search. I created a JIRA
> > ticket to describe it before[2]
> >
> >
> > So I forked from the original repo and started rewriting the whole
> document
> > page two weeks ago. The latest code is in the
> > https://github.com/pissang/incubator-echarts-doc . You can preview it on
> >
> https://pissang.github.io/incubator-echarts-doc/public/en/option.html#title
> >
> >
> > In the new version, I did the following improvements to try to solve the
> > problems.
> >
> > 1. Separate the JSON and only load the necessary content. The score can
> be
> > 95 on Google Page Insight after optimized.
> >
> > 2. Use native scrollbar to support browser searching on the page.
> >
> > 3. Optimize UI of document content on the right. The hierarchy is more
> > clear. Also the first level will be expanded by default so developers can
> > find most of the information by simply searching on the page.
> >
> > 4. Add full-text search support.
> >
> >
> > Basically, all the improvements are focused on helping developers getting
> > what they needed more conveniently.
> >
> >
> > The new document will be merged and integrated into the official website
> > when all the PPMC agree it's ready to be published.
> >
> >
> > [1]
> >
> >
> https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fecharts.apache.org%2Fzh%2Foption.html%23title&tab=desktop
> >
> > [2] https://issues.apache.org/jira/browse/ECHARTS-10
> >
> > [3]
> >
> >
> https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fpissang.github.io%2Fincubator-echarts-doc%2Fpublic%2Fen%2Foption.html%23title&tab=desktop
> >
> >
> > --
> > Yi Shen
> > Apache ECharts(incubating) PPMC
> >
>
Re: [INFO] Rewrite the document page to improve the user experience
Posted by Ovilia <ov...@gmail.com>.
I tried with it and it's definitely helpful when searching for certain APIs.
Good job, Yi!
Thanks
Wenli
On Mon, Nov 25, 2019 at 9:03 PM Yi Shen <sh...@gmail.com> wrote:
> Hi,
>
>
> The document page of echarts has been complained about bad user experience
> for a very long time. There are some main reasons I can think of.
>
>
> 1. The page will load a whole option.json. It can take a very long time on
> a bad network. In the Google Page Insight test, it only scores 58 on
> desktop[1]
>
> 2. The scrollbar on the page is a js component. It's hard to do searching
> on the page.
>
> 3. The hierarchy on the right is not so clear. Some of our developers even
> don't know the card can't be expanded to get more information.
>
> 4. The MOST important is the missing of fuzzy search. I created a JIRA
> ticket to describe it before[2]
>
>
> So I forked from the original repo and started rewriting the whole document
> page two weeks ago. The latest code is in the
> https://github.com/pissang/incubator-echarts-doc . You can preview it on
> https://pissang.github.io/incubator-echarts-doc/public/en/option.html#title
>
>
> In the new version, I did the following improvements to try to solve the
> problems.
>
> 1. Separate the JSON and only load the necessary content. The score can be
> 95 on Google Page Insight after optimized.
>
> 2. Use native scrollbar to support browser searching on the page.
>
> 3. Optimize UI of document content on the right. The hierarchy is more
> clear. Also the first level will be expanded by default so developers can
> find most of the information by simply searching on the page.
>
> 4. Add full-text search support.
>
>
> Basically, all the improvements are focused on helping developers getting
> what they needed more conveniently.
>
>
> The new document will be merged and integrated into the official website
> when all the PPMC agree it's ready to be published.
>
>
> [1]
>
> https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fecharts.apache.org%2Fzh%2Foption.html%23title&tab=desktop
>
> [2] https://issues.apache.org/jira/browse/ECHARTS-10
>
> [3]
>
> https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fpissang.github.io%2Fincubator-echarts-doc%2Fpublic%2Fen%2Foption.html%23title&tab=desktop
>
>
> --
> Yi Shen
> Apache ECharts(incubating) PPMC
>