#ngTasty

Building high performance
measurable directives

@zizzamia

Angular at Twitter

#ngTasty

There were a few problems

Angular group at Twitter

#ngTasty should be

Benchpress

repeated manual work

to create a benchmark

How to create a benchmark

Enter this

npm install generator-benchpress

yo benchpress ng-tasty

You get this

create benchmarks/protractor.conf.js
create benchmarks/ng-tasty/index.html
create benchmarks/ng-tasty/benchmark.spec.js

Prepare a benchmark on the dist

To see the case we are testing we can run

http-server -p 8000

And visit

http://localhost:8000/benchmarks/ng-tasty/

Running a basic benchmark

protractor benchmarks/protractor.conf.js --specs benchmarks/ng-tasty/benchmark.spec.js

ngTasty Simple Table

<div tasty-table bind-resource="resource" watch-resource="collection">
  <table class="table table-striped table-condensed">
    <thead tasty-thead></thead>
    <tbody>
      <tr ng-repeat="row in rows">
        <td>{{ row.name }}</td>
        <td>{{ row.star }}</td>
        <td>{{ row['sf-Location'] }}</td>
      </tr>
    </tbody>
  </table>
  <div tasty-pagination></div>
</div>
$scope.resource = {
  "header": [
    { "name": "Name" },
    { "star": "Star" },
    { "sf-Location": "SF Location" }
  ],
  "rows": [
    { "name": "Ritual Coffee Roasters", "star": "★★★★★", "sf-location": "Hayes Valley"}, ...
  ]
};

ngTasty Simple Table

<div tasty-table bind-resource="resource"> ... </div>
<div tasty-table bind-resource="resource" watch-resource="collection"> ... </div>
<div tasty-table bind-resource="resource" watch-resource="equality"> ... </div>

Running a benchmark on the dist

protractor benchmarks/protractor.conf.js --specs benchmarks/dist/benchmark.spec.js

Running Benchpress on an ngTasty large table


watch-resource="reference"

      gcAmount | gcAmountInScript |       render |        script
============== | ================ | ============ | =============
        423.69 |             0.00 |        11.56 |          9.45

watch-resource="collection"

        665.45 |             0.00 |        18.11 |         12.31

watch-resource="equality"

      51433.72 |        108760.91 |        10.73 |        168.06

Comparing project versions

ngTasty

  • v0.5.1 (Master)
  • v0.5.0 (January 31th)
  • v0.4.0 (December 8th)
  • v0.3.0 (October 22th)

Creating a benchmark for specific bower versions


yo benchpress:external dist ng-tasty#0.4.0

protractor benchmarks/protractor.conf.js --specs benchmarks/ng-tasty-0-4-0/benchmark.spec.js

Running Benchpress on an ngTasty large table

ng-tasty 0.5.1 (master)
      gcAmount | gcAmountInScript |       render |        script
============== | ================ | ============ | =============
      51503.28 |             0.00 |        11.08 |        172.02
ng-tasty 0.5.0
      29358.08 |         38678.04 |        11.37 |        108.99
ng-tasty 0.4.0
      32047.94 |         47624.71 |        10.89 |        121.68
ng-tasty 0.3.0
      42849.36 |         79090.07 |         9.98 |        154.23

ui-grid vs ng-table vs ng-tasty

yo benchpress:external angular-ui-grid

yo benchpress:external ng-table

yo benchpress:external ng-tasty
protractor benchmarks/protractor.conf.js --specs benchmarks/angular-ui-grid/benchmark.spec.js

protractor benchmarks/protractor.conf.js --specs benchmarks/ng-table/benchmark.spec.js

protractor benchmarks/protractor.conf.js --specs benchmarks/ng-tasty-0-5-0/benchmark.spec.js

Running Benchpress on a large table

angular-ui-grid (v3.0.0-rc.20)
      gcAmount | gcAmountInScript |       render |        script
============== | ================ | ============ | =============
       4720.29 |          4720.29 |        18.17 |         59.98

ng-table (v0.5.3)
      10280.07 |          8845.68 |         9.51 |         41.47

ng-tasty (v0.5.0)
        753.51 |             0.00 |        10.16 |          9.32

To recap

  • 1) compare api implementation
  • 2) compare versions
  • 3) compare third part solutions

#ThankYou

#ngTasty

Building high performance
measurable directives

@zizzamia