Migrating to

Ember CLI

Our Story

  • Team of 3 ember developers
  • One main project (uses ember-rails)
  • Always slammed with new feature requests
  • Have gotten to play with Ember CLI on side projects

How it feels to use Ember CLI

How it feels to not get to use Ember CLI

"While globals-based apps will continue to work in 2.0, we may introduce new features that rely on either Ember CLI or ES6 modules. You should begin moving your app to Ember CLI as soon as possible."

The Road to Ember 2.0 RFC

I'm convinced...

...so lets just do this already!

But we have some problems...

how do we do it?

when do we do it?

what about everything else?

  - bugs

  - new features

  - etc.

how will we deploy this?

Do you have to stop everything else to upgrade to Ember CLI??

What if your project is large, it will take a lot of time, right?

Ummm...

There are 3 types of ember projects to upgrade to Ember CLI

Lucky

  • your code already follows many Ember CLI conventions:
    • 1 item per file
    • similar file layout
    • no globals or globals already abstracted away
    • maybe you're already even using es6 modules
    • etc.

Unlucky

  • your code does not follow any ember-cli conventions:
    • many items per file
    • very different file layout
    • lots of globals
    • etc.

Your Project

  • most likely somewhere in the middle

Make your project one of the lucky ones!

Strive for a 1:1 port

Don't copy code over and then do a bunch of stuff to it to make it work.  Do a bunch of stuff to your code and THEN copy it over.

 

Do NOT upgrade any libraries at the same time!

Also...

But, what if I can't actually get to a 1:1 port?

How will I know when I finally have something that can be a 1:1 port...

and a 1:1 port will still require a code freeze, right?

Yes, but SCRIPT it and the freeze can be < 5 minutes!

SCRIPT it to take care of these!

SCRIPT it and you can practice it many times!

Practice it until all of your tests pass and then you know you're done!

Scripting Your 1:1 Port

Grunt/Gulp/Broccoli to the rescue!

You can even set up watchers and LIVE PORT!

Our script:

Note:

You probably want to practice manually porting a few things to make sure you know what exactly you need to automate.

 

Authentication is probably a good thing to manually port the first time.

DEMO

Fun Facts

Live porting + Ember CLI live reload actually runs faster in our project than running the project in place!

We are now able to migrate at our own pace and in the midst of other code changes!

My team was stuck with no clear path on how to upgrade.  We did a lot of searching, found some ideas, and had some ideas of our own.  These ideas are nothing crazy or new, but they weren't immediately obvious to us so we felt like someone else might benefit from us sharing them.

Our Story

  1. Clean up your code so that your migration can be copy/paste
  2. Have a script do the copy/paste
  3. Figure out what is broken once ported to Ember CLI and make the fix in the original project
  4. Keep re-porting until you see that everything works in Ember CLI
  5. REMEMBER: if you fix it in Ember CLI, it will be overwritten by the next run of your migration script

Your migration plan:

A few other helpful ideas and resources online:

Questions?

Made with Slides.com