Sign inSign up

quickcorp/qcobjects

By quickcorp

•Updated over 3 years ago

A framework to make micro-services and micro-frontends into an N-Tier architecture

Image
0

500K+

quickcorp/qcobjects repository overview

logo

GitHub license FOSSA Status Badge for version for Visual Studio Code extension Quickcorp.QCObjects-vscode Documentation Status GitHub release GitHub stars npm version apm: version docker pulls Contributor Covenant

Become a Patreon

QCObjects - To code fancy, clean and quick | Product Hunt

⁠QCObjects

Welcome to QCObjects⁠. An Open-source framework that empowers full-stack developers to make micro-services and micro-frontends into an N-Tier architecture.

With QCObjects devlopers are also able to code front-end and back-end together using a common syntax in pure JavaScript. It is cross-browser, cross-platform and cross-frame.

Install it, make a textfield or a navigate home functionality, all in just one step.

QCObjects is being featured by British Herald as today, the most advanced framework for modern software development.⁠

This document is the Main Reference Documentation!

This repository and readme is hosted at https://qcobjects.dev⁠

Check out the official page of QCObjects⁠ at https://qcobjects.com⁠

This project adheres to the Contributor Covenant code of conduct⁠. By participating, you are expected to uphold this code. Please report unacceptable behavior to [email protected]⁠.

Contributors are welcome!

You can contribute to QCObjects⁠ following the set of guidelines expressed in the file CONTRIBUTING.md⁠

⁠The meaning of the name QCObjects (Do not forget the Q)

Often, some people is confusing QCObjects name with CObjects (perhaps some day it changes, who knows...) but the Q has an important meaning: It means Quick! What the complete name QCObjects does mean is Quick Components and Objects, and that is why the Q, C, O letters are capitalized.

⁠QCObjects Explainer Video

For those who have no time to read all of this today, here is a small video that explains what QCObjects is and what can be done with it.

QCObjects Explainer Video

⁠Table of Contents

⁠Principals

Here are the principals with QCObjects was made with:

  1. You should type in JavaScript to code a JavaScript application.
  2. Everything is an object.
  3. Every object has a definition.
  4. On the front-end side, any object can be stacked into the DOM or Virtual-DOM without the need to re-declare its definition.
  5. Every object has a body.
  6. A class should be the main definition of an object.
  7. A class should be easy typed as an object itself.
  8. Your code should be easily organised into packages.
  9. Your code should be possible to easily scafold your applications into a clean architecture.
  10. A component is an entity that has an object representation, and a tag declaration. The content of a component should be possible to be filled up remotely and locally. As a component is an object, it has a body as well, and the body of the component normally is an stacked instance of a DOM element.
  11. A component can be attached to the DOM or detached from it without affecting its functionality.
  12. A service call can be extended to scafold its functionality.
  13. You should be able to import a package remotely.
  14. You should be able to scafold your code and also controlling your savings on the server side by not doing unnecessary calls to remote sources. You should not need to repeat yourself coding this kind of controls.
  15. You should be able to code your N-Tier application in a single language or syntax.
  16. You should be able to apply any template you want to a component, it doesn't matter the what syntax or language the template was written with.
  17. If an HTML tag is already represented by a DOM object instance, you should not need to duplicate this instance definition in order to render its contents.
  18. Your HTML main page should be clean. But you should be able to bind what controls the tag behaviour without affecting the HTML syntax.
  19. The order of execution of your code should be easily understandable and readable from the code, and the rendering process of every component should have and execution control in as many layers you need.
  20. A layered pattern (like MVC or MVCC) should be present for every component. It doesn't matter if you define every layer or not.
  21. The behaviour of a component should not be determined by its rendering process.
  22. It is necessary a components stack that splits the DOM into a subjacent tree of attached elements. So now it exists and it is called The QCObjects Nested Components Stack.
  23. You should be able to extend a component instance. But you should be able to control its dynamic behaviour without affecting its initial declaration.
  24. You should be able to apply simultaneous visual effects and animations in an easy way to any DOM element instance.
  25. You should be able to control the visual effects and animations either from CSS or JavaScript without affecting the performance.
  26. You should be able to control the behaviour of your code Into-the-box and out-of-the-box and survive doing it.

⁠Main features

  • Built-In & custom templates for Progressive Web Apps (PWA) and Accelerated Mobile Pages (AMP)
  • Revolutionary UI Effects
  • Breakthrough backend micro-services
  • The simplicity of a wonderful layout design
  • Fully usable CLI tools
  • Objects & Components driven architecture
  • Front-end and back-end together in a full-stack environment
  • Recursive routing for components
  • Built-In nested components management
  • Fully integrated MVC pattern (Model, View, Controller)
  • Dynamic Data Objects
  • Based on N-Tier Architecture concepts

⁠Progressive Web Apps (PWA) Adopted Features

⁠Prevent Render-blocking resources

To prevent Render-blocking resources, QCObjects has implemented the Package⁠ factory function.

⁠On-Demand Resources Load

With a dynamic components driven architecture, QCObjects is rendering every visual resource that is inside of a component only when the component is building itself, and every component is connected to a tree called global.componentsStack that is actually pointing to every component instance and its subcomponents. Every time a component is rebuilt, visual resources are dynamically reloaded on-demand in the most efficient way, so you can forget all the nasty code that you were needing to controll the resource loading process with other frameworks.

⁠Lazy-loading of images in components (use lazy-src instead of src attribute in img tag)

Since the version 2.1.251, QCObjects provide an easy way to lazy load the images, using the latest standard for browsers.

<img src="img/preloader.svg" lazy-src="img/myrealimage.png"/>

In the above code, a preloader (light-weight) image is used to be loaded in the first instance, and a lazy-src attribute is used to set the real image to show after lazy loading process. QCObjects will load all the declared tags inside a component in lazy mode if they have a lazy-src attribute, after the component is rebuilt or loaded. Also, QCObjects will use the Intersection Observer API⁠ (when available) to determine whether the lazy-src or src image is visually useful to be showed.

The effect of lazy loading is only high visible on the first time the PWA is loaded. The next time, the speed of loading will be significantly increased making more difficult to the human eye to see the result. However this feature makes a lot of difference in terms of user experience when the internet connection has low speed issues or the images are extremely large. This feature is a part of the recommended features for PWAs writen by Mozzila Developers Network⁠ in an article about Progressive loading. You can read that article here⁠

If you don't want to use lazy loading for images, you can always keep the normal way of loading by not adding the lazy-src attribute to the tag and using the traditional src.

⁠Cross Browser Javascript Framework for MVC Patterns

QCObjects⁠ is a javascript framework designed to make easier everything about the MVC patterns implementation into the pure javascript scope. You don't need to use typescript nor any transpiler to run QCObjects⁠. It runs directly on the browser and it uses pure javascript with no extra dependencies of code. You can make your own components expressed in real native javascript objects or extend a native DOM object to use in your own way. You can also use QCObjects⁠ in conjunction with CSS3 frameworks like [Foundation] (https://foundation.zurb.com⁠), [Bootstrap] (https://getbootstrap.com⁠) and mobile javascript frameworks like [PhoneGap] (https://phonegap.com⁠) and OnsenUI (https://onsen.io⁠)

screenshot

⁠Install it, make a textfield or a navigate home functionality, all in just one step.

QCObjects in installable in your computer, it comes with a CLI Tool and commands to create your application template in one step. Navigate home without leaving the webpage and make a shadowed textfield in one step.

⁠Dynamic Components Architecture

qcobjects components layout FOSSA Status

⁠ECMA-262 Specification

See ECMAScript® 2020 Language Specification⁠ for reference

⁠Copyright

Copyright (c) Jean Machuca and QuickCorp⁠ [email protected]⁠

⁠Demo

⁠PWA Live Demo

Check out a live demo of pure QCObjects based frontend Progressive Web App here: PWA QCObjects⁠

⁠Demo Integrating with Foundation

Check out a demo using Foundation components here: Demo Using Foundation⁠

⁠Demo Integrating with Materializecss

Check out a demo using MaterializeCSS here: Demo Using Materializecss⁠

⁠Demo Using Raw CSS

Check out a demo using raw CSS: Demo Using Raw CSS⁠

⁠Example of QCObjects using and manipulating canvas objects

The following code shows how QCObjects can manipulate canvas objects directly and inside components

<!DOCTYPE html>
<html>
    <head>
    	<title>Demo</title>
    	<script type="text/javascript" src="https://cdn.qcobjects.dev/QCObjects.js"></script>
    	<script type="text/javascript">
    		var canvas1,canvas2,canvas3,container;
        CONFIG.set('relativeImportPath','src/');

    		/**
    		 * Main import sentence.
    		 */
    		Import('cl.quickcorp',function (){

    			/**
    			 * Super Container MyOwnBody
    			 */
	    		Class('MyOwnBody',HTMLBodyElement,{
	    			customAttr:'custom',
	    			body:document.body  // breakes default body element and replace with them
	    		});

	    		/**
	    		 * Another custom class definition
	    		 */
	    		Class('MyContainer',HTMLElement,{
	    			width:400,
	    			height:400,
	    			customAttr:'custom attr container'
	    		});


	    		/**
	    		 * Another custom class definition
	    		 */
	    		Class('canvas',HTMLCanvasElement,{
	    			customAttr:'custom'
	    		});

	    		/**
	    		 * Another custom class definition
	    		 */
	    		Class('MyCanvas2',HTMLCanvasElement,{});

	    		body = New(MyOwnBody); // binds to body
	    		body.css({backgroundColor:'#ccc'});

	    		container = Tag('container')[0].Cast(MyContainer); // cast any javascript dom object to QC_Object class
	    		container.css({backgroundColor:'red'}); // access binding in two directions to dom objects

	    		/**
	    		 * Instance a new custom canvas
	    		 */
	    		canvas1 = New(canvas,{
            width:100,
            height:100,
          });
	    		canvas2 = New(canvas,{
            width:200,
	    			height:100,
          });
	    		canvas3 = New(canvas,{
            width:300,
	    			height:50,
          });

	    		canvas1.css({backgroundColor:'#000000'}); // like jquery and another style access
          canvas1.body.style.backgroundColor='#000000'; // standard javascript style access
	    		canvas2.body.style.backgroundColor='#0044AA'; // standard javascript style access
	    		canvas3.body.style.backgroundColor='green'; // standard javascript style access

	    		canvas1.append(); //append canvas1 to body
	    		canvas2.attachIn('container'); // attach or append to specific tag containers
	    		container.append(canvas3); // append canvas3 to custom tag binding

//	    		canvas1.body.remove(); // remove canvas1 from dom
	    		body.append(canvas3); // append canvas3 to body

          // using components
          var c1 = New(Component,{'templateURI':'templatesample.html',cached:false});
          document.body.append(c1); // appends the c1 to the body


    		});

    	</script>
    </head>
    <body>
    	<container id="contentLoader" ></container>
    </body>
</html>

⁠DevBlog

The Official DevBlog of QCObjects⁠ is hosted on Hashnode⁠. The DevBlog is personally written by Jean Machuca, the author of QCObjects⁠ and and he is explaining in detail how are the best practices and giving the best tips and tricks to use the most advanced features of QCObjects.

⁠Fork

Please fork this project or make a link to this project into your README.md file. Read the LICENSE.txt file before you use this code.

⁠Become a Sponsor

If you want to become a sponsor for this wonderful project you can do it here⁠

⁠Check out the QCObjects SDK

You can check out the QCObjects SDK⁠ and follow the examples to make your own featured components

⁠Donate

If you like this code please DONATE⁠!

paypal

Become a Patreon

⁠Installing

⁠Using QCObjects with Atom:

> apm install qcobjects-syntax

https://atom.io/packages/qcobjects-syntax⁠

⁠Using QCObjects in Visual Studio Code:

Badge for installs for Visual Studio Code extension Quickcorp.QCObjects-vscode

https://marketplace.visualstudio.com/items?itemName=Quickcorp.QCObjects-vscode⁠

⁠Installing with NPM:

> npm install qcobjects-cli -g && npm install qcobjects --save

screenshot2

⁠Installing the docker playground:

docker pull -a quickcorp/qcobjects-playground && docker

Tag summary

Content type

Image

Digest

sha256:f6fa5ff3e…

Size

720.5 MB

Last updated

over 3 years ago

docker pull quickcorp/qcobjects