Is Ember App Upgrade Easy?

Ajith kannan — Wed, 17 Jul 2019 12:22:38 +0000

Off-course yes, it was easy to achieve with few commands.

What to expect

Upgrading ember app it depends on whether the app having patch, minor and major version update.

Patch Change -> 3.4.1 to 3.4.3
Minor Change -> 3.4 to 3.5
Major Change -> 3.0 to 4.0

Patch Change

Mostly in patch version update, internal refactors and bug fixes are introduced and also changes in dependency version in ember.

Minor Change

In minor version update, new feature are introduced and developers should notice the deprecations. In minor change, ember core team will not completely remove the deprecation changes. It will log in console as deprecation warnings, may be future(major change), it will be completely removed.

Major Change

In major change update, breaking changes are introduced, So developers should ensure the deprecations before upgrade the app.

How to do an upgrade

As i said, it was easy and do the following

Step 1: Install npm package ember-cli-update globally.
Step 2: Run the following command, it performs ember init jobs for latest version with current app.

ember-cli-update --resolve-conflicts

Step 3: Mostly in major version, code changes are very difficult. But no need to worry about it. Ember solves it in single command. Run the following command,

ember-cli-update --run-codemods

The above command will list the codemods like the following image

So What is codemods?

Codemod is a tool/library to assist you with large-scale codebase refactors that can be partially automated but still require human oversight and occasional intervention.

By running codemod, it overrides allover inside the ember app.

Pretty Cool?

If you want to update specific version, run the following command.

ember-cli-update --to 3.4.3

Trouble shooting

If you want to revert the change, run the following command, it will get you back before the update.

git reset --hard
git clean -f

Options for ember-cli-update command:

Ready to kick start ember version upgrade?

Hope you figure out the concept well. Thanks for reading.

Themes

Ajith kannan — Tue, 21 May 2019 04:54:08 +0000

Hello folks, Let's see the journey of mine with the Themes. Whenever we create a new theme, we have to deal with CSS. So again we are going to write the same CSS with different colors and it makes the code repetitive like the following Script.

Light Theme

product .light-theme {
   background-color: white;
   color: blue;
}
product .light-theme:hover {
   background-color: blue;
   color: white;
}

Dark Theme

product .dark-theme {
   background-color: black;
   color: white;
}
product .dark-theme:hover {
   background-color: white;
   color: black;
}

For the optimization, Custom Properties play a major role in this CSS. Interesting..?

So what is Custom Properties ?

Custom Property is a pre-defined variable and it stores the value of the CSS property.

Okay, Then how it gonna be optimized?

Whenever we update the variable (Custom Property) within the scope, it automatically update the values of property which used the same variable (Custom Property).

Pretty Cool ?

Lets see the code,

:root{
  --libg : white;
  --licolor : black;
  --borderleft : blue;
  --libghover : #e1e1e8;
  --lihovercolor : blue;
}
.sidebar {
  width: 220px;
  .light {
    li {
      background-color : var(--libg);
      color : var(--licolor);
      border-left : 5px solid var(--borderleft);
      &:hover {
        background-color : var(--libghover);
        color : var(--lihovercolor);
      }
    }
  }
}

Dark theme made by Custom Variable

.sidebar {
  .dark {
  --libg : #151f2a;
  --licolor : white;
  --borderleft : blue;
  --libghover : black;
  --lihovercolor : white;
  }
}

Final Thoughts

Redundant CSS reduced.
Easy to customize.
No need to track the CSS properties.

Hope you figure out the concept well. Let's see you on another journey. Thanks for reading.

DEV Community: Ajith kannan