Release note of egjs(Q3 2023)

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

📣 egjs, assisting Naver’s newest search results

In this release, we introduce examples of egjs components being used in the NAVER’s search service overhaul process since September 2023

NAVER search service has been providing “smart blocks” that display content that may be of interest to users based on their search queries.

In 2021, starting with queries related to hobbies, home decor, and recipes, more smart blocks have been created for a wider range of search queries, including travel, shopping, restaurants, and fashion

Let’s take a look at how the egjs components are being used in new smart blocks to improve their usability.

✨ Fully Utilizing Native Scroll, @egjs/conveyer

Conveyer is a component that adds drag gestures to native scrolls and provides various events and methods.

Conveyer Use Case 1. Creating a draggable scroll area for Chip UI

Conveyer Use Case 2. Creating a list of local restaurants with left/right buttons and drag scrolling

Conveyer Use Case 3. Applying Conveyer to both chip areas and list of item area

Inside the newest smart blocks including “Local Restaurants” and “User Generated Content (UGC)”, you can find that Conveyer applied to the scroll area created by the horizontally listed items.

Check out our demo to see an example implementation of Conveyer similar to its use in smart blocks.

At the examples above, state of the buttons on both sides changes with events reachStart and reachEnd, which are related to the scroll position.

And the buttons on both sides use the method scrollIntoView to move to the next/previous page where the items that are not currently displayed on the screen.

If you want to use features that assist the native scroll easily and quickly, you may consider using @egjs/conveyer.

✨ Get fancy with Virtual Scroll, @egjs/flicking

Flicking is a component that helps you to create and customize a carousel-style UI using CSS transforms.

Flicking Use Case 1. Creating a list of images that automatically play with AutoPlay

Flicking Use Case 2. Changing the state of Pagination over time based on AutoPlay

Flicking is applied to the gallery-type UI that displays multiple images among the new search service.

In the example above, Flicking’s features such as the circular option enables multiple items to loop, and the Autoplay plugin which switches items at regular intervals.

Check out our demo link to see an example implementation of Flicking with Pagination that changes state over time in Autoplay.

In addition to Autoplay, there are various plugins and its documentation are available for adding different effects to the Flicking.

If you want to add more features beyond freely dragging and swiping in the scroll area, you may consider using @egjs/flicking

💡 Then, what should I use?

Conveyer and Flicking are similar and different, but when and how should we use them?

Both components are used when we need a UI that uses dragging, and we mainly use them separately based on the following criteria.

When to use Conveyer

• When you want to create a free scrollable UI
• When you want to use the advantages from native scroll, also you can use Conveyer instead of iScroll.
• When your implementation needs various methods to manipulate native scroll area.

When to use Flicking

• When you want to create a UI that snaps each item
• When you want to create a scroll area that connects first/last item for continuous scrolling.
• When you want to add features supported by the plugin, such as AutoPlay, Pagination, Fade
• When you need to use implementations that is related to items inside the scroll area.

We look forward to your interest in egjs, NAVER’s open source library, along with the newly improved search service.

🔖 egjs Releases

@egjs/flicking 4.11.0 (2023–08–02)

• Added a new option preventDefaultOnDrag
• Fixed a bug that mouse input not working when mouse and touch input were available at the same time.

@egjs/conveyer 1.7.1 (2023–09–27)

• Added a new option intersection for scrollIntoView method.
• Added a new option useResizeObserver
• Fixed scroll methods moving to invalid position.

@egjs/axes 3.9.0 (2023–07–26)

• Added preventDefaultOnDragoption to PanInput
• Fixed setOptionsnot applying to duration options

@egjs/infinitegrid 4.10.1 (2023–08–04)

• Fixed a bug that elements render improperly when re-rendered in React.

📣 Introducing the use case of View360

We are introducing Amazon’s Car Interior View as an example of using 360° Image/Video Viewer @egjs/view360.

In Amazon’s use case of View360, consumers can easily check the product’s interior by exploring the vehicle’s interior from every angle.

If you’re looking for a way to give your users a deeper look at your content, you may use View360 to adjust their experience!

Naver’s smart store also uses View360 to provide information about products.

For detailed instructions and installation of View360, you can check our documentation.

— -