hirako2000/polypack

🔥 Polypack - Webpack build stack with focus on performance 🔥

polypack

Polypack is a boilerplate configuration to build the most lightweight front end assets for webapp or static pages.

The motivation behind this project started from observation that most if not all boilerplates are either bloated with heavyweight libs, or incomplete in order to develop and ship production applications.

Features

• Ready to use build and bundling system with webpack
• Most lightweight libraries for performance
• Web application, react-like skeleton
• State store
• Static web page setup
• Support for either or both {less}/Sass
• Support for various web fonts formats
• Hot Module Replacement for rapid development
• ES6/7
• Linting
• Production build with minified, concat and gzipped content

Roadmap

• Base bundler with webpack 3 & Babel
• Multi SPA bundler config
• Hot Module Reload
• Production build
• Cross environment variables
• Gzip
• Less support
• Sass support
• Fonts support
• Inferno JS skeleton
• Redux skeleton
• PureCSS skeleton
• mincss skeleton
• Inferno sample webapp
• Linter
• Jest

TV program roll webapp example with Inferno/redux & mincss

HBO look & feel with Mincss

Live Demo

Size

                                  Asset       Size  Chunks                    Chunk Names
   bcff9e9b7b53122acb52df67cd5f4d4f.svg    1.99 kB          [emitted]         
                               photo.js    14.6 kB       0  [emitted]         photo
                        photo.vendor.js     114 kB       4  [emitted]         photo.vendor
                              photo.css    3.97 kB       0  [emitted]         photo
                       photo.vendor.css    1.95 kB       4  [emitted]         photo.vendor
                             photo.html  398 bytes          [emitted]

Size (gzipped)

bcff9e9b7b53122acb52df67cd5f4d4f.svg.gz  901 bytes          [emitted]         
                            photo.js.gz    2.88 kB          [emitted]     
                     photo.vendor.js.gz    27.9 kB          [emitted]
                           photo.css.gz    1.32 kB          [emitted]
                    photo.vendor.css.gz  850 bytes          [emitted]                                           
                             photo.html  398 bytes          [emitted]   

Potato shop

Landing page with Inferno & Basscss

Live Demo | Source

Size

                               Asset       Size  Chunks             Chunk Names
                    potatoes.css.map   89 bytes       0  [emitted]  potatoes
                         potatoes.js    21.9 kB       0  [emitted]  potatoes
                  potatoes.vendor.js    51.4 kB       1  [emitted]  potatoes.vendor
                        potatoes.css    4.65 kB       0  [emitted]  potatoes
                 potatoes.vendor.css    9.89 kB       1  [emitted]  potatoes.vendor
             potatoes.vendor.css.map   96 bytes       1  [emitted]  potatoes.vendor
                          index.html  418 bytes          [emitted]  

Size (gzipped)

                               Asset       Size  Chunks             Chunk Names
                      potatoes.js.gz    3.09 kB          [emitted]  
                     potatoes.css.gz    1.98 kB          [emitted]  
              potatoes.vendor.css.gz    2.31 kB          [emitted]  
               potatoes.vendor.js.gz    15.4 kB          [emitted]  
                          index.html  418 bytes          [emitted]  

Folder structure

.
├── src                          # Applications source code
│   ├── inferno                  # Inferno app
│   │   ├── components           # Components
│   │   ├── styles               # Styles
│   |   ├── index-template.html  # HTML template
│   |   └── index.js             # Entry point
│   ├── mincss                   # Mincss landing page
│   │   ├── img                  # images
│   │   ├── styles               # Styles
│   |   ├── index-template.html  # HTML template
│   |   └── index.js             # Entry point
│   ├── photo                    # Inferno app for TV roll example
│   │   ├── components           # Components
│   │   ├── img                  # Images
│   │   ├── styles               # Styles
│   |   ├── index-template.html  # HTML template
│   |   └── index.js             # Entry point
│   └── purecss                  # Purecss landing page
│       ├── img                  # images
│       ├── styles               # Styles
│       ├── index-template.html  # HTML template
│       └── index.js             # Entry point
├── static                       # Output of prod assets
└── webpack.config.js            # Webpack config for both dev and prod builds

HOWTO

Simply fork, or download the zip content of this repo.

Prerequisite

• Node.js

Run

npm install # installs deps

npm start # starts the app in dev mode

npm run build # builds app for production

Browse

There are multiple web apps built by default

• http://localhost:3000/mincss.html - mincss starter
• http://localhost:3000/purecss.html - purecss starter
• http://localhost:3000/inferno.html - inferno/redux starter
• http://localhost:3000/photo.html - the tv roll exampe (inferno/redux fetching TVmaze schedules)

Contributing

PR are welcome

polypack's Issues

TV roll demo - Fix parsing issue

Sometimes, netflixroulette returns some not so conforming response and the parsing issue make the render of the grid stuck with some artifacts of small stripes on the screen, fix parsing error, ideally displayed what's available in the list of fields and ignore what's missing

Add Jest

Jest provides a very good framework for unit testing.
Add it and provide some describe/test examples.

TV roll demo - Fix https issue

The api call isn't via https, certain browsers auto force https making the deployed demo fail to load the grid