perpl
v0.1.9
Published
Please note that Perpl.js is in ongoing initial development and exists as an npm package to test production builds and distribution only.
Downloads
12
Readme
Perpl.js
Please note that Perpl.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
perpl dev-server
- Builds the files in watch mode and runs server
Setup
[x] Install node packages
[x] Setup express server
[x] Create seperate client and server react entrypoints
- [x] Client entry rendered with BrowerRouter
- [x] Server entry rendered with StaticRouter
Server Side Rendering
- [x] Create a server version of webpack bundle
- [x] 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)
- [x] Use isomorphic-style-loader to avoid CSS trying to add to DOM on server
- [x] Use react-universal to do lazy loading client-side and instant loading server-side
- [x] Add babel-plugin-universal-import so babel picks up react-universal properly
- [x] Limit server-side chunks to 1 to avoid async loading files
- [x] 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)
- [x] Enable webpack stats output (so server knows what script and link tags to send on a page)
- [x] Add method to push data back to head of page (PushDataTag)
[x] Add webpack-flush-chunks and patch it into react-universal
[x] 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
[x] 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
[ ] To handle caching, render all server-side pages as if no user was logged in, add user-specific UI client-side
[ ] 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
- [x] Directory based page routing
- [ ] Add directory specific configuration files
- [ ] Remove react-router and replace with a smaller custom library
- [x] Serve public files
- [ ] Detect static routes (never calls PushData? never required user credentials?)
- [ ] Redis integration for publicly build pages
- [ ] 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
- [x] Handle redirects and error codes generated by bundle
- [x] Send CSS/JS assets as Link prefetch headers
- [x] Send initial CSS as inline stylesheet
- [ ] Send Image assets as HTTP Push headers (though not possible with )
Images
- [x] 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
- [x] Single command development server setup
- [x] Single command production build client/server
- [ ] Directory copy perpl instead of indivdual files
Create App
- [ ] Allow server/build specific packages to only belong in perpl.js module