From AngularJS to Ember

Martin Nuc

  • frontend developer
  • fan of Angular
  • photography enthusiast

 

@martin_nuc

I will talk about

  • before migration
    • motivation
  • after migration
    • AWS
  • alternative for Angular2+

long time ago...

REST calls

html, css, js

Git-flow

Why migration?

How to migrate?

SEO

Choices

  • prerender.io
  • our own solution
  • FE framework with SSR

Ember app

Redirects

$rootScope.$on '$stateChangeStart', (event, toState, toParams) ->
  switch (toState.name)
    when 'marketplace.loan.list'
      window.location = ENV.zonkyAppUrl
      event.preventDefault()
    when 'marketplace.loan.detail'
      return if (toParams.edit) # exception for story edit
      window.location = "#{ENV.zonkyAppUrl}/#/marketplace/detail/#{toParams.pk}"
      event.preventDefault()
  • every route belongs either to Ember or to AngularJS

HAProxy

Phased rollout

HAProxy

backend app
    balance roundrobin
    option httplog
    cookie SRVNAME insert
    http-request set-header Host cdn.zonky.cz
    server ember cdn.zonky.cz:443 weight 10 ssl verify none cookie S2 sni str(cdn.zonky.cz)
    server angular 77.78.99.121:443 check weight 90 ssl verify none cookie S1
    option forwardfor header x-zonky-client-ip
  • percentage rollout
  • rollout by IP
  • security headers

Do you see the pain point?

git-flow management

What about feature branch?

At the end...

  • preparations took 3 months
  • dual mode for 4 months​ after release
  • most issues with shared session
  • other things
    • provisioning
    • performance measuring
    • old links
    • maintenance page

Our 2nd experience

iframe

Angular 2+

const routes: Routes = [
  ...,
  {
    path: '**',
    component: IFrameComponent
  }
];
// .html
<iframe [attr.src]="url"></iframe>

// .ts
let counter = 0;
this.route.url.subscribe(urlSegments => {
  this.counter += 1;
  const requestedUrl = '/legacy/index.html?counter=' + this.counter 
            + '#/' + urlSegments.join('/');
  this.url = this.sanitizer.bypassSecurityTrustResourceUrl(requestedUrl);
});

AngularJS

if (window.self !== window.top) {
  $urlRouterProvider.otherwise(($injector, $location) => {
    const path = $location.path();
    window.parent.postMessage({navigateTo: path}, "*");
  });
} else {
  $urlRouterProvider.otherwise('/');
}

Conclusions

  • use phased rollout
  • rewrite step by step
  • think about dev experience

Join us!

Made with Slides.com