Code Splitting, prod build, localisation

Author: nelsie borja

.gitignore

@@ -0,0 +1,14 @@
+# Misc
+.DS_Store
+.vscode/
+
+# Java
+.classpath
+.project
+.settings/
+bin/
+target/
+tomcat.8080/
+
+# Client
+node_modules

pom.xml

@@ -9,6 +9,8 @@
   <url>http://maven.apache.org</url>
   <properties>
     <tomcat.version>8.5.2</tomcat.version>
+    <maven.compiler.source>1.6</maven.compiler.source>
+    <maven.compiler.target>1.6</maven.compiler.target>
   </properties>
   <dependencies>
     <dependency>

src/main/java/launch/Main.java

@@ -8,6 +8,12 @@
 import org.apache.catalina.webresources.DirResourceSet;
 import org.apache.catalina.webresources.StandardRoot;
 
+// import java.io.FileReader;
+
+// import javax.script.ScriptEngine;
+// import javax.script.ScriptEngineManager;
+// import javax.script.ScriptException;
+
 public class Main {
 
     public static void main(String[] args) throws Exception {
@@ -37,5 +43,12 @@ public static void main(String[] args) throws Exception {
 
         tomcat.start();
         tomcat.getServer().await();
+
+            
+        // Server-rendering with Nashorn
+        // ScriptEngine nashorn = new ScriptEngineManager().getEngineByName("nashorn");
+        // nashorn.eval(new FileReader(webappDirLocation + "public/bundle.js"));
+        // String markup = nashorn.invokeFunction("renderOnServer");
+        // Then Pass markup as Java variable
     }
 }

src/main/webapp/client/.eslintrc.json

@@ -25,6 +25,8 @@
     "indent": ["error", 2],
     "linebreak-style": ["error", "unix"],
     "quotes": ["error", "double"],
+    // Append "G_" to all global variables
+    // "no-unused-vars": ["error", { "varsIgnorePattern": "G_" }],
     // Get rid of React warnings
     "react/jsx-uses-react": [2],
     "react/jsx-uses-vars": [2],

src/main/webapp/client/app/components/App.js

@@ -1,5 +1,6 @@
 import React from "react";
-
+import { customAddEventListener } from "../helpers/util";
+import { importModules } from "../helpers/moduleLoader";
 import Aux from "./Aux";
 import Header from "./header";
 import Routes from "./Routes";
@@ -12,12 +13,25 @@ import "../scss/style.scss";
 // To avoid array notation and manually added keys to each of the element,
 // you can use an Aux helper function that simply returns all its children.
 // const Aux = props => props.children;
-export default () => (
-  <Aux>
-    <Header />
-    <Routes />
-  </Aux>
-);
+export default class App extends React.Component {
+  componentDidMount() {
+    // lazy load routes
+    customAddEventListener(window, "load", this.lazyLoadRoutes);
+  }
+
+  lazyLoadRoutes = () => {
+    this.props.history && importModules(this.props.history);
+  };
+
+  render() {
+    return (
+      <Aux>
+        <Header />
+        <Routes />
+      </Aux>
+    );
+  }
+}
 
 // Render modal outside DOM tree
 // render() {

src/main/webapp/client/app/components/AsyncComponent.js

@@ -0,0 +1,27 @@
+// Reference: https://scotch.io/tutorials/lazy-loading-routes-in-react
+
+import React from "react";
+
+export default function asyncComponent(getComponent) {
+  class AsyncComponent extends React.Component {
+    static Component = null;
+    state = { Component: AsyncComponent.Component };
+
+    componentWillMount() {
+      if (!this.state.Component) {
+        getComponent().then(Component => {
+          AsyncComponent.Component = Component;
+          this.setState({ Component });
+        });
+      }
+    }
+    render() {
+      const { Component } = this.state;
+      if (Component) {
+        return <Component {...this.props} />;
+      }
+      return null;
+    }
+  }
+  return AsyncComponent;
+}

src/main/webapp/client/app/components/Provider.js

@@ -7,7 +7,7 @@ import App from "./App";
 export default () => (
   <Provider store={store}>
     <ConnectedRouter history={history}>
-      <App />
+      <App history={history} />
     </ConnectedRouter>
   </Provider>
 );

src/main/webapp/client/app/components/Routes.js

@@ -1,7 +1,20 @@
 import React from "react";
 import { Switch, Route } from "react-router-dom";
-import Home from "./home";
-import About from "./about";
+import { chunkLoadFailed } from "../helpers/moduleLoader";
+// import Home from "./home";
+// import About from "./about";
+import asyncComponent from "./AsyncComponent";
+
+const Home = asyncComponent(() =>
+  import(/* webpackChunkName: "homepage" */ "./home")
+    .then(module => module.default)
+    .catch(chunkLoadFailed)
+);
+const About = asyncComponent(() =>
+  import(/* webpackChunkName: "aboutpage" */ "./about")
+    .then(module => module.default)
+    .catch(chunkLoadFailed)
+);
 
 export default () => (
   <Switch>

src/main/webapp/client/app/components/brands/index.js

@@ -0,0 +1 @@
+export default () => "Brands!!!";

src/main/webapp/client/app/components/home/Counter.js

@@ -3,7 +3,7 @@ import MaterialButton from "../material-button";
 
 export default props => (
   <section className="g-flex-item-stretch">
-    <p className="counter">❤️ Rate: {props.count}%</p>
+    <p className="counter">❤️ Rates: {props.count}%</p>
 
     <MaterialButton
       text="Increment"

src/main/webapp/client/app/components/home/Notes.js

@@ -1,5 +1,6 @@
 import React from "react";
 import Aux from "../Aux";
+import { welcome } from "../../labels";
 
 export default () => (
   <Aux>
@@ -10,5 +11,6 @@ export default () => (
     <p className="home__note">
       Also now supports custom HTML attributes eg: ❤️ 🦄
     </p>
+    {welcome}
   </Aux>
 );

src/main/webapp/client/app/components/home/index.js

@@ -48,3 +48,10 @@ const mapDispatchToProps = dispatch =>
 // })
 
 export default connect(mapStateToProps, mapDispatchToProps)(Home);
+
+/* To push to history:
+import { push } from "react-router-redux";
+push("/about")
+-- OR --
+this.props.histtory.push("/about")
+*/

src/main/webapp/client/app/components/search/index.js

@@ -0,0 +1 @@
+export default () => "Search!!!";

src/main/webapp/client/app/helpers/globals.js

@@ -0,0 +1,3 @@
+export function getLanguage() {
+  return window.__INITIAL_STATE__.language;
+}

src/main/webapp/client/app/helpers/moduleLoader.js

@@ -0,0 +1,25 @@
+import { contains } from "./util";
+
+const importModulesOnDemand = (location, action) => {
+  if (action === "PUSH") {
+    if (contains(location.pathname, "about")) {
+      import(/* webpackChunkName: "brandspage" */ "../components/brands")
+        .then(module => module)
+        .catch(chunkLoadFailed);
+    }
+  }
+};
+
+export function chunkLoadFailed(err) {
+  console.error("Failed to load chunk => " + err);
+}
+
+export function importModules(history) {
+  // Load immediate dependencies => modules required in all pages
+  import(/* webpackChunkName: "searchpage" */ "../components/search")
+    .then(module => module)
+    .catch(chunkLoadFailed);
+
+  // Load current page immediate dependencies => load accessible modules from the page
+  history.listen(importModulesOnDemand);
+}

src/main/webapp/client/app/helpers/util.js

@@ -85,5 +85,32 @@ export function getUniqueId() {
     "uid-" + new Date().getTime() + parseInt(Math.random() * 100).toString()
   );
 }
+export function contains(search, target) {
+  return !!~search.indexOf(target);
+}
 // END: String creation/manipulation
 //<<<<<<<<<<<<<<<<<<<<<<<<
+
+//>>>>>>>>>>>>>>>>>>>>>>>>
+// START: Handlers
+export function customAddEventListener(
+  elem,
+  event,
+  callback,
+  useCapture = false
+) {
+  if (elem.addEventListener) {
+    elem.addEventListener(event, callback, useCapture);
+  } else {
+    elem.attachEvent(`on${event}`, callback);
+  }
+}
+export function customRemoveEventListener(elem, event, callback) {
+  if (elem.removeEventListener) {
+    elem.removeEventListener(event, callback);
+  } else {
+    elem.detachEvent(`on${event}`, callback);
+  }
+}
+// END: Handlers
+//<<<<<<<<<<<<<<<<<<<<<<<<

src/main/webapp/client/app/index.js

@@ -6,6 +6,14 @@ const rootEl = document.querySelector("#root");
 
 render(<Provider />, rootEl);
 
+// window.renderOnClient = function () {
+//   render(<Provider />, rootEl);
+// };
+
+// window.renderOnServer = function () {
+//   return React.renderToString(<Provider />);
+// };
+
 if (module.hot) {
   module.hot.accept("./components/Provider", () => {
     const NextProvider = require("./components/Provider").default;

src/main/webapp/client/app/labels/ar.js

@@ -0,0 +1,3 @@
+module.exports = {
+  welcome: "Arabic text"
+};

src/main/webapp/client/app/labels/en.js

@@ -0,0 +1,3 @@
+module.exports = {
+  welcome: "Welcome!!!"
+};

src/main/webapp/client/app/labels/index.js

@@ -0,0 +1,2 @@
+import { getLanguage } from "../helpers/globals";
+module.exports = require("./" + getLanguage());

src/main/webapp/client/app/reducers/index.js

@@ -1,8 +1,10 @@
 import { combineReducers } from "redux";
 import { routerReducer } from "react-router-redux";
 import counter from "./counter";
+import language from "./language";
 
 export default combineReducers({
   routing: routerReducer,
-  counter
+  counter,
+  language
 });

src/main/webapp/client/app/reducers/language.js

@@ -0,0 +1,3 @@
+export default (state = {}) => {
+  return state;
+};