Skip to content

Commit

Permalink
fix: Improve performance
Browse files Browse the repository at this point in the history
- Change the default API request on the home page to the much smaller
ditto (16 kB), from bulbasaur (290 kB).
- Remove bits of ditto to shorten to 6 kB, then immediately fire off a
request when the page loads to get the complete data.
- Change the way JsonViewer is rendered so that only the bits that are
visible are output. This cuts down the size of the initial HTML in
half.
- Add a fetch polyfill (whatwg-fetch)
  • Loading branch information
cmmartti committed Nov 30, 2018
1 parent cf75c76 commit 3030217
Show file tree
Hide file tree
Showing 7 changed files with 321 additions and 58 deletions.
8 changes: 8 additions & 0 deletions gatsby-browser.js
@@ -0,0 +1,8 @@
import 'whatwg-fetch';

export default {
onClientEntry: () => {
// Don't need to do anything here, but if you don't
// export something, the import won't work.
},
};
10 changes: 0 additions & 10 deletions gatsby-node.js

This file was deleted.

3 changes: 2 additions & 1 deletion package.json
Expand Up @@ -30,7 +30,8 @@
"react-helmet": "^5.2.0",
"react-json-tree": "^0.11.0",
"react-syntax-highlighter": "^8.0.1",
"sanitize.css": "^7.0.3"
"sanitize.css": "^7.0.3",
"whatwg-fetch": "^3.0.0"
},
"repository": {
"type": "git",
Expand Down
15 changes: 9 additions & 6 deletions src/components/ApiExplorer/ApiExplorer.js
Expand Up @@ -4,16 +4,16 @@ import JsonViewer from '../JsonViewer';
import LinkButton from '../LinkButton';

import Input from './Input';
import bulbasaur from './bulbasaur.json';
import ditto from './ditto.json';
import styles from './ApiExplorer.module.scss';

export default class ApiExplorer extends React.Component {
static propTypes = {
baseApiUrl: PropTypes.string.isRequired,
};
state = {
resourceUrl: 'pokemon/1/',
resourceData: bulbasaur,
resourceUrl: 'pokemon/ditto/',
resourceData: ditto,
notFound: false,
error: null,
isLoading: false,
Expand All @@ -26,7 +26,7 @@ export default class ApiExplorer extends React.Component {
});
fetch(this.props.baseApiUrl + url, {
mode: 'cors',
cache: 'force-cached',
cache: 'force-cache',
})
.then(res => {
if (res.status === 404) {
Expand Down Expand Up @@ -63,6 +63,9 @@ export default class ApiExplorer extends React.Component {
this.fetchResource(value);
};
};
componentDidMount() {
this.fetchResource(this.state.resourceUrl);
}
render() {
const {
isLoading,
Expand Down Expand Up @@ -96,8 +99,8 @@ export default class ApiExplorer extends React.Component {
onSubmit={value => this.fetchResource(value)}
/>
<p className={styles.hint_sentence}>
Need a hint? Try <Hint value="pokemon/1/" />,{' '}
<Hint value="pokemon/ditto/" /> , <Hint value="type/3/" /> or{' '}
Need a hint? Try <Hint value="pokemon/ditto/" />,{' '}
<Hint value="pokemon/1/" /> , <Hint value="type/3/" /> or{' '}
<Hint value="ability/4/" />.
</p>
<h2 className={styles.message}>{message}</h2>
Expand Down
1 change: 0 additions & 1 deletion src/components/ApiExplorer/bulbasaur.json

This file was deleted.

263 changes: 263 additions & 0 deletions src/components/ApiExplorer/ditto.json
@@ -0,0 +1,263 @@
{
"abilities": [
{
"ability": {
"name": "imposter",
"url": "https://pokeapi.co/api/v2/ability/150/"
},
"is_hidden": true,
"slot": 3
},
{
"ability": {
"name": "limber",
"url": "https://pokeapi.co/api/v2/ability/7/"
},
"is_hidden": false,
"slot": 1
}
],
"base_experience": 101,
"forms": [
{
"name": "ditto",
"url": "https://pokeapi.co/api/v2/pokemon-form/132/"
}
],
"game_indices": [
{
"game_index": 132,
"version": {
"name": "black-2",
"url": "https://pokeapi.co/api/v2/version/21/"
}
},
{
"game_index": 132,
"version": {
"name": "black",
"url": "https://pokeapi.co/api/v2/version/17/"
}
},
{
"game_index": 132,
"version": {
"name": "heartgold",
"url": "https://pokeapi.co/api/v2/version/15/"
}
},
{
"game_index": 132,
"version": {
"name": "pearl",
"url": "https://pokeapi.co/api/v2/version/13/"
}
},
{
"game_index": 132,
"version": {
"name": "firered",
"url": "https://pokeapi.co/api/v2/version/10/"
}
},
{
"game_index": 132,
"version": {
"name": "ruby",
"url": "https://pokeapi.co/api/v2/version/7/"
}
},
{
"game_index": 132,
"version": {
"name": "gold",
"url": "https://pokeapi.co/api/v2/version/4/"
}
},
{
"game_index": 76,
"version": {
"name": "red",
"url": "https://pokeapi.co/api/v2/version/1/"
}
}
],
"height": 3,
"held_items": [
{
"item": {
"name": "metal-powder",
"url": "https://pokeapi.co/api/v2/item/234/"
},
"version_details": [
{
"rarity": 5,
"version": {
"name": "moon",
"url": "https://pokeapi.co/api/v2/version/28/"
}
},
{
"rarity": 5,
"version": {
"name": "x",
"url": "https://pokeapi.co/api/v2/version/23/"
}
},
{
"rarity": 5,
"version": {
"name": "black-2",
"url": "https://pokeapi.co/api/v2/version/21/"
}
},
{
"rarity": 5,
"version": {
"name": "black",
"url": "https://pokeapi.co/api/v2/version/17/"
}
},
{
"rarity": 5,
"version": {
"name": "heartgold",
"url": "https://pokeapi.co/api/v2/version/15/"
}
},
{
"rarity": 5,
"version": {
"name": "diamond",
"url": "https://pokeapi.co/api/v2/version/12/"
}
},
{
"rarity": 5,
"version": {
"name": "firered",
"url": "https://pokeapi.co/api/v2/version/10/"
}
},
{
"rarity": 5,
"version": {
"name": "ruby",
"url": "https://pokeapi.co/api/v2/version/7/"
}
}
]
}
],
"id": 132,
"is_default": true,
"location_area_encounters": "https://pokeapi.co/api/v2/pokemon/132/encounters",
"moves": [
{
"move": {
"name": "transform",
"url": "https://pokeapi.co/api/v2/move/144/"
},
"version_group_details": [
{
"level_learned_at": 1,
"move_learn_method": {
"name": "level-up",
"url": "https://pokeapi.co/api/v2/move-learn-method/1/"
},
"version_group": {
"name": "yellow",
"url": "https://pokeapi.co/api/v2/version-group/2/"
}
},
{
"level_learned_at": 1,
"move_learn_method": {
"name": "level-up",
"url": "https://pokeapi.co/api/v2/move-learn-method/1/"
},
"version_group": {
"name": "red-blue",
"url": "https://pokeapi.co/api/v2/version-group/1/"
}
}
]
}
],
"name": "ditto",
"order": 195,
"species": {
"name": "ditto",
"url": "https://pokeapi.co/api/v2/pokemon-species/132/"
},
"sprites": {
"back_default": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/back/132.png",
"back_female": null,
"back_shiny": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/back/shiny/132.png",
"back_shiny_female": null,
"front_default": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/132.png",
"front_female": null,
"front_shiny": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/shiny/132.png",
"front_shiny_female": null
},
"stats": [
{
"base_stat": 48,
"effort": 0,
"stat": {
"name": "speed",
"url": "https://pokeapi.co/api/v2/stat/6/"
}
},
{
"base_stat": 48,
"effort": 0,
"stat": {
"name": "special-defense",
"url": "https://pokeapi.co/api/v2/stat/5/"
}
},
{
"base_stat": 48,
"effort": 0,
"stat": {
"name": "special-attack",
"url": "https://pokeapi.co/api/v2/stat/4/"
}
},
{
"base_stat": 48,
"effort": 0,
"stat": {
"name": "defense",
"url": "https://pokeapi.co/api/v2/stat/3/"
}
},
{
"base_stat": 48,
"effort": 0,
"stat": {
"name": "attack",
"url": "https://pokeapi.co/api/v2/stat/2/"
}
},
{
"base_stat": 48,
"effort": 1,
"stat": {
"name": "hp",
"url": "https://pokeapi.co/api/v2/stat/1/"
}
}
],
"types": [
{
"slot": 1,
"type": {
"name": "normal",
"url": "https://pokeapi.co/api/v2/type/1/"
}
}
],
"weight": 40
}

0 comments on commit 3030217

Please sign in to comment.