Dev Blog #5: League of Mock Data
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.
