QCObjects

qcobjects

Hey Hackers! I’m Jean Machuca and I’m the Author & Founder @ QCObjects. First of all, I’d like to say a huge thank you to the community for recognizing QCObjects as the winner of: HackerNoon Startups of the Year 2021: : SEE THE AWARD PAGE CLICK HERE TO CHECK OUT THE AWARD If you have made a video acceptance speech on YouTube  (whether a comedic one or a serious one), please post the link here: tasteful Click here to check out our new demo video Reporter: What does it mean for you to win this title? HackerNoon This is a recognition to the effort of the people who have worked on the team of QCObjects, the people who have contributed to the open-source, but it is also a recognition to the thousands of enterprise application developers around the world that are whiling to change their mindset and looking to find new ways to code for large scale projects. It is also important to recognize the talent in the Latam region for high-tech projects. How do you or your company intend to embrace the responsibility of this title in 2022? This is a huge responsibility as there is a rising number of amazing new startups coming on from Chile and Latam. What I want to do is pave the path for these startups to show up somehow. What are some of the goals you’re looking forward to accomplishing in 2022 (whether it be through company initiatives or your personal journey)? I want QCObjects to become the engine of a new world-class ecosystem of enterprise applications. This is a long way to go. In 2022 I’ll continue to contribute to the open-source with new tools and libraries that open more possibilities for creative people. As you look at the variety of concerning trends in the world around you, what solutions can you think of? Name three trends and three solutions. Be as brief or as detailed as you like. I think Autonomous APIs are becoming a huge trend. This magical idea of that an artificial intelligence could someday and somehow code an API of APIs that are working together for a common goal, you know… is becoming a bit real. I guess robotics programming interfaces (RAPID) and biometrics applications programming interfaces (BioAPI) are the next steps (they have always been). If you can code an API that could control a robot, you could also code an API for a microchip, then you could install that microchip inside vital tissue, probably making some signals to skin nerves. You could make sequences to these signals. You know… to code brains… some guy who is dreaming on Mars is already thinking in that. I think that particular idea of the future is not very far from now. In fact, I think in the next couple of years we will be talking a lot about bioethics. After participating in this journey, is there anything that you would like the team to know? HackerNoon I’m human. I’m not perfect. What is something special about you or your company that you’ve rarely had the chance to properly share but really wanted to? (Give this one a proper think, I’ll know if you didn’t!) I’ve coded my first algorithm without a computer. I did it with a pen on a piece of paper in a math class when I was 13th y/o. I made an asymmetric maze and I drew a set of triangles and circles positioned on it. When you passed through the maze, some of the triangles and circles were represented by a number or a letter. Together, they represented a hidden code. Some people could solve the maze, and some others could solve the math involved. The teacher found me drawing during his class and called my parents to punish me by not paying attention in class. What song or music album are you currently enjoying? I secretly love a Norwegian singer called Astrid S. She has an acoustic voice that is amazing at the time it is relaxing and rhythmic. I also enjoy a lot the epic music of Audiomachine. What are some concepts you wish people knew more about? I wish people to spend more time understanding algorithms and patterns. These concepts could change your perception of life and reality in a way that gives you some extra brainpower. Is there anything else you’d like me to know? It can be anything. If you code JavaScript, learn QCObjects framework. It is free and open-source! Thank you for everything that you do! – Team. HackerNoon P.S. If you enjoy getting interviewed (AKA, the ol’ intellectual stimulation, check out some more interviews !) here For more information: Read about the Noonies . To see all of the winners you may visit , pick any award, and view the name that appears at the top. Or follow for posts with the list of names released over the course of the week of February 14, 2022. here this site this account Read the FAQs about or . To see all of the winners you may visit , pick any city and view the name that appears at the top. Or follow for posts with the list of names released over the course of the week of February 14, 2022. Startups here here this site this account Thank you to all of our sponsors! We truly appreciate your contribution to the tech world and thus the future! : Startups , , , , , , , , , , Blockster Brex FreeCodeCamp LaunchDarkly Coil Udacity Udemy Vercel Asia Pacific Transgender Network Bybit Everscale Network : Noonies The Noonies Awards are sponsored by: , , and hosted by: Bybit Avast TECH Domains HackerNoon

Autonomous APIs are the Future - Interview with Jean Machuca, Founder, QCObjects

Here are some recommended settings for a good result doing your first steps creating a PWA using : QCObjects Front-End settings: Using QCObjects in the front-end will let you tweak a set of options that are useful depending on your needs. The following settings can be set in any JS file at any time of execution. But some of them are gonna work only if you set them up before the building process of the components stack. To do that, just place a script tag at the end of the body of your main HTML file, either placing the code straight away into the script content or putting it in a separate file called init.js (we strongly recommend you to do the second option, as you can have a better approach if you use a service worker). Below are the front end recommended settings for your progressive web app (PWAs): The relative Import Path: Here is a very important setting for your progressive web app. So many times I have heard developers ask... where do I put my related custom coded packages? QCObjects by default will try to find my front-end packages under the same folder I have placed my index.html, but... What happens if I have to code a high scalable app and have to place the common custom packages into a separate folder, because of I gonna use this folder as a symlink into a separate volume that is outside my app container? Well, here is the answer: CONFIG.set( , ); 'relativeImportPath' 'js/packages/' Setting the value, you can tell QCObjects to find your front-end packages in the folder you have specified. And then, you can symlink this folder to another external volume or whatever you mind to do, I don't know, probably just to organise better your stuff. relativeImportPath The components Base Path Same thing applies to the templates of components. A lot of developers are asking what to do if I have to code the corporate component templates once! Just once! And NOT copying from one app to another app every time I deploy a new app? Well, just set this: CONFIG.set( , ); 'componentsBasePath' 'templates/components/' And then you can make a symlink to templates/components or whatever you have set up in this value, pointing to an external volume of your container. That external volume will be put into every single new container app you done, and voila! You have common component templates for every app! And they are absolutely behavioural independent. As additional information I can recommend you to study configMaps with Kubernetes, that is a good solution to apply in conjunction of separating folders for common uses in external volumes. Read some suff and let me know if after you finish your head is still rounded 🤪. here The delay for ready: Another good practice is to set the delay that will happen before the Ready process is started. As QCObjects has a very advanced way to handle the Ready events, I mean, when you use the Ready() function you're not just using a wrapper of the original window.ready event (as it was used to be in an older framework that I will not tell you the name but it starts with "J" and "Q" 😛). By example, if you use QCObjects over a PhoneGap app, the function of QCObjets will also handle the event simultaneously, and it will be executed ONLY after the time of delay for ready has past. But, what on earth is this useful for? Good question... I don't really know 😝 but I can imagine that some day you'll gonna have some particular issue with some third party script blocking your entire script flow and you gonna have the need of apply some delay to the start processes. Ready() "deviceready" Default value is cero (0), but in the QCObjects New App template (used with the CLI tool to create your new PWAs), is set to One (1). What is better? You tell me 🤷‍♂️🤷‍♀️ CONFIG.set( , ); 'delayForReady' 1 // delay to wait before executing the first ready event, it includes imports Preserving the Component Body Tag during the components creation: Cool, I can set to "preserveComponentBodyTag off! Ok, what is this for? Ok this seems to be not doing something very significant for the behaviour of our app. No, my friend, you're completely misunderstanding the purpose of life 🧑‍🎓. I'll tell you something about behaviour... If a component doesn't have a body, how the hell it will work? Well, in QCObjects it will work 🧑‍🏫, but different. In tech hands words, setting this: CONFIG.set( , ); 'preserveComponentBodyTag' false Will cause your tag have a default body with "nothing", and when I say nothing, I mean . So the component stack builder process will fill up the body with the template content without the need of an . Understood? So, forget about this kind of stuff: <component> nothing enclosing tag - Parse : Adjacent JSX elements must be wrapped an enclosing tag Error in This will not happen here! Because this is not JSX nor whatever other kind of weird thing you might want to have to put some sugar in your coffee. This is PURE JavaScript (thanks ! ) Brendan Because of QCObjects is doing a real component building process, that is running runtime! And it doesn't have the need to enclose a body inside of a fake DOM element, it uses the real DOM. But if you need to enclose your component because you feel confortable with that, you can still use an autogenerated tag is placed for you by the component stack building process when you set this value with 🧑‍🍳. <componentBody> true Using a config.json file as a config service Oh! Ok, this is gonna blow your mind a little bit. You can use all of these settings loaded from an external file, that you can put either in an external volume (as I explained before ) or if you are deploying your progressive web app using the QCObjects HTTP2 Built-In Server (I know the name is quite large) you can also set a config.json in the backend side and use the config encryption built-in micro-service to encrypt all front-end settings, so you can protect all the sensitive data you have to use in the front-end side. Take it easy, be quiet! I'll do a special tutorial just to do that step. CONFIG.set( , ); 'useConfigService' false // If this is true, settings will be loaded from config.json Setting the routing way for the dynamic component routings handler. Cool, what is this? Ok, I'll explain you in a moment, I'll just do some stuff first... just kidding ! In the front-end side, you have three ways to handle routings (mmm... not really, you have thousands since you can use regular expressions). By the way, the browser has three ways to understand how to point your routings (better?): 1) Pointing by using hashes or hashtags. I'm talking about #this #thing, yes, the #hashtag or old fashioned #anchor that you have used thousands of years ago in the links ! In QCObjects, if you make a routing component that is having some set like this: < = > component name "loading-routing" < = = > routing path "#page1" name "mypage1" </ > routing < = = > routing path "#page2" name "mypage2" </ > routing < = = > routing path "#page3" name "mypage3" </ > routing </ > component And in your CONFIG values you have: CONFIG.set( , ); 'routingWay' 'hash' 2) If you point your page index.html to an anchor link #page1 (like index.html#page1 or index.html#page1?foo=bar or index.html?foo=bar#page1, I mean, you use an anchor right? you know what I'm talking about), the component stack builder will try to find a templates that matches the name attribute in the routing (by example: "mypage1" that could be a mypage1.tpl.html file in your templates/components folder ) Ok, but I'm not using anchor dude! I'd like to use only the raw path, because I've learned that I can handle my single page app even if I use raw paths with QCObjects HTTP2 Built-In Server, so... what if I set all my routings like this: < = > component name "loading-routing" < = = > routing path "^/page1$" name "mypage1" </ > routing < = = > routing path "^/page2$" name "mypage2" </ > routing < = = > routing path "^/page3$" name "mypage3" </ > routing </ > component OK, OK, OK! Your code isn't broken bro! You have to calm down! Because QCObjects is trying to find an #anchor with this path, that obviously will not work. To handle in the right way this kind of thing, you can set the ! Wow! I've just explained it in a bunch of lines! (you got it, advanced programming is not easy as they've sold you bro! ). But coming back, you can set up the value to routingWay routingWay "path" CONFIG.set( , ); 'routingWay' 'path' The above will let to QCObjects to match paths like this: https://example.com/page1 https://example.com/page2 https://example.com/page3 Take in consideration that QCObjects will do it whenever is possible, because some servers are not capable to do that. If you're going to use this set of links, I highly recommend you to deploy your PWA over QCObjects HTTP2 Built-In Server that is supporting that behaviour as native. 3) You can also do links like this: https://example.com/index.html?page1 https://example.com/index.html?page2 https://example.com/index.html?page3 I personally don't recommend you to do that, because it is agains almost any standard, but If you are not in a chance to choice because you're working in on a legacy app or something... well, you can set the value to routingWay "search" CONFIG.set( , ); 'routingWay' 'path' Use the SDK Yes, please, use it! It's very useful! And it's gonna be more day by day ! CONFIG.set( , ); 'useSDK' true // it is recommended to use the SDK that is dynamically loaded, but you can chose not to load it Use the local SDK By default, the SDK is loaded from the QCObjects Official CDN url. If your app is private and have not access to the internet (I can't imagine why because it's a web app), you can set up to use the SDK from the relative path in your project. CONFIG.set( , ); 'useLocalSDK' false // on the frontend side you can chose whether to load the SDK from sdk.qcobjects.dev or from your local website. Default is false Setting the templates file extension: To set the file extension to locate the template files, you can do it by using CONFIG or on the Class definition of the custom component. I recommend you to standardise your code bro, use the CONFIG and the same file extension for every single component. Then, if template name will be always and your code will not become an "spaghetti". component.name = 'main' main.tpl.html CONFIG.set( , ); 'tplextension' 'tpl.html' So: < = > component name "main" </ > component Will try to find a inside your folder. main.tpl.html templates/components What is the asynchronousImportsLoad setting? When I was coding QCObjects, I was asking to myself the same question, what is asynchronous load of imports? Well, In QCObjects that means that all the internal "script" elements that QCObjects will create to load the imports will have the attribute set with a value of . And each browser will interpret that as they want! async true By convention, it is recommended to load all the script elements in your page in async mode, but some times you wont do that. And the most of browsers don't really care. My conclusion, by default is cero (0) but I recommend you to always set this true bro, seriously. You're not passing the Audit tests of Chrome if you don't do that. CONFIG.set( , ); 'asynchronousImportsLoad' true Setting the service worker URI Good, we are almost done, now we need a service worker that applies a cache or something innovative for our new app. Cool, but I have to register the service worker just in time, not before, not after, everything is loaded. How on earth is it supposed to be done? Don't worry bro, QCObjects is making this monkey job for you. You just need to specify where is the service worker located. CONFIG.set( , ); 'serviceWorkerURI' '/sw.js' //QCObjects will register an launch this service worker automatically to work offline I hope the explanation of this tutorial wasn't very large (that's a lie, of course I know it's large) but I hope you've enjoyed it as much as I enjoy the huge amount of time I saved every time I build a new progressive web app using QCObjects. Cheers! Previously published at https://devblog.qcobjects.org/recommended-front-end-settings-for-your-pwa-using-qcobjects-ck8zbjdc301kjmys10xxpz7td

Best Front-End Settings To Create a PWA [QCObjects Edition]

What is a Shadow DOM (shadow tree) According to Mozilla Developer Network (MDN), a shadow tree is a tree of DOM nodes whose topmost node is a shadow root; that is, the topmost node within a shadow DOM. A shadow tree is a hidden set of standard DOM nodes which is attached to a standard DOM node that serves as a host. The hidden nodes are not directly visible using regular DOM functionality, but require the use of a special Shadow DOM API to access. Since the latest version of you can make special components called shadowed components. QCObjects What is a Shadowed Component A shadowed component is a QCObjects Component definition that you can extend to allow the content of your component to be shadowed in the browser. By the moment, QCObjects is only supporting the mode "open" for shadowed components. If you're not familiar yet with the concept of shadow root, shadow DOM or shadow tree, I highly recommend you to read this article of MDN about . Using the Shadow DOM Differences between a Shadowed Component and a Lightning Component A Lightning Component is no other thing that the same component that you're actually familiar with. On the image above, the component has a normal content, called a light DOM. This content is following the same CSS rules and scope that the rest of the document, and as a consequence, the rest of the web app. When you inject a style css rule into the content of this component, this rule will be added in runtime to the document, but it will also override any other rule that maches a conflict. This is useful most of the times, but a mess in particular others. For that particular times when you need to enclose the CSS and markup scope you got to use shadow DOM for content injection in a component. Shadow DOM is local to the component and defines its internal structure, scoped CSS, and encapsulates your implementation details. It can also define how to render markup that's authored by the consumer of your component. The above image is showing a card component that is filled up with shadowed content. To make it easy to handle when and where to put the shadow content, QCObjects has . Shadowed Components Creating Shadowed Component You have two ways to make a shadowed component in QCObjects. The first one, is to declare a component Class definition and use it in the component tag declaration. Class( ,Component,{ : , shadowed: , : , :{}
  }) // in your components package 'ShadowedCardComponent' name 'card' /* If shadowed is true, the DOM will be shadowed, default is false */ true cached false data In the above definition, you can use the hidden static property to let QCObjects to know it has to shadow the DOM of the component body. shadowed Then, you are able to use this definition into your html component tag, like this:  < = > component componentClass "ShadowedCardComponent" </ > component If you don't want to spend a special Class definition for your component, the second option is to set an attribute straight in the component tag declaration. < = = > component name "card" shadowed "true" </ > component Both ways get the same result, the component is built with shadowed DOM, and the styles into it will not follow the global css rules, and the markup inside will have an independent structure. Make sure your shadowed components are only used when needed, and you are not needing to depend on any other lighting component content to make your shadowed components visible and available, as they are completely independent. Also, it is not recommended to use lighting subcomponents into shadowed components, as the purpose of lighting components is to be absolutely available to be injected everywhere and to be interfered by external behaviours, and it is not the same purpose for shadowed components, whose are meant to be restricting the global behaviour in some ways. Both, lighting components and shadowed components are accesible from the global components stack, the main difference is that in the instance of every shadowed component will be a new hidden property (readonly) called , that is replacing the behaviour of the body, now, if you have any elements to add to the component content, you need to use instead of shadowedRoot componentInstance.shadowRoot.appendChild(element) componentInstance.body.append(element) Composition and slots In simple and easy words, is when you dynamically place elements of an object instance into blocks defined on its inherited instance. The resulting composed object instance will be mutating its behaviour as a result of the dynamic blocks mixing. Composition The shadow DOM is a hidden tree, that is allocated in a private scope, and it is populating its content to the light DOM, that is visible and accesible from the global scope. You can place light DOM elements over the shadow DOM elements, mutating the behaviour of the final flattened tree. This is called shadow DOM composition. Light DOM vs Shadow DOM The flattened DOM tree is the content that you can view opening dev tools in your browser. The flattened DOM tree of a Light DOM inside a QCObjects component will be like this: Card Title Card Description < = > component name "card"  < = > div class "card" < = = = > img src "img/avatar.png" alt "Avatar" style "width:100%" < = > div class "container" < > h4 < > b </ > b </ > h4 < > p </ > p </ > div </ > div </ > component On the other hand, a flattened DOM tree of a shadowed component with the exact same template content will be like this: #shadow-root Card Title Card Description < = = > component name "card" shadowed "true"  < = > div class "shadowHost" < = > div class "card" < = = = > img src "img/avatar.png" alt "Avatar" style "width:100%" < = > div class "container" < > h4 < > b </ > b </ > h4 < > p </ > p </ > div </ > div </ > div </ > component In this case, a light component was added dynamically to enclose the shadow DOM, this is always done by QCObjects in order to asure there will be no restrictions by the HTML spec over the different browsers that support shadow DOM. <div> The <slot> element Following the rules of the shadow DOM composition, we can go further defining some slots (a good additional example of the use of slots is in the MDN ). here  < = > div class "card" < = = = > img src "img/avatar.png" alt "Avatar" style "width:100%" < = > div class "container" < > h4 < = > slot name "card_title" </ > slot </ > h4 < = > slot name "card_description" </ > slot </ > div </ > div And Omg! this is becoming a bit more interesting... Card Title Card Description  < = = > component name "card" shadowed "true" < = > b slot "card_title" </ > b < = > p slot "card_description" </ > p </ > component In a shadowed component, you can override the content of the elements using custom blocks. slot And the resulting flattened DOM tree will be like this: #shadow-root Card Title Card Description  < = = > component name "card" shadowed "true"  < = > div class "shadowHost" < = > div class "card" < = = = > img src "img/avatar.png" alt "Avatar" style "width:100%" < = > div class "container" < > h4 < = > b slot "card_title" </ > b </ > h4 < = > p slot "card_description" </ > p </ > div </ > div </ > div </ > component And yes, you should be able to use data injectors too: {{title}} {{description}}  < = = > component name "card" shadowed "true" < = > b slot "card_title" </ > b < = > p slot "card_description" </ > p </ > component Styling In-line context based styles for shadowed components For shadowed components, it is recommended to place your style rules into the dynamic template file, commonly named with the extension , so the styles will be enabled only for the scope of the shadowed component. You can reference the main element of the shadowed DOM by using element in your style declaration, like this: tpl.html :host  < > style { : block; 
} @ url( ); :host display /* Also you can import styles from another css file */ import "./css/components/card.css" </ > style < = > div class "card" < = = = > img src "img/avatar.png" alt "Avatar" style "width:100%" < = > div class "container" < > h4 < = > slot name "card_title" </ > slot </ > h4 < = > slot name "card_description" </ > slot </ > div </ > div Enjoy coding! Previously published at https://devblog.qcobjects.org/shadowed-components-ck94xiira00e7s3s1os7bq7is

Shadowed Components & QCObjects

This article and the repo referenced here is intended to help Data Scientists and data processing professionals to handle and manage data related to the COVID-19 disease outbreak. I hope this information helps researchers to find new ways of analysis to defeat the COVID-10 disease outbreak, as well as empower them to solve more complex math calc using less time. We all know how necessary is to have a trusted analysis of the situation. Today the most accurate data in terms of global information is coming from WHO.int. Unfortunately the use of the API explained here is not licensed on any form so you must use it at your own risk. The repo exposed here, the author and the tools used here are not related to WHO.int. DISCLAIMER: QCObjects Collab is licensed under LGPL v3 and the terms explained in this LICENSE :::notes Keep in mind these are not only numbers, they are lives, they are people that we wished to save but we couldn't! They are people that we want to save using the resulting data of the fault. As a researcher you must keep focus always in data but as a person you also have feelings and a soul. Please remember that when you show your analysis to the public. ::: Connecting to the API of WHO.int The API of WHO.int used on this repo has public access and it is not licensed in any form. You have to use it at your own risk, with no warranty of uptime. Try not to abuse of the requests made to this API, it is recommended to only do a request once a day and save the response to a temporary file to not overuse and/or cause overload. There is not any individual data or private data of people present here. Please use this information only for research purpose. Connecting to the API and extract data To connect to the API using cURL, create a shell file named and put inside the following code: ./get-covid-19-data.sh curl 'https://dashboards-dev.sprinklr.com/data/9043/global-covid19-who-gis.json' \
  -H 'authority: dashboards-dev.sprinklr.com' \
  -H 'accept: application/json, text/plain, */*' \
  -H 'user-agent: QCObjects Collab for Data Science' \
  -H 'origin: https://covid19.who.int' \
  -H 'sec-fetch-site: cross-site' \
  -H 'sec-fetch-mode: cors' \
  -H 'sec-fetch-dest: empty' \
  -H 'accept-language: es-ES,es;q=0.9,en;q=0.8' \
  -H 'if-none-match: "23ffd2d307702788a8553819a1431d24"' \
  -H 'if-modified-since: Mon, 18 May 2020 01:15:19 GMT' \
  --compressed # file: ./get-covid-19-data.sh download the file ./get-covid-19-data.sh from here https://github.com/jeanmachuca/qcobjects-covid-19/blob/master/get-covid-19-data.sh Installing QCObjects Collab for Data Science To work with the data, you can use that is a Open Source Engine that helps Data Scientists to automate data processing and collaborative analysis tasks. QCObjects Collab for Data Science QCObjects Collab uses a collaborative shell to do advanced math calc using ssh or unix-socket. Installing QCObjects Collab from Docker To use QCObjects Collab from a Docker, you can pull the image from (this is the most stable running solution) quickcorp/qcobjects-collab docker pull -a quickcorp/qcobjects-collab && docker run  -it --name qcobjects-collab --rm -it -p 10300:10300 quickcorp/qcobjects-collab Connecting to QCObjects Collab from external systems You can use a TCP socket to connect yourself to the engine: ssh nc user@ 0.0 .0 .0 0.0 .0 .0 10300 You can also use a Unix Socket to connect yourself to the engine: ssh user@0.0.0.0 nc -U /tmp/qcobjects-unix-socket (change "user" for whatever your username is!) If you are trying to access the server from the same machine you can use the IP 0.0.0.0 or if you're trying to access it from an external network terminal you must use the corresponding IP and default port is 10300. Start QCObjects Collab in your local machine using NPM/NPX To start using QCObjects Collab from your local machine without the need of starting a remote/cloud server, you need to have Node.js installed. Download and install Node.js from . here Once you have installed Node.js, you can use to call QCObjects Collab straight away in your shell console. npx > npx qcobjects-collab Start QCObjects Collab in your local machine using QCObjects If you either own a copy or have installed or you can run QCObjects Collab directly from a command line. QCObjects Community Edition QCObjects Enterprise Edition To install QCObjects just follow the steps here To start QCObjects Collab from a command line, after installing QCObjects, just do this: > qcobjects-collab Processing COVID-19 Data using QCObjects Collab Once you have done the above steps, everything turns easy and handy. Inside the QCObjects Collab session, you can follow these instructions. Run .help to view the available commands and shortcuts > qcobjects-collab QCObjects Collab> .help Run .loadcmd_json command to extract the collected data into a variable You can run the following command to extract the collected data from the response of executing the shell command into a variable stored in memory inside the QCObjects Collab session. ./get-covid-19-data.sh Enter to a QCObjects Collab session and do the following command: QCObjects Collab> .loadcmd_json covid = ./get-covid-19-data.sh The above command will save the response of the API into a global object called . Then you can use this object to process the data and make calc to reduce the result. covid Using examples of data processing The file inside this repo, called contains some quick start examples of processing the data. Here are some explanations of this examples: data-covid-processor.js Helper functions As QCObjects Collab is been written on JavaScript, you can enrich your runtime code using it, by example: creating runtime helper functions attached to the common Array prototype. Two useful functions to process data are (to collect only once for every single value element using ) and (to show a table representing the current list using ) unique objectList.unique() table objectList.table() .prototype.unique = { .filter( self.indexOf(value) === index)} .prototype.table = { .table( ) } //helper functions Array ( ) function return this ( ) => value,index,self Array ( ) function console this Formatting the columns The most efficient way of process a list in JavaScript is using the map function. You can use it into QCObjects Collab to process , and objects (ArrayList and ArrayCollection objects are a part of QCObjects core framework and QCObjects SDK, that are automatically loaded into the QCObjects Collab session). Array ArrayList ArrayCollection The API returns a tree object that contains three separate collections ( , and ) dimensions metrics rows |-- covid
     |-- dimensions
     |-- metrics
     |-- rows To view the content of the variable just enter its name into QCObjects Collab and press . covid Enter QCObjects Collab> covid QCObjects Collab> covid.dimensions QCObjects Collab> covid.metrics QCObjects Collab> covid.rows.slice( , ) 0 10 // only get 10 rows If you concat the elements of and in the same order as they are collected, you can have a column name dictionary. dimensions metrics To create a variable that stores the name of the columns of the COVID-19 WHO API data, do the following: columns columns = [ ].concat(covid.dimensions.map( dimension.name).concat(
  covid.metrics.map( metric.name))) // format columns "" => dimension => metric Changing the structure of the data using the columns collection. You can map and store it into another variable called which will contain the new structure based on . covid.rows data columns data = covid.rows.map( [{}].concat(row).reduce( { .assign(accumulator, {
      [columns[index]]: colData
    })
})) // format data using columns => row ( ) => accumulator, colData, index return Object Get a dictionary of country names from the API collected data To build a dictionary of country names you have to do the following: countries = data.map( d[ ]).sort().unique() // Obtain only unique country names => d "Country" The above code will create a collection with data object mapped with a lambda function (d => d["Country"]) that only returns the property of every element. Then, it will sort and filter the list to return only the unique elements. countries Country Calc the total amount of deaths in the world caused by COVID-19 disease The following code maps the data to only return the Deaths property of every element, then reduces the data to to a signle value containing the total amount of deaths accumulated in the world caused by COVID-19 disease. cumulativeDeaths = data.map( d[ ]).reduce( cumulative + deaths) // reduce the data to get total sum of deaths worldwide => d "Deaths" ( ) => cumulative, deaths Re-usable function to calc deaths by country The following code defines a function called that accepts one parameter with the country value to filter the list, then map the filtered result to only get the property on every element and reduce the list to a single value with the sum. getCumulativeDeathsByCountry Deaths getCumulativeDeathsByCountry = data.filter( d[ ]===country).map( d[ ]).reduce( cumulative + deaths) // a helper function to calculate deaths by country ( ) => country => d "Country" => d "Deaths" ( ) => cumulative, deaths To use this function you can do the following: cumulativeDeathsOfUSA = getCumulativeDeathsByCountry( ) "US" Get the summary of deaths by country The following code will create a single object with the summary of deaths by every country on the data cumulativeDeathsByCountryObject = countries.map( { {[country]:getCumulativeDeathsByCountry(country)}}).reduce ( .assign(prev,current)) // calculate cumulative deaths by every country => country return ( ) => prev,current Object To summarise the data into a list of objects with the pair country -> amount , do the following: cumulativeDeathsByCountry = countries.map( { { :country, :getCumulativeDeathsByCountry(country)}}) // calculate cumulative deaths by every country => country return "Country" "Deaths" orderedDeathsByCountry = cumulativeDeathsByCountry.sort( current.Deaths > prev.Deaths ? : ) // order the list of deaths by country by descendent (most deaths first) ( ) => prev,current 1 -1 You can find a complete example of the data processing in this file: https://github.com/jeanmachuca/qcobjects-covid-19/blob/master/data-covid-processor.js The complete example repo for this tutorial is here: https://github.com/jeanmachuca/qcobjects-covid-19 Wash your hands, keep social distancing... Be safe! Previously published at https://github.com/jeanmachuca/qcobjects-covid-19/blob/master/README.md

How to Process Pandemics Data from WHO.int

It's been a year since the exhibition of QCObjects in the Web Summit and now a lot of people and companies are interested in placing QCObjects at the very core of its enterprise software solution. But why is it? Think for a moment about what is what a CIO of a big company should be looking for... She/he is looking basically for tree main things: To lower costs of enterprise software acquisition To enhance speed in the adoption processes of new technologies To find new sources of income for the company If a CIO isn't looking for any of the things above, she/he is not doing a good job and the company is condemned to fall soon. Because technology is actually the core of any business today. Right? Whether your company sells shoes or it does sell computers or even industrial machine parts, today it's not just about using technology for the better, it's all about technology. And most of the time, your company will have to build its own technologies in order to survive the rude competition out there. Lowering the costs of enterprise software acquisition So, in this search of ways to make your own technology, you (as the CIO of the big company) have to choose a stack of solutions built on software and hardware to enable your platform to achieve innovation that differences your company from others. You hire tech experts and put them in a role of project management, they hire software developers, and in between you need to bring them some tech definitions like the software architecture of your platform, so they can build the modules following the main definitions. And this process isn't just when the company starts as a startup level. It is always needed to be doing by someone like the CIO, and when the company is starting to grow as your big company does, you should relay in software architects to expand your tasks to detail. In this whole process of your role as CIO, if you don't chose the right technologies for your stack, the result isn't only that your doing a bad job, the final result is that the costs of your tech stack will grow to the sky and finally your company will fall in bankrupt as they can't afford to pay the bills to keep running the whole operation, and of course, you'll get fired. Improving the adoption processes of new technology But, to learn a new technology, most of the time is an expensive process. So you have to find a way to spread the word inside your company to get users to adopt the technology better. Because if not, you'll not be allowed to change a comma of the initial tech proposal you made for the company, and if you can't change it, you can't innovate, if you can't innovate, again, the costs of your old fashioned operation processes will rise as you can't build new technologies and applications to improve them, your company will be again in risk of not having the control of the main operation, and as a consequence, you know what happens. Finding new sources of income But, what about when you are running out of ideas to reduce costs in the tech stack? You've fired enough people out of your team, you got only a few full stack developers working on covering the main code support needs of your company. You've lowered the costs to the baseline, so you need something else keep the operation of the company up and running. You need to find a new purpose for the change. You're gonna go to your board and sell them the idea that the business is going well but it needs to be expanded, and using the same core of the technology that your company already owns, they can build new sources of income and your main task will become to find the new pathway, to build a new roadmap to innovate in a completely new product but using the exact same tech stack you're currently running. Right? You can build a new team to help you to develop the new features, you can also find new sources of funding interested to support your company to grow and expand its business. Choosing the right full-stack framework and beating the technical debt But, every task you and your team do, every new idea you and your team have, and every part of any new strategic step you go forward relays in the choice of the right full-stack framework. If you don't do it well, instead of finding ways to lower costs, improving the tech adoption and rise more money to expand the new sources of income you've found for your company; instead of all of this, you'll surely meet a new enemy called "technical debt", and this enemy isn't resting or waiting for your decisions. Technical debt is basically what you or your tech development team have been abandoned -bellow the carpet- of the software application you're doing to ensure speedy releases. And it is dangerous, and it's growing exponentially while the time passes. In the past years, the technical debt has killed more companies than any worldwide economic crisis. I don't need to tech you about the technical debt because probably you've already experienced it inside your current big company, right? The most effective way to reduce the risk of technical debt is to focus in improving the development of the most critical features based on its long-term impact. Based in tree goals/principals: Don't repeat yourselfWrite clean source patterns specifications and documentationSplit your operation in layers That being said, your full-stack framework needs to help you to address these goals Don't repeat yourself This is the very basic principal for the learning of design and source patterns. It means that you should not need to rewrite the exact same line of code every time you make a new application or program. You can and you must reutilise code! But you should not need to rewrite that code to being able to reutilise that. Write clean source patterns specifications and documentation In your big company you need to do a lot of coding for very specific purposes. Not just another landing page or e-commerce store. Sometimes you need to wrap some data from sources that are not databases, and process that data in a new format to display it in different terminals and devices. Your company has a knowledge base platform for documenting everything. It's not enough, you need to document the source, and it's not even enough. Split your operation in layers Your entire operation is a main block, and any department inside of the company has its own needs of functionality, so it should be easy to represent the business as a set of blocks or a block chain. Cool, right? NO. The fact is that a big company as yours or as a bank or a global assurance service is more complex than a single blockchain. It is actually a multi-layer architecture. In a multi-layer architecture there's a large layer that runs across the organisation and does the common functions. For instance, you can run a login micro-service in that layer, or an internal support ticket submit form. You are also leaning some parts of your transversal operation on third party SaaS platforms that have an API documented for your specific needs. So you got a SaaS layer that you can even split it into other sublayers like the API SaaS layer and the SaaS monitoring dashboard layers (as you probably will have more than a dashboard application running to measure the exact same source of data but with different stakeholders). And then, the core of your business. It has a business layer that communicates the third-party APIs and a transport service to standardise the format of your data. Also it has a core legacy layer with the baseline micro-services (by example: process the raw order payload) You don't have the exact same layers as well as you don't have the exact same functionalities on every department in your company, so it's not a blockchain. Choosing the right full-stack framework, what are the alternatives to QCObjects In the process you're understanding the way your big company really works, what is the real function of your role as a CIO, and what is the real architecture model your company has and the way to reduce the risks related to the technical debt, you have to make a choice and get a new tech stack today. Whether to replace the current stack or to integrate the new technology with it. And some current alternatives to build the full stack are: MEAN Stack (MongoDB + Express + Angular + Node) MERN Stack (MongoDB + Express + React + Node) Spring Boot + Bootstrap (Java + JavaScript + JQuery) Laravel + VueJs (PHP + JavaScript) Django + Bootstrap (Python + JavaScript) QCObjects (Pure JavaScript for Front-End and Back-End) The variables of choosing a good full-stack framework I've asked so many developers and CIOs about what are the variables they are measuring to have benefits of a framework. The most of people think that are commonly based on the popularity of the framework and the companies that are currently using that, as if it would be a warranty of something. If you really want to get some benefit from the framework your company is using, the right variables that warrantee the success of building your full-stack are the ones based on performance and the fulfilment of the principals that every CIO must to have in mind (to reduce costs of enterprise software development and acquisition, to ease the adoption of new technologies in the company and to find new sources of income). So let's measure the current alternatives with this variables in mind: Reducing costs of development The average cost of a development of a new application MVP is between 80,000 to 150,000 USD in an AVG time of 10 months for a team of 5 (Team leader + Product Owner + 2 Full Stack Devs + 1 DevOps) To develop a second MVP using the same stack the team as learned before, it will cut the cost in a percent as the team has already developed the main features that are needed in almost every MVP they gonna need. So let's do reduce costs with Angular: To reutilise an Angular component you have to copy the code of the component definition to almost every other place you use it. So you need a full-stack dev with at least 3 years now experience in Angular just to copy and paste something and then rename it. Because it is needed to know the exact place inside of the spaghetti code in the app to pick the code and then paste it in another part that normally will not work well for the first time. Ok, I don't think it is gonna reduce enough cost of the project. Let's do reduce costs using React: I gonna leave this line for the comments Let's do reduce costs using Spring Boot: Spring Boot has a lot of development, a huge community, a bunch of tools to help the source code edition. But if you have to make a small app with a hello world text you need to define the complete MVC pattern that is supposed to be compliant with the principal of inversion of control. And because of it is based in Java, you got almost no control of exceptions. 99% of the code maintenance work in Java corresponds to exceptions that are not from the system hierarchy. So that could be understood as well as only the 1% of the exceptions are enabling code for reutilisation, what is in fact traduced to more hours of development rewriting the exact same thing. I don't think this is gonna reduce enough cost of the project as well. Let's do reduce costs using Laravel + VueJS: Laravel has also a huge development community and VueJS is a raising framework made by Evan You and scaled in a very smart way. You need 2 kind of experts in two worlds that are completely different from each other. One from JavaScript and VueJS and the other one from PHP and Laravel. Split the app into micro-services and for every single team you'll have to have a minimum of two (2) full-stack devs that understand both languages. Let's do reduce costs using Django + Bootstrap: Django is based in Python that is a powerful language. Also it is fast, but day by day the Django architecture is getting complex and it is needed to copy all the models from one project repository to every other to keep consistency with the data handling layer. To be understood, if I change a field name or a field attribute value in the database, the code of almost every application in the company will be broken and the services will shut down. This is increasing costs of maintaining big scale operations in companies using that framework. Also in your team you need a python expert that is not cheap, and you can't escape from javascript as Django is meant only for back-end even with its supper extendable admin panel. Let's do reduce costs using QCObjects: QCObjects is a full stack framework made in pure JavaScript, it is lightweight and flexible, and it is mean for having the back-end and front-end together into the same project. One powerful feature of QCObjects is that you can publish your own app-templates and then you can reutilise them using one single line of code in the CLI. > qcobjects create --custom=myownapptemplate app Just this thing is cutting your initial costs in half and exponentially on every round of innovation where you have to build a new MVP. And in QCObjects Enterprise Edition, you can save your app-templates with private code safe in the QCObjects Enterprise Cloud Platform, that is increasing your security and increasing your infrastructure performance. Easing the adoption of new technologies QCObjects is meant to have the back-end micro-services and the front-end together but not mixed. You have the same syntax for both (back-end and front-end) but you also have compatibility with other old frameworks and technologies. For instance, if you got some mobile app made in Flutter and you need an API, you can use the QCObjects Built-In HTTP2 Server to develop that API. If you have a web app based in Django, you can use QCObjects in the front-end to allow Django to manage dynamic rendering of components. With QCObjects HTTP2 Built-In Server, QCObjects is a huge alternative to Nginx but it also works on Nginx or Apache Web Server. QCObjects HTTP2 Built-In Server is meant to allow developers to include advanced features in their web apps and to have a two way communication within the the front-end with the back-end. Find out more about QCObjects Interceptors and Micro-Services in qcobjects.dev Finding new sources of income With QCObjects you can make app-templates for your company or yourself and you can sell them to others. You can remain the LGPLv3 license of the initial app template or you can change it to another that is compatible with. The LGPLv3 license allows you to privatise some parts of code that are sensitive and you're not enforced to publish everything into the open source scope. Also, you can patent your code and become the owner of it. These benefits that seem to be obvious are not like that using other licenses. I hope you can read this article carefully and take the references of other frameworks as a technical and educational purpose only. The comparisons made here are meant to expand your mind to a new horizon and way of thinking and are objective as much as they can be. Previously published at https://devblog.qcobjects.org/why-you-should-use-qcobjects-as-the-full-stack-framework-for-your-company-ckgy9pere00ve20s1hszh72lo

Stories, News & Mentions about QCOBJECTS

Categories

Trending Topics

Stories, News & Mentions about QCOBJECTS

Qcobjects’s Stories on HackerNoon

Categories

Trending Topics