highmark v0.3.46

Highmark.js

Please note that Highmark.js is in ongoing initial development and exists as an npm package to test production builds and distribution only.

To start up a development server

yarn run server:dev - Builds the files in watch mode and runs server

Setup

• Install node packages
• Setup express server

• Create seperate client and server react entrypoints

  • Client entry rendered with BrowerRouter
  • Server entry rendered with StaticRouter

• Server Side Rendering

  • Create a server version of webpack bundle
  • Reduce server bundle size by forcing external packages to not be bundled (not sure if this will still work in Ruby environment, was built for node)
  • Use isomorphic-style-loader to avoid CSS trying to add to DOM on server
  • Use react-universal to do lazy loading client-side and instant loading server-side
  • Add babel-plugin-universal-import so babel picks up react-universal properly
  • Limit server-side chunks to 1 to avoid async loading files
  • Add extract-css-chunks-webpack-plugin to get css chunks in webpack stats output (of the client bundle, server bundle is now only one file)
  • Enable webpack stats output (so server knows what script and link tags to send on a page)
  • Add method to push data back to head of page (PushDataTag)

• Add webpack-flush-chunks and patch it into react-universal

• Import stats file and plugin to webpack-flush-chunks

• Load initial data server-side and prefill page (React.Suspense required)

  • It could be possible to do initial render pass, collect all the promises and then resolve them manually into page headers
• Avoid loading data if page is pre-filled
  • Data is cached based on resolver and serialized arguments
  • Redux does something VERY similar to prefill the client store
• Support handling oEmbed version of page based on react-router
  • Extend the push data handler to accept oEmbed tags? Then just send that result instead of page render
• Move more packages into peerDependancy

Server

• Directory based page routing
  • Add directory specific configuration files
  • Remove react-router and replace with a smaller custom library? (possibly offer as a config option)
• Serve public files
• Redis integration for publicly build pages (by specifying redis configuration in highmark.config)
• Add a path for API calls (server-bundle only, does not use the React-router pathing)
• Add support for changing the HTML lang attribute

Extra server things

• Handle redirects and error codes generated by bundle
• Send CSS/JS assets as Link prefetch headers
• Send initial CSS as inline stylesheet
• Send Image assets as HTTP Push headers (though not possible with )

Images

• Resize, convert, and minify all images automatically
  • Additionally create a "sample" data url to blend the image in
  • Highly extensible per-image config files
• Image Component
  • Finds all versions of image and creates a picture source set
  • Creates temporary "blur" render while image is loading
• CSS loader that fills in url() rules with appropriate image-set()
• Scoping / Chunking assets manifest to js bundle that uses them.

Build Step

• Single command development server setup
• Single command production build client/server
• Directory copy Highmark instead of indivdual files