DEV Community: QCObjects

What is Collab for Data Science?

Jean Machuca — Wed, 22 Apr 2020 20:47:01 +0000

QCObjects Collab for DataScience is an engine that helps the data scientists to automate data processing and collaborative analysis tasks. While a combination of other tools will help you to visualise your data in beautiful charts, Collab for DataScience is focused in analysis, allowing you to write calculus and math of complex scripts for different kind of analysis as well as descriptive, predictive, trend and clustering analysis, that are running server-less and in a shared always-alive context. You can run a script and go home or for a coffee until it ends the task, and your partner can run other micro-data bots in parallel that use the data that your still-running main bot-script is creating on runtime, even if it has not finished yet.

If you use it in conjunction with QCObjects HTTP2 Built-In Server, you’re empowered to make your own data science APIs quick and easy

In order to get feedback to complete the product documentation with the features that matters the most, It is still in beta testing stage and it is being distributed as a part of the QCObjects Community Edition for FREE!

To install it, you can either use the docker image or use npm:

https://www.npmjs.com/package/qcobjects-collab

Demo of QCObjects Collab for Data Science
https://youtu.be/7UnLXEdH1c0

QCObjects Hosting is available into the DigitalOcean Marketplace!

Jean Machuca — Sat, 07 Dec 2019 20:03:37 +0000

Here is a good news for all!

QCObjects is available into the DigitalOcean Marketplace!

I've been showing a few weeks ago how to make your progressive web apps and accelerated mobile pages in just one step. Well, you can do it as well in your DigitalOcean web hosting!

Have a look at the live demo here:

QCObjects on Amazon Web Services Marketplace!

Jean Machuca — Sat, 07 Dec 2019 19:54:06 +0000

If you got an account in Amazon Web Services I got good news for you!

Now, QCObjects is fully integrated with AWS so you can create your AMI and Private Image products to develop your high availability PWA and AMP in just one step. QCObjects is an Open Source Framework that allows Full-Stack developers to create create micro-services and micro-frontends into an N-Tier layered architecture based on JavaScript. Thousands of companies are trying QCObjects around the world and saving machine resource costs by coding fancy, clean and quick. QCObjects is available in the most used AWS regions including Free Tier. I invite you to try it and leave a review here:

Link on AWS

Making a GraphQL Micro-service with QCObjects HTTP2 Built-In Server

Jean Machuca — Sat, 07 Dec 2019 19:41:16 +0000

In the following step-by-step tutorial I'll show you how to make a fancy, clean and quick micro-service using QCObjects HTTP2 Built-In Server and GraphQL

If you want to know more about GraphQL go to https://graphql.org

If you want to learn more about QCObjects go to https://qcobjects.dev

1.- Create a progressive web app using the command line of QCObjects CLI Tool (you should be inside the project's folder):

> qcobjects create --pwa mynewmicroservice

2.- Install GraphQL inside the project's folder:

> npm install graphql --save

3.- Create/Edit a config.json file inside the project's folder

> vi config.json

4.- In the new config.json file add the following lines:

{
  "relativeImportPath": "js/packages/",
  "domain": "0.0.0.0",
  "backend": {
    "routes": [{
      "path": "/helloworld",
      "microservice": "org.quickcorp.custom.backend.helloworld"
    }]
  }
}

5.- Then create/edit a new package inside the js/packages folder:

> vi js/packages/org.quickcorp.custom.backend.helloworld.js

6.- The following animation shows the basic code of a Microservice using GraphQL and QCObjects HTTP2 Built-In Server

7.- Launch the QCObjects HTTP2 Built-In Server using the following command line:

> qcobjects launch mynewmicroservice

8.- Then open a browser in the address https://127.0.0.1/helloworld and you should see a result like this:

Accelerated Mobile Pages with QCObjects

Jean Machuca — Tue, 11 Jun 2019 04:07:53 +0000

AMP is a web component framework to easily create user-first websites.

QCObjects integrates many tools in a securer, faster and easier to learn runtime components scope, so why not use it to make a compelling accelerated mobile page that also can be designed into an N-Tier architecture, and all of this using pure javascript?

Added value that can QCObjects bring to AMP:

Organised Code Structure, Fast Rendering, Friendly syntax , Config Secure encryption , Simultaneous animation effects , Dynamic storage cache control , Components tree architecture , Runtime stacked components and...

Easy and short steps:

To make your first AMP application using QCObjects you only need to type this in your console:

> npm i qcobjects-cli

Then, create a directory for your app and enter it:

> mkdir mynewapp && cd mynewapp

Finally, generate the new AMP template using the cli tool

> sudo qcobjects create mynewapp --amp

Done.

2.- Serving over HTTP2

Once you've created your application, you can serve it using the qcobjects-server tool installed with the cli tool. Go to the app directory and type:

> qcobjects-server

and press enter.

Then, go to a web browser and navigate to:

https://localhost

Here is the complete example:

Please let me know how to improve this article in a comment!

Cheers!

Progressive Web Apps With QCObjects

Jean Machuca — Sun, 09 Jun 2019 06:57:47 +0000

Web apps development is in huge demand. Learning curve is becoming too steep. Developers are facing the challenge to be faster than ever producing good quality code.

And even now, despite of the growth of device native apps itself, a conventional thinking that a web app "must be like" a native app had become more and more accepted by the community. That's why progressive web apps do exist.

QCObjects integrates many tools in a securer, faster and easier to learn runtime components scope, so why not use it to make a compelling progressive web app that also can be designed into an N-Tier architecture, and all of this using pure javascript?

Look, if you want to make a professional web application, you need to first think about these three basic concerns:

Performance
Accessibility
Best Practices

So, let's talk about performance:

Browser engineers recommend pages contain fewer than ~1,500 DOM nodes. The sweet spot is a tree depth < 32 elements and fewer than 60 children/parent element. A large DOM can increase memory usage, cause longer style calculations, and produce costly layout reflows. Learn more about this here.
QCObjects was designed thinking in this. That's why you can append an object into the DOM tree making possible to rebuild nested components on the fly. This will reduce considerably the depth of DOM nodes in your PWA.

To increase performance, you can code a service worker that uses the cache api to work offline instead of fetching the content again and again. QCObjects makes the service worker registration at the load of the PWA, you only need to specify the service worker uri by typing the corresponding CONFIG set.

To increase the performance even more, QCObjects has a Complex Cache Control that allows you to save any object "stringified" to the localStorage and get it back. Components had a built-in cache control based on that complex cache control so you can either leave QCObjects to use cache for all components (Components.cached=true), or set cached property independently for every single component instance.

What about accessibility?

To make your professional PWA accessible, sometimes you need to repeat a lot of code. With QCObjects you can organise your code into components that are loaded in your PWA in runtime. Every component has an isolated building behavior, so you can build and load a component outside the DOM, but even after you do that, you can append the body of a component into the DOM using the append method that QCObjects has injected into the DOM prototype. For example: by this way, you can make a component that contains the PWA information meta tags once filling it with dynamic data. This will make you happy when you want to save the meta information in a server to make changes to a bunch of apps that are already published and you don't want to make a new version only to change the app description.

OK, let's go ahead an do the best practices:

1.- Using a good layout.

With QCObjects you can use any of the most famous CSS3 frameworks to bootstrap your web design. But then, you want to make your own customisations. For that, you can use SourceCSS QCObjects class, that is very useful to import a CSS file in the head of the document "dynamically".

1.- Creating your first application

To make your first PWA application using QCObjects you only need to type this in your console:

> npm i qcobjects-cli

Then, create a directory for your app and enter it:

> mkdir mynewapp && cd mynewapp

Finally, generate the new app template using the cli tool

> sudo qcobjects create mynewapp --pwa

Done.

2.- Serving over HTTP2

Once you've created your application, you can serve it using the qcobjects-server tool installed with the cli tool. Go to the app directory and type:

> qcobjects-server

and press enter.

Then, go to a web browser and navigate to:

https://localhost

3.- Registering a service worker:

To register a service worker using QCObjects you only need to specify the CONFIG setting. In your init.js , put the following line:

        CONFIG.set('serviceWorkerURI','/sw.js');

This means QCObjects will look for /sw.js in the root directory of your app and will register as a service worker. You can use navigator.serviceWorker.ready.then(...) to attach any code after the service worker is loaded.

navigator.serviceWorker.ready.then(function (){
   logger.info('service worker is done');
})

5.- Adding push notifications:

Adapting the official code of Mozilla

  Class('PushNotifications',InheritClass,{
    _new_:function (){
      window.onpush = function(event) {
        console.log(event.data);
        // From here we can write the data to IndexedDB, send it to any open
        // windows, display a notification, etc.
      }

      navigator.serviceWorker.ready.then(
        function(serviceWorkerRegistration) {
          serviceWorkerRegistration.pushManager.subscribe().then(
            function(pushSubscription) {
              console.log(pushSubscription.endpoint);
              // The push subscription details needed by the application
              // server are now available, and can be sent to it using,
              // for example, an XMLHttpRequest.
            }, function(error) {
              // During development it often helps to log errors to the
              // console. In a production environment it might make sense to
              // also report information about errors back to the
              // application server.
              console.log(error);
            }
          );
        });
    }
  })

To activate this class, use the following:

let pushNotifications = New(PushNotifications);

Please let me know how to improve this article in a comment!

Cheers!