--- title: 5 Rules for Better Backbone Code description: Some simple rules to follow when writing Backbone.js code that's easier to understand, maintain, and modify. image: https://product.hubspot.com/hs-fs/file-296964778-png/backbone-rule-illustrations/Screen_Shot_2013-09-09_at_4.31.50_PM.png --- [Engineering](https://product.hubspot.com/blog/topic/engineering) # 5 Rules for Better Backbone Code [ Gabriela Lanza ](https://product.hubspot.com/blog/author/gabriela-lanza) on Sep 13, 2013 Backbone is a hugely popular MV* framework because it gives you a ton of freedom of implementation. There is no one "Backbone way" to accomplish most coding tasks. This freedom is wonderful when you need it, but when you don't, Backbone's lack of official guidance makes it easy to stray into some bad patterns. When writing new code, try following these rules, and you'll likely find that your code will be far more modular and easier to understand. Note that these rules assume that you're not using any advanced Backbone extensions. Projects like [Marionette](http://marionettejs.com/) attempt to solve these issues in different ways. ## Rule 1: Views may point to one and only one Model ![Screen_Shot_2013-09-09_at_4.31.38_PM](https://product.hubspot.com/hs-fs/file-299400730-png/backbone-rule-illustrations/Screen_Shot_2013-09-09_at_4.31.38_PM.png) Views which need to reference more than one Model are warning signs that you're trying to do too much with one class. Instead, break your large View into two or more Views. The View's model should always be stored as `this.model`. Similarly, Views should point to no more than one @collection. ## Rule 2: State must be kept in Models - not Views, and not the DOM ![Screen_Shot_2013-09-09_at_4.31.42_PM](https://product.hubspot.com/hs-fs/file-297838596-png/backbone-rule-illustrations/Screen_Shot_2013-09-09_at_4.31.42_PM.png) Don't store extra attributes like ".addressHidden" on your View - attributes stored this way don't fire change events and are difficult to persist. Instead, find a way to express the state at the Model level - as "hasAddress", for example. Don't wait until a "submit" user action occurs to store Form data. While you're waiting, you're leaving precious user-entered state in the DOM. Instead, take the data out of the DOM as quickly as possible and store it in a Model, even if it isn't validated yet. It isn't a View's job to validate data, anyway. ## Rule 3: Objects may not be stored in Model attributes ![Screen_Shot_2013-09-09_at_4.31.46_PM](https://product.hubspot.com/hs-fs/file-299402470-png/backbone-rule-illustrations/Screen_Shot_2013-09-09_at_4.31.46_PM.png) Setting any of the keys of objects nested in this way will not trigger a "change" event, and nullifies the biggest benefit of using Backbone Models. Data should always be stored in a way that's reliable to watch for changes. ## Rule 4: Models may point to other models ![Screen_Shot_2013-09-09_at_4.31.50_PM](https://product.hubspot.com/hs-fs/file-296964778-png/backbone-rule-illustrations/Screen_Shot_2013-09-09_at_4.31.50_PM.png) This is a reasonable alternative to storing objects inside of model attributes. You can override toJSON() and parse() in your Models to convert between nested objects and Model pointers. ## Rule 5: Models may not have more than ten attributes ![Screen_Shot_2013-09-09_at_4.31.55_PM](https://product.hubspot.com/hs-fs/file-299359135-png/backbone-rule-illustrations/Screen_Shot_2013-09-09_at_4.31.55_PM.png) Models with more than ten attributes are unlikely to be cohesive. Smaller, more cohesive Models reveal their intention more clearly when they are passed into a function. Do you really need the whole "User" Model, or just a "UserContactInfo" Model, to accomplish this task? If your API has resources with more than ten keys, don't be afraid to split the data into separate Models in your parse/toJSON implementations. Just because data is stored together doesn't nessesarily mean it needs to be manipulated together. ## Conclusion It's important to be able to notice early warning signs of bad code before it has morphed into spaghetti. What are your tips for designing Backbone systems? [Share on Twitter](https://twitter.com/intent/tweet?url=https%3A%2F%2Fproduct.hubspot.com%2Fblog%2F5-rules-for-better-backbone-code)[Share on Facebook](https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fproduct.hubspot.com%2Fblog%2F5-rules-for-better-backbone-code)[Share via email](mailto:info@example.com?&subject=&body=https%3A%2F%2Fproduct.hubspot.com%2Fblog%2F5-rules-for-better-backbone-code)[Share on LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fproduct.hubspot.com%2Fblog%2F5-rules-for-better-backbone-code) ## Recommended Articles [Product](https://product.hubspot.com/blog/topic/product) ## [Building a Team of Growth: What I’ve Learned from Failure, Experimentation & Inclusion](https://product.hubspot.com/blog/building-a-team-of-growth) When I started my career I couldn’t have told you what growth teams did, let alone imagine working on one of them. But as a founding member of ... [ Chris Miller (He/Him) ](https://product.hubspot.com/blog/author/chris-miller) on May 29, 2019 [Engineering](https://product.hubspot.com/blog/topic/engineering)[Product](https://product.hubspot.com/blog/topic/product) ## [How Twitter and HubSpot Are Scaling Build Systems](https://product.hubspot.com/blog/how-twitter-and-hubspot-are-scaling-build-systems) Tech Talk at Night is a chance for engineers to get together and talk about the problems they're solving across the stack. We hosted the second ... [ Hannah Fleishman (she/her) ](https://product.hubspot.com/blog/author/hannah-fleishman) on Sep 25, 2015 [Product](https://product.hubspot.com/blog/topic/product) ## [Attribution Reporting: Delivering the Core, Not Just Building More](https://product.hubspot.com/blog/attribution-reporting) If you’re a marketer, you want to show how you’ve helped move the needle for your business. You want to know what’s working, not just what’s ... [ Dave Chen (He/Him) ](https://product.hubspot.com/blog/author/dave-chen) on Apr 22, 2020 ## Join our subscribers Sign up here and we'll keep you updated on the latest in product, UX, and engineering from HubSpot. [Subscribe to the newsletter ](https://product.hubspot.com/blog/5-rules-for-better-backbone-code#subscription-popup) [Back](https://product.hubspot.com/blog/5-rules-for-better-backbone-code#) ## Get Connected The latest engineering, UX, and product news from the HubSpot Product Blog, straight to your inbox. Next Not using [HubSpot](https://www.hubspot.com/) yet? Search Term: ** Search HubSpot.com ** Search the blog Load more