vanillajs

KO | EN

gitlite — search

#react #typescript #go #android #machine-learning #rust #cli #kubernetes #vue #pytorch #security #mcp #openai #open-source

(★ 72)

Re-implement popular framework sample apps in vanilla JavaScript.

File Explorer

Download Latest Version (.zip)

- - index.html
  - index.js
- Makefile
- package-lock.json
- package.json
- README.md
- webpack.config.js
- - index.css
  - index.html
  - index.js
- LICENSE
- Makefile
- package-lock.json
- package.json
- README.md
- webpack.config.js
- - placeholder.png
- - index.css
  - index.html
  - index.js
- LICENSE
- Makefile
- package-lock.json
- package.json
- README.md
- webpack.config.js
.gitignore
LICENSE
README.md

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

VanillaJS
=========

The repo contains sample projects that were originally implemented in
a JavaScript framework and have been reimplemented here using vanilla JS.
The point of this project is to show the native power of the browser and to
try to dispel the notion that building for the web requires a framework.

There are two ported projects so far:

Vue.js
------

The [Vue.js sample app rewrite](https://github.com/jcgregorio/vanillajs/tree/master/vue.js)
is the simplest port, using no external libraries at all, and using template
literals for templating.

React
-----

The [React sample app rewrite](https://github.com/jcgregorio/vanillajs/tree/master/react)
uses only one additional library,
[lit-html](https://github.com/PolymerLabs/lit-html) for templating.

Angular TODO
------------

The [Angular TODO app rewrite](https://github.com/jcgregorio/vanillajs/tree/master/angular-todo)
uses only one additional library,
[hyperHTML](https://github.com/WebReflection/hyperHTML) for templating.

Caveats
=======

This code works w/o polyfils in Chrome. To get it to run in a wider range of
browsers you will need to add polyfills and, depending on the target browser
version, compile the JS back to an older version of ES, and run a prefixer on
the CSS. The wider the target set of browsers and the older the versions you
are targeting the more processing you will need to do via webpack, but since
the original code doesn't need to change, those extra processing steps are out
of scope for these examples.

vanillajs

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

vanillajs

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

Download README