What is in the repo?

This is an attempt to list of Github repositories that have build-less Github-Pages demos/samples/examples. At least for the JavaScript following MVC/MVVM frameworks:

AngularJS (Angular 1) - 109 examples
Vue - 92 examples
Ember - 90 examples
Backbone - 60 examples
Ractive - 57 examples
React - 46 examples
Knockout - 44 examples
Mithril - 38 examples
Riot -37 examples
Enyo -21 examples
Polymer - 16 examples
Inferno - 15 examples
Angular (Angular v2 -v8) -11 examples
Aurelia - 9 examples
Flight - 7 examples
Marko- 7 examples
Preact - 5 examples
Cycle - 3 examples
Svelte - no examples yet
Cyclow - no examples yet

Buildless examples serve as good tools for learning (and comparing) such frameworks. Some people (like me) greatly prefer self-contained/cloneable/runnable examples to tutorials and reference docs.

JsFiddle, Codepen, Plunker and alike are similar places to discover buildless examples. So is StackOverflow, but the example code inlined isn't runnable, so is imperfect (unless there's a link to

This page doesn't show true popularity of these frameworks - Newer technologies like Angular (successor to AngularJS) greatly rely on a build to use them, whereas the first few years of AngularJS (2009-11) didn't. Some technologies like Meteor cannot possibly be build-less, and therefore are not listed at all.

WTF is buildless?

No NPM, WebPack, Gulp, Babel, Grunt etc. Just use the JavaSript tech directly in a HTML page pretty much "as is". From 1995 to 2005 this was he only way to do it.

To update the data:

Install sponge, ChromeDriver and ImageMagick for your platform

brew install moreutils imagemagick
brew cask install chromedriver

Get the list of analyzable repos

pip3 install selenium
cd docs
rm *.json
rm -rf results/
python3 search_gh_for_frameworks.py your-github-id # and your password when prompted
sort search_results.json | sponge search_results.json

Using Selenium load up each Github-Pages repo

rm *-gh-pages.txt
python3 subset-to-framework-using-ghpages.py # kiss goodbye to 12 hours or so

Make thumbnails using ImageMagick

for f in `find . -name "*.png" | sed '/\.thumb\./d'`; do convert $f -resize 10% ${f/.png/.thumb.png}; done

delete non-thumbnails

for f in `find . -name "*.png" | sed '/\.thumb\./d'`; do rm ${f}; done
git add .
git commit -m "more"

You should probably run these scripts in disposable VM as Chrome could have a zero-day vuln allowing a hacker to install software on your machine.

For AngularJS and Angular - there is an attempt to detect the framework in the browser by looking for a known property window.angular.version.full.

Contributions

Pull-requests welcome. Especially for the false positives/negatives and the framework version detection logic (in Selenium, once loaded).

Notes

The mechanism of looking for gh-pages is brute force - it just speculatively looks for index.html on the ORG_OR_USER.github.io/REPO site (with Selenium)
There's no fine grained breakdown of versions, other than for Angular/JS
The order within each framework is by 'stars' (descending)
I wish framework maintainers would curate these lists themselves, as "you should use my framework, look at these community demos" is a powerful selling technique.

paul-hammant/javascript-frameworks-with-ghpages-demos

ErrorLooks like something went wrong!

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Error
Looks like something went wrong!

Packages