Skip to content

I've added a comprehensive README.md for the Backbone.js note-taking … #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 61 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,64 @@
# Example Backbone.js App
# Simple Backbone.js Note-Taking App

## try it out here...
[http://dperrymorrow.github.io/example-backbone-app](http://dperrymorrow.github.io/example-backbone-app)
## Description

As simple as possible backbone.js app to demonstrate how to wire one up. Does not even have a serverside, just persists the data to local storage.
It lets you create, read, update, delete notes, all with hashtag urls via a Backbone.js router.
This is a simple client-side CRUD (Create, Read, Update, Delete) application for managing notes. It is built using Backbone.js, jQuery, and Underscore.js, with Bootstrap for styling.

This application serves as a demonstration of Backbone.js concepts. It operates entirely client-side and does not communicate with a server; all note data is managed within the browser session and will be lost upon closing or reloading the page.

## How to Run

1. Clone this repository to your local machine (or download the files).
2. Navigate to the project directory.
3. Open the `index.html` file in your web browser.

No build steps or server setup is required as this is a purely client-side application.

## Features

* **CRUD Operations:** Create, Read, Update, and Delete notes.
* **Client-Side Data:** All note data is managed in the browser using Backbone.js Models and Collections. No data is sent to or stored on a server.
* **Input Validation:** Basic validation is implemented for note fields (title, author, description).
* **Debug Output:** A section on the page displays the current state of the notes collection in JSON format for debugging purposes.

## Project Structure

```
.
├── css/
│ └── bootstrap.min.css # Bootstrap styling
├── img/
│ ├── glyphicons-halflings-white.png # Bootstrap icons
│ └── glyphicons-halflings.png # Bootstrap icons
├── js/
│ ├── libs/ # Third-party JavaScript libraries
│ │ ├── backbone.min.js
│ │ ├── jquery.min.js
│ │ └── underscore.min.js
│ ├── models/
│ │ └── note_model.js # Backbone model for notes
│ ├── views/ # Backbone views
│ │ ├── note_edit.js
│ │ ├── note_index.js
│ │ ├── note_new.js
│ │ ├── note_row.js
│ │ └── note_show.js
│ └── note_router.js # Backbone router for handling application routes
├── index.html # Main HTML file, application entry point, and templates
└── README.md # This file
```

* `index.html`: The main application page. It includes the necessary HTML structure, Underscore.js templates for different views, and initializes the Backbone application with some sample data.
* `css/`: Contains stylesheets, primarily Bootstrap CSS for UI components.
* `img/`: Contains image assets, such as icons used by Bootstrap.
* `js/libs/`: Holds the core JavaScript libraries: jQuery, Underscore.js, and Backbone.js.
* `js/models/`: Contains Backbone.js models. `note_model.js` defines the structure and validation for a single note.
* `js/views/`: Contains Backbone.js views, responsible for rendering the UI components and handling user interactions for different parts of the application (e.g., displaying a list of notes, editing a note).
* `js/note_router.js`: Defines the application's routes using Backbone.Router, mapping URLs to specific actions (e.g., showing the note index, opening the edit view for a note).

## Technology Stack

* **[Backbone.js](https://backbonejs.org/):** Provides the Model-View-Router (MVR) framework for structuring the application.
* **[Underscore.js](https://underscorejs.org/):** A utility library providing helpful functions, used extensively by Backbone.js and for templating.
* **[jQuery](https://jquery.com/):** Used for DOM manipulation and event handling.
* **[Bootstrap](https://getbootstrap.com/2.3.2/):** (Version 2.3.2 as indicated by `index.html` and file structure) Used for UI styling and components.