04/11/2016

Bowst About React: Part 1

Apps, Front-End Frameworks, ReactJS, JavaScript

Introducing Bōwst about ReactJS

Our multi-part series on the right way to build a React app!  In this first post, we’ll talk a little about what ReactJS is and why it’s popular.  We’ll also discuss the ecosystem of bundlers, compilers, libraries, and technologies we use to supercharge our development of React-based projects.  In later posts, we’ll provide step-by-step instructions to one of the following: eternal youth, transforming lead into gold, or building an awesome web app with React (hint: you won’t need the Sorcerer’s Stone).

So what’s the big deal about ReactJS, anyway?  If you’re in the business of web development, or if you have any connection to the Javascript community, you’ve probably heard a lot about React.  Since it was open-sourced by Facebook in March 2013, it has taken the front-end community by storm and has rapidly been adopted by a number of large organizations (Netflix, Imgur, Airbnb to name a few).  However, its genesis goes back to 2011, which is when it was first deployed to power Facebook’s news feed.  

Here at Bōwst, we’ve been using React for the last year or so and we love it; we already have a number of projects in production built on this game-changing technology.  But why? Why do we love it, you ask?  Simply put: we love it because React helps us build awesome user experiences.

At Bōwst, we’ve worked with just about every front end javascript framework in the book, and have found that React represents a radical rethinking of the architecture of interactive front-end components and apps.  Previous front end technologies were generally built on the popular Model-View-Controller (MVC) pattern, which encapsulates the data (model), presentation (view), and functionality (controller) of a project into different logical structures.  While this was a vast improvement over previous attempts to provide a better foundational framework for front-end code, it could still be difficult to ensure the UI state was organized and predictable.

React takes an entirely different approach, casting itself as Library instead of a framework (such as Angular, Backbone, etc) which focuses exclusively on the UI layer.  However, this isn’t your mother’s UI layer.  We’re not talking static markup generation here, we’re talking about super dynamic, data driven, and highly interactive components.  In my opinion, this has been the key to its popularity; the UI of the modern web doesn’t simply encapsulate the way things look, it’s built on how we interact with a web page and how the page responds (or Reacts) to our actions (see what I did there?).

Due to this popularity, an enormous ecosystem of associated libraries has sprung up to provide solutions to common needs such as HTML5 routing (react-router), animation (react-animate), and charting (react-chartjs).  Thanks to this community interest, it’s now possible to quickly build an enterprise-grade web app built on React in conjunction with a series of stable third-party libraries.  When starting a project, choosing the right libraries for the foundation is critical.  How does one organize business logic?  What about a baseline set of styles or components?  Even decisions like code folder structure can significantly impact the long term success of a project.  

You’re probably wondering: how does one sort through all the options and actually get started building a totally awesome app with React?  Simple — we’ve done the work for you!  Welcome to Bōwst about React – we’ve poured our collective expertise and experience to developing an battle-tested approach to quickly building amazing apps built on React….and now we’re passing it on to you, dear reader.

Stay tuned next time for our step-by-step guide to setting up your build environment, coming soon to a blog near you!

(For the next post in this series, click Bowst about React Part 2.)

More Thoughts

Need help with your next digital project?

Click on that button and fill in the simple form.