_TODO.txt

GOALS 
1) Golden Layout 
2) WebSocket updates 
3) Remote component 
4) OpenFin 




TODO 
- Micro front end 
  - Web component 
    - Fetch HTML, CSS, JS 
    - Try Shadow DOM 
  - Iframe 
    - Resize automatically 
- Proxy 
- GoldenLayout
  - Strip down demo 
  - Save/restore
  - Iframe component 
  - Separate widgets' CSS, JS 
  - Add to Simple SPA
  - React
  - Convert widgets to apps and iframe/fetch them 
  - Save/restore
- Settings menu 
- CSS - fit micro-apps to containers
- Fake login 
- Save/restore + websockets
  - Settings - save/restore
  - Settings - websockets
  - GoldenLayout - save/restore 
  - GoldenLayout - websockets
- GoldenLayout - way to add more window panes 
- Bugfix - fix pages 
- Bugfix - Micro-app is no longer working standalone 
- Propagate new props to mounted sub apps
- Bugfix - goldenLayout + web component is broken
- Bugfix - lazy component rerenders too often. Try only fetching when url changes 
- Bugfix - standalone Micro-app broken again
- Lazy-load - figure out how to load components from a URL
- Lots of small things 
  - Separate GoldenLayoutComponent vs MicroFrontendModeSwitch
  - Enum for modes 
  - Separate Lazy and Remote components 
  - React ShadowDOM npm package
  X- Declarative ShadowDOM browser tag (Not even close to standardized.)
  - CSS - clean up and use flexbox
  - Remove disableLiveReload
  - Lerna - don't use it for cross-linking packages b/c it fights against npm install 
  - Bugfix - iframes are not passing props down on mount
  X- Grid - fix when in ShadowDOM (Slickgrid inserts a style tag in head. I guess it's a good example of a lib that's not compatible with ShadowDom)
  - Bugfix - WS should have a windowId, so changes don't get sent to the window that made them
  - server and build 
    - live-server (Allows you to server a single-page-application more easily than 'http-server' or 'serve')
    - Webpack - split vendor into separate bundle
    - lerna - easily run all packages with 1 command at the same time
    - Can micro-components build and serve instead of build:dev
    X- Easy toggle dev vs serve dist
  - Definitions - micro-app, navigation 
  - GoldenLayout - move table of contents to containerApp
  - Try more micro apps: create-react-app
  - Proxy - simplify webpack
- CDN - all built files served from one server (Does not include iframe apps)
  - Clean up feature definitions, name of symlinks
  - Organize into team-mono-repo folders 
  - Use @company/team-project in package names
  - App and nav definitions - load via XHR as JSON 
- Golden layout 
  - Custom tab - move popout icon into tab 
  - Allow windows to "pop back"
- OpenFin / Electron
  - Learn 
  - Explore code 
  - Implement basic example 
  - Top toolbar - draggable, minimize, maximize, close 
  - Config - try many options 
- More/Extras
  - Investigate other micro frontend approaches (Interesting mostly from an academic perspective. Potential improvements: server side rendering or Single SPA which allows Angular+React+Svelts+Vue)
    - https://the-tractor.store/
    - https://github.com/neuland/micro-frontends
  - Remote component - research even more approaches. 
    - (Actually can't find any npm packages that are 1) simple + 2) allow JS and CSS dependencies.)
    - (A former coworker mentioned making remote components available via global vars. Not sure if this is any better or worse than my remote component)
- Clean up 
  - Create shared-tools package
  - Prettier + Stylelint
  - packge.json's 
  - Types for all React props and state. Remove all "any"s.
  - Rename GoldenLayout components
  - Rename folders 
  - Readme 

- Bonus points 
  - Fix TS build errors 
  - Webpack build 
    - Output types 
    - Webpack optimizations: https://webpack.js.org/configuration/optimization/
  - CSS modules with types  
  - App and nav definitions - defined in each app. All pulled together and converted to JSON 
  - Build out app platform's functionality 
    - Each app should save its own state 
    - More Features/framework - toasts, notifications, permissions, etc, etc, etc 
    - Redux middleware to automatically send redux changes to WS?
  - Golden layout 
    - Responsive design - phone should stack all GL tabs 
    - Custom tab. Add the following to the right of each tab set: [+] 
    - Popout creates new GoldenLayout in separate window 
      - This will require giving each Golden Layout an ID and using it in the URL 
      - Enable drag out and back into the window 
  - Try more micro apps: Vue and Svelte 
    - Learn Webpack module federation 
    - Looking at the code of React.Lazy might tell how to evaluate a module. import() returns a module... and React.Lazy somehow processes it. 
    - npm microbundle - try rollup instead of webpack to export micro-components 
  - Try replacing react-shadow with "declarative shadowDom" once browsers standardize it







PRESENTATION 
- What is it?
- How does it help?
- Why is it better?
- How does it work?