DailyJS

DailyJS

The JavaScript blog.


Tagbenchmarks
Featured

libraries ui performance benchmarks angularjs

PerfBar, ngAtp

Posted on .

PerfBar

PerfBar

PerfBar (GitHub: lafikl / perfBar, License: MIT) by Khalid Lafi is a script that adds various benchmarks to a page. To use it, add perfBar.js and then configure some metrics:

perfBar.init({  
  budget: {
    'loadTime': {
      max: 200
    },
    'redirectCount': {
      max: 1
    },
    'globalJS': {
      min: 2,
      max: 5
    }
  }
});

You can use perfBar.enable and perfBar.disable to toggle metrics. The documentation has PerfBar included on the page so you can see what it looks like, and each of the available metrics is documented.

Some of the available metrics are the total number of DOM elements, the time for the DOM content to load, request duration, and backend/frontend processing time.

ngAtp

ngAtp (GitHub: yiransheng / ngAtp, License: MIT, Bower: ng-atp) by Yiran Sheng is an autocompletion library for AngularJS. The basic usage is to specify the ng-atp and ng-atp-config directives. The config option uses a Bloodhound config object, which comes from Twitter's typeahead.js suggestion engine.

In ngAtp, Bloodhound is included as an Angular service, with Angular's $http library instead of jQuery.ajax. It reuses Bloodhound, so you get features like prefetching, intelligent caching, fast lookups, and backfilling, but with an Angular-friendly API.

Featured

benchmarks node modules npm

Node Roundup: Do We Need peerDependencies, lazy-install, Time Require

Posted on .

Do We Need peerDependencies?

Isaac Schlueter asked this question on Twitter:

Recently, peerDependencies has gotten more and more contentious. Srsly considering deprecation/removal. Thoughts? github.com/npm/npm/issues/5080

The discussion on Twitter and GitHub seems strongly for removing peerDependencies. I agree with it simply because I hate explaining how it works.

Eran Hammer made an interesting point about the idea of a compatibleWith property:

What we need is compatibleWith concept that simply warns you when you are using bad combinations. I think we can rename peerDeps and with some minor adjustment keep the functionality without annoying everyone. Making it a warning sign instead of a blocking feature would remove the "hell" part and those who chose to ignore warnings (as many already do with node versions) can continue to ignore.

lazy-install

If that isn't enough npm craziness for you, then how about this? lazy-install (GitHub: adamrenklint / lazy-install, License: MIT, npm: lazy-install) by Adam Renklint can be used to install dependencies based on "group" names.

Let's say you wanted to specify dependencies for your production and test environments. Your package.json could look like this:

{
  "name": "myProject",
  "lazyDependencies": {
    "server": {
      "express": "4.0.0"
    },
    "test": {
      "mocha": "1.18.2"
    }
  }
}

Then in your code you can run lazy.install to trigger an npm install with the right options. In fact, the module itself is basically a wrapper around npm.

Time Require

Time Require

How much time did that require take to require? Now you can find out, with time-require! (GitHub: jaguard / time-require, License: MIT, npm: time-require).

It shows the execution time for each module by changing require, and then displaying the elapsed time for each file once the 'exit' event is emitted on the process object.

You can use it by adding a require('time-require') as the first line of your main script.

Featured

libraries ui performance benchmarks mobile bootstrap

ChocolateChip-UI, Bootstrap Grid Builder, Bootstrap 3 Performance

Posted on .

ChocolateChip-UI

ChocolateChip-UI

ChocolateChip-UI (GitHub: sourcebitsllc / chocolatechip-ui, License: BSD) from Sourcebits is a new UI framework for mobile web applications that is designed to look like iOS 7, Jelly Bean, and Windows Phone 8.

ChocolateChipUI uses specific HTML5 tags for structural markup. The article element is the "basic building block of ChocolateChip-UI":

Every article should have a unique id so that it can be identified by the navigation system. These must be valid HTML ids. At load time, ChocolateChip-UI checks to see if you have manually set the navigation state of your articles. If not, it will set the first article as current and the others as next. This will mean that initially you app may momentarily load in a state of disarray before it is arranged properly. As such, we strongly recommend that you always put a state on each article so that it loads correctly.

It uses its own JavaScript framework instead of a more established library, and is based around event-based widgets. It has some low-level features like touchscreen gesture recognition, but also includes higher-level widgets like UISegmented, UIPopup, and so on.

The authors have written a guide on how to transition from jQuery:

ChocolateChipJS is very similar to jQuery. But it's also much smaller. Uncompressed it's just 60kb and compressed, 26kb. In contrast, jQuery is 2.0.3 uncompressed is 242kb and compressed, 84kb. ChocolateChip was designed for modern mobile browsers. It has no legacy code for browser not on current mobile devices.

Bootstrap Grid Builder

Jay Kanakiya's Bootstrap Grid Builder (GitHub: kanakiyajay / bootstrap-grid-builder, License: Apache 2.0) is a tool for exploring and generating column/row grids based on Bootstrap 3's new markup.

It allows you to switch between different devices so you can see what a given layout will look like on a phone, tablet, or desktop.

Bootstrap 3 Performance

Parashuram Narasimhan sent in Bootstrap Performance using telemetry and an article about it: Bootstrap - Evolution over two years:

The performance drop seems to stop at 2.3.2 release and looks like the latest 3.0.0 release was aimed at making things faster. A lot of components in 3.0.0 are way better than their 2.3.2 counterparts.

There are significant performance changes between the RC and the final versions of 3.0.0. This could be due to incorrect CSS files I generated, or was there something different in the final release?

The telemetry page allows you to view performance metrics for each Bootstrap component for each point release.

Featured

benchmarks node modules express async middleware authentication

Node Roundup: Nodetime, Flow.js, Lox

Posted on .

You can send in your Node projects for review through our contact form or @dailyjs.

Nodetime

Nodetime screenshot

Nodetime (GitHub: dmelikyan / nodetime, License: MIT, npm: nodetime) by Dmitri Melikyan is an instrumentation service for profiling Node applications.

Once the nodetime module has been added to a project, running require('nodetime').profile() will cause it to start sending HTTP and database statistics to the Nodetime service:

The Nodetime profiler running within the application securely sends profiling data to the Nodetime server, where it is stored and sent to the browser in real-time. Profiling data is kept on the server for 10 minutes.

It's also possible to avoid sending the profiling data to the server, by using require('nodetime').profile({ stdout: true }).

Nodetime is built on the author's Timekit module, which adds some useful bindings to gettimeofday and getrusage.

Flow.js

Flow.js (License: MIT, npm: flow.js) by Tony Findeisen is inspired by Seq and Async.js, but is written from scratch rather than forking these projects. It's based around the idea of creating 'flows' which can be executed synchronously or asynchronously. Results can be collected from each operation, and callbacks are used to signal the completion of parallel methods:

flow()  
 .par({
    a: function() {
      return 123;
    },
    b: function(cb) {
      setTimeout(function(){
        cb(null, 'I completed after 100ms');
      }, 100);
    }
    // and even more
  })
  .exec(function(err, results) {
    console.log(results);
    // results.a: 123;
    // results.b: 'I completed after 100ms');
  });

This library uses the .length property of functions to determine if an argument has been supplied -- if so, the function is considered asynchronous. Libraries like this benefit from the fact that functions in JavaScript are objects:

Every function in JavaScript is actually a Function object.

Flow.js comes with tests written with Mocha.

-- Function documentation at MDN

Lox

Lox (GitHub: reaktivo / lox, License: MIT, npm: lox) by Marcel Miranda is a Mongoose-based authentication middleware library for Express, and includes tests written with Mocha.

The lox function itself takes a MongoDB connection URI string, and the result can be passed to app.use. It needs suitable routes for managing users, but provides middleware for logging in and out:

# Sign in
app.post '/login', lox.routes.login('/success_uri', '/fail_uri')

# Sign out
app.get '/logout', lox.routes.logout('/success_uri', '/fail_uri')  

Featured

benchmarks webgl processing

Processing 1.2, Canvas and WebGL Benchmarks, What is WebGL?

Posted on .

Processing.js 1.2

Processing.js 1.2 has been released. This version improves
WebGL performance, and there's now a guide that shows how Canvas and
WebGL relate to Processing's rendering modes: Understanding Rendering
Modes in
Processing.js
.

There's a full changelog in the blog post. And, the image above comes
from Spring and
Processing.js
.

Canvas and WebGL Benchmarks

Ilmari Heikkinen posted some interesting jsPerf Canvas and WebGL
benchmarks

to his blog, which includes a text
sources
benchmark.

Running the benchmarks will show a comparison against other browsers
using Browserscope.

What is WebGL?

What is WebGL? was a talk by Neil Trevett given at the WebGL Meetup
group
. It's fairly
high-level, but Neil does a good job of explaining how the stack of
technologies required for WebGL come together to make it all possible.

It also mentions a project by Google called
ANGLE which attempts to translate OpenGL ES 2.0 API calls to DirectX 9 for Windows machines that
don't have OpenGL 2.0 drivers. Interesting stuff!