covuworie / making-a-single-page-app-without-a-framework

Making a single page app without a framework

Making a single page app without a framework

The code in this repository is based on the javascript tutorial Making a Single Page App Without a Framework. My aim here is to get some practise programming a project in typescript without the learning curve of having to learn a web development framework. I have downloaded the original code and included it under the code/javascript folder. The original author takes all of the credits. The main differences here are:

• I use typescript instead of javascript.
• I take an objected oriented paradigm instead of a procedural approach.
• I use the Backbone.js library for routing instead of the jquery library. I stick to the older approach of using hash changes for URLs instead of the newer and prettier path based approach as I do not want to go through the effort of configuring a backend that always returns the index page for direct navigation.
• I roll out my own templating using template strings instead of a template library like Handlebars.

Running the code

To execute the code in the typescript directory do the following:

1. Navigate to the code/typescript folder. The folder contain a package.json file indicating that this is a node project.
2. Run npm install to install the development dependencies. The dependencies will be installed locally when you execute this command.
3. Run npm run build to instruct webpack to automatically watch for and compile changes in the typescript files in the project.
4. From a separate terminal run npm run start to launch the webpack-dev-server development server in your default browser at http://localhost:8080/app/.

making-a-single-page-app-without-a-framework's Issues

Render phone

Listen for when the user clicks on a phone and render the single page details. Listen for when the user closes the single page and show the all products page.

Redirect to 404 page when invalid query is entered

Redirect to 404 page when invalid query is entered.

Load all phones method from a phones collection

Create a method to load all phones from a Phones collection.

Initial code

Commit initial code.

Add filter routing

Add the filter routing functionality.

Add router for product and direct navigation

Add a backbone router for product and direct navigation.

Had to revert back to fragment based routing as direct navigation was seriously messed up with push state based routing. In the onbeforeunload event it is impossible to get access to the target url due to privacy concerns (you have no idea where the user is going => they could be navigating to another site).

The ajax request for the page fires and of course being a single page application that resource is not found. I might see later if there is a way to rewrite the url behind the scenes but maintain the correct browser history.

Rant over.

Render all phones

Render all the phones when the application loads.

Redirect trailing slash on product

Allow optional trailing slash on product.

Add javascript code

Add javascript code.

Add filter routing

Add routing for the filter functionality. Instead of using json in the url use the standard approach for form submission where key value pairs are used.

Add dependencies and configuration files

Add dependencies and configuration files for node, typescript, webpack and git.

Add 404 page

Add 404 page when no matching route is found.

Render filtered phones

Render the phones to make active and inactive based on the filtered selections.

Clear filters

Add an event listener to the Clear filters button that unchecks all the checkboxes and re-renders the phone list.

Create phone model

Create a model for the Phone.