Release note of egjs(Q4 2022)

Hello! Here’s release note of Naver’s FE open-source component group egjs. (2022 Q4)

📈 2022, Going over 1 million and heading towards 1.5 million

The most widely used of our components, @egjs/flicking, had a sharp rise in the number of downloads in 2022 to 930,000, about twice that of last year.

As a result, the total number of downloads is showing clear growth exceeding 1.5 million in 2022, building global retention based on increasing users.

Also, the components we develop have a structure to support multiple frameworks such as React, Vue, and Angular at low cost.

Packages such as @egjs/react-flicking and @egjs/vue-flicking, which provide the similar usability as the components dedicated to each framework, have also increased with more than 10,000 downloads per month.

With the release notes closing out 2022, we would like to thank our internal and external developers for their interest and contribution to our components.

egjs is improving components through open sourcing, establishing a wide range of testing environments, and communicating with numerous external users.

As part of these activities, we have prepared a session on the 2023 DEVIEW about CFC (Cross Framework Component) module, which we developed to support multiple frameworks simultaneously with a single source code.

Our team will continue to develop useful components and strive for improvement and development so that we can contribute even more to the open source ecosystem. We are always welcome to receiving your attention and support.

— -

💡 Get in touch with the various components

Our components are used by Naver’s various services, and their usage area is gradually expanding.

In the release of Q4 2022, we would like to briefly introduce the features of each of our components being used in our services.

We will share examples of UI that can be easily implemented through each component, based on actual use cases of the components of egjs.

@egjs/flicking

Flicking is a component that can easily implement a carousel UI. Features such as autoplay and pagination can be added in combination with various plugins.

Flicking is the most actively used component across all Naver services, such as Main page, Shop Window, Shopping, and Sports.

A typical UI that can be created with Flicking is a UI that provides smooth motion for user gestures that move the panel, like the example on the Naver Game page.

Even if the UI does not support panel movement from the user’s gestures, the UI that flips panels through buttons or automatically moves panels at regular intervals can be also created with Flicking.

For example, the stock and weather UI on Naver’s main page are designed with horizontal and vertical Flicking.

@egjs/infinitegrid

InfiniteGrid provides a variety of layouts for implementing card UIs and allows infinite addition of new cards through scrolling.

InfiniteGrid is used to display a list of products on the Naver Shopping page.

InfiniteGrid keeps the number of DOMs constant around the area shown on the screen even if the number of cards is constantly increasing, displaying enough content without performance degradation.

If you expect performance issues when implementing a UI that continually exposes new content with a card UI, try using the InfiniteGrid component.

@egjs/conveyer

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

Conveyer component is used to provide a scroll UI that responds to the user’s drag gestures when providing results in the Naver search service

In addition to adding drag gestures to native scrolling, Conveyer also provides methods for changing the native scroll position to a specific item’s position, and properties for determining whether the scroll position has reached the minimum / maximum scroll position.

As shown in the example above, it is also possible to implement using Conveyer to display buttons that move to the previous / next item only when the scroll does not reach the end.

@egjs/view3d

View3D is a component that provides a customizable 3D model viewer.

Naver search service and knowledge interactive service use View3D component to provide various 3D contents.

View3D provides an easy-to-use interface for those unfamiliar with web 3D, and supports options for things that are difficult for users to implement themselves, such as the Annotation feature.

In addition, an article introducing web 3D model optimization techniques for performance improvement is also available for reference when using View3D.”

If you are implementing a service that provides content with a 3D viewer included, we recommend using our View3D component.

@egjs/view360

View360 is a component that provides a 360-degree rotatable content viewer.

View360 consists of PanoViewer, which rotates 360-degree images or videos, and SpinViewer, which rotates a sprite image composed of images taken by rotating around an object.

View360 is used in services that provide content that can be rotated 360 degrees, such as Naver Real Estate, Naver Blog, Naver TV, and Naver Shopping.

The example above is a case of using SpinViewer to rotate a product on Naver Shopping, supporting the feature to rotate the image

In the case where the content you want to rotate is not an object but a camera, you can use a 360-degree image or video, like when using PanoViewer on Naver Blog.

You can create your content more dynamic using appropriate viewer to match the type of content you want to show.

— -

✨ Framework supports

We are applying CFC to our various components, and development in each framework is becoming simplified.

The current framework support status for egjs components is as follows:

We have been updating each component to provide an interface suitable for each framework.

If you want to use component specific framework instead of vanilla component, you can check the implementation examples on the documentation page for each component.

If there are any components that you would like to use as a specialized interface for a specific framework, please feel free to leave comments.

— -

🎉 Introducing the components to be developed in 2023

In the fourth quarter of 2022, we would like to share the major improvements of the new version of components that will be released next year.

Update announcement for @egjs/imready

• Github: https://github.com/naver/egjs-imready
• Demo: https://naver.github.io/egjs-imready/

ImReady is a component that checks whether images and videos inside the container have been loaded.

ImReady is mainly used in the Grid component, which supports various types of grid layouts, and the Flicking component, which creates a carousel UI.

Solves these problems

• Prevents re-rendering in the frameworks even when unused properties are updated.

New features

• Provides fallback logic when the image load fails.
• Support lazy loading internally.

ImReady will be continuously updated during the first half of next year (2023).

Update announcement for @egjs/view360 v4

- Github: https://github.com/naver/egjs-view360
- Demo: https://naver.github.io/egjs-view360/

The new major version of View360, v4, is officially launching soon.

View360 consists of two components:

• Panorama 360 image/video viewer PanoViewer
• 360 Product spinner SpinViewer

Solves these problems

• Fix problems where it was not possible to predict how the UI would change until the component was initialized.
• Provides smoother control.
• (SpinViewer) You can use multiple images as well as single image sprites.

New features

• Hotspot (Annotation) feature will be available.
• Adds various control-related options that can be easily applied, such as autoplay, scrollable, disableContextMenu
• Adds various events triggered by component actions.

View360 v4 will be released within the first quarter of next year (2023).

— -

🔖 Releases in Q4

@egjs/flicking 4.10.4 (2022–12–02)

• Fixed a bug that preventClickOnDrag option prevents click event for movement less than 1 pixel
• Added a new option for react-flicking and preact-flicking — renderOnSameKey
• Fixed a bug that update occurs between rendering at react-flicking and preact-flicking
• Fixed phantom dependency for frameworks
• Fixed a bug that some setters doesn’t update UI
• Fixed a bug that resizeOnContentReady option cause error with lazy image loading inside panel
• Added a new option to AutoPlay plugin — animationDuration
• Added a new option to AutoPlay plugin —delayAfterHover
• Fixed a bug that move event can occur even after holdEnd event at Internet Explorer.

@egjs/conveyer 1.4.6 (2022–12–02)

• Added missing declaration files to packages
• Fixed a bug that react-conveyer doesn’t work in react 18 strict mode
• Fixed incorrect main/module/exports at svelte-conveyer
• Fixed a bug that drag can occur even after finishing drag at Internet Explorer

@egjs/axes 3.8.3 (2022–12–02)

• Added a new option to PanInput, RotatePanInput, WheelInput — inputKey
• Fixed bounce occuring when circular option is set in only one direction
• Fixed preventClickOnDrag option not working when option is changed
• Fixed a bug that change event at PanInput can occur even after finishing drag at Internet Explorer

@egjs/view3d 2.9.1 (2022–11–08)

• Added interpolant version of subclip util
• Added a new option — pivot
• Added a new option — ignoreCenterOnFit
• Added a new option — variant
• Fixed annotation not rendering on WebXR
• Fixed unnecessary render calls before initialization

@egjs/view360 3.6.4 (2022–12–02)

• Fixed a bug that drag gesture can occur even after release at Internet Explorer

@egjs/imready 1.3.1 (2022–11–25)

• Fixed an error with unremoved error event when the ImReady instance was destroyed after the ready event occurred

— -