Javascript Duels

by Britni Birt

April 20, 2016

The last Friday of every cohort is graduation day. Students put the finishing touches on their independent projects and get ready to celebrate the 10-week gauntlet they've just made it through. Later that night, when the post-graduation celebration draws to a close and the last high-five and bittersweet goodbye fades away, Launch Academy enters the 'Off-season,' a time between cohorts (usually a few weeks) when the only souls on campus are the staff. Perhaps off isn't the most accurate way to describe the weeks between cohorts—things are certainly quieter with the students gone, but the staff is as busy as ever.

The rate of change in software development is staggering, and the offseason is dedicated to incorporating that change into fresh curriculum updates for future cohorts. In the last off-season, we decided to take our updates a step further—with an experiment.

Javascript has been a core component in our curriculum for some time now, and as demand for it continues to grow, adding more Javascript to our on-campus program wasn't just a no-brainer—it was essential. The problem we faced was deciding which of the many frameworks out there to teach. It's not too difficult to find some very strong opinions on the internet, but we decided the best way to choose which framework to teach was to form our own opinions.

Three of our Experience Engineers (EEs), Elise, Kevin, and Melissa-Leigh (a.k.a. MLG), were up for the challenge. With roughly the same amount of full-stack experience, each were prepared for an epic Javascript Duel—er, truel if you wanna get technical.

Duel Rules

Comparing one framework against another isn't really helpful unless each is assessed on the same metrics, so the first order of business was to conceptualize the app and agree on acceptance criteria. The EEs settled on a dynamic one-page web application for book reviews that would be built in three different Javascript frameworks: React, Ember, and Angular 2.0.

Each EE would have two days to build the app in one of the frameworks and record their experience. They'd then repeat this process two more times in a different framework. By the end of the duel, the book review app would be built a total of nine times. Elise, Kevin and MLG would then compare experiences, ultimately choosing a winning framework to add to the curriculum.

Framework Evaluation

Every language and framework has a tremendous amount of depth. If we wanted to, we could spend all 10 weeks of our on-campus program teaching a single language/framework. But since we're committed to teaching the full web development stack, we need to be sure that our curriculum incorporates a balance of breadth and depth.

We pack a heck of a lot of learning into 10 weeks, which means that adding more curriculum requires re-thinking our approach in other areas. Adding a javascript framework to the core Javascript curriculum we already teach will have ripple effects elsewhere in the curriculum. The winning framework had to be quick to pick up and implement while simultaneously providing lots of flexibility for a wide-variety of applications. A one-trick pony with limited functionality wouldn't cut it.

With the rules laid out and the basic selection criteria in place, Kevin, Elise, and MLG got to work.

Thanks for letting us get to know you better!

We wanted a Javascript framework that struck an ideal balance between speed to proficiency, flexibility, and widespread use in the marketplace. React turned out to be our Goldilocks. It's component-based, has great docs & tutorials, a lightweight architecture, is written in standard Javascript/HTML, and is quick to pick up.

Docs and Tutorials

Documentation is a developer's best friend. Of the three frameworks we tested, React had impeccable documentation. Ember wasn't far behind as it has been around for some time. Angular 2.0 is still being built, so for the moment documentation is spotty at best. However, we do expect the Angular 2.0 documentation to get significantly better in the near future.

Component-Based Framework

A component-based framework allows for a high degree of modularity and flexibility while still allowing for quick implementation. React won this category hands-down.

Lightweight architecture

When building a software project, too little structure can cause organizational problems, and too much can cripple the pace of development. The lightweight architecture of React allows for agile development with just enough structure to keep the pace of development high.

Written in Standard Javascript/HTML

It might be surprising to hear that Javascript frameworks aren't necessarily written in Javascript. For example, Angular 2.0 is written in TypeScript (technically Angular 2.0 can be written in Javascript, but the documentation is so sparse that it is easier to learn TypeScript). React and Ember scored equally in this category, as both are written in standard HTML and Javascript syntax.

Coming Summer 2016

We've been building the React curriculum over the last few months, and we'll turn up the heat even further during the upcoming off-season.

How does this fit into our existing curriculum? Glad you asked. We're making room for React by adjusting how we teach server-side static page rendering. Specifically, we'll be focusing on building the backend as an API for a Javascript-based frontend.

As always, we've made some other changes to our curriculum, most notably we're shifting focus from the Rails framework to the Rails API. Change is constant here at Launch—it's what drives us and it's what make our graduates the best in the industry.