marionette-vdom

In January, 2015 I published the marionette-vdom project on GitHub. This project aims to implement Marionette.js views with virtual-dom, in a React similar fashion.

Motivation

One among React’s top-notch features, virtual DOM is gaining momentum in the front-end development community. Since Marionette.js is a formidable and constantly evolving library, why not adding one good thing to another?

A key concern here is ensuring that whatever code implementing virtual DOM features won’t break any existing functionality. That is why we have incorporated the whole test suite from Backbone.js and Marionette.js for the related classes, and all the 163 specs are passing.

Current status

To the date, its version 0.1.2 is implementing VDOM versions for Marionette.ItemView and Marionette.CollectionView. It can be used through node.js, available on NPM.

Travis CI status:

Usage

This module exposes VDOMItemView as the VDOM implementation for Marionette.ItemView and VDOMCollectionView for Marionette.CollectionView:

Example

jasmine-precondition

In January, 2015 I published the jasmine-precondition project on GitHub. This project aims to implement a Jasmine instruction to ease setting up asynchronous pre-conditions before, during and after tests.

Motivation

Since Jasmine 2.0, the runs, waits, and waitsFor methods have been removed in favor of allowing functions run as part of the spec to receive and invoke a done callback. This new approach is described at Upgrading Jasmine - Asynchronous Specs.

The done callback works great for asynchronous features with a callback (such as AJAX, jQuery animations or anything else with promises). However, there are yet other asynchronous features that will complete on their own and would be using waitsFor before Jasmine 2.0, like rendering Google Maps, images or anything else that can change both the DOM and the CSSOM.

While it is utterly possible to re-implement waitsFor I believe that Jasmine 2.0 direction is more towards stepping away from this idea and instead taking more advantage of done callbacks, like putting one it block as a pre-condition for another.

Thus, the preCondition instruction defined here will simply poll a given conditional function at a certain time interval, and once its condition is met the callback done will be fired off.

Current status

To the date, its version 0.1.0 can be used either standalone and through node.js, available on NPM.

Travis CI status:

Usage

preCondition(condition, done, interval);

where:

  • condition: a conditional function that shall only return true when the condition you are expecting for is met.
  • done: the done callback from beforeEach, it or afterEach must be passed here.
  • interval (optional): a time interval in milliseconds between two condition executions. Default is 100.

Example

Stateless UIs with React + Flux with Backbone & Multiple Inheritance with Mixins

On January 15th, 2015 I hosted the Backbone.js Hackers meetup in San Francisco, CA at Brandcast.

Thanks Avenue Code for sponsoring the food and drinks and Dan Lynch from Brandcast for arranging the venue!

On this meetup we had 2 talks:

1) Hao Liu - Backbone View Multiple Inheritance Through Mixins

Backbone provides a convenient way to subclass your view through single inheritance. However, it does not prescribe a way to extend your view with properties from multiple superclasses, i.e. multiple inheritance. In this presentation we are going to discuss how to achieve multiple inheritance through view mixins, and demonstrate how it can be implemented as a framework.

2) Jordan Garcia - Writing Stateless UIs with React + Flux

Easier testability, quicker development and code that’s easier to reason about are just some of the benefits of writing stateless UIs. This session will deep dive into the core concepts of Flux Architecture and how it partners with ReactJS. Finally we will demonstrate how these concepts can be applied to your Backbone application to achieve a highly decoupled View layer.

Check out Stateless UIs with React + Flux with Backbone & Multiple Inheritance with Mixins.

You can also watch the Video.

Jasmine Testing for Models and Views + Directory structure on modularized apps

On November 13th, 2014 I hosted the Backbone.js Hackers meetup in San Francisco, CA at Macy’s.com.

Thanks Avenue Code for sponsoring the food and drinks and Yulia Kukuyuk from Macy’s.com for arranging the venue!

On this meetup we had 2 talks:

1) David Beck - Modularized Backbone Apps Part 2: Directory Structure

This talk is about modularization of the front end into encapsulated, reusable packages, via development of tools such as cartero, backbone.subviews, and backbone.courier.

2) Brenda Jin - Jasmine Testing for Backbone.js Models and Views

This session will cover a breakdown of how to approach Jasmine testing for Backbone.js Models and Views, how Jasmine testing works with instantiating new Models and Views, and how to trigger and test custom events and their callbacks. Her slide deck is also available.

Check out Jasmine Testing for Models and Views + Directory structure on modularized apps.

You can also watch the Video.

Backbone.js tricks or treats for HTML5DevConf

I gave this talk on October 20th, 2014 at HTML5DevConf in San Francisco, CA, and also on October 9th, 2014 at Backbone.js Hackers meetup also in San Francisco, CA.

This talk explains some pitfalls, solutions and good practices for common scenarios in Backbone.js. In this talk the audience will learn about Marionette.js, React, Epoxy.js and Sinon.JS and how do they solve problems about performance, memory, productivity and code organization.

Slide deck

Prerequisites:

  • Backbone.js
  • Design patterns for large-scale javascript
  • Curiosity
  • Opinion

Resources:

Backbone.js best practices & Marionette.js + Backbone.Subviews/Ba­ckbone.Courier

On October 9th, 2014 I hosted the Backbone.js Hackers meetup in San Francisco, CA at Cloudflare.

Thanks Avenue Code for sponsoring the food and drinks and James Kyle from Cloudflare for arranging the venue!

On this meetup we had 2 talks:

1) David Beck - Modularized Backbone Apps Part 1: Subviews and messaging

This talk is about modularization of the front end into encapsulated, reusable packages, via development of tools such as cartero, backbone.subviews, and backbone.courier.

2) Tiago Garcia - Backbone.js tricks or treats

This talk explains some pitfalls, solutions and good practices for common scenarios in Backbone.js. In this talk the audience will learn about Marionette.js, React.js, Epoxy.js and Sinon.JS and how do they solve problems about performance, memory, productivity and code organization. His slide deck is also available.

Check out Backbone.js best practices & Marionette.js + Backbone.Subviews/Ba­ckbone.Courier.

We are back! Learn about Firebase & Backbone + building a better Backbone.View!

On September 11th, 2014 I hosted the Backbone.js Hackers meetup in San Francisco, CA at Pivotal Labs.

Me and Summer Kim volunteered to revamp this meetup after 1 year of hiatus. Thanks Avenue Code for sponsoring the food and drinks and Jonathon Kresner from AirPair for arranging the venue!

On this meetup we had 2 talks:

1) David East - Building realtime web apps with Firebase and Backbone

Realtime data is more than just a buzz word. It’s the new evolution of the way data is being delivered around the web. In this talk we’ll learn how we can use Firebase to give our apps realtime data. We’ll take a look at why realtime data is difficult to implement and what we can do to make it easier. At the end we’ll do a live coding session where we’ll give a Backbone app realtime powers using Firebase’s BackFire library.

2) RJ Zaworksi - Interop! Building a better Backbone.View

Let’s admit it: there are better tools than Backbone for UI development. While projects like Marionette, Thorax, and Stickit help smooth some rough edges, independent libraries like react.js offer a compelling alternative. In this conversation, we’ll explore opportunities for matching Backbone’s strengths as a data layer with the power of modern UI frameworks.

Check out We are back! Learn about Firebase & Backbone + building a better Backbone.View!.

What is all the fuss about with front-end development?

Many enterprise software developers still wonder why everyone is so concerned with client-side applications, HTML 5, Javascript, and front-end related “stuff.” Such skills are very notable on job postings nowadays, even for enterprise development based on Java, .NET, and Rails (which are server-side technologies). A developer might ask: Why does nobody seem to care anymore that I have a Java architect certification if I don’t know about RequireJS, AngularJS or whateverJS (front-end development tools)?

On this post at Medium, originally made for Avenue Code‘s Code Highway blog, I give an overview about what is going on with front-end development and why is it given so much importance over the past couple of years.

Backbone.js tricks or treats

On March 20th, 2014 I gave this talk at Avenue Code in Belo Horizonte, MG, Brazil. This talk explains some pitfalls, solutions and good practices for common scenarios in Backbone.js. In this talk the audience will learn about Marionette.js, Epoxy.js and Sinon.JS and how do they solve problems about performance, memory, productivity and code organization.

Slide deck

Prerequisites:

  • Backbone.js
  • Design patterns for large-scale javascript
  • Curiosity

Resources: