Flanx Quikker Framework Showcase

I Build my own JS Framework which is Flanx Quikker

What is Flanx Quikker?

Flanx Quikker a.k.a FQ is a JavaScript DOM Element manipulation framework which is allows you to manipulate and write HTML document elements by using only a JavaScript rather than HTML and its also can be made as Data-Driven-System or DDS that make your page faster and saves the memory resources. FQ is developed by me and it is a monolithic framwork.

Advantages of FQ?

  • It is very easy-to-learn in seconds and work all time
  • Faster content driven system with the use of queries to call the certain elements
  • Highly and stable performance that makes the loading time shorten
  • Monolithic type or a single file type
  • Non-bloated
  • Can create a larger projects

Disadvantages of FQ?

  • Too verbose to code
  • Coding interface is very repetitive
  • Hardly to maintain if the codes are too complex
  • Daunting at first sight

Getting Started!

The keyword of FQ JS! and their definition

IS A function-object which is aim to create the layout and putting a name parameter to serve as thier id.

make.layout(name) = make.layout("myLayout")

Is a functional-object that getting/locate the id of the certain element

make.findViewByElement(element) = make.findViewByElement("div#myId")

Is a function-object that creates the HTML elements inside the element parameter.

make.element(element) = make.element("p")

Is a functional-object which is to create/add the nodes or the content inside the given variable parameter of the element.

make.setContent(variable, content) = make.setContent(myVar, "This is FQ!")

Is a functional-object that create/add the inline-attributes in cerati given variable of the element

make.attribute(variable, attribute, value) = make.attribute(myVar, "class", "myClass")

Is a functional-object which aims you to add your layout.

add.UIElement(element) = add.UIElement(myVar)

Is the function block which is to finalize to add/append all child elements to your parent layout and technically unchanged the UIElement in the 2nd parameter

render(parentElement, UIConstructor) = render(myLayout, UIElement)

The structures that how to use to code FQ API, so I make the I’m Yerenzter message below.

//Make and getting the layout ID with their corresponding layout.
make.layout("myLayout");
    this.myLayout = make.findViewByElement("div#myLayout");
    
    //Add my heading title and add some texts there.
    this.myTitle = make.element("h1");
    make.setContent(myTitle, "Hello, I'm Yerenzter!');
    make.attribute(myTitle, "id", "myID");

   //Now I add the layout.
   add.UIElement(myTitle);

   //So finalize to render all the layouts inside this parent element.
   render(myLayout, UIElement);

Source code of this API

//This is the source code of Flanx Quikker API.
//Debugging tools.
let put = console.log;
let sheet = console.table;
let stack = console.trace;

//The API source codes.
let make = {
  layout: (name) => document.write("<div id=" + name + "></div>"),
  element: (element) => document.createElement(element),
  findViewByElement: (element) => document.querySelector(element),
  setContent: (variable, content) => variable.textContent = content,
  attribute: (variable, attribute, value) => variable.setAttribute(attribute, value)
}

let UIElement = document.createDocumentFragment();

let add = {
  UIElement: (element) => UIElement.appendChild(element)
}

let render = (parentElement, UIConstructor) => parentElement.appendChild(UIConstructor)