Tech-Stack Checklist for a Modern Single-Page Web Application

I’m proud to say I’m on the team that last year rebuilt the TripCase mobile client shipped to app stores December of 2012. It’s a big achievement for myself as a programmer, and for the company in general, as we service our traveler’s needs. I hope you use it and find it valuable.

Behind the scenes we built this modern single-page web application atop a carefully curated technology stack. Our goal is crafting a single code base that all the team’s programmers actively understand and develop. One that works as a:

• Web-site visited by modern mobile web browsers (webkit enabled such as Safari, Chrome, and latest Blackberry)
• One that’s downloaded as a native app for iOS and Android

Achieving that task is simple, but not easy. We choose open-source web tech based on JavaScript, HTML, CSS, and many libraries. Our technology team had to convince plenty of people that was a good choice, made occasionally challenging by various critical pundits in the popular press, but we proved it a successful strategy.

We could have written native clients for each of the platforms in their particular languages and frameworks, but we knew that would splinter our group. Instead our unified code base meant we gained the ultimate cohesion as a team. All developers focused at once on the single code base shared among all platforms.

Architect a Professional Grade Application

JavaScript is an amazing language. It’s everywhere, there’s no barrier to entry for using it,  and it’s functional callbacks relate perfectly to event-driven user interfaces. I totally dig it.

At the same time it’s a fantastic challenge. It offers no classic structure, implies no formal organization, and lets programmers go wrong real quick.

My general advice for building a JavaScript app at scale is:

• Choose a framework that helps establish a professional architecture enabling genuine engineering principles
• Mix in supporting libraries covering your industry’s problem domain
• Continually challenge your teammates on choices made
• Always evaluate replacements and upgrades because the open-source community moves quickly

Tech Stack Checklist

I won’t document our technology stack staying away from specific recommendations that might sway your critical decision making. Instead I’m documenting what I’ve learned are the significant features needed when building a highly-interactive, modern, single-page browser-based application. Especially one that wraps up into a mobile native application as ours does.

When choosing your solutions assure that you have most of these topics covered. Each bullet exposes a commonly accepted best-practice or architectural pattern as I see it.

• Model-View-Xxxx => A better way of organizing code complexity into a conventional architectural pattern scaling well over time
• State Machine => Workflow management stepping forward and backward in user-oriented use-cases
• Animation => Screen transition and element support for eye-catching movement
• Templates => HTML and CSS mixed with string interpolation for lists of data displaying service responses
• Routing => Handling entrances into your app view with model data items in browsers
• CSS Preprocessor => Meta languages that compile down to CSS offering conditional logic, code reuse, and variable substitution for better global control
• Date/Time Helper => Seems as though modern apps take times in various formats rendering it in short, long, brief and detailed ways
• J/S Minifier => Shrink down the code transmitted to end-user browsers
• J/S Concatinator => Combine code files with obfuscation reducing transmission time
• CSS Minifier => Shrink down CSS for most efficient delivery
• DOM Access => Helpers for selecting screen elements by id, tag type, and class for manipulation
• AJAX Helper => Keep the user’s browser interactive as server requests happen in the background
• Command-line Build Tools => Whenever possible one-press code preparation and deployment for reproducible results done by anyone including automation
• Continuous Integration Server => Automation runs command-line build tools checking code and deploying to development/test/certification servers
• Lint/Hint => Tools made seeking JavaScript syntax errors and code style compliance prior to deployment
• UI Components => Choose well the various touch-points into your app by selecting from these common controls: date/time picker, data-tables, selection lists, etc.
• LocalStorage Caching => Single page wrapped apps benefit from caching service responses for offline support as well as optimizing start-up, resume, re-render events
• Sprite-Sheet Generator => Automate combining individual art assets into a single texture atlas for efficient transmission to client devices
• Unit Tests => Evaluating code changes with automated tools catches errors before they enter servers (bonus for headless and command-line and CI)
• JavaScript Utility Library => Supporting functions offering high-level abstraction for data structure processing (sorting/mapping/iterating)
• Native Phone-app Wrapper => Share website code turning it into a native app for delivery to users through the well-known cellphone stores
• Browser Feature Detection => degrade gracefully or enhance intelligently on browsers knowing exactly their run-time found capabilities
• Module Definition and Dependency => Avoid polluting the global namespace by wrapping code into modules and then demand-loading them based module references
• Touch DOM-Event Support => Wrapped apps running on cellphones have unique tap events with unique delays as compared to standard element mouse handling abstract both for view clicking handling
• User Input Validation => Clearly report obviouslly wrong user input before sending over to the server, and don’t hard-code a bunch of regex compares
• Bonus: View/Model Data Binding
• Bonus: Screen/Panel Swiping
• Bonus: Gesture Recognition
• Bonus: Code-Complexity Reporting
• Bonus: Code-Coverage Reporting

Is There an Easier Way?

Now that’s a list. If we were building a native iOS app we’d have far fewer decisions to make, right? Most answers would simply be: “let’s do what UIKit/AppKit/CoreData does.”

Dev shops lacking open-source talent and attitude will shy away from my choose-your-own-adventure tech stack assemblage. Groups making games or image tweakers will no doubt go native needing heavy hardware integration.

I still say the open-source tech-stack advantage is a huge win. Coders aren’t locked into being productive on only a single platform. Furthermore it means our app has the potential to reach as many people as possible.

Think of Your Architecture

When you’re architecting your single-page web application think of how you’re meeting the needs of every topic listed above. I guarantee you’ll find them important on your project

Please give me a shout out on Twitter @KenTabor if I’m missing something and I’ll update the article sharing your ideas.

Think of what I’ve written here, have a coffee, and happy coding on your next project!

Updates

May17 – adding user-input validation, thanks Vlad!