DEV Community

Preact + Typescript + Parcel + Redux Zero: Rebuilding the QMENTA Front-End focusing on Performance and Minimalism.

Albert Alises on September 17, 2018

At QMENTA we have been rebuilding the front-end from scratch, seeking simplicity and performance not only in design, but also in the technology sta...

Read full post

Sean • Sep 17 '18

This is awesome work! Why has no one commented on this yet! O.o I'm firing up a workspace to play with this right now :)

Albert Alises • Sep 18 '18

Thank you very much Sean!! Tried to gave an overview of pretty much everything (except styling 💅). The boilerplate used for the project is exactly this one:

k1r0s / bleeding-preact-starter

TypeScript · Preact · Redux-zero => frontend starter with bleeding features. Check it out!

Bleeding Frontend Starter

Preact + TypeScript + Redux-Zero + Moar..

This starter project contains many features to speedup development and have fun which is pretty handy today.

Features:

TypeScript Strong typing and the future of JavaScript
Preact dom manipulation + components
Redux-Zero state management
Preact-Routlet Simple Component drive Routing
Http-Decorator Wrap your components with axios, no more async management
Preact-Stylesheet-Decorator Wrap your components with scoped css
Preact-Bind-Group Group Form fields onChange Events to a single Callback

common folder contains Connect decorator for redux-zero (which is not yet included on the lib)

Heading production env -> Polyfills, Shims & Extensions

I recommend to install core-js and import all its contents on your main file import 'core-js'

View on GitHub

but switching Webpack for Parcel.

If you have any suggestion or idea on how to extend this stack or improve, or any question, let me know! 🤘

Adrien Poly • Sep 24 '18

thanks for this great article. It is very detailed. I discovered Redux-zero will give it a try soon with preact.
Thumbs up!!!

Pierre-Henry Soria ✨ • Jan 27 '19

Great article Albert! Really useful 🙂