Best Practices for Organizing JavaScript in Your Slater Project

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

Proper organization and following these conventions will help your Slater projects scale smoothly and avoid common pitfalls.