Trixion is an ultra light modern web stack. its goal is to produce a very light bundle yet to support latest conventions.
** Trixion is still in beta stage - please use with care and submit any issue you encounter **
clone the trixion-starter project
and instead of any other dependency you may use (react, react-dom, redux, react-redux, react-router etc)
simply use trixion - its all in there. The whole thing weights ~15kb though (batteries included).
check out the examples
What's in it?
most of the functionality of react, redux, routing, hot-reload...
yet the only dependency is preact.
preact is baked in, so the only package you need is trixion.
- Component based UI
- es6 classes
- functional component
- object literal components (yes yes... its true)
- state store
- simple reducers declaration
- scoped reducers (on sections of the state)
- serializing/de-serializing state
- reducers tree support
- scoped subscription
- store connectors with memoization (like reselect + redux-react)
- persistent state middleware (with local/session storage)
- html5 routing
- nested routes
- async component loading (optional loader)
- lifecycle hooks
- async lifecycle hooks!
- pushing and replacing state without reload
- some built in helpers
- lean modern polyfills
Here is a small table that shows the bundle sizes of common boilerplate
projects for component based + routing + global state store frontend.
All bundles were made with
-p flag for webpack.
So, Why should I use it?
well, you don't...
Most people doesn't seem to care what their bundle size is.
But if any of these apply to you, then know that this project was built for people like you:
- you care about your bundle size
- you plan on building large app and understand that small core with lazy loading is the answer
- you made performance tests and saw the huge impact of large bundles on mobile platforms
- your DEV environment is too slow to build and reload
- you're feeling like playing with something new
Lean web - Here We Come!
- always be aware of your bundle size
- as much lazy load as possible
- check the size of each library you use - here are couple of methods
Not in the scope
Some features are not supported in trixion such as async store middlewares, state loggers,
redux related state players/manipulators and many more.
The reasons are:
- Its still in early stages
- more use cases usually means larger libs that increase bundle size for everyone
- simplicity is a bless
if you've never heard of react/preact,
you are going to find it somewhat difficult to understand as trixion doesn't include the fundamental explanation.
Its recommended to read on each of the modules concepts and principles.
Here is a full list of the things that are exported from trixion (lots of them).
createElement- alias of
E- alias of
dispatch- alias of
connect- store connector
app- any-purpose global namespace for your use
cl- className helper. see examples
assign- Object.assign like function
DEBUG- true if process.env.NODE_ENV !== 'production'
parseUri- parse uri to pathname, search and hash
I want to help!
Contribution would be much appreciated.
Either by creating pull requests of opening issues.