React, Angular and Backbone: Hack Reactor Curriculum Includes 3 Biggest Front-End JavaScript Libraries

Our curriculum team recently unveiled a new two-day curriculum module that incorporates some of the most important new technologies for software developers: React and ES6. React is Facebook’s groundbreaking JavaScript library, and ES6 is essentially the latest iteration of JavaScript. These cutting-edge technologies are pedagogically tied together at Hack Reactor through a project that incorporates the YouTube API. With React joining Angular and Backbone in our curriculum, we continue to incorporate the most dominant JavaScript frameworks for organizing code in client-side applications.

“React is a view-layer library for JavaScript,” says Curriculum Engineer Dan Thareja. “It provides a very efficient, declarative way to create user interfaces.”

React gains its efficiency through minimizing interaction with the document object model or DOM, which is a key element in how websites and apps access and change data.

“What makes React so efficient is that it uses a virtual DOM to optimize and touch the actual DOM of the webpage only when necessary. DOM manipulations are some of the slowest operations in traditional websites,” Thareja explains.

Even before it had officially made its way into the curriculum, Hack Reactor students had a strong proclivity toward React. Nearly every student team in recent cohorts incorporated React into their final projects, learning to use the library with self-teaching methods and fundamentals taught in the first half of the course. In addition to creating faster apps and webpages, React allows developers to build code that is more inherently scalable. A related library, React Native, presents incredible efficiencies for mobile app development.

“React has also been breaking out into the Native side,” notes Thareja. “React Native compiles down into native Android and native iOS--they can write apps [for both operating systems] that share 85% of the code.”

As part of the same curriculum module, students now also learn ECMA Script 6, commonly referred to as ES6. This is the new protocol for how browsers and JavaScript interpreters should understand the JavaScript language.

“In short, it’s the new version of JavaScript,” says Lead Curriculum Engineer Josh Wyatt. “It releases a ton of new features that make the language more powerful and easy to use.”

react, angular, backbone, javascript, hack reactor

Curriculum Engineers Dan Thareja (left) and Josh Wyatt designed a two-day sprint on React, ES6 and the YouTube API at Hack Reactor.

This exciting new release comes seven years after the previous version, ES5. ES5 is still the more established version of JavaScript for developers today, and so it’s important for engineers to be familiar with both.

“We’re in a world where we need to be really well-versed in new versions of JavaScript and be able to throw down new versions of ES6 code, but also be comfortable with older iterations,” says Wyatt. “You can’t just do one or the other. We just have more to learn...We have to insist that our students take in new material on top of everything else they’re learning.”

The rationale behind coupling these two technologies into one curriculum module (a two-day “sprint”) is that React is built to work quite well with ES6.

“React plays very nicely with ES6,” Wyatt describes. “This is to say that the structure of React leverages some of the ES6 features in a way that is particularly pleasing and powerful.”

By combining the two, the curriculum teaches the logic of each technology simultaneously, while also displaying the synergistic relationship between React and ES6. From there, the curriculum team honed in on learning objectives, such as React’s concept of thinking in components, which Thareja describes as “a fundamental shift from the traditional MVC [Model View Controller]  architecture.”

With the general topics and teaching points decided on, the curriculum team chose to work with the YouTube API to put those ideas into action.

“We had several different ideas for the application that we would use to house the student work on this front,” describes Wyatt. “We decided that building a YouTube-like app would be the most interesting.”

With Angular, Backbone and React all part of the Hack Reactor curriculum, students learn the most used client-side frameworks for organizing code. In addition to being highly industry-relevant, students learn the meta-skill of choosing the developer tools that are best equipped to handle the tasks they are working on.

“Our students now know the biggest three libraries used in industry right now,” says Thareja.

“They get the experience of actually doing things in different ways,” Wyatt adds. “That’s the nature of the modern industry. They will always have the option of using different tools. In being able to understand the pros and cons of different tools, they can make better decisions.”

Hack Reactor is about making students into autonomous engineers, and that means having the knowledge of different tools and the openness to determine which is best--not just which is familiar. Our students gain proficiency with bleeding edge technologies and the fundamentals to understand a given task at an elemental level. Furthermore by “learning how to learn,” our students can pick up new tools very quickly--a key skill in an industry where the most important technology of next year may not exist yet.

“We tell students there is no right way to run your code,” says Wyatt. There are different styles, different git workflows, different tooling systems, different package managers.”

Interested in cutting edge developer tools and the meta-skills to optimize their use? Apply to Hack Reactor or any immersive JavaScript program in the Reactor Core network.

Read more:

Why JavaScript Dominates the Software Industry & is Rising in the Internet of Things

This is the Most Important Skill a Software Engineer Can Know

Students’ React Native App Opens Channels Across the Globe