DailyJS

DailyJS

The JavaScript blog.


Tagbackbone
Featured

frameworks firefox tools backbone articles

Web Servers in Firefox OS, Marionette Inspector

Posted on .

Embedding an HTTP Web Server in Firefox OS

Justin D'Arcangelo sent in a detailed article about web servers in Firefox OS: Embedding an HTTP Web Server in Firefox OS.

... we've been looking at harnessing technologies to collectively enable offline P2P connections such as Bluetooth, NFC and WiFi Direct.

By utilizing HTTP, we would already have everything we'd need for apps to send and receive data on the client side, but we would still need a web server running in the browser to enable offline P2P communications. While this type of HTTP server functionality might be best suited as part of a standardized WebAPI to be baked into Gecko, we actually already have everything we need in Firefox OS to implement this in JavaScript today!

The article uses justindarc/fxos-web-server which is a JavaScript web server built with TCPSocket, a raw TCP socket API in JavaScript.

The possible use cases enabled by embedding a web server into Firefox OS apps are nearly limitless. Not only can you serve up web content from your device to a desktop browser, as we just did here, but you can also serve up content from one device to another. That also means that you can use HTTP to send and receive data between apps on the same device! Since its inception, FxOS Web Server has been used as a foundation for several exciting experiments at Mozilla.

So it seems like Firefox OS is getting the kind of advanced features that we've seen appear (and in some cases disappear) in Chrome OS, where you get access to native APIs to create desktop-like experiences.

Marionette Inspector

Jason Laster wrote to me about the Marionette Chrome Extension, known as the Marionette Inspector. There's a video about it, and you can download it from the Chrome web store.

It has some features that are pretty unique, like visualisations for the view hierarchy with the UI tree, and more friendly handling for inspecting Backbone models and events. Rather than seeing a complex JavaScript object, you'll see properties grouped under UI, Events, Model, and Properties.

It makes building apps with Marionette more like using the tools you might expect from an IDE, so you should try it out if you already use Marionette or are a Backbone fan that hasn't yet tried it.

Featured

performance mobile backbone

Linting Backbone Apps, Hybrid Mobile Performance

Posted on .

eslint-plugin-backbone

eslint-plugin-backbone (GitHub: ilyavolodin / eslint-plugin-backbone, License: MIT, npm: eslint-plugin-backbone) by Ilya Volodin is a Backbone-specific ESLint plugin. It can verify collections and views, which will help you find common mistakes like direct jQuery usage inside views.

Each of the rules is documented, and the documentation describes when not to use the rule as well. This is good if you're hitting a lot of linter errors for specialised behaviour that should be ignored.

Because the rules are so well documented you might like to use it to brush up on your Backbone best practices as well.

Hybrid Mobile Performance with browser-perf

If you're developing cross-platform apps powered by technologies like Cordova, how do you benchmark them? browser-perf by Parashuram is a Node module for gathering rendering performance metrics. The author has recently published a blog post called Cordova Apps - Rendering Performance that describes how to use browser-perf with hybrid mobile apps.

When developing a mobile app, one of the concerns of using the Hybrid approach is performance. Achieving smooth experience like a native app is important for Hybrid apps and developer tools for Android and iOS have been helping to a great deal.

For Android, Chromedriver is used with the Selenium JSON wire protocol. iOS uses Appium, but Parashuram had to enable performance logs before this worked.

Featured

libraries backbone angularjs

Backbone Directives

Posted on .

Tal Bereznitskey writes:

This is an open source project to enrich Backbone.js with AngularJS style directives.

I used to hear people talk about the new hotness and I didn't really want to let go of Backbone. I took quick looks from time to time and found some stuff I didn't like in AngularJS.

The DOM was filled with things like "ng-click" which reminded me of the spaghetti age of HTML and JavaScript.

When I first started using Angular I also found custom attributes (directives) concerning. However, after using them I realised that they can really help make code more declarative and concise. Tal came to the same conclusion, and created Backbone Directives (GitHub: berzniz / backbone.directives, License: MIT) to bring the same pattern to Backbone projects.

It includes things like bb-bind which implements data-binding with expression support, and bb-class for changing an element's class.

Expressions use the same code as Angular's expression parser, which attempts to safely execute JavaScript by using a sandbox that prevents access to certain properties (like .constructor).

```javascript // Sandboxing Angular Expressions //

Featured

testing backbone

Gremlins.js, Backbone.CustomSync

Posted on .

Gremlins.js

Gremlins.js

Gremlins.js (GitHub: marmelab / gremlins.js, License: MIT) from marmelab is a monkey testing library. According to the authors, it can be used to unleash a horde of undisciplined gremlins at a web application.

If that sounds weird, there's a handy gif in the readme that illustrates how it works: it basically throws events at your HTML, and is able to report back when something goes wrong:

Mogwais only monitor the activity of the application and record it on the logger. For instance, the "fps" mogwai monitors the number of frame per second, every 500ms. Mogwais also report when gremlins break the application. For instance, if the number of frames per seconds drops below 10, the fps mogwai will log an error.

There are various kinds of gremlins that try to uncover issues. This includes a form filler, clicker, and scroller. You can manually create hordes using a chainable API:

gremlins.createHorde()  
  .gremlin(gremlins.species.formFiller())
  .gremlin(gremlins.species.clicker().clickTypes(['click']))
  .gremlin(gremlins.species.scroller())
  .gremlin(function() {
    window.$ = function() {};
  })
  .unleash();

Backbone.CustomSync

Garrett Murphey sent in Backbone.CustomSync (GitHub: gmurphey / backbone.customsync, License: MIT, npm: backbone.customsync), a more pragmatic solution for defining Backbone.sync implementations that allows you to avoid giant switch statements:

To use the extension, all you have to do is use Backbone.CustomSync.Model or Backbone.CustomSync.Collection in place of Backbone.Model and Backbone.Collection, respectively. If you don't define one of these sync methods - createSync, for example - and Backbone attempts to save a new model, the options.error callback will be invoked automatically. Backbone.CustomSync will only perform the operations you define.

Featured

dom backbone views react

Backbone.React.Component, backbone-dom-view

Posted on .

Backbone.React.Component

If you like Facebook's React library and Backbone.js, then take a look at José Magalhães' Backbone.React.Component (GitHub: magalhas / backbone-react-component, License: MIT, Bower: backbone-react-component). It acts as a bridge so you can bind models, collections, and components on both the client and server.

The author has made a blog example that you can run locally. The server uses Express, and keeps collections updated with data both on the server and in the browser.

backbone-dom-view

backbone-dom-view (GitHub: redexp / backbone-dom-view, License: MIT, Bower: backbone-dom-view) by Sergii Kliuchnyk is a view class for Backbone that allows selectors to be bound to helper methods using a shorthand notation that supports binding model fields, view events, and calculations.

Sergii's example is a to-do model:

View = Backbone.DOMView.extend  
  template:
    '.title':
      html: '@title'
    '.state':
      class:
        'done': '@is_done'

It has RequireJS support, tests, and documentation in the readme.