Shuhei Kagawa

Draw animated chart on React Native

@2016-07-18 23:43 - JavaScript, React

At Meguro.es #4 on June 21th, 2016, I talked about drawing animated chart on React Native. The talk was about the things I learned through developing an tiny app, Compare. It's a super simple app to compare temperatures.

Before creating it, I had no idea about what temperatures on weather forecast, like 15 degrees Celsius, were actually like. I remember what yesterday was like, but not the numbers. Typical weather forecast apps shows only future temperatures without past records. Thanks to The Dark Sky Forecast API, the app fetches both of past records and future forecasts, and show them together.

Compare app

The app's source code is on GitHub:

shuhei/Compare

There might have been some charting libraries to draw similar charts, but I like to write things from scratch. I like to reinvent the wheel especially when it's a side project. Thanks to that, I found a way to animate smooth paths with the Animated library.

If I have to add something to the slides:

The Best Part of Angular 2 Offline Compiler

@2016-06-03 22:47 - JavaScript, Angular 2

A couple of weeks ago, I gave a short talk about Angular offline compiler at ng-sake #3, which is a cozy meetup where Tokyo's Angular developers hang out drinking beer.

I won't write much about it here because it's still in its early stage and I couldn't make @angular/compiler-cli work without modification.

The only thing I want to stress here is that it enables us to statically type-check our templates with TypeScript, which is awesome. Templates have been one of the places where mistakes are made since Angular 1. Even if we introduce TypeScript or lint tools, we couldn't be able to detect mistakes in templates until they are evaluated at the runtime.

The steps would be the following:

  1. Angular 2 offline compiler compiles templates into TypeScript files with .ngfactory.ts extension.
  2. You prepare another bootstrap script that imports the root .ngfactory.ts and bootstraps your app with it.
  3. TypeScript compiler compiles the bootstrap script, other TypeScript files and .ngfactory.ts files into JavaScript.

The step 3 type-checks .ngfactory.ts, and detects typo and type errors in your templates if any. It is a great benefit in addition to skipping the runtime compilation and smaller library size. Looking forward to Angular 2 offline compiler's official release!

Angular 2 with Babel

@2016-05-08 15:47 - JavaScript, Angular 2, Babel

Although Angular 2's primary language is apparently TypeScript, many people want to use Babel as shown in a survey.

However, The official documentation targets only TypeScript and ES5. In addition, many pages are not yet available for ES5. That is because Angular 2 relies heavily on cutting-edge ES7 decorators and TypeScript's type annotations for annotating components and services.

To fill the gap, you can use babel-preset-angular2 that supports all the decorators and annotations available in TypeScript. With the preset, you can follow the official documentation for TypeScript to learn Angular 2 itself.

How to use it

npm install -D babel-preset-es2015 babel-preset-angular2

Add presets to .babelrc. Note that the presets' order is important.

{
  "presets": ["es2015", "angular2"]
}

See babel-angular2-app for more complete example.

Supported annotations

Name Example EcmaScript TypeScript Babel* Babel + angular2
Class decorator @Component() Stage 1 Yes Yes Yes
Property decorator @Input() Stage 1 Yes Partial* Yes
Parameter decorator @Optional() Stage 0 Yes No Yes
Type annotation foo: Foo - Yes No Yes

"Babel*" above means Babel with the following official plugins:

Property decorator in Babel is marked "Partial" because babel-plugin-transform-decorators-legacy ignores class properties without initializers.

You can emulate parameter decorator and type annotation with plain ES2015 like the following but it's a little bit counterintuitive.

class HelloComponent {
  constructor(foo: Foo, @Optional() bar: Bar) {
    // Do something with foo and bar.
  }
}

class HelloComponent {
  static get parameters() {
    return [[Foo], [Bar, Optional()]];
  }

  constructor(foo, bar) {
    // Do something with foo and bar.
  }
}

Polyfills

Angular 2 beta versions had polyfill bundles but RC versions don't. But never mind. We can just import them before bootstrapping our app.

npm install -S babel-polyfill zone.js

src/index.js

// Import polyfills.
import 'babel-polyfill';
import 'zone.js/dist/zone.js';

// Bootstrap app!
import {provide} from '@angular/core';
import {bootstrap} from '@angular/platform-browser-dynamic';
import {ROUTER_PROVIDERS} from '@angular/router';
import {LocationStrategy, HashLocationStrategy} from '@angular/common';

import {HelloApp} from './app';

bootstrap(HelloApp, [
  ROUTER_PROVIDERS,
  provide(LocationStrategy, { useClass: HashLocationStrategy })
]).catch(err => console.error(err));

Note that we can use babel-polyfill that includes core-js instead of es6-shim and reflect-metadata. According to use core-js instead of es6-shim, we can use whatever ES6 + ES7 polyfill we like.

Module resolution

You can use any module resolver as long as it works with Babel. I'll pick Browserify here for its simplicity.

npm install -D browserify babelify

Add a build script to your package.json assuming that your bootstrap script locates at src/index.js.

{
  "scripts": {
    "build": "browserify -t babelify src/index > public/bundle.js"
  }
}
npm run build

Isn't this simple? babelify automatically finds your .babelrc and uses the presets specified above.

Of course you can use other module resolvers like Webpack or SystemJS.

Offline compilation

This is not yet available for Babel. Not completed even for TypeScript.

The compiler_cli seems to be deeply integrated with TypeScript compiler. It statically collects metadata from the source and feed it to the compiler. I believe that it is achievable with Babel to do the same thing.

I'm thinking of working on it once the TypeScript version is published and the compiler API becomes more stable.

Conclusion

I've presented how to use TypeScript-specific annotations in Babel. You can enjoy Angular 2 with your favorite transpiler.

See babel-angular2-app for more complete example.