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.htmlon theORG_OR_USER.github.io/REPOsite (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.