Best Practices for Organizing JavaScript in Your Slater Project
Learn how to structure your Slater project for maintainability, performance, and team collaboration. This guide covers recommended directory layout, usage of slater_import, and key patterns for sharing code and avoiding common pitfalls.
Organizing your JavaScript codebase in Slater helps improve readability, maintainability, and development speed. This article outlines recommended structures, import strategies, and best practices for Slater projects.
Recommended Project Structure
Organize your project by responsibility to make your codebase easier to manage and scale:
-
globals: Site-wide behaviors (e.g., navigation helpers, focus rings) -
utils: Pure helper functions reusable across files (use slater_import to reuse) -
components: Element-scoped features (e.g., accordions, modals, sliders) -
pages: Page- or template-specific code (e.g., code for/pricing)
slater_import: Importing JavaScript
Use slater_import to import JavaScript files into your project. Create helper files for reusable functions. To reuse the functions:
- Type the helper file name in your editor
- The code complete dropdown will show the file ([file name] - Import [file name].js) option.
- Select the option.
The import will be auto-added to your file. It will look something like this: slater_import('/project/111/page/111.js') // Import Slater Import Test.js.
See Slater Imports introduction
Sharing Functions Across Files
- Keep utilities pure when possible.
- For functions that must be shared globally, bind them intentionally to a global object.
Frequently Asked Questions
| Question | Answer |
|---|---|
| Should large files be split? | Prefer many small, scoped files for easier testing and reasoning. |
| How to prepare for team handoff? | Document each page with Slater Documentation (in the Tools panel of the editor). |
Proper organization and following these conventions will help your Slater projects scale smoothly and avoid common pitfalls.