Skip to content

Instantly share code, notes, and snippets.

@tiarebalbi
Forked from nijikokun/doc.md
Created December 30, 2017 12:22
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save tiarebalbi/b4a7e724c414db0fb11a2794b89566ec to your computer and use it in GitHub Desktop.
Save tiarebalbi/b4a7e724c414db0fb11a2794b89566ec to your computer and use it in GitHub Desktop.
Building Javascript Frontend / Backend Applications

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
  • 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.
    • Component Communication
      • Takeaways: There are many ways to do communication between components.

FAQ

Further Reading

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment