https://github.com/bramirez96/functional-state-no-react-exploration

An exploration into persisting state in a functional programming environment, and how one might implement a simple state-driven rendering engine like React with low overhead and specifically defined "hook" subscriptions. Also includes a custom webpack setup that allows for some really clean project architecture and reduced bundle size.
https://github.com/bramirez96/functional-state-no-react-exploration

babel functional-programming react state-management webpack

Last synced: about 1 month ago
JSON representation

An exploration into persisting state in a functional programming environment, and how one might implement a simple state-driven rendering engine like React with low overhead and specifically defined "hook" subscriptions. Also includes a custom webpack setup that allows for some really clean project architecture and reduced bundle size.

• Host: GitHub
• URL: https://github.com/bramirez96/functional-state-no-react-exploration
• Owner: bramirez96
• Created: 2021-07-19T21:08:04.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-08-06T00:19:07.000Z (over 3 years ago)
• Last Synced: 2024-12-09T16:51:15.974Z (about 1 month ago)
• Topics: babel, functional-programming, react, state-management, webpack
• Language: TypeScript
• Homepage:
• Size: 141 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Overview

A quick overview of all of the different `babel` and `webpack` extensions this project uses.

- webpack: bundles our code

- babel: allows us to use modern javascript

- babel/preset-env: tells us which browsers to target when compiling

- babel/polyfill: polyfills features to support browsers that don't support them

- babel-loader: lets us use babel and webpack

- core-js@3: polyfill of the standard js library that provides the latest ecmascript support

- @babel/plugin-syntax-dynamic-import: dynamic importing/lazy loading

NOTE: the polyfills are dependencies, NOT dev dependencies, as they are required in the bundle!

## Styling

- style-loader: adds CSS to the dom by injecting a style tag that's cool

- css-loader: resolves imports in css

- node-sass: technical garbage

- sass-loader: loads sass and compiles into css

- postcss-loader: adds PostCSS to webpack

- postcss-preset-env: polyfills modern css for older browsers

- css-nano: minifies css in bundle

## More

- clean-webpack-plugin: removes build folder before building again

- file-loader: resolves imports/requires into urls in outdir and emits file (COOL)

- html-loader: resolves src paths as module requires? fixes images maybe?

- mini-css-extract-plugin: splits css into separate files

- terser-webpack-plugin: minify js

- optimize-css-assets-webpack-plugin: optimize/minify css when building

- purgecss-webpack-plugin: removes unused css

- compression-webpack-plugin: compresses assets with Content=Encoding: gz

- brotli-webpack-plugin: compresses assets to serve with Content-Encodign: br