|
There's a number of techniques you can use, but most come back to fundamental principles: keep things small and self-contained as possible, try to decouple elements of your program, try to keep things consistent (and have one standard way of doing things). There's also the craft-level principles too: use a framework (one framework, and use it consistently), write tests for things, leave helpful comments, automate what you can (like code listing, minification, and asset packaging). Frameworks are a big help – partially for the tools they provide, but also for the consistency. "We have a lot of code, but it's all structured in a standard way" makes things easier to understand. It's also a way of having confidence in the architecture: you know many other people have built successful apps with it, rather than something you've invented yourself. The concepts in Redux are very appealing to me: your application has one state, and that state gets changed via actions. You have a function that, given a state and an action, produces a new state. Your application can render itself from that state.
This makes testing straightforward: your business logic tests boil down to "Given this starting state, and this action, my output state should look like this." Similarly, your UI is now easy to test: "Given this state, my component should render like this," covers displaying information, and "When I interacted with this element, was an action emitted?" covers user interaction. Traditionally hairy areas are now more straightforward: "I need to test with a logged-in user" or "I need to test a successful payment" is all about the data in the state. Another technique you can use is a publish/subscribe architecture: individual parts of your application publish events, and can subscribe to events they care about. Now, your InboxCounter widget doesn't have to know anything about how messages are received or displayed; as long as it listens for "message:added" and "message:removed" events, it can display an accurate count. Similarly, the AJAX polling for new messages doesn't need to be coupled to the message display or the counters or other elements; it just has to check for new messages, and publish events when new ones are received.
This should make it easier to add new components and refactor old ones (as long as you're emitting the same events, nothing else should have to be updated), but it can be hard to figure out what events get emitted, and where they come from. Tests help. On a much smaller level, using promises instead of callbacks can help reduce "pyramid code" - sections of the codebase with extreme indentation. They also make it easier to handle failure cases; writing "Make these 3 co-dependent AJAX requests, and if any fail then display an error message" will be more concise and clearer with promises. Finally, don't over-complicate things. Frameworks, dependency injection, and the like add a lot of upfront complexity to a project, but reduce it later on. If all your application needs is an occasional "When X happens, show/hide this DOM element" then simple jQuery event listeners will be a lot quicker to build and easier to understand. Don't build a Swiss watch when what you needed was an egg timer. |