I’m a big fan of the Ionic 2 framework. Ionic is one of the biggest players in the Hybrid Mobile space, and with version 2 of their framework Drifty has improved on an already outstanding set of mobile components for the Hybrid platform.

Although still in beta (beta6 as of this writing) the platform has been a joy to work with. As a developer who works with the framework on a daily basis and is very close to the inner workings of the framework itself, I thought that now might be a good time to give something back to the Ionic community and contribute a component that several folks have been asking for.

Jumping Off With Some Thanks

Contributing to a framework with the size and complexity of Ionic is not an easy task. Since the project is still in beta, a lot of the inner workings of how to setup your environment to be successful contributing are still in flux. The Drifty engineering team was instrumental in helping me be productive from the get-go. Big thanks to Brandy and Adam for taking the time to help me be productive.

Brandy also did an excellent job on the framework’s CONTRIBUTING file. If you’re interested in diving in and getting your feet wet with an Ionic 2 contribution, definitely read this document.

On TypeScript and Quality Code

If you asked my opinion about TypeScript 3 months ago, the answer you would have gotten wouldn’t have been a positive one. To be quite frank, I just didn’t see the value in adding types to Javascript. Oh how my opinion has changed…

Working with a library that has TypeScript support is absolutely wonderful. Contributing to a framework that is written completely in TypeScript is next level. Working with Typescript on the Ionic 2 project was really valuable, and definitely shaped my opinion of the product. It enabled:

  • Quickly jumping between Class definitions, and analyze inheritance patterns
  • Seeing available Class methods with autocomplete, along with their associated method signatures
  • Catching syntax and “code smell” errors before they happen
  • Feeling like you’re writing quality code by following existing framework patterns, and following existing type definitions

All of this also speaks to the quality of Ionic 2’s code base. Drifty has really done an excellent job at keeping things consistent and predictable. I highly recommend diving right in and taking a look at some of the components if you’re interested in navigating a large TypeScript project.

Diving In

We’ve identified the component that we want to write, and now it’s time to get down to it. What are the pieces we need to get started?

  • Platform specific styling and animation transitions (iOS, Android, and Windows Phone)
  • Behavior should be similar to Alert and Modal, using the NavController’s present method to show our Toast over top of content.
  • Should be dismissible with a button with configurable text

Thankfully, Ionic makes it trivially easy to present platform specific styles with your component. By simply using naming conventions to indicate styling, Ionic will automatically choose the platform specific styling of our choice. We simply create 4 files:

  • toast.scss
    • Our base component styles. We can define SCSS variables which will be shared and overridable in each of the platform specific files.
  • toast.ios.scss
  • toast.md.scss
  • toast.wp.scss

Extending Transition for Custom Animations

Ionic implements a custom transition and animation framework that is quite powerful. It supports everything from custom easing, fine-grained control over DOM element animation order, animation sequencing, as well as just being able to perform animations that CSS cannot do alone. I highly recommend checking out the Animation base class if you’re interested in the inner workings.

For our purposes, we’ll simply be extending Transition to implement our custom animations for our Toast. Let’s define a custom Transition for our Toast on Android platforms:

class ToastMdSlideIn extends Transition {
  constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
    super(opts);

    let ele = enteringView.pageRef().nativeElement;
    let backdrop = new Animation(ele.querySelector('.backdrop'));
    let wrapper = new Animation(ele.querySelector('.toast-wrapper'));

    backdrop.fromTo('opacity', 0, 0);
    wrapper.fromTo('translateY', '120%', '0%');
    this.easing('cubic-bezier(.36,.66,.04,1)').duration(400).add(backdrop).add(wrapper);
  }
}

We first define the parts of our Toast component that we want animated by creating new Animation instances and by using native DOM APIs to query for our elements. We define a platform specific easing formula, set a duration, and add our 2 elements to the animation stack.

All that’s left is registering this Animation with the Transition class:

Transition.register('toast-md-slide-in', ToastMdSlideIn);

Once registered, we have to assign our Transition to the md platform alongside all of the other platform specific transitions. We do this by adding an entry into the Config.setModeConfig in the config/modes.ts file.

The fruits of our labor:

Wrap Up

Community-contributed components for Ionic 2 are critically important. As amazing as the Ionic team is, they can only work so fast. It’s our duty as consumers of this powerful framework to spend as much time as we have available giving back.

Check out the official documentation for the Toast component and API Documentation. You can find all of the source for code for the component on GitHub.

I’m looking forward to seeing what other awesome community contributions lie ahead!

Posted in
Share this

Dave Ackerman

Follow

Related Posts