connect-platform-test

<!doctype html> <html> <head> <title>Connect Platform</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://fonts.googleapis.com/css?family=Didact+Gothic" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script> <link href="assets/index.css" rel="stylesheet"> <script src="assets/index.js"></script> </head> <body> <script> hljs.initHighlightingOnLoad(); </script> <img class="carbon" src="assets/carbon.svg"/> <section id="intro" class="full"> <div> <img src="assets/logo.svg" class="logo"/> <div class="small"> I hate it that building API micro-services isn't as easy as it should be, specifically as most of the time extremely complex logic or computation isn't involved. I believe that this stems from the wrong tools we use to represent micro-service logic right now, and aim to change that with this project. </div> <br> <a onclick="scrollToSection($('#idea'))">read on</a> <a href="https://github.com/loreanvictor/connect-platform" target="_blank"> view on github </a> </div> </section> <section id="idea"> <h1>what is the idea?</h1> <div class="small"> the main idea is to have a panel for developing microservice APIs that looks like this: </div> <br/> <div class="video-container"> <iframe class="video" width="xxx" height="xxx" src="https://www.youtube-nocookie.com/embed/CXmPXbjY6EQ?vq=hd720" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> </div> <br/> <a onclick="scrollToSection($('#intuition'))">hmmm ...</a> </section> <section id="intuition" class="full"> <div> <h1>cool, but why?</h1> <div class="small"> I see two main reasons that make development of API micro-services more complicated than what they should be. First one is, that web-service logic is essentially asynchronous, which results in non-linear execution flows, while we are representing such flows in an extremely linear fashion, that is, a sequence of characters. </div> <br/> <div class="small"> So, we do this: </div> <div> <pre><code class="javascript"> doA().then(function(outA) { doB(outA).then(function(outB) { doC(outB); }); }); </code></pre> </div> <div class="small"> instead of this: </div> <br/> </div> <a class="img" href="assets/shot1.png" target="_blank"> <img src="assets/shot1.png" width="100%"/> </a> <div> <br/> <div class="small"> which specifically gets worse when the logical flow really gets non-linear: </div> <div> <pre><code class="javascript"> doA().then(function(outA) { Promise.all([ new Promise(function(resolve) { doB(outA).then(function(outB) { doD(outB).then(function(outD) { resolve(outD); }); }); }), new Promise(function(resolve) { doC(outA).then(function(outC) { doE(outC).then(function(outE) { resolve(outE); }); }); }) ]).then(function(values) { doF(values[0], values[1]); }); }); </code></pre> </div> <div class="small"> compared to this: </div> <br/> </div> <a class="img" href="assets/shot2.png" target="_blank"> <img src="assets/shot2.png" width="100%"/> </a> <div> <br/> <div class="small"> pretty obvious what we are doing wrong, right? </div> <br/> <a onclick="scrollToSection($('#seperation'))">i guess so ...</a> </div> </section> <section id="seperation"> <div> <h1>so whats the other reason?</h1> <div class="small"> for elaborating on the second reason, you should first get familiar with two different kind of logic used for describing products (in terms of programming them mainly): <h1><span class="hl">micrologic</span></h1> which is the kind of logic programmers understand and love. this is low-scope logic, probably not specific to the application domain of the product. imagine a code that sends an email, does a query in database, and greatly differs from <h1><span class="hl">macrologic</span></h1> which is the larger-scope logic of the product. think user journey, process analysis, or however context a product designer/manager/owner/whatever might like to describe the product. this goes far less into details, as this cares not for example on how an email is sent, but that it does get sent after some specific thing happens. <br/><br/> based on my experience, mixing these two is the other key reason that developing backend logic (which is most of the time the main product logic), or product logic in a more general sense, is an expensive and time-consuming task. programmers are comfortable doing <span class="hl">micrologic</span>, but when it comes to <span class="hl">macrologic</span>, it falls upon product managers/designers or people responsible for that kind of thing in team. they need to come up with a description that they cannot test since they cannot implement actually, then they need to communicate that description to developers, subsequently developers need to again describe their understanding of that description to machine language (whatever programming language they are using). it is just then that the whole thing can be tested and iterated upon. miscommunications easily make up for a lot of effort that goes in to this process, and generally it is rather obvious why this is a lazy and time-consuming process. <br/><br/> so the idea here is to avert that. the <span class="hl">CONNECT platform</span> is not there to replace traditional programming 100%. it is a tool for describing and easily testing <span class="hl">macrologic</span>, so it naturally requires far less technical knowledge than traditional programming and can be operated by people with little to no prior technical knowledge. it also heavily relies on extensibility of native codes, as that is how the <span class="hl">micrologic</span> gets injected and added to the logic. <br/><br/> </div> <a onclick="scrollToSection($('#farewell'))">interesting ...</a> </div> </section> <section class="full" id="farewell"> <div> <h1>interested?</h1> <div class="small"> this is a really early stage project. I have not tested this in production environment and the platform is currently really feature-empty. of-course, if you still want to give it a test run and/or maybe even contribute, simply do the following: </div> <br/> <div> <pre><code class="bash"> # clone from git git clone https://github.com/loreanvictor/connect-platform.git # go to the directory cd connect cd platform # install dependencies npm install # go to panel directory and install its dependencies cd panel npm install # build the panel npm run angular-build # go back and start the project cd .. npm start </code></pre> </div> <div class="sticky-contacts"> <a class="circle sticky-contact" href="https://twitter.com/lorean_victor/" target="_blank"> <img src="assets/twitter.svg"/> </a> <a class="circle sticky-contact" href="https://github.com/loreanvictor/connect-platform" target="_blank"> <img src="assets/github.svg"/> </a> <a class="circle sticky-contact" href="https://www.linkedin.com/in/eugeneghanizadeh" target="_blank"> <img src="assets/linkedin.svg"/> </a> </div> </div> </section> </body> </html>