tylergraf / framebook Goto Github PK

To compare frameworks on a few criteria:

• Payload
• Performance
• PWAness
• Syntax
• Nativeness

• Lit - https://cookbook-lit.firebaseapp.com
• Preact - https://cookbook-preact.firebaseapp.com
• Vue - https://cookbook-vue.firebaseapp.com

• Lit - 17.8KB
• Preact - 27.7KB
• Vue - 112KB

• Lit - ~23ms
• Preact - ~15ms
• Vue - ~60ms

• Lit - ~300ms
• Preact - ~1000ms
• Vue - ~180ms

• Categories
• Subcategories
• Recipes
• Recipe
• All Recipes

The pages show client-side routing, each route must conditionally load PWA style. Each page shows rendering lists and links within for the router.

The recipe page shows conditional rendering and rendering unsafe html within the page.

The "all recipes" page renders a list of all 600+ recipes with the recipe component inside. A text input at the top filters the list to show performance re-rendering the list. Also, there's a collapsed checkbox to collapse the directions and ingredients within each recipe which shows rendering performance of changing props on all components in the list.

Each framework has a directory with it's own package.json.

cd lit/ # or preact/ or vue/
npm i
npm start

cd lit/ # or preact/ or vue/
npm run build

Each app deploys to firebase.

cd lit/ # or preact/ or vue/
npm run deploy