Skip to content

Commit

Permalink
Merge pull request #16 from vivshaw/perf
Browse files Browse the repository at this point in the history 
Improve performance with static rendering & code splitting
  • Loading branch information
@vivshaw
vivshaw authored Aug 18, 2017
2 parents fcfe7b9 + e65b413 commit 655e160
Show file tree
Hide file tree
Showing 5 changed files with 164 additions and 17 deletions.
6 changes: 4 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"name": "my-reads",
"name": "Flybrary",
"version": "0.1.0",
"private": true,
"dependencies": {
Expand All @@ -8,8 +8,10 @@
"material-ui": "^0.18.7",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-loadable": "^4.0.4",
"react-router-dom": "^4.1.2",
"react-scripts": "1.0.10",
"react-snapshot": "^2.0.0-1",
"react-swipeable-views": "^0.12.5",
"react-tap-event-plugin": "^2.0.1",
"react-test-renderer": "^15.6.1",
Expand All @@ -19,7 +21,7 @@
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"build": "react-scripts build && react-snapshot",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
Expand Down
21 changes: 17 additions & 4 deletions src/components/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

import React, { Component } from 'react';
import { Route } from 'react-router-dom';
import Loadable from 'react-loadable';

import Snackbar from 'material-ui/Snackbar';

Expand All @@ -15,15 +16,27 @@ import {
darkWhite
} from 'material-ui/styles/colors';

import Home from './Home';
import Search from './Search';
import Landing from './Landing';
import TopBar from './TopBar';
import SideBar from './SideBar';

import { getAll } from '../utils/BooksAPI';
import type { BookType } from '../common/flowTypes';

const Landing = Loadable({
loader: () => import('./Landing'),
loading: () => null
});

const Shelves = Loadable({
loader: () => import('./Home'),
loading: () => null
});

const Search = Loadable({
loader: () => import('./Search'),
loading: () => null
});

const flybraryTheme = getMuiTheme({
...lightBaseTheme,
fontFamily: 'Roboto, sans-serif',
Expand Down Expand Up @@ -151,7 +164,7 @@ class App extends Component {
exact
path="/shelves"
render={() =>
<Home
<Shelves
books={books}
shelves={shelves}
filterQuery={filterQuery}
Expand Down
5 changes: 3 additions & 2 deletions src/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { render } from 'react-snapshot';
import injectTapEventPlugin from 'react-tap-event-plugin';
import { BrowserRouter } from 'react-router-dom';
import './index.css';
Expand All @@ -10,10 +10,11 @@ import 'sanitize.css';

injectTapEventPlugin();

ReactDOM.render(
render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);

registerServiceWorker();
13 changes: 10 additions & 3 deletions src/utils/BooksAPI.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,17 @@ import type { BookType } from '../common/flowTypes';
const api = 'https://reactnd-books-api.udacity.com';

// Generate a unique token for storing your bookshelf data on the backend server.
let token = localStorage.getItem('token');
if (!token) {
// If not rendering in a browser, generate a random token
let token;

try {
token = localStorage.getItem('token');
if (!token) {
token = Math.random().toString(36).substr(-8);
localStorage.setItem('token', token);
}
} catch (e) {
token = Math.random().toString(36).substr(-8);
localStorage.setItem('token', token);
}

const headers = {
Expand Down
136 changes: 130 additions & 6 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1857,7 +1857,7 @@ [email protected]:
version "1.1.0"
resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.0.tgz#e1bd82c6aab6ced965b97b88b17ed3e528ca18c3"

depd@~1.1.0:
depd@1.1.1, depd@~1.1.0, depd@~1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.1.tgz#5783b4e1c459f06fa5ca27f991f3d06e7a310359"

Expand Down Expand Up @@ -2455,6 +2455,39 @@ express@^4.13.3:
utils-merge "1.0.0"
vary "~1.1.1"

express@^4.15.2:
version "4.15.4"
resolved "https://registry.yarnpkg.com/express/-/express-4.15.4.tgz#032e2253489cf8fce02666beca3d11ed7a2daed1"
dependencies:
accepts "~1.3.3"
array-flatten "1.1.1"
content-disposition "0.5.2"
content-type "~1.0.2"
cookie "0.3.1"
cookie-signature "1.0.6"
debug "2.6.8"
depd "~1.1.1"
encodeurl "~1.0.1"
escape-html "~1.0.3"
etag "~1.8.0"
finalhandler "~1.0.4"
fresh "0.5.0"
merge-descriptors "1.0.1"
methods "~1.1.2"
on-finished "~2.3.0"
parseurl "~1.3.1"
path-to-regexp "0.1.7"
proxy-addr "~1.1.5"
qs "6.5.0"
range-parser "~1.2.0"
send "0.15.4"
serve-static "1.12.4"
setprototypeof "1.0.3"
statuses "~1.3.1"
type-is "~1.6.15"
utils-merge "1.0.0"
vary "~1.1.1"

extend@~3.0.0:
version "3.0.1"
resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.1.tgz#a755ea7bc1adfcc5a31ce7e762dbaadc5e636444"
Expand Down Expand Up @@ -2601,6 +2634,18 @@ finalhandler@~1.0.3:
statuses "~1.3.1"
unpipe "~1.0.0"

finalhandler@~1.0.4:
version "1.0.4"
resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.0.4.tgz#18574f2e7c4b98b8ae3b230c21f201f31bdb3fb7"
dependencies:
debug "2.6.8"
encodeurl "~1.0.1"
escape-html "~1.0.3"
on-finished "~2.3.0"
parseurl "~1.3.1"
statuses "~1.3.1"
unpipe "~1.0.0"

find-cache-dir@^0.1.1:
version "0.1.1"
resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-0.1.1.tgz#c8defae57c8a52a8a784f9e31c57c742e993a0b9"
Expand Down Expand Up @@ -2777,6 +2822,10 @@ glob-parent@^2.0.0:
dependencies:
is-glob "^2.0.0"

glob-to-regexp@^0.3.0:
version "0.3.0"
resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz#8c5a1494d2066c570cc3bfe4496175acc4d502ab"

glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.1.1:
version "7.1.2"
resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.2.tgz#c19c9df9a028702d678612384a6552404c636d15"
Expand Down Expand Up @@ -3046,7 +3095,16 @@ http-errors@~1.6.1:
setprototypeof "1.0.3"
statuses ">= 1.3.1 < 2"

http-proxy-middleware@~0.17.4:
http-errors@~1.6.2:
version "1.6.2"
resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.6.2.tgz#0a002cc85707192a7e7946ceedc11155f60ec736"
dependencies:
depd "1.1.1"
inherits "2.0.3"
setprototypeof "1.0.3"
statuses ">= 1.3.1 < 2"

http-proxy-middleware@^0.17.4, http-proxy-middleware@~0.17.4:
version "0.17.4"
resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-0.17.4.tgz#642e8848851d66f09d4f124912846dbaeb41b833"
dependencies:
Expand Down Expand Up @@ -3104,6 +3162,10 @@ ignore@^3.2.0:
version "3.3.3"
resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.3.tgz#432352e57accd87ab3110e82d3fea0e47812156d"

import-inspector@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/import-inspector/-/import-inspector-2.0.0.tgz#ce75fdb6a277d2800effe097e2295bc8690b2923"

imurmurhash@^0.1.4:
version "0.1.4"
resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
Expand Down Expand Up @@ -3430,6 +3492,10 @@ is-utf8@^0.2.0:
version "0.2.1"
resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"

is-webpack-bundle@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/is-webpack-bundle/-/is-webpack-bundle-1.0.0.tgz#576a50bb7c53d1d6a5c1647939c93ae2cbb90eea"

is-wsl@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-1.1.0.tgz#1f16e4aa22b04d1336b66188a66af3c600c3a66d"
Expand Down Expand Up @@ -3777,7 +3843,7 @@ jschardet@^1.4.2:
version "1.5.0"
resolved "https://registry.yarnpkg.com/jschardet/-/jschardet-1.5.0.tgz#a61f310306a5a71188e1b1acd08add3cfbb08b1e"

jsdom@^9.12.0:
jsdom@^9.12.0, jsdom@^9.4.5:
version "9.12.0"
resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-9.12.0.tgz#e8c546fffcb06c00d4833ca84410fed7f8a097d4"
dependencies:
Expand Down Expand Up @@ -5097,7 +5163,7 @@ prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.7:
fbjs "^0.8.9"
loose-envify "^1.3.1"

proxy-addr@~1.1.4:
proxy-addr@~1.1.4, proxy-addr@~1.1.5:
version "1.1.5"
resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-1.1.5.tgz#71c0ee3b102de3f202f3b64f608d173fcba1a918"
dependencies:
Expand Down Expand Up @@ -5138,6 +5204,10 @@ [email protected], qs@~6.4.0:
version "6.4.0"
resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.0.tgz#13e26d28ad6b0ffaa91312cd3bf708ed351e7233"

[email protected]:
version "6.5.0"
resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.0.tgz#8d04954d364def3efc55b5a0793e1e2c8b1e6e49"

query-string@^4.1.0:
version "4.3.4"
resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.4.tgz#bbb693b9ca915c232515b228b1a02b609043dbeb"
Expand Down Expand Up @@ -5210,7 +5280,7 @@ react-dev-utils@^3.0.2:
strip-ansi "3.0.1"
text-table "0.2.0"

react-dom@^15.6.1:
react-dom@^15.3.0, react-dom@^15.6.1:
version "15.6.1"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.6.1.tgz#2cb0ed4191038e53c209eb3a79a23e2a4cf99470"
dependencies:
Expand Down Expand Up @@ -5239,6 +5309,14 @@ react-event-listener@^0.4.5:
prop-types "^15.5.4"
warning "^3.0.0"

react-loadable@^4.0.4:
version "4.0.4"
resolved "https://registry.yarnpkg.com/react-loadable/-/react-loadable-4.0.4.tgz#ae96837729eeb7fd0d3bb1dc01dc0053ac147874"
dependencies:
import-inspector "^2.0.0"
is-webpack-bundle "^1.0.0"
webpack-require-weak "^1.0.1"

react-router-dom@^4.1.2:
version "4.1.2"
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.1.2.tgz#7f8a7ca868d32acadd19ca09543b40d26df8ec37"
Expand Down Expand Up @@ -5303,6 +5381,19 @@ [email protected]:
optionalDependencies:
fsevents "1.1.2"

react-snapshot@^2.0.0-1:
version "2.0.0-1"
resolved "https://registry.yarnpkg.com/react-snapshot/-/react-snapshot-2.0.0-1.tgz#de67cde8e68ee410e9cf3e79c4b5d0b3094936f1"
dependencies:
connect-history-api-fallback "^1.3.0"
express "^4.15.2"
glob-to-regexp "^0.3.0"
http-proxy-middleware "^0.17.4"
jsdom "^9.4.5"
mkdirp "^0.5.1"
react "^15.3.0"
react-dom "^15.3.0"

react-swipeable-views-core@^0.12.5:
version "0.12.5"
resolved "https://registry.yarnpkg.com/react-swipeable-views-core/-/react-swipeable-views-core-0.12.5.tgz#7113f3a5c84f85042447a7c49e3f2a206eab7931"
Expand Down Expand Up @@ -5355,7 +5446,7 @@ react-transition-group@^1.1.2:
prop-types "^15.5.6"
warning "^3.0.0"

react@^15.6.1:
react@^15.3.0, react@^15.6.1:
version "15.6.1"
resolved "https://registry.yarnpkg.com/react/-/react-15.6.1.tgz#baa8434ec6780bde997cdc380b79cd33b96393df"
dependencies:
Expand Down Expand Up @@ -5756,6 +5847,24 @@ [email protected]:
range-parser "~1.2.0"
statuses "~1.3.1"

[email protected]:
version "0.15.4"
resolved "https://registry.yarnpkg.com/send/-/send-0.15.4.tgz#985faa3e284b0273c793364a35c6737bd93905b9"
dependencies:
debug "2.6.8"
depd "~1.1.1"
destroy "~1.0.4"
encodeurl "~1.0.1"
escape-html "~1.0.3"
etag "~1.8.0"
fresh "0.5.0"
http-errors "~1.6.2"
mime "1.3.4"
ms "2.0.0"
on-finished "~2.3.0"
range-parser "~1.2.0"
statuses "~1.3.1"

serve-index@^1.7.2:
version "1.9.0"
resolved "https://registry.yarnpkg.com/serve-index/-/serve-index-1.9.0.tgz#d2b280fc560d616ee81b48bf0fa82abed2485ce7"
Expand All @@ -5777,6 +5886,15 @@ [email protected]:
parseurl "~1.3.1"
send "0.15.3"

[email protected]:
version "1.12.4"
resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.12.4.tgz#9b6aa98eeb7253c4eedc4c1f6fdbca609901a961"
dependencies:
encodeurl "~1.0.1"
escape-html "~1.0.3"
parseurl "~1.3.1"
send "0.15.4"

serviceworker-cache-polyfill@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/serviceworker-cache-polyfill/-/serviceworker-cache-polyfill-4.0.0.tgz#de19ee73bef21ab3c0740a37b33db62464babdeb"
Expand Down Expand Up @@ -6574,6 +6692,12 @@ [email protected]:
fs-extra "^0.30.0"
lodash ">=3.5 <5"

webpack-require-weak@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/webpack-require-weak/-/webpack-require-weak-1.0.1.tgz#a6a8e60871bebbe5b085a915ab0af633a412433f"
dependencies:
is-webpack-bundle "^1.0.0"

webpack-sources@^0.2.3:
version "0.2.3"
resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-0.2.3.tgz#17c62bfaf13c707f9d02c479e0dcdde8380697fb"
Expand Down

0 comments on commit 655e160

Please sign in to comment.