Vanilla Lovers' Project

Celebrating the Art of Simplicity in Web Development

Introduction

Welcome to the Vanilla Lovers' Project! This initiative is a tribute to developers who cherish the elegance and freedom of plain JavaScript. It's for those who prefer the clarity and control of building applications without relying on frameworks like React or Angular.

If you’re passionate about simplicity and want to explore the raw power of JavaScript, this project is your playground.

Example in Action: Check out Clan Sports, a real-world project utilizing concepts from Vanilla Lovers' Project.

What's Inside

This project is a showcase of how much can be achieved with pure JavaScript. No frameworks, no libraries—just clean, efficient, and well-documented code to inspire and empower developers. It's designed to help you:

• Understand core JavaScript concepts better.
• Build applications that are lightweight and efficient.
• Appreciate the beauty of coding from scratch.

Technical Details

BaseApp: The Core Framework

The BaseApp is the heart of this project, designed to manage different pages in your application. It leverages JavaScript's simplicity while enabling you to create dynamic and responsive applications.

Lifecycle Hooks

The BaseApp uses a lifecycle model with the following methods:

1. beforeRender(): Prepares the page before rendering.
2. render(): Renders the main content of the page.
3. afterRender(): Executes post-render logic, such as API calls or DOM manipulation.

Data Management

Two core methods ensure seamless data handling:

• setData(): Updates the data and triggers a re-render. When this method is called, the beforeRender() and render() methods are executed. Instead of running afterRender() again, the updatedData() method is called to avoid infinite loops.
• getData(): Retrieves the current data for the page or component.

Handling Dynamic Pages

BaseApp enables dynamic page rendering based on:

• URL Parameters
• Query Strings

This dynamic system makes it easy to handle multi-page applications with minimal overhead.

Typical Workflow

1. During the first render:

   • beforeRender(): Prepares and initializes the page.
   • render(): Displays a progress loader or initial UI.
   • afterRender(): Handles API calls or other asynchronous tasks to fetch and display data.

2. When calling setData():

   • beforeRender(): Prepares for the update.
   • render(): Re-renders the UI with the updated state.
   • updatedData(): Updates specific components or parts of the page without restarting the entire lifecycle.

Benefits

This approach provides a lightweight yet powerful framework that allows you to:

• Maintain full control over the rendering process.
• Avoid endless rendering loops with clear lifecycle management.
• Handle API calls efficiently, displaying loaders during asynchronous operations.

If you love vanilla JavaScript, you'll enjoy this simple yet versatile approach. It strikes the perfect balance between control and complexity, enabling you to build sophisticated applications with excellent results.

Contributing

We welcome contributions from fellow vanilla enthusiasts! If you have ideas, suggestions, or improvements, feel free to submit a pull request. Let's continue to make this project a haven for those who love the simplicity and elegance of vanilla JavaScript.

License

This project is licensed under the MIT License.

Acknowledgements

We would like to express our gratitude to the entire vanilla JavaScript community for their unwavering dedication to simplicity and elegance in web development.