Components of a Modern Web App

Matt Hubert| December 9th

You’re ready to write your hip, new, modern front-end web application. You head to Hacker News and start collecting all of the latest and greatest tools to use in your new app. React.js for my views, great! Ampersand for my models, check. Sass for my styles, easy. Webpack for my… Module bundler? Wait, what’s a module bundler? Grunt, Gulp, Yeoman, build tools? Type checkers? What is all this stuff?!

Over time the stack for developing web applications has changed and grown tremendously. What used to just be HTML and jQuery (and a sprinkle of AJAX) is now an extremely complex environment with a lot of moving pieces that need to seamlessly work together and enhance one another. And the best part is, they change about every three weeks.

For our own sanity, we’ve created a list to keep it all straight. We hope it helps you too!

Coming soon, after years of trial and error, we’re going to share what our recommended production-quality libraries are for each of these categories -- so you can skip the “getting burned in production” part, and head straight to the “deploying awesome products” part.

Components of the stack

  • Models
    • Store, validate, and manipulate your application’s data
  • Views
    • Render HTML, display the data to user
  • Controllers
    • Perform logic to connect the Models and Views, receive callbacks from event handlers and update models
  • Ajax
    • Fetches data from, and saves data to, the backend server
  • Routing
    • Maps URLs to a specific “page” of your app. Load a specific JavaScript function when a URL is hit. Essentially the “entry point” for your application
  • Error Reporting
    • Records when an error has occurred on the client so you can fix it
  • Build Tool
    • Performs operations on your codebase like preprocessing, minification, and bundling. This includes steps such as translating Sass to CSS, JSX to JavaScript, ES6 to ES5, et cetera, so your code will actually run in your web browser.
  • Style Preprocessor
    • Transforms your style files to plain CSS
  • Module Bundler
    • Allows you to use require(“foo”) or ES6 modules in the browser
  • Javascript Dependency Management
    • Downloads your project dependencies in a reproducible way (e.g. jQuery, Angular, Sass), so you don’t have to manually include them in your code. Also pins dependencies to specific versions to maintain compatibility
  • Frontend (HTML, CSS, JS) Framework
    • Provides common features (grids, breakpoints) and widgets (navbars, cards) to save you time (e.g. Bootstrap, Compass)
  • Type Checker
    • Checks for type errors
  • Scaffolding Tool
    • Helps build a project with all of the above! Generates code automatically for you so you don’t have to wire up all of these components manually.
  • Utility Libraries
    • Various frontend libraries that help smooth out some of JavaScript’s eccentricities (e.g. moment.js)

Check out this nifty infographic of each component for modern web application!

As you can see, a modern web application is no longer an HTML file, a JavaScript file, and a CSS file.

Unfortunately within each of the components listed above, there can be an overwhelming number of options to choose from. Each of those 14 categories can have 10+ options, which makes it an arduous task (and frankly a full time job) to keep current with the best libraries to use in your stack. And even if a library seems good on paper (and on GitHub), it often shows its growing pains when scaled to thousands of users in production.

Be sure to check back next week for our deep dive into Bitmatica's tried and true stack.



Photo courtesy of Tony Burns

Matt Hubert
Co-founder of Bitmatica. Super powers include catching falling objects and occasionally having perfect pitch.