25 JavaScript tools
CASE STUDY
AIRBNB
In early 2015, Airbnb was reaching the
limits of its existing server-rendered
approach. It was using a combination of
Backbone and Handlebars to generate
availability calendars alongside other
complex pages key to its business.
To combat this, its team turned to
React as a framework to help them
move forward. As React by itself is just
a view layer, they were able to update
small sections of the site at a time.
With no backend requirement, they
were able to connect with their existing
Rails structure to feed the data needed
for each view from their API.
The search page has seen a recent
conversion from the now-defunct Flight
framework. As React and Flight both
share a similar component structure,
it was simple to refactor each part
individually. They were able to use
higher-order components to wrap
each section and convert old Flight
instructions to new React props.
To aid this transition, Airbnb
authored several open-source tools
to help with different aspects of
development. Enzyme, for example,
was created to make testing easier.
Details can be found on GitHub (github.
com/airbnb?language=javascript).Polymer
polymer-project.org
Polymer is a framework from
Google created to help build
applications using web
components. By working
with the official specification, these
components are reusable and can work
alongside native elements and methods.
Polymer 3 is coming soon and switches to
using npm and ES2015 module imports as
the needs of developers have evolved.
Angular
angular.io
Angular was one of the first
popular single-page
application frameworks
available. It has changed
dramatically since its first release and
with a host of new features still remains
prevalent today.
Angular is designed to cover all aspects
of an application – from templating
to dependency injection. It has an
opinionated structure, which means all projects will end up working in a similar way.
Unlike React, Angular uses two-way data binding to keep all aspects up to date.
Values in an input text box, for example, can directly update the model. Likewise, if the
model changes display will automatically update. This keeps everything in sync.
Angular is built on top of TypeScript, which enables it to use features like static
typing and decorators to make the composition of components easier to manage.
TypeScript then compiles down to regular JavaScript to use as normal in the browser.Vue
vuejs.org
Vue is a new framework but
one that has quickly gained
traction. While it shares
similarities with others, it
also eases some of the common pain
points. It’s flexible enough to be used
either as part of an existing application,
or as the main framework for a site.
All of the HTML, CSS and JavaScript
for a component can live within the same file. Styles are scoped, which makes it easier
to drop components into multiple projects as needed. Vue also contains its own state
management library called Vuex. Similar to systems like Redux, the application has
access to a centralised data store. Adjustments are performed by mutations on that
state, which trigger updates in any component making use of that data.
Similarly, Vue also includes a router to enable navigation between different parts of
a single-page application. By defining all the routes available, Vue will take care of the
navigation between them.Svelte
svelte.technology
Svelte is designed to be a
lightweight framework that
disappears into standardised
JavaScript once the project is
built. Component logic, style and markup
all live within a single file and work much
like web components with scoped styles
and <slot> elements to add content. The
feature set is intentionally limited but
can be readily extended as needed.Above The Angular CLI is a great way to try out new things
with the frameworkAbove DevTools enable access to the inner workings of
each component, including internal state and VuexAirbnb provides a React style guide to make
sure projects are clear and stay maintainableComponents are loaded in dynamically as
needed, which speeds up the initial page load