Let's Code JavaScript - The Lab

Experimentation, exploration, and general messin’ about. Here in The Lab, we try out new tools, create new ideas, and see what we can break. Anything and everything that doesn’t fit in the other channels could end up here.

Front-End Frameworks: Ember.js (Part III)
We wrap up our exploration of Ember.js by building out custom form fields, setting up events and cross-application communication mechanisms, and dealing with performance. In the end, is Ember.js a good choice for your front-end applications? We decide.

Front-End Frameworks: Ember.js (Part II)
We continue our investigation of Ember.js with a look at its influence on design and architecture. We build out our stock market projection components and hook them up to our intentionally-quirky domain layer. How easily does Ember integrate with existing business logic, and what does it take to test an Ember component? We find out.

Front-End Frameworks: Ember.js (Part I)
Ember.js is a framework for, in their words, “ambitious web applications.” But is it going to cause more trouble than it’s worth? We start a three-part deep-dive into Ember. In this episode, Ember fundamentals. We look at a “Hello World” app, components, modularity, testing, and the challenges of escaping Ember’s assumptions.

Front-End Frameworks: AngularJS (Part III)
We conclude our investigation into AngularJS’s impact on design and architecture. In this episode, we bring in our pre-existing persistence layer and use it to coordinate changes across our application. We also create a custom form field that uses domain-driven validation. Does AngularJS play well with our architecture? Should you use it? We render our verdict.

Front-End Frameworks: AngularJS (Part II)
We continue our exploration of AngularJS with a look at application design and architecture. Angular assumes simple models that live in “scope” objects. Our sample application, though, has a rich domain layer based on Ward Cunningham’s CHECKS pattern language. How well does Angular handle an approach that’s outside its comfort zone? We investigate.

Front-End Frameworks: AngularJS (Part I)
AngularJS is a hugely-popular framework for web applications from Google. It’s known for its two-way binding and automatic dependency injection. But does it live up to our standards of maintainability and long-term reliability? We take a close look in this three-part series. First: AngularJS fundamentals, including controllers, directives, modularity, and testing.

Quixote: CSS Unit Testing
On the Recorded Live channel, we’ve been working on a proof-of-concept suite of CSS unit tests. The concept’s been proven. Now it’s time to turn that work into a general-purpose open source library: Quixote. I’m conducting a virtual hackathon October 13-16 starting at 10am PDT (GMT-7) to build the library. Join us!

Front-End Frameworks: React (Part II)
We conclude our look at React, the front-end library from Facebook. In this part, we investigate React’s architecture and design constraints by building a real app. How well does React deal with architectural approaches that it wasn’t designed for? How does it coordinate far-flung components? What about lock-in, complexity, and testing? We answer it all.

Front-End Frameworks: React (Part I)
React is the hot new library for building user interfaces from Facebook. It boasts an innovative virtual DOM and bucks the trend by eschewing templates. How well does it work for real-world apps? We dive deep with a two-part series. In this first episode, we get React up and running and look at the fundamentals of automation, modularity, and testing.

Legacy Code Part IV: Unit Tests
The conclusion of our four-part legacy code series! We’re ready to put unit tests in place for Intro.js, our real-world legacy code example. We extract our scrolling function into its own module, install Karma, and implement honest-to-goodness cross-browser unit tests around it. Challenge completed!

Legacy Code Part III: Refactoring
Our massive legacy code series continues! With pinning tests in place, we can safely change our legacy Intro.js code. We need to do two things: figure out how the showElement() function works and set the stage for introducing unit tests. To do that, we’ll factor showElement() into its component pieces.

Legacy Code Part II: Pinning Tests
We continue our series on testing and refactoring legacy code. Now that we understand the design of Intro.js and know what we want to change, we need a way to refactor the code safely. Our centerpiece will be pinning tests: rough tests that warn us when we accidentally change the behavior of our legacy code.

Legacy Code Part I: Reflective Design
Legacy code. It’s a problem everyone must face at some point in their career. What do you do when you inherit a codebase that you don’t understand? How do you add tests to existing code? Today in The Lab, we start a massive four-part series on testing legacy code. First up: reverse-engineering the design of existing code and creating a test strategy.

CasperJS
We’ve used PhantomJS, the headless web browser, to automate our smoke tests. PhantomJS is fairly low-level, however, which makes writing tests pretty painful. Enter CasperJS. CasperJS is a wrapper that promises to make PhantomJS much more convenient. Today in The Lab, we put it to the test. How does CasperJS work, and will it live up to its promise?

Test Them Test’em
For months, we’ve been using Karma for cross-browser testing, but I’ve also heard great things about Test’em ’Scripts. Today in The Lab, we put it to the test. Can Test’em supplant Karma as our test runner of choice? Or will our needs prove to be too much?

Simplebuild It and They Will Come
Confession time: I don’t like frameworks. Sure, they’re powerful and convenient, but they lock you in. Grunt’s plugins are a typical example: powerful task automation, but you have to use Grunt. Is there another way? Today in The Lab, we find out. Our challenge: Create an approach to task automation that’s as convenient as Grunt’s, without the lock-in.

Vojta Jína on Karma, AngularJS, and More
Today in The Lab, a special treat: Vojta Jína, the creator of Karma, joins us for a wide-ranging discussion about the origins of Karma, the $10,000 bet that made AngularJS a success, and his secret life as a trumpet player.

The Great Grunt Shootout
Nearly since the beginning, viewers have asked why I use Jake instead of Grunt for automated builds. I had my reasons, but now it’s time to find out if those reasons are valid. Does Grunt really hurt long-term maintainability in favor of short-term ease-of-use, as I fear? Or am I just paranoid? We’re off to The Lab to find out.