yerkopalma / frontend-stack-playground

:trident: One step after vanilla javascript, one step before frameworks.

frontend-stack-playground

🔱 One step after vanilla javascript, one step before frameworks.

Why?

I've got tired of js frameworks, so I will start to experiment with different js stacks. composing libraries is more fun than learning oppinionated frameworks. At the end, I would have the basic experience and maybe some benchmarking to make some decisions.

How?

If there are already a lot of js framework choices, there is even more js libraries. So, I arbitrary selected some of them and mixed in this repo, accross different project folders. Every folder is supposed to be the same app, only changing the js stacks, so, there are some common files. Also, there is only one folder for benchmarking, as the same test would be applied to every app.

The app

The app is a simple blog, with common css files. The state model must support posts with comments, and manage routes to visualize them. The routes are:

/posts
/posts/:post_id
/posts/:post_id/comments

The model structures are:

const post = {
  title: '',
  date: {},
  content: '',
  author: '',
  comments: []
}

const comment = {
  author: '',
  content: '',
  date: {}
}

The actions for the state container are:

const ADD_POST

Stacks

Go to each one of the following folders to check the implementations

• yo-yo + sheetify + send-action + sheet-router
• yo-yo + sheetify + send-action + director
• yo-yo + sheetify + redux + sheet-router
• yo-yo + sheetify + redux + director
• yo-yo + cxs + send-action + sheet-router
• yo-yo + cxs + send-action + director
• yo-yo + cxs + redux + sheet-router
• yo-yo + cxs + redux + director
• hyperscript + hyperx + sheetify + send-action + sheet-router
• hyperscript + hyperx + sheetify + send-action + director
• hyperscript + hyperx + sheetify + redux + sheet-router
• hyperscript + hyperx + sheetify + redux + director
• hyperscript + hyperx + cxs + send-action + sheet-router
• hyperscript + hyperx + cxs + send-action + director
• hyperscript + hyperx + cxs + redux + sheet-router
• hyperscript + hyperx + cxs + redux + director

License

MIT

frontend-stack-playground's Issues

Browser url and history not updating

Stack: yo-yo + sheetify + redux + sheet-router

Libraries versions (relevants only)

• sheet-router: v4.0.3

Actual Behaviour

When navigating through the app, the dom content is updated properly, but there is no update in the location nor the history API.

Expected Behaviour

Navigating through the app should modify the browser route, and update the history API

Sheetify is not working

Stack: yo-yo + sheetify + redux + sheet-router

Libraries versions (relevants only)

• sheetify: v5.1.1

Actual Behaviour

Loading global css scripts in this way

import sheetify from 'sheetify'

sheetify('style.css', { global: true })

result in this error

Uncaught TypeError: Cannot read property 'isFile' of undefined
    isFile                    @ sync.js:12
    loadAsFileSync            @ sync.js:36
    loadNodeModulesSync       @ sync.js:75
    module.exports            @ sync.js:27
    resolveSync               @ index.js:22
    sheetify                  @ index.js:30
    1.sheet-router            @ index.js [sm]:74
    s                         @ _prelude.js:1
    e                         @ _prelude.js:1
    (anonymous function)      @ _prelude.js:1

Expected Behaviour

The style should load correctly.