Boost up your

component

development

message

mitko@dev-thought.cool

@MTschimev

Mitko Tschimev

What is slowing us down?

Component complexity

State reproduction

Rebuild and bootstrap time

Develop components in an isolated way

Step really fast through Scenarios

LIGHTWEIGHT

Scenario Driven Development

How to setup

ng add angular-playground

npm run playground

open http://localhost:4201

Sandbox

// ng generate angular-playground:sandbox cat

import { sandboxOf } from 'angular-playground';
import { CatComponent } from './cat.component';

export default sandboxOf(CatComponent, {
    imports: [
        // my sandbox modules
        MatButtonModule,
        ...
    ]
})
  .add('default', {
    template: `<app-cat>Hey Kitty!</app-cat>`
  })
  .add('with name', {
    template: `<app-cat name="Daria">Hey Kitty!</app-cat>`
  })
  .add('with gender', {
    template: `<app-cat [gender]="gender">Hey Kitty!</app-cat>`,
    context: {
        gender: 'female'
    }
  })

See it in Action

Thank you and give your development a boost!

Boost up your component development

By Mitko Tschimev

Boost up your component development

ngVikings 2019

  • 975