Building Javascript Frontend / Backend Applications

doc.md

Document for the best design choices you can make for your software.

Terminology

• DDD - Domain Driven Design
• FF or FTF - Function First Design, or File-type First Design is structuring your application by it's function before the files such as a directory named components containing all component files.

File Structure

Structuring applications is hard, here are a few resources to help. Most are Domain Driven Design (DDD). It's powerful and works for small to large scale applications.

• Ember
  • How to use Pods Structure
    • Takeaways: DDD Structure
  • Organize File Structure with Ember Pods
    • Takeaways: DDD Structure
  • Two techniques to organize Ember
    • Takeaways: DDD Structure, Utilities for common template code.
  • Notes:
    • DDD Design for Ember is called "Pods"
    • Utility functions wrapping modules for templating is powerful, DRY techniques.
    • Tests inside the Pod is a powerful function of DDD, as evident in Python and other languages.
• React
  • Organize For Scale
    • Takeaways: DDD Structure, FTF has flaws and why, Organize styles in DDD structured fashion as well.
  • Folder Structure
    • Takeaways: DD-ish Structure, Tests under domain structure easier to manage.
  • Better File Structure
    • Takeaways: DDD Structure, Tests same folder using -spec, tests test whole component.
  • Organizing Redux
    • Takeaways: DD-ish Structure, avoid coupling state to component, avoid circular deps.

Code Structure

• Components
  • Container Components - Written for React, can be applied to all frameworks.
    • Takeaways: Separate concerns, presentation (rendering) vs computation (fetching & validation & processing)
  • Children Components
    • Takeaways: Pass children to component, separation of parent and child, easier testing.

FAQ

• Q: I think I have too many Components, how many is too many?
  • A: You can never have too many.

Further Reading

• Articles
  • You don't need lodash or underscore
• Books
  • Domain Driven Design
  • Implementing Domain Driven Design
  • Patterns of Enterprise Application Architecture
  • Design Patterns
• Patterns
  • Domain Driven Design
  • Aspect Oriented Programming