--- title: Web Application Theory description: Web Application Theory image: https://www.bitovi.com/hubfs/training-hero-bkg-5.jpg --- - ![AI implementation](https://www.bitovi.com/hubfs/AIConsultingIcon.svg) [AI implementation](https://www.bitovi.com/services/ai-consulting) - ![Systems engineering](https://www.bitovi.com/hubfs/icon%20-%20backend.svg) [Systems engineering](https://www.bitovi.com/services/systems-engineering-consulting) - ![Project Management](https://www.bitovi.com/hubfs/icon%20-%20PM.svg) [Project Management](https://www.bitovi.com/services/agile-project-management-consulting) - ![Product Design](https://www.bitovi.com/hubfs/icon%20-%20design.svg) [Product Design](https://www.bitovi.com/services/product-design-consulting) - ![Frontend development](https://www.bitovi.com/hubfs/icon%20-%20frontend.svg) [Frontend development](https://www.bitovi.com/services/frontend-development-consulting) - [View more → ](https://www.bitovi.com/digital-consulting-services) We're Experts in... - [JavaScript](https://www.bitovi.com/services/frontend/javascript-consulting) - [AI training](https://www.bitovi.com/ai-training-for-software-engineers) - [Angular](https://www.bitovi.com/services/frontend/angular-consulting) - [Design systems](https://www.bitovi.com/services/axure-figma-migration) - [React](https://www.bitovi.com/services/frontend/react-consulting) - [Temporal](https://www.bitovi.com/services/backend/temporal-consulting) - [React Native](https://www.bitovi.com/services/frontend/react-consulting/react-native) - [Node.js](https://www.bitovi.com/services/backend/nodejs-consulting) Showcase ![Yum! Brands](https://www.bitovi.com/hubfs/yum-showcase-link-1.png) [View case study](https://www.bitovi.com/en/bitovi-yum-case-study) More Projects - [![Levi's](https://www.bitovi.com/hubfs/levis.svg)](https://www.bitovi.com/web-application-consulting-work/levis-ecommerce-responsive-redesign) - [![Christie's International Real Estate](https://www.bitovi.com/hubfs/christies.svg)](https://design.bitovi.com/christies) - [![BAFS](https://www.bitovi.com/hubfs/bafs.svg)](https://www.bitovi.com/ux-design-consulting/ux-case-studies/bafs-ppp) - [View more → ](https://www.bitovi.com/our-software-consulting-work) Open Source Tools We build powerful tools and open source them to support the community. [See what we've built →](https://www.bitovi.com/open-source) - [![Blog](https://www.bitovi.com/hubfs/icon%20-%20blog.svg) BlogWe post about delivering products and solving problems. ](https://www.bitovi.com/blog) - [![Partnerships](https://www.bitovi.com/hubfs/Handshake-1.svg) PartnershipsLearn about Bitovi's technology partners ](https://www.bitovi.com/partnerships) - [![Academy](https://www.bitovi.com/hubfs/icon%20-%20academy%20(4).svg) AcademyFree courses to build delivery skills ](https://www.bitovi.com/academy) - [![Open source tools](https://www.bitovi.com/hubfs/icon%20-%20open%20source.svg) Open source toolsUse or contribute to our community ](https://www.bitovi.com/open-source) Let's Connect - [![Discord](https://www.bitovi.com/hubfs/DiscordLogo.svg) Discord ](https://discord.gg/J7ejFsZnJ4) - [![LinkedIn](https://www.bitovi.com/hubfs/LinkedinLogo.svg) LinkedIn ](https://www.linkedin.com/company/bitovi/) - [![GitHub](https://www.bitovi.com/hubfs/GithubLogo.svg) GitHub ](https://github.com/bitovi/) ![Eggbot](https://www.bitovi.com/hubfs/build_assets/bitovi-limbo-cms-react/338/js_client_assets/assets/eggbot-LTGhdSGL.png) Name * Work Email * Phone What's your project? Send ### Contact Us (312) 620-0386contact@bitovi.com June 27, 2014 # Web Application Theory Web Application Theory ![Justin Meyer](https://www.bitovi.com/hubfs/justin.jpeg) Justin Meyer Share: [![Twitter](https://www.bitovi.com/hubfs/limbo-generated/_astro/twitter-white.os3xLc3C_Z2nW4or.svg) ](https://twitter.com/intent/tweet?text=) [![Reddit](https://www.bitovi.com/hubfs/limbo-generated/imgs/icons/reddit.png) ](http://reddit.com/submit?url=) I've been attempting to organize how Bitovi approaches web application development. I'd like to draw a line from what users and businesses value (quality) to the techniques and tools we use to build web applications. I've organized my thoughts into a mental map: ![web app theory mental map](https://www.bitovi.com/hubfs/Imported_Blog_Media/madness.png) It's a bit crazy, but it connects what users, businesses, and developers want **(red)** and the problems and constraints we face **(orange)** with solutions **(green)** and tools **(violet)**. Read on to understand this map and Bitovi's take on web development. ## The Goal Bitovi's goal is to create quality applications. The user, not the developer utimately determines quality. ![quality is fast, error, free, and great UX](https://www.bitovi.com/hubfs/Imported_Blog_Media/quality.png) A quality application is: - Fast - response times beating [user flow and attention limits](http://www.nngroup.com/articles/response-times-3-important-limits/). - Error Free - the site is free of bugs. - Highly Usable - a user can accomplish all tasks effortlessly with little training. ## The Constraints With [infinite developers and time](http://en.wikipedia.org/wiki/Infinite_monkey_theorem), a quality application will be produced, but budgets and timelines often get in the way of this extremely effective approach. ![constrains](https://www.bitovi.com/hubfs/Imported_Blog_Media/constraints.png) The most common constraint is time to delivery. Ideally, the solution would be to hire more developers. But those developers will need to coordinate, which introduces other problems: - Budgets - You can't hire infinite developers to work in silos. - Imperfect Foresight - It's impossible to always plan perfectly. - Skill Sets - Different developers are good at different things. - Communication Bottlenecks - [Communication is quadratic](http://en.wikipedia.org/wiki/Brooks%27s_law) for a given number of developers. ## The Solution - Maintainability Maintainability is how easily a codebase can respond to change. A highly maintainable app enables the most efficient development, which allows you to quickly improve the application, resulting in something that is error free, fast, and has a better user experience - Quality. ![maintainability](https://www.bitovi.com/hubfs/Imported_Blog_Media/maintainability.png) Maintainability *always* pays off in the long run. But you have to fight human nature that often compels us to do what is [easy and "works"](http://en.wikipedia.org/wiki/Pleasure_principle_(psychology)) instead of what is right and hard. This is why at Bitovi we try very hard to favor maintainability over all other concerns. But measuring maintainability is hard. It cannot be measured by lines-of-code, [Cyclomatic complexity](http://en.wikipedia.org/wiki/McCabe_Measure), or some other form of static analysis. For Bitovi, a maintainable apps is: - Documented - Tested - Deterministic - Modular ![maintainability characteristics](https://www.bitovi.com/hubfs/Imported_Blog_Media/maintainability-characteristics.png) A *documented* code base is easy to understand and use. We use [DocumentJS](https://github.com/bitovi/documentjs) to document our clients' code. A *tested* code base can be refactored or improved with fewer regressions. We use [QUnit](http://qunitjs.com/) or [Jasmine](http://jasmine.github.io/) to unit test our code, [FuncUnit](http://funcunit.com) to functional test it, [testee](http://bitovi.github.io/testee.js/) to automate the tests, and either Travis or Jenkins for CI. A *deterministic* code base makes it easy for a developer to know where and how to add new functionality. This is something that JavaScriptMVC's generators provide - an easy way to create a module and its tests. Good docs, tests, and determinism are essential, but modularity is the most important characteristic of a maintainable app. ## Modularity and Thin Server Architecture Modularity is the degree to which a system's components may be separated and recombined. A modular app is not wasteful - parts can be changed, replaced, or thrown away without affecting the rest of the app. There are a lot of ways to break up a web application, but the best place to start is strong client-server separation. We're big believers in Thin Server Architecture. Thin Server Architecture means that you: - Do as much as you possibly can on the client. - Client and server communicate via services. ![Modularity to TSA](https://www.bitovi.com/hubfs/Imported_Blog_Media/modularity_tsa.png) We've been building [SPAs](http://en.wikipedia.org/wiki/Single-page_application) and traditional websites for years with Thin Server and Fat Server approaches. The Thin Servers always work out better because Thin Server architecture: - Separates the application's logic in two domains: - Server - Data, Business Process, Security - Client - State, User Interface, Views - Specializes teams: Client and Services - Parallelizes development - Client and Services can work independently with [fixtures](http://canjs.com/docs/can.fixtures.html). - Leaves you with services you can use with other clients. Thin Server Architecture cuts your application in half by separating client from server. You can throw away an entire Angular, Backbone, or Ember client and startover with [CanJS](http://canjs.com) without touching the server. That's modularity! > *For more information on Thin Server Architecture, checkout [these slides](http://www.crisp.se/file-uploads/Practical_Thin_Server_Architecture_with_Dojo.pdf) by Peter Svensson, the person who coined the term.* If you're worried about search, there are [services](http://www.brombone.com/) that can crawlify your site. We built [something similar](https://github.com/bitovi/crawlify) in about 2 weeks that could do 85 requests a second on a single EC2 xlarge instance. And Google [announced](http://www.googlewebmastercentral.blogspot.com/2014/05/understanding-web-pages-better.html) they have started processing JavaScript when crawling sites. ![Google's Fetch And Render Webmaster Button that processes JS](https://www.bitovi.com/hubfs/Imported_Blog_Media/google-render.png) ### Services ![TSA - Services - Rest](https://www.bitovi.com/hubfs/Imported_Blog_Media/services.png) We strongly encourage creating and documenting [RESTful](http://en.wikipedia.org/wiki/Representational_state_transfer) services. For needs that REST doesn't fully describe, like retrieving relational data, we encourage adding some [Rest Relational Alegbra](https://gist.github.com/justinbmeyer/3753564). We document services like [this](https://gist.github.com/justinbmeyer/3e48a819c3c2e1bb4c63). ## Modularity on the Client We build each module in our apps as it's own little application. Each module has its own: - tests, - test page, - documentation, - demo page, and often its own styles, templates and more. [Srchr](http://bitovi.github.io/srchr/)'s [code](https://github.com/bitovi/srchr) has a lot of good [examples](https://github.com/bitovi/srchr/tree/master/srchr/search) of this. ### Dependency Management ![Client - Dependency Management - Steal](https://www.bitovi.com/hubfs/Imported_Blog_Media/dependency-management.png) To build everything as its own application, a very good dependency management solution is needed. Although server based technologies like [browserify](http://browserify.org/) have nice abilities and require less configuration, it is more difficult to make individual tests and demo pages and perform client-control actions like progressive loading. For this reason, we usually use [steal](http://github.com/bitovi/steal), or [RequireJS](http://requirejs.org/). ### Styles ![Client - Styles - Less](https://www.bitovi.com/hubfs/Imported_Blog_Media/styles.png) We use [Less](http://lesscss.org/) to help make CSS more maintainable. We also keep our CSS modular by namespacing styles within their module. Srchr has [examples](https://github.com/bitovi/srchr/blob/master/srchr/search/search.less#L1) of this. ### DOM ![Client - DOM - jQuery + jQuery++](https://www.bitovi.com/hubfs/Imported_Blog_Media/dom.png) We almost always need to support IE8+. And even if we only supported modern browsers, jQuery still provides powerful event and ajax hooks. We also use [jQuery++](http://jquerypp.com) for patching DOM behavior that jQuery doesn't include. ### JavaScript Architecture ![Client -> MV* -> CanJS](https://www.bitovi.com/hubfs/Imported_Blog_Media/mvvm.png) Previously, Bitovi organized our JavaScript within the [Model-View-Controller](http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller) pattern. We now use [Model-View-ViewModel](http://en.wikipedia.org/wiki/Model_View_ViewModel) (MVVM). A ViewModel is more testable and modular than a Controller. It organizes and encapsulates state much better than a Controller. With [CanJS](http://canjs.com)'s 2-way binding, [define](http://canjs.com/docs/can.Map.prototype.define.html) plugin, and [components](http://canjs.com/docs/can.Component.html), views and view models are easy to create and assemble. > *For more information on the MVVM approach with CanJS, checkout the [CanJS ATM video](https://www.youtube.com/watch?v=QP9mHyxZNiI) and read [Data-Driven JavaScript Controls](https://www.bitovi.com/blog/2014/02/data-driven-javascript-controls.html).* ## tl;dr In summary: - Maintainability is the key to successful long term application. - A maintainable app is tested, documented, deterministic, and **modular**. - Thin Server Architecture is the best way to create modularity. - We tend to favor client-side dependency management solutions over server-side solutions. - MVVM is better than MVC. [![Tag for development](https://www.bitovi.com/hubfs/limbo/icons/tag.svg) development ](https://www.bitovi.com/blog/topic/development) Previous Post ![training-hero-bkg-5.jpg](https://www.bitovi.com/hs-fs/hubfs/training-hero-bkg-5.jpg?height=117&name=training-hero-bkg-5.jpg) [ JS and jQuery Essentials ](https://www.bitovi.com/blog/js-and-jquery-essentials)   Next Post ![post-it-sams-club-flow.jpg](https://www.bitovi.com/hs-fs/hubfs/post-it-sams-club-flow.jpg?height=117&name=post-it-sams-club-flow.jpg) [ How a UX Designer Saves You Time and Money in Development ](https://www.bitovi.com/blog/how-a-ux-designer-saves-you-time-and-money-in-development) ```json { "@context" : "http://schema.org", "@type" : "Organization", "address" : { "@type" : "PostalAddress", "addressCountry" : "United States", "addressLocality" : "Libertyville", "addressRegion" : "IL", "postalCode" : "60048", "streetAddress" : "1134 Pine Tree Lane " }, "alternateName" : "Bitovi", "areaServed" : { "@type" : "GeoCircle", "geoMidpoint" : { "@type" : "GeoCoordinates", "latitude" : "41.8781", "longitude" : "87.6298" }, "geoRadius" : "5000 km" }, "description" : "Bitovi is a UX, UI design and front-end JavaScript development consulting company", "email" : "contact@bitovi.com", "image" : "https://www.bitovi.com/hubfs/bitovi-logo-x2.png", "logo" : "https://www.bitovi.com/hubfs/bitovi-logo-23-1.svg", "mainEntityOfPage" : { "@id" : "https://www.bitovi.com/blog/web-application-theory", "@type" : "WebPage", "description" : "Web Application Theory" }, "naics" : "541511", "name" : "Bitovi Web App Consulting", "sameAs" : [ "https://www.facebook.com/BitoviLLC/", "https://twitter.com/bitovi", "https://www.linkedin.com/company/bitovi" ], "telephone" : "312-620-0386", "url" : "http://bitovi.com" } ``` ```json { "@context" : "http://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "Justin Meyer" }, "dateModified" : "September 19, 2016, 6:21:09 PM", "datePublished" : "2014-06-27 20:52:57", "description" : "Web Application Theory", "headline" : "Web Application Theory", "image" : { "@type" : "ImageObject", "url" : "http://cdn2.hubspot.net/hubfs/2171535/training-hero-bkg-5.jpg" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://www.bitovi.com/hubfs/bitovi-logo-23-1.svg" }, "name" : "Bitovi" } } ```