JavaScript – Front-end MVC

My actual question here:

I’m wondering if (beargrylls.com) uses Django or it’s packages. Or some other framework. Or a custom framework? Also, if you take a look at the website (beargrylls.com), you can see that it uses a lot of paralax scrolling, sliders and cool animations. Is this custom-made or is this another framework/plugin/whatever?

If found an awesome website (beargrylls.com) on awwwards.com. I’m familiar with the MVC model that Laravel uses. So I know the basics. But I found out that (beargrylls.com) uses some kind of routing inside it’s scripts!?

What I also found remarkanble is that the script(s) and the entite css of the website is loaded in inline HTML. So there are no HTTP requests, no files to load except the images

Which framework/plugin compiles this?

Example:

  , Route = function t() {
    classCallCheck(this, t);
    var e = new Router({
        xhr: !0
    });
    e.get("/", HomeController),
    e.get("/about", AboutController),
    e.get("/television", TelevisionController),
    e.get("/live", LiveController),
    e.get("/experiences", ExperiencesController),
    e.get("/socialwall", SocialwallController),
    e.get("/adventurers", AdventurersController),
    e.get("/termsofuse", TermsofuseController),
    e.get("/faqs", FaqsController),
    e.get("/signup", SignupController),
    e.error(ErrorController),
    e.run()
}
  , App = function t() {
    classCallCheck(this, t),
    Support.init(),
    index.TopWhenRefresh(),
    new Route
};
new App;

Another example that boosted my suspisions can be found inside it’s createClass function or class. Where it assumably creates classes.

this.backgroundWrap = index.Geb.id("h-header-background-wrap"),
this.centerWrap = index.Geb.id("h-header-center-wrap"),
this.foregroundWrap = index.Geb.id("h-header-foreground-wrap"),
this.titleWrap = index.Geb.id("h-header-title-wrap"),
this.introTxt = index.Geb.id("h-intro-txt"),
this.introLine = index.Geb.id("h-intro-line"),
this.introVideo = index.Geb.id("h-intro-video"),
this.introScroll = index.Geb.id("h-intro-scroll"),
this.nav = index.Geb.class("nav")[0],
this.progress = index.Geb.id("h-intro-progress"),
this.scrollLineWrap = index.Geb.id("h-header-scroll-line-wrap"),
this.scrollTxtWrap = index.Geb.id("h-header-scroll-txt-wrap"),
this.stickyBurger = index.Geb.id("sticky-burger"),

So it seems to me that almost this entire website (routing, element classes and more) is created trough this script. I even see some mailchimp tags here.


I looked into the Django framework because of some of the links to media folders like /static/.

Penryn-starter

A starter kit for web development.

  1. Docker
  2. Browsersync
  3. PHP 7.1.8
  4. PostCSS
  5. Css Nano
  6. ES2015
  7. ESLint
  8. Rollup
  9. Uglify JS 3
  10. Skylake

https://github.com/ariiiman/penryn-starter


Skylake:

It’s a Light JavaScript library named Skylake:

https://github.com/ariiiman/skylake

example:

const animation = new S.Merom('.element', '3dy', 0, 100, 1000, 'Power4InOut')
animation.play()
animation.reverse()

Similar functions can also be found in the Sources tab of the Google Devtools on beargrylls.com:

this.tlImg.from(this.background, "3dy", 10, 0, 2e3, "ExpoOut")

Also, in the script can skylake be found litterally:

scroll: {
    throttle: !0,
    skylake: "Scroll"
},

But I’m not quite sure what this actually does. I can’t explain the routing class or anything of that sort. But it defenitely uses this Skylake library.


The same structure of code can be found on these websites: https://www.aristidebenoist.com/ (author of Skylake) and on http://www.jennyjohannesson.com/

though I do not think that these websites are using Skylake. Or just use other variables or something. But this:

              , App = function e() {
                classCallCheck(this, e),
                Support.init(),
                index.TopWhenRefresh(),
                new Router({
                    xhr: !0
                })
            };
            !function(e) {
                new App
            }();
        }
        )();

is exactly the same as on beargrylls.com

also the almost exact same Route class can be found on http://www.jennyjohannesson.com/