Material Pokedex: All the Data, None of the Backend

For Angular Attack, I had 48 hours and I couldn’t do any work before hand. No images, no code, nothing. They provided us a bare bones project with just enough of some Angular2 boiler plate to be the equivalent of a “Hello World.” Before the competition started, I googled around to see if I could find an API to offer up all the Pokemon data. I found┬ábut it was painfully slow for my application. It took 20+ mins to request all 721 currently announced Pokemon. I didn’t want to submit my users to that. The only thing worse than no internet is slow internet.

PokeAPI is open source so I thought I’d give it’s github page a once over to see if there was any way to improve it. I had ideas for server side caching and optimized DB queries, but those hopes were dashed when I discovered a python web app that parsed CSV files from scratch with every request. I’m not a python expert so I never got a good grip on how the app works but I found the CSV files. They seemed to be generated from the Veekun sqlite database. 1 table = 1 CSV file. Since the data is static I decided I didn’t really need an API. The CSV files are served up and the Pokedex requests and parses each one in the browser. Right now the site uses 36 CSV files adding up to 11.1 MB but thankfully that can be gzipped down to ~2.6 MB during the transfer.

Once Angular2 is done requesting the CSV file, I can run the string I get through the function in this StackOverflow answer and I have a 2D array of strings with all the data. It’s quite fast even on mobile phones (admittedly I am testing it with the fairly powerful Nexus 6). It’s fast enough that the slowest part of the process is still the network. Perhaps I could do all the AJAX and parsing in a web worker to help smooth out scrolling. I might try that.

There’s zero back end processing so no slowdowns there. The data only changes when new Pokemon games are released and hopefully when Sun and Moon are released I’ll be able to just drop in updated CSV files and instantly the site will be updated with all the latest and greatest info.

Leave a Reply

Your email address will not be published. Required fields are marked *