Expedia Viewfinder—a ReactJS application


Viewfinder is a tremendously important project for me as it’s one of the first projects I began at Studio None. Starting at a new firm is daunting, but the team at Studio None are such a perfect mesh that I was up to speed and powering through bug fixes and timesheet avoidance in no-time.

Then, nearly three weeks into the job I, along with Josh Girvin were given this amazing project—Viewfinder.

What is it? #

Viewfinder is a way to significantly expand the application of Expedia’s visual assets beyond the existing city destination guide pages—with the goal of guiding customers from the top of the purchase funnel, to the bottom.

The goal is to make the whole gallery of images available to the customer. Featuring some of the best, high-quality photography from around the world, Viewfinder allows you to discover your next holiday destination through experience and geographical filters.

The future of Viewfinder will allow customers to explore, like and save destinations to build an itinerary that can be exported to Expedia’s point of sale.

New foundations #

Expedia’s app needed to be the best and most capable that we could muster from an application, so we used cutting edge technologies from our friends at Facebook & Docker to build a faster, SEO friendly and scalable application.

Two things were important to the success of the project: mobile first and isomorphism (universal Javascript).

Mobile-first #

By developing the mobile version of the website and building tablet and desktop features as we scale, you are able to improve the performance of the responsive design while maintaining the requirement that the user always be served a usable version of the site.

Viewfinder was built mobile-first

By developing each of the components modularly, I could easily call them in and rearrange them in the different breakpoints for mobile, tablet and desktop. This is an excellent approach because it means the touch-screen control you experience on mobile will work the same on desktop, especially with touch-enabled devices.

Isomorphism (Universal JavaScript) #

isomorphic |ˌīsəˈmôrfik #

(also isomorphous |-fəs| ) #
adjective #

corresponding or similar in form and relations.

Code once. Run everywhere.

When we sat down to plan the application, we wanted to just approach it like any usual web application of this tier and build the GUI in JavaScript. However, the problem encountered was that to make the application SEO viable, we need to write it isomographically.

Thanks to NodeJS, you can run JavaScript on a server and serve web content. However, translating our application into pure HTML to be served to clients reading without JavaScript, we need a translation layer. Enter ReactJS.

ReactJS #

Viewfinder is built almost entirely using ReactJS. React allows developers to write isomorphic components that can render on both the server and in the browser. Plus, React has amazing support for front-end DOM manipulation and a component lifecycle that plugs in perfectly to our other friend Flux.

By making each indivudal component stateful, there’s no need for ID reference tags or complex data structures to keep track of state on the page. Instead, React allows you to develop an individual component that interacts with itself, and it’ll take care of the rest.

Flux #

Flux is more a pattern than a formal framework

Flux opens up a whole new approach to developing client-side applications, allowing unidirectional data flow; triggered by Actions, Stored and sent to the component.

Flux one-direction data flow

This diagram is the mindset of an engineer when developing with Flux. In Viewfinder, we used Flummox, a distribution of Flux that eliminates the need for a dispatcher by filling the gap itself. Another quirk at Studio None, we also call the view a “Component”.

Flux has made storing and manipulating data through the application significantly easy. By keeping data in its own store, you can reuse and manipulate the data throughout the application, not just on the component itself.

Flux compliments ReactJS nicely and is a powerful concept that I’m excited to continue using in future applications. It doesn’t necessarily work with every case, but it sure does encourage better coding standards.

Docker #

Docker wasn’t necessarily a huge part of this application, but it was critical to containerizing and allowing speedy local development in the early phases. Docker is a great approach to containerized application deployment and has massive production-level potential. With portable applications, you can easily pick up from development and move to production with a single file as instructions on how to build the app in the configuration that it needs.

Read more on Docker here: I really rave about it too much sometimes.

More to Come #

This is just a brief introduction to Viewfinder, and I’ll continue writing about the technologies that were used within the app. I’ll also be writing on the Studio None blog about this in greater depth, and will write some tutorials on how to get started with your own ReactJS and Flux application.

Check out the Studio None Blog and my posts; stay tuned here for reposts too.


Now read this

Unit testing in Keystone JS

After many annoying tests and messing about with Keystone.JS, I’ve finally managed to get a proper Unit Testing system in place. What am I using? # We just need two super useful plugins to get started. Mocha—our test framework will tell... Continue →