Menu Home

Making every mistake possible when building an Angular Hacker news clone

Naivety

After building the live train departure board my next Angular project was a clone of Hacker news. I thought it would take a week or two. I was in for a rude awaking as it took two months, working on it for an hour or two each night.

The challenges came charging in from the get go. I found the Hacker news API interesting to work with. Whilst it is straightforward to retrieve a post or a comment. Obtaining pseudo information such as a count of how many comments an article has is not so intuitive. Speaking of comments.

OMG ponies comments

I soon had a working front page which listed the top 10 articles and I was making what I thought was solid progress. I didn’t realise that the biggest challenge of the project and where I would learn the most had arrived. This was “The Dip” so well described by Seth Godin.

When selecting a article from the front page I needed to display the article title at the top and below it the comments and the child comments. Initially it doesn’t look too challenging.

I will never look at the Hacker news comments the same again

Over the course of several weeks I tried many different things which soon follow a pattern of working well up to a point and then there would be no way to get around an issue or I would find myself undertaking a yak shaving exercise. Once I had run out of ideas I looked for other Hacker news clones built in Angular and was fortunate to find this one.

Upon reviewing the application I didn’t understand how the comments functionality had been implemented so I started dismantling it, adding logging statements and making extensive use of the Chrome development tools to gain an understanding of how it worked. I also used MDN Web docs to understand several of the JavaScript functions. By chipping away at the code and seeing what happen when methods were disabled I started to get a foot hold and the fog began to clear. I started to understand the solution and why it worked. Once understood I then need to throw away refactor much of the application in order to implement a similar solution.

The first time the comments and the child comments were displayed was a very satisfying feeling.

Cycling uphill

I was not out of the woods though. With the comments working, the next challenges soon appeared such handling a browser reload and making a half decent UI.

Another lesson I learnt for future development is to sketch out what components the application is going to need and how they would interact and exchange data with each other.

I also spent time refactoring. Once I got a feature to work I looked at how I could simplify the solution and reduce the number of moving parts without increasing the complexity so my future self would thank me when I need to make enhancements.

Are we there yet?

The two months working on this project has been time well spent. The app still lacks much of the Hacker news functionality and if starting again today there are many things I would do different but whatever I build next will be better because of the lessons learnt I have learnt building this app.

In case it helps you as you struggle to get your own Hacker new clone up and running you can find mine on GitHub and live app is running here.

Categories: Uncategorized

oraclefrontovik

Developer

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.