Month: September 2018

When upgrading an AngularJS app to Angular, there are a couple of routes you can take. There’s ngUpgrade, which is the official migration path set out in the Angular docs. There is also ngMigration, a fantastic tool that reviews your existing AngularJS codebase and lists the actions you need to take in order to migrate to Angular. Both ways show you what to do with your codebase in order to get from AngularJS to Angular, but the trickiest part is for developers new to Angular, who may have been working on one large AngularJS application for the last few years and have had no exposure to Angular. Is for them to understand the new approach Angular is taking.

In AngularJS you had scope, controllers, directives and services/factories. In v1.6 components were brought in (though they are really just directives with controllers built on). Now in Angular, you have components, modules, providers, pipes, classes, interfaces (though both features of TypeScript). You have type safety on top of all this.

So for the legacy AngularJS developer, there is a whole mindset shift that needs to happen besides just upgrading the codebase.

They need to know what effect having everything as a component has on the structure of an application. What is the relationship between parent/child components, how is data transferred between parent/child components? How does the module system need to be used? A legacy developer may just add all their components to the single module, creating one large monolithic module. Instead of taking advantage of the module system to break down the application by having feature modules. They need to know about the by feature approach to the folder structure of an application. They need to know about where the common features will go, is there a core folder that contains all the components/providers that aren’t part of a feature?

Another area that legacy AngularJS developers can slip up on is using TypeScript and embracing the type system. It could be far to easy to just set everything with a type of any and not using the benefits that the type system gives you. Like better tooling, picking up spelling errors before running the app, more efficient code that the TypeScript compiler can optimise to make the application run faster.

The advice I’d give if upgrading to Angular

• Read the ngUpgrade guide
• Read the Angular style guide in order to understand the approach to writing an Angular app
• Understand the module system, how to use it to divide up your app
• Understand the relationship between parent/child components
• Learn at least the basics of TypeScript and creating Types

You can’t go from AngularJS to Angular and expect to use the same approach you had. Angular is so different from AngularJS, that it is not just a case of changing a few JavaScript files to TypeScript. It’s a complete shift in approach to not only writing Angular but developing front-end applications altogether.

Here is a list of news stories I’ve found interesting from around the world for the Angular platform.

Apps That Work Natively on the Web and Mobile

From the Angular official blog, we have a post about NativeScript and how you can now, thanks to Schematics in the Angular Cli, share code between desktop and mobile apps.

One codebase for both desktop and mobile, something that is very powerful. Max Lynch from the Ionic team did Tweet at the time that Ionic has been allowing developers to share code between desktop and mobile for a long time.

2 New Tools to help with AngularJS to Angular Migrations

Another story from the official Angular Blog, on two tools that will help to make upgrading from AngularJS to Angular. One tool is a CLI tool called ngMigration. This tool will analyse your application and gives a list of recommended changes you need to make in order to prepare for migration to Angular. This is extremely clever and gives anyone a great starting point when you want to migrate to Angular. 

The second tool, is a forum where tips and tricks can be shared on how to migrate to Angular, and a place to ask for help during a migration.

Nrwl Nx 6.3: Faster Testing with Jest

The Nrwl team has just released a new update to NX, now at version 6.3. This release now has support for Jest, the test runner from Facebook. Now with this latest release Jest can be used as the test runner instead of Karma. According to their blog post, the main reason for using Jest over Karma is performance. Jest is fast, but not only that Jest has better reporting, uses Node so no need to link to the browser and Jest has excellent Mocking.

I’ve not used NX as yet, but I can see there is a really need for large scale Angular applications to have fast running tests. With this new release of NX, Nrwl are building an excellent tool for enterprise Angular teams.

RxJs Observables versus Subject

Continuing his brilliant articles on RxJs, Cory Ryan compares the different types of Observables that RxJs provides. Cory has written a number of great articles on RxJs, as well as articles on Tree Shaking in Angular, classes in TypeScript. His blog is a great resource for any Angular developer.

Angular Patterns 3: flexible and scaleable design of complex page

In this article, Adriano di Lauro goes through a set of patterns he has developed over his time developing Angular applications. There are many articles about how to use the latest features of a framework, or how to use a certain library. So it’s good to read, for a change, an article about how someone approaches a problem within Angular. Adriano also has articles on how he organises modules and what considerations to have when writing reusable components.

There is a lot happening within the Angular eco-system, but these posts I found really interesting.