Hacker News new | ask | show | jobs
by alceta 2972 days ago
I was joyfully expecting this upgrade and checked the release notes daily during the RC phase. Don't let the quick 'major' version changes shock you, upgrading 4 -> 5 was easy and I expect the same for this upgrade.

A big thanks to everyone involved in shaping this release and ensuring the upgradability for the past major versions, including the huge effort in making it possible to continuously migrate from AngularJS. <3

If you care for the details behind my experiences:

We have begun migrating a ~80k loc AngularJS codebase first to TypeScript in 2016, which was the preparation for the Angular upgrade starting Q1 this year. Now we are roughly 80% migrated to Angular 5 (in the meantime we did the upgrade from 4 to 5 in a few hours thanks to https://update.angular.io/), the rest running with ui-router hybrid [1] and ngUpgrade [2] and now are looking forward to moving the rest to Angular and upgrading to 6.0.

Coming from AngularJS where many things are done without a proper reason, I have started to embrace and even somewhat love Angular for the niceties it brings it. When you already embraced TypeScript, it is a breeze to work with and I cannot recommend it enough (for large-scale frontends this is).

The one pitfall I always ended up with during the migration was that AngularJS attribute directives cannot be converted to Angular and then downgraded (In the hybrid app, the entry component is always(?) AngularJS and up from there), which is a large part of the remaining AngularJS code. There are a few workarounds but they did not seem to work properly. If anyone has suggestions on that part.

[1] https://github.com/ui-router/angular-hybrid [2] https://angular.io/guide/upgrade

4 comments

Out of interest, have you looked into EmberJS? That has by far the smoothest upgrade process I've come across. One CLI command upgrades your dependencies, does a diff against a new greenfield project and applies the changes to your application, and also runs any codemods to migrate your code to a new pattern.
I did not look into it mainly because we cannot afford a rewrite, and the ngUpgrade module provided us with a way to write new code without replacing everything in one go (and breaking the entire frontend in between).
> There are a few workarounds but they did not seem to work properly. If anyone has suggestions on that part.

Actually with angular-hybrid you do not need to use a AngularJS entryComponent. The only thing that needs to be AngularJS is the bootstrap component.

Also AngularJS components can be Upgraded easily and Angular2+ Components can be downgraded easily, too. The only problems are old school Directives which can be wrapped in a component for interop or just rewritten.

You can even remove angular-hybrid when you just "upgrade" all your AngularJS code that is used in routes. (you still need to have a AngularJS rootElement and than inject a downgraded ui-view).

i.e. you can't have `bootstrap: [UIView]` however using `<root-element></root-element>` in your index.html while root element is like that:

`.component('rootElement', {template: '<ui-view></ui-view>'})`

It sucks to create AngularJS wrapper components in Angular since you need to create two, i.e. from AngularJS component:

    ng1module.component('demo', {template: 'hase'});

You need to create the following ng2+ components:

    @Directive({selector: 'demo-shim'})
    export class DemoShimDirective extends UpgradeComponent {
    @Input() text: string;
    // upgrade constructor with super call
    }
and than have another which can be used in routes:

    @Component({selector: 'demo', template: '<demo-shim [text]="text"></demo-shim>'})
    export class DemoComponent {}

and finally you can use it happily in your Ng2StateDeclaration (P.S.: I just did that today)
Wow, great. Did not look into that before, many thanks for pointing that out.
How about the story on mobile? Is there an Angular analog to React Native?
Called NativeScript. I can't vouch for it quality or support.
That's what I'm wondering. I can see a lot of material vouching for the quality of React Native, but I see very little consistently coming out for the Angular competitors in the mobile sphere.

For what it's worth, I really like Angular for web development, but I don't know much about the mobile side of things yet. I've just started to look into it.

Not really answering your question cause React Native builds to native platform code.

But Ionic uses Angular internally -> Cordova-> PhoneGap (mobile)

Yea this is the exact reason we are leaning towards moving from AngularJS to React.

. Ionic app never feels completely right as components are not as much optimized as platform native.

. If Apple/Google comes up with a new look/style for default components, good luck chasing and updating libs.

If you are targeting for mobile-app and web, just go with react-native.

That update.angular.io site could really use some CSS work on iPhone 7 to make it usable.