Curriculum For Teaching MVC Frameworks & Concepts

Vanilla JAVASCRIPT CRUD SPA MVP for teaching junior devs on how to work with frameworks faster.

• Dependencies:

  all dependencies are in the lib folder

  • require.js

    used for loading in a custom template language

  • require-text.js

    An AMD loader plugin for loading the text templates with a REGEX

  • load.js

    async loading with promises

  • firebase.js

    used for CRUD features and shipping the MVP

Overview:

• Primary Goal: teaching MVC structure to juniors and entry-level devs
• Secondary: teaching the ability to reverse engineer and working with different frameworks

This is a custom framework built to be used as curriculum for teaching, onboarding, and mentoring junior devs.

All code is written to be readable, using traditional Vanilla Javascript. The goal being, to speed up the process of learning how to reverse engineer a framework.

What does the App do?

all the basic CRUD features needed to MVP a Vanilla Javascript framework.

Code Style:

When possible the Python PEP 8 style coding practices were used

• dot notation over bracket notation

  app.contoller.user.signin versus app.controller[user].signin()

• single quotes over double quotes
• underscores over dashes

  var name_of_property versus var name-of-property

How do I get started?

Add in your API Keys to: app.config.js for the Firebase credentials

var firebase_config = {
        apiKey: FIREBASE_API_KEY,
        authDomain: FIREBASE_API_AUTH_DOMAIN,
        databaseURL: FIREBASE_API_DATABASE_URL,
        storageBucket: ''
};

---

A few common questions junior devs typically ask:

What is .prototype?

.prototype is used to target an object constructor directly, rather than individual objects.

You can find information on the usage of .prototype here

What is a try/catch function doing?

This is similar to an if/else statement. Try/catch statements are used for testing code for errors. The try statement is filled with what is to be tested. The catch statement is filled with how you wish to handle errors that are caught.

You can read more about try/catch statements here

What's with the modules that return just an empty JSON object?

This is done to instantiate an object for further use. Once instantiated, the object can have methods and properties added to it.

What is the traverse function used for?

function traverse( object_to_traverse , callback_function ) {
    for (var item in object_to_traverse) {
        callback_function.apply(this,[ item , object_to_traverse [ item ]]);
        if ( object_to_traverse [ item ] !== null && typeof( object_to_traverse [ item ]) == 'object') {
            traverse( object_to_traverse [ item ],callback_function);
        }
    }
}

There are times when we will need to apply the CRUD process to a nested set of DOM elements.

Example: updating a user profile and appending the new nested data.

This function creates an object tree of objects. It's impossible to know exactly how many objects there may be. In addition, you may be unsure about how many properties those objects contain. The traverse function loops over each object and builds an object tree.

What is .once?

.once is a method used to fire an event only once for a particular object.

What is the anonymous function that is called after require is called in app.js?

function(){

    app.config();

    require([
    'framework/app.view.signin',
    ],function(html_data){
        App.prototype.user.view = html_data;
        App.prototype.util.element.get('body').innerHTML = html_data;
        App.prototype.controller.signin();
});

This callback function runs first with the app config. Then configures the app to use the firebase database. Finally, it pulls in the view, where to place the template, and a callback function to run when complete for the signin process.

What is the app.util.mutation module used for?

An observer function for watching detects changes to the browser before they are attached to the DOM.

What are all the APP HTML ID selectors?

This is a list of all IDs currently in use in the Firebase App. They are targeted with JAVASCRIPT via CSS REGEX syntax.

[class^=' app-option-'] { background-color: #939393; }

HTML ID Selectors

listed in alphabetical order.

• app-current-status
• app-current-user
• app-error-message
• app-last-user
• app-login
• app-login-email
• app-online-status
• app-signin
• app-signout
• app-signup
• app-user-container
• app-user-data
• app-user-data-dropdown
• app-user-data-dropdown-container
• app-user-data-form
• app-user-data-input
• app-user-data-input-container
• app-user-data-key
• app-user-data-option-status
• app-user-data-option-value
• app-user-data-value
• app-user-logged-in