ng-bootstrap

Wesley Cho

Introduction

• I work on several projects
  • UI Bootstrap
  • UI Router
  • ng-bootstrap
• I enjoy learning about all things frontend, and many things in web development
• Primarily interested in easing the pains of development

State of UI Bootstrap

• Originally created by Pawel Kozlowski
  • Core developer on Angular 1 & 2
  • Built with many best practices in mind
• Robust library for using common useful widgets
• Built on top of Angular 1.4+ (in master) and Bootstrap 3
• Used by many companies for years, including Fortune 500s
• Currently actively developed

https://angular-ui.github.io/bootstrap

Praises

• Over 1000 unit tests ensuring high quality
• Hard working & highly skilled team members from the community
• Stable library
  • Avoids making breaking changes without careful consideration
  • Documents all changes in an easy-to-read changelog
• Requires only Angular & Bootstrap's CSS

Datepicker

• Too much config...
  • Does not include popup settings
• 175 lines of markdown
• Most bloated component in library
  • Over 900 lines sans optimizations & dateparser
• Does not support plugging moment.js

Datepicker (cont.)

• Timezones are painful with JS
  • Only preserved with new Date(date)
  • Only way to set custom timezone is to create new date via Date.parse('Jan 01, 1970 00:00:00 ' + timezone)
    • ​We need better Date API for timezones :(
  • ​Difficult to trace date manipulation in datepicker

Tabs

• The accordion looks different
  • Err...tabs
• API is awkward to use
  • Has weird bugs when removing tabs

Enter ng-bootstrap

Accordion

Notice

• No funky transclusion of header
  • Uses Web Components to properly pass through content
• Simple to read & use
  • Bindings are not verbose
• Simple to test

ng-bootstrap

• Built by UI Bootstrap team, assisted by Angular team
• Built from ground up
  • Takes advantage of different architecture in ng2
  • Help shape best practices
• First third party library to unit test with ng2

Features

• Does not hijack all elements
  • No more `progress` element being used for all directives for progressbar
  • Namespaced components from the get-go
• Easy to read...for now
  • All API is obvious
    • via definitions
    • via conventions
• Exposes changes via observables

Demo

https://github.com/wesleycho/ng-bootstrap-play

Some Links

• https://github.com/angular/angular
• https://github.com/angular/angular-cli
• https://github.com/ng-bootstrap/core

Slides can be found at

https://slides.com/wesleycho/ng-bootstrap