Dev Blog #5: League of Mock Data

Tanner Comes
Nov 4 · 2 min read

Ah yes, the age-old question: Which came first: Anivia or Eggnivia? Probably Anivia, and the first few thousands of eggs evolved from a lump of cold, dead cells on the ground to a glorious, frosty crystalline shell over thousands of cycles of death and rebirth. Now that that question is answered, let’s talk about web development. Which came first: The UI or the API?

When faced with a big problem, the right thing to do is to break it up into bite-sized chunks and knock out one thing at a time. If you think that’s wrong, put a whole steak in your mouth and tell me. So I divided my plate up: I’ve got a nice 8oz sous-vide UI, medium rare with a heaping side of hot buttery API. Complimenting this is a fire-roasted figuring-out-how-to-use-the-League-API and a refreshing glass of Learning NoSql, which I haven’t taken a sip of yet.

I’ve spent most of my time on the User Interface — in fact, I’ll show you a preview below. You’ll see that there’s a lot of work that needs doing still, but the important part here is that I have data. But I have no API. How’d I do that? The answer is mock data.

Honestly, it’s really easy to implement mock data. Figure out what data points you need, JSONify them, drop ’em in a file and fetch it when you need it.

Here’s my UI:

And here’s a snippet of the mock data powering it:

[  {    "id": 1,    "type": "combo",    "details": "This champion can Q then E to accomplish a goal."  }, {    "id": 2,    "type": "strategy",    "details": "This champion has high mobility so splitpush."  },
...
]

Once you have your mock data in place, fetch() it and pump it into your UI!

In Vue, for now, I’m iterating the mock data and pushing it into an array in my data() . My Template renders each tip as you saw.

import tips from '../../../api/mock/tips_solo.json';export default {  name: 'TipView',  components: { ... },  props: [...],  data() {    return {      tips: []    };  },  mounted() {    let i = 0;    let vm = this;    let interval = setInterval(foo, 100);    function foo() {      vm.tips.push(tips[i++]);      if (i === tips.length) {        window.clearInterval(interval);      }    }  }};

Of course, this code is nowhere near complete, its sole purpose is to enable me to create the views for actual data, once I have it.

Tanner Comes

Written by

https://tanner.com.es. Developer of the working-titled League of Tips, a League of Legends champion interaction resource

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade