Saturday, 22 July 2017

Diving Into Angular 4 Dart Alpha 1

Angular Dart 4 Alpha was recently released and I was keen to try it out. There's quite a few changes as it becomes increasingly more Dart-ified and broken away from its Typescript heritage.

My hobby project NP8080, as ever, is my guinea pig for such upgrades. It was almost entirely painless - we can forgive the one time rename of the package from Angular2 to plain Angular! Building is slightly slower/heavier (there's a lot going on) but this is being worked on.

The standout feature for me is the component inheritance of attributes such as @input. There's a lot of components in my app that have common functions (dialogs mainly) but being unable to have a hierarchy to share stuff meant that... well things got a bit messy and copy-pastey!

With the new release I spent a happy time creating my base classes and shifting the functionality around. The joy of deleting hundreds of lines of code!

So the class structure ended up something like this:

     Base Component Class                    Base Component Class 
             ||                                       ||
     Editor Component Class                Another GUI Control Class
             ||
   1 Particular Dialog Class

Even better was the Dependency Injection, the base classes could have services injected into them from the derived classed and they could still be marked final too. Very nice! Slight downside is the declarations:

  GenerateDialogComponent(
      TextProcessingService newTextProcessingService,
      TextareaDomService newTextareaDomService,
      ThemeService newThemeService,
      EventBusService newEventBusService)
      : super(newTextProcessingService, newTextareaDomService, newThemeService,
            newEventBusService) {
   ...
  }

It's a bit cluttering annoying to declare a variable like newTextProcessingService that gets passed immediately to the super call and never referenced again. I wonder if the following would be a possible language change? Seems a lot cleaner and clearer to me and should cover most cases.

  @InjectSuperParameters
  GenerateDialogComponent() : super(textProcessingService, 
              textareaDomService, 
              themeService,
              eventBusService) {
   ...
  }

Anyway, going forward creating a new dialog or control should be half the work. Sounds good! Look forward to the next Alpha/Beta.