Migrating From egjs 1.x.x to egjs 2.0.0

egjs 2.0.0 rewrote egjs 1.x.x to separate the components of egjs 1.x.x into independent projects

• to keep lighter and concentrating the feature as is
• to have competitive functionality
• speeding up development process to being evolved fulfilling necessities

major changes in egjs 2.0 are as follows.

• Removed jQuery dependency transitioning to vanillaJS
• Transition to ES6/7
• eg.MovableCoord is completely rewritten under the name eg.Axes.
• Some of the utility functions in eg namespace are separated by eg.Agent, eg.rotate.
• Deprecated and Removed eg.Class, eg namespace utilities

DOWNLOAD

egjs 2.0 provides each repository. you can download each resource through npm.

• egjs-agent npm install @egjs/agent
• egjs-axes npm install @egjs/axes
• egjs-component npm install @egjs/component
• egjs-flicking npm install @egjs/flicking
• egjs-infinitegrid npm install @egjs/infinitegrid
• egjs-persist npm install @egjs/persist
• egjs-rotate npm install @egjs/rotate
• egjs-visible npm install @egjs/visible
• egjs-jquery-pauseresume npm install @egjs/jquery-pauseresume
• egjs-jquery-transform npm install @egjs/jquery-transform

BREAKING CHANGES

1. eg.MovableCoord is completely rewritten under the name eg.Axes

If you used eg.Movablecoord, change it to eg.Axes.

For more information, see the following:
https://naver.github.io/egjs-axes/

2. no longer provides eg.Class

You can download eg.Class from eg.Class.js in gist.

3. no longer provides eg namespace utilities.

eg.agent is still provided by the egjs-agent module

• eg.isHWAccelerable : you can download it from eg.isHWAccelerable.js in gist.
• eg.isPortrait : It is still provided by egjs-rotate#isVertical
• eg.translate : you can download it from eg.translate.js in gist.
• eg.requestAnimationFrame/cancelAnimationFrame : use requestAnimationFrame polyfill
• eg.isTransitional

4. no longer provides jQuery plugins. (expect jQuery.animate/pause/resume)

jQuery.animate/pause/resume are still provided by the egjs-jquery-transform and egjs-jquery-pauseresume modules

• jQuery.persist()
• jQuery.fn.flicking()
• jQuery.fn.infiniteGrid()
• jQuery.fn.visible()
• jQuery custom events
  • rotate
  • scrollEnd
  • flicking:beforeFlickStart
  • flicking:beforeRestore
  • flicking:flick
  • flicking:flickEnd
  • flicking:restore
  • infiniteGrid:append
  • infiniteGrid:layoutComplete
  • infiniteGrid:prepend
  • visible:change

5. provides eg.rotate instead of a rotate event of jQuery.

rotate event is still provided by the egjs-rotate module

egjs 1.x.x

// bind rotate event
$(window).on("rotate", handler);

// unbind rotate event
$(window).off("rotate", handler);

// or unbind all the rotate event binds
$(window).off("rotate");

egjs 2.0.0

// bind rotate event
eg.rotate.on(handler);

// unbind rotate event
eg.rotate.off(handler);

// or unbind all the rotate event binds
eg.rotate.off();

6. provides eg.Persist instead of a persist method of jQuery.

Each persist instance has an independent store.

egjs 1.x.x

// set
$.persist("KEY",state);

// get
$.persist("KEY");

egjs 2.0.0

const persist = new eg.Persist("componentID");

// set
persist.set("KEY",state);

// get
persist.get("KEY");

6.1 Use Persist Migrate Plugin for easy migration.

Persist Migrate makes migration easy, by restoring the APIs that were removed.

Download

The Persist Migrate file can be obtained from the link below.

• https://github.com/naver/egjs-persist/blob/2.1.0/dist/persist-migrate.min.js

Usage

In your web page, load this plugin after the script tag for Persist, for example:

<script src="persist.min.js"></script>
<script src="persist-migrate.min.js"></script>

Migrate

You only need to change the namespace of the Persist module.

//// Legacy code with persist v1
// set
$.persist("KEY",state);

// get
$.persist("KEY");

//// Migrated code with persist v2 and persist-migrate
// set
eg.Persist("KEY",state);

// get
eg.Persist("KEY");

7. option method of eg.Component is removed.