mfrachet / create-frontend-framework

👓 Creating a front end framework for learning purpose

Slides available here

This project aims to provide a step by step implementation of a "frontend framework". It's only for learning purpose and allows to take a first shot of internal stuff such as templating, state management, and the use of Virtual DOMs.

NEW: here's another way to implement it using React API and JSX

NEW: the project is now available on github pages! https://mfrachet.github.io/create-frontend-framework/

create-frontend-framework's Issues

code example mistake

create-frontend-framework/docs/vdom/adding-snabbdom.html

Line 31 in 69e65bd

</code></pre></div><h2 id="delegate-the-dom-manipulations-to-snabbdom"><a href="#delegate-the-dom-manipulations-to-snabbdom" aria-hidden="true" class="header-anchor">#</a> Delegate the DOM manipulations to snabbdom</h2> <p>We can now refacto the <code>./framework/element.js</code> to delegate our DOM node creation to the VDOM.</p> <p>We're going to deal with <code>virtual node</code> thanks to <code>h</code> of <code>snabbdom</code>:</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">import</span> h <span class="token keyword">from</span> <span class="token string">&quot;snabbdom/h&quot;</span><span class="token punctuation">;</span>

correct is import {h} from "snabbdom";, or hold snabbdom version in exapmles

Improve the experience

• Use a gatsby project for this
• Correct the none-english sentances
• Make the example clearer and less functional oriented (reduce is not super straightforward here)

Yarn error

Hi
I am getting these errors when trying to start a white page:
C:\FrontEnd\create-frontend-framework>yarn && yarn start
yarn install v1.22.4
[1/4] Resolving packages...
[2/4] Fetching packages...
warning [email protected]: Invalid bin field for "mini-css-extract-plugin".
error [email protected]: The engine "node" is incompatible with this module. Expected version ">=4 <=9". Got "12.15.0"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
yarn run v1.22.4
$ rm -rf .cache && rm -rf dist && parcel serve index.html
'rm' is not recognized as an internal or external command,
operable program or batch file.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

P.S. New to all this please assist

not deployed: Fix Codeblock of arr.reduce() alternative

#35 was fixed
https://github.com/mfrachet/create-frontend-framework/blob/master/book/templating/template-literals.md
but actual state of the book is broken https://mfrachet.github.io/create-frontend-framework/templating/template-literals.html#our-first-html-elements
I have no ideas how fix.
previous fixes was apply success (such as my fixes #26 )

Change `yarn install snabbdom` to `yarn add snabbdom`

https://mfrachet.github.io/create-frontend-framework/vdom/adding-snabbdom.html#adding-snabbdom

AS this produces the following error

Broken link

Awesome tutorial @mfrachet I learnt so much from it.

The link to the example repo of the tutorial is broken.
https://github.com/mfrachet/frontend-example/tree/master/framework

Cannot resolve dependency 'snabbdom/h'

snabbdom version 3.5.1
the proper way to import is this:
import { h } from "snabbdom",
rather than:
import { h } from "snabbdom/h";