Release note of egjs(Q4 2023)

Hello! This is the fourth quarter of this year’s release of Naver’s FE open-source component group egjs.

In this release, we would like to provide guides to resolve frequent issues that occur when using egjs components along with annual usage statistics of the egjs components.

📈 Beyond a million, aiming for even greater heights.

Our well-known component @egjs/flicking surpassed 1 million annual downloads for the first time in 2023, and reached 1.3 million.

Beyond @egjs/flicking, we’re also seeing a lot of interest in our various components.

• The download count for @egjs/infinitegrid, which provides a card-type UI with infinite scrolling, showed the most noticeable increase, rising from 90,000 to 260,000.
• The download count for @egjs/conveyer, which adds drag gestures to native scrolling, increased from 6,000 to 28,000.
• The download count for @egjs/view3d, a web 3D model viewer, rose from 13,000 to 29,000.
• The download count for @egjs/view360, a viewer for 360-degree images and videos, increased from 100,000 to 190,000.

Thanks to the continuous interest from both internal and external developers, we have been able to enhance each component further.

We are grateful for your love towards the components we have released, and we look forward to your continued support in 2023.

In addition, the number of downloads of egjs components per framework over 2022 and 2023 also helped us to gain insights into the frameworks preferred by users.

Especially noteworthy is the increasing trend in the download share of Vue3 packages throughout 2023, as support for Vue2 ending on December 31, 2023.

🔧 Introducing ways to improve the user experience.

We recently tested Naver’s new streaming service and saw many usages of Flicking in various areas. We also provided feedback on potential improvements for a better user experience.

egjs components are used in many other parts of Naver’s services, and there may be areas where the user experience could be improved.

In this release, we aim to share our expertise on using our components.

We will provide insights on using options and methods when implementing features or resolving issues with our components in Naver services.

— -

@egjs/flicking

Try using the preventDefaultOnDrag option if you have images or links inside a panel

[Demo to compare the behavior based on the value of the preventDefaultOnDrag option]

If the panel contains an image of the img tag or a link of the a tag, the image or link may drag during the swipe gesture and the Flicking may stop moving.

You can prevent this from happening by setting the preventDefaultOnDrag option of the instance to true when the panel contains child elements that have a default dragging behavior.

Additionally, if you do not want the element inside the panel to be clicked when the swipe gesture ends, it is recommended to try using the preventClickOnDrag option.

Try using event.stop() for areas inside the panel where you want to ignore the behavior of the Flicking.

Example of stopping the behavior of Flicking in holdStart event

You may not want Flicking to move even if you drag inside Flicking, such as when you put a video inside the panel and the user moves the video’s playback time or volume slider.

For this implementation, you can use the stop method in the holdStart event to stop the default behavior of the Flicking.

Try adjusting the threshold option If you want to move the panels with smaller movements

Demo to compare behavior based on threshold option values

When a user swipes a short distance and Flicking doesn’t move to the next panel, it’s due to the behavior of threshold option.

This option allows you to set the minimum distance to move to the next panel, and the default value is 40 pixels.

By default if you don’t drag more than 40 pixels, Flicking won’t move to the next panel when you finish dragging.

You can try adjusting the value of this option if you want to move to the next panel on shorter drags, or if you don’t want to move to the next panel if you don’t drag more than a certain distance.

Try using movetype: “strict” if you want to set the maximum number of panels moving in a single gesture

[Image gallery demo using moveType: “strict”]

When using Flicking to create an image gallery-type UI, you may want to prevent the user from swiping through too many panels.

By setting the movetype option of your Flicking instance to “strict”, you can limit the maximum number of panels that can be flipped through in a single swipe.

Try the latest version of the package when using right-to-left characters.

[Flicking demo with direction: rtl applied]

Starting from version 4.11.1 of the package, Flicking supports behavior for the opposite direction when applying direction: rtl to the viewport element.

If you are creating a page with right-to-left reading, such as in Arabic, consider using the latest version of the package.

@egjs/conveyer

Set the boundaryMargin option of Conveyer if the child element contains % on its size,

[Demo with decimal-sized child elements]

If you are using % for style when setting the size of an element inside Conveyer, the element may have a size with a decimal point depending on the environment.

We calculate the size of the element inside Conveyer from element.offsetWidth, but browsers including Chrome always provide offsetWidth as an integer value, even if the element size is set in decimal.

This can cause the reachStart and reachEnd events not to fire when the scroll position moves to the first or last element.

To resolve this issue, we provide the boundaryMargin option to determine the tolerance value for determining the minimum/maximum scroll position.

Setting this option to 1 will allow a tolerance of up to 1 pixel on the scroll position for the reachStart, reachEnd events to be fired, and avoids issues with decimal size elements.

Check out the destination when using the scrollIntoView method.

[Demo comparing “target” option of scrollIntoView method]

A typical example of a UI that can be created using Conveyer is a list with previous/next arrow buttons.

However, even with the same “next” button, some options vary slightly depending on the service area.

When implementing the previous/next button, you need to understand the options in the scrollIntoView method in order to use Conveyer to match the behavior required by your service.

If you want the last item in the previous list to still be visible and positioned as the first item when the “next” button is pressed, set the target option to “end”,

If you want all new items to appear when the “next” button is pressed, set the target option to “next”.

For a more detailed understanding of the behavior of each option in the scrollIntoView method, a demo is available.

This demo is designed to help you learn more about the behavior of each in the scrollIntoView method.

— -

In this release, we’ve summarized some of the most common issues and questions we hear from our users.

If you’re using our components and need any other support or guidance, feel free to leave a comment!

🔖 egjs Releases

@egjs/flicking 4.11.2 (2023–12–12)

• Fixed a bug that layout is broken when direction: rtl is applied to camera element.
• Fixed a bug that nan occurs when calculating the size if element does not exist.
• Fixed a bug that `movetype: “strict”` moving wrong panel on circular flicking