Keen - Migration to v3

Hi there,
I am very disappointed on how the keen team is managing the release of keen v3.
There is literally nothing, afaik, on how to migrate from v2 to v3, as if keen v3 is only for new projects.

Let apart not having a single page dedicated to what a customer should change for each keen component(e.g. how bootstrap5 classes differs from bt4, how keens' utility classes have changed, how to update wizards (why this change?) to stepper components), the worse is that you don't even explain why you dropped support for libraries (e.g. datetimepicker now tempusDominus, bootstrap-datepicker) / icons / ecc..

In particular:
-> Icons :
Why there are no more Flaticons ? Do you expect people changing all their icons in their project and check if every single UI element doesn't break the whole layout??

-> Wizards/Steppers :
-Why the change of "namespace" ? Also, stepper don't work anymore with some events (kt.stepper.change, previously just "change" (why make things harder?)) while in previous version (with wizards) they did. Tested it out today, I should change all my events from listening "change" to "previous" or "next" : ridiculous.
-Stepper Docs state that you can pass options to Stepper's constructor, but in no point you specify what the options are. You pretend users to go look at keen's v2 wizard doc?
-Changing of steps through API don't update the stepper's steps, breaking the usability of the stepper itself. Have you checked if steppers work correctly doing so ? In my code, after updating the elements as per the docs, it doesn't anymore, and it is impossible to test it out in the stepper's doc page, since, probably, I get the license expired error (even if I have one).

From very happy with keen v2 to pretty disappointed and unsatisfied with current state of keen v3.
I hope you fix things soon, so to stay update with your releases too!

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)

Hi,

Thank you for your honest feedback.

Sorry to hear that and we fully understand the issue you faced. Due to the Bootstrap 5 breaking changes and Keen's massive code refactoring the Keen v3 update was released as a completely new product. However, we still provide access to the old Keen v2 version. In Keen v3 some plugins were dropped due to their incompatibility with Bootstrap 5 and we replaced those plugins with alternatives.

Unfortunately, instant migration from v2 to v3 is impossible due to the mainly Bootstrap 4->Bootstrap 5 migration, which impacts almost all Bootstrap-based plugins.

Due to license limitations, we used our in-house icon sets(Duetune) and fully open-source icons such as Bootstrap, Font awesome, and Lineicons.

The namespace change was due to CSS class(header, footer, toolbar, sidebar) conflicts with some third-party plugins.

The Stepper component now works as a wrapper and it's easier to add logic for the navigation and steps flow.

However, we noted your suggestions and we will add more info into the v3 change of Keen here. Also we will try to revise the code and make v2 -> v3 migration easier as much as possible.

If you need any further help with a particular issue please let us know and we will do our best to guide you further.

Regards,
Sean

Hi Sean,

About bt5 migration, the migration is not that difficult. 90% of the work to make my code work again was replacing data tags with "data-bs-..." . The point was that a dedicated page would be nice to have, instead of letting customers figuring it out by themselves. Since KeenTheme already knows what are the major changes to apply / differences from v4 to v5 are, it would be much easier this way than let users alone on this task.

About third party's plugins, check these out :
-> old "datetimepicker" now "tempusDominus". Bootstrap5 compatible
-> old "selectpicker" has a bt5 beta https://www.npmjs.com/package/bootstrap-select/v/1.14.0-beta2
I have replaced these with their older versions (the ones in keen theme), and they do work. Only tempusDominus requires a little tuning, but in this page there is a config migration tool (https://getdatepicker.com/6/migration.html)

Stepper : I don't see many differences from the prev wizard (looking at the docs). My wizards (now steppers) don't work as before when listening to "change" method. I should switch to "prev" and "next" events to make them work (I have a lot of wizards which I would avoid updating them all).

Let me know if you encounter this issue
Best regards
DR

Hi,

Thank you for sharing those links. Noted on Bootstrap Select and Datepicker plugins. We will check and try to integrate with Keen's upcoming major update. Also, we will add more info for the migration as per your suggestion.

Regards.

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(