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
- SSR using ember-fastboot
- AWS infrastructure
- moved user's session from session storage to cookies
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
- Asim Hussain
- Angular Connect 2017
- https://codecraft.tv/blog/2017/09/07/angularjs-to-angular-using-iframes/
- displays legacy app in the iframe
- local storage
- postMessage
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!

From AngularJS to Ember
By Martin Nuc
From AngularJS to Ember
ngParty talk
- 779