Front End Time

4/7/2018 2:00PM

I chose Angular. I use material design most of the time but I want to change things up. I will use PrimeNG for my UI because I want to try something new.

Here's the plan:

1. Make a simple simple simple front page. You paste the link, I give you shorter link. Single page only.
2. Make about us page (eventually)
3. Make statistics page. PrimeNG makes it easy to display graphs so why not? You paste my link, and I'll show you the statistics.

Will this site be popular? Absolutely not. I will be shocked if anyone uses it besides me. But it will be cool, and I need something to do

Working Site

The site works. I have not been updating the blog because I've been trying to just finish the work.

Here's how the Angular site works:

1. You go to the site, paste your URL, Hit enter
2. The enter/button event triggers a function to call a service to make an API call
3. API call returns the link and info about the link
4. The function replaces the url bar and puts the link in, and automatically selects it. Button also turns to "Copy"

Boom link is created and live.

How does it perform?

Well, to be honest, not great. I was aiming for a 25ms response, which is nowhere near what I get. It's also nowhere near what I get from bit.ly or tinyurl.com either. Bit.ly provides about 400ms - 500ms to redirect the link. My site is actually faster and does it in 300-450ms, which impressed me.

So why isn't it 25ms? Well, database connection and server limitations, that's why. My backend is in PHP. It doesn't have a persistent connection to the DB, it has to create one, and then drop it for every page that's rendered. That's quite slow. PHPMyAdmin shows that querying the DB for the short code takes on the order of milliseconds. PHPMyAdmin reports it as .0004ms - .002ms. That's pretty fast. I even modified the indexing to be a Hash rather than a binary tree, which shaved off a millisecond.

So why is it slow? The time it takes to establish a database connection is very slow. It's unfortunate. I bet if I had a framework that had a connection that was always on, it would be much faster. I could be wrong, but the debug for my app says that the database connection is what takes the longest.

How can I make it faster?

I could do two things (that I know of so far).

1. I can cache results using Redis
2. I can redirect the user before I do any other database queries.

Number 1 is a no-go because MidPhase's shared servers are quite limited. No Redis.

Number 2 could potentially make the service faster because I make 3 queries:

1. Get the URL from the short code
2. Get the IPAddress ID from the database, or create it if it doesn't exist
3. Save the click information to the database

I could schedule (Queue) the last two so that the server doesn't wait on them before sending the redirect header. That should save me a few milliseconds, but only that. It wouldn't be hard but I want to take a break for now.

What do I still have to do?

I technically don't have to do anything. It works.

What can I improve?

I should include a privacy policy and all that jazz, but I don't know what a good privacy policy is, or how to write one.

I need to make the statistics functionality.

I need to create a favicon. Right now it's the default angular one, and I hate that. I would do that soon, but I am not a creative person and don't know what a good icon would be.

I need to add meta tags and all that SEO jazz.

I need to probably create a better 404 page.

I could still probably queue the rest of the queries, even though it would only save a few milliseconds, if that.

When will any of the above happen?

Not sure, I have to do a lot of robotics stuff first. Something about tanks and tee shirts?

All comments