Low Code Like a Pro

Written by Mozfet | Published 2018/10/22
Tech Story Tags: programming | low-code | javascript | solution-design | code-like-a-pro

TLDRvia the TL;DR App

While a picture says a thousand words, it cannot tell the whole story, for that you need words. In the same way, using No Code can go some way to getting something basic done quickly, but if you are doing something new and worthwhile, you need to get your hands dirty with some Low Code, else it is Full Code all the way.

Full Code is the traditional way of developing software, it requires extensive software development skills and lots of time, is expensive and requires constant maintenance. Full code is great for those with big bags of money to burn.

No Code is for me-too copycats that want cookie-cutter software, which is fine if you want to have the same dull App like everyone else.

If your business idea is so simple that it can be created without code, then someone has already failed at it, or they are already successful at it, and they may be about to become your competition. So, you should probably come up with a better idea.

Low Code is the middle ground between No Code and Full Code and is a powerful tool to quickly and cheaply create innovative software solutions. Low Code can be used by everyone, not just software developers.

Universal Visual Logic does not Exist

It’s been 40 years since the invention of the computer, and we have still not invented a visual language that is capable of representing high-level logic, and we probably never will.

The problem is so large that people seem to have given up on logic and hope that AI is going to do all the hard thinking for us, if only we were so lucky!

The real truth is that unfortunately, we have to keep on thinking. It defies logic that it is so challenging to write reason down, or some might think. Perhaps that is because logic is true, or is it false, but it usually depends on something.

There are some visual languages used in electronic engineering, such as Ladder Logic- and Logic Gate diagrams which are used to design logic that works with binary signals. These are very handy when working with a binary dataset. However, they are typically useless for high-level logic and performing calculations, and they do not support complex data structures.

Ladder Logic and Boolean Gate Diagrams are not suitable for high-level logic. Image adapted from AllAboutCircuits.com

The challenge of using No Code is also the challenge of creating Visual Logic. The main reason No Code cannot deliver on its promise, is that no universal visual language exists to define logic, just like no camera can take a picture that replaces the need for words. And thus, without resorting to Full Code, the best we can do is to use Low Code.

Visual Logic tools are useful in engineering, but not fit for the job of describing high-level logic, as they cannot handle complex data structures such as numbers, strings, arrays, and objects. You also need a broad background in electronics to understand these diagrams and to create them.

Anyone can write Low Code

The reason that code is always needed is that there an infinite number of sets of conditions that apply in an infinite number of different scenarios, and while there are a large number of recurring patterns, none are universal.

Every novel application needs custom logic at some point. There simply is no logical pattern that covers every scenario to make a drag and drop component out if it.

Often you need a piece of code only once, and sometimes you need it a lot. All you need to know is that you will need some code at some point.

Note that I am saying you need code, I am not saying you need programmers. If you can use a spreadsheet, you should be able to write Low Code, even though you may not be able to develop software.

Being a professional software developer today is not about writing a programming language, and writing code is not the most crucial part of the job. Software development is mostly about the stack, the platforms, data sources, databases, network layers, APIs and security mechanisms and procedures that you use to build client-server software solutions.

Writing small pieces of code, each with a clear purpose is easy, even 8-year-old children can code.

Even 8 year old children can code. Image is a screenshot of Scratch: Coding for Children

That being said, developing a secure, private and scalable cloud and secure payment infrastructure with advanced user interfaces is a job for professionals.

The job of a Low Code platform is to take care of the Stack so that you can get on with the Logic. The Stack includes all the layers of software forming a solution, including the Data Centre, Operating Systems, Web Servers, Database Servers, Client Applications and all the platforms, libraries, security and interfaces that make it tick.

As Low Coder, you should not care about the stack at all and know that it is taken care of. The stack makes the software work, the logic makes it useful and solves a problem. A good stack stays the same while the business logic changes per solution.

Modern Cross Platform Full Stack — Image is a simplified stack of ExpertBox.com, created using LucidChart.com.

The Stack on a Low Code platform is maintained and hosted by professionals so that you do not have to develop software, all you need to do is create logic. In the absence of a universal visual language for logic, this means you need to write code for anything that is new or different or specific to your solution i.e. some Low Code.

It does not take a genius to write a small piece of functional Code. All you need to know is what the inputs are, what the output is, and how to get from the inputs to the output.

The rest is just writing it down. And with the following tried and trusted steps, anyone can write Low Code like a professional.

Requirements and Use Cases

IT usually starts with a problem that needs solving. Typically business Analysts or Solution Architects collect requirements and design Use Cases, to illustrate how different users would interact with a system. This defines the functionality of the system, what it should do, and helps to create an idea of how much work is involved to build it.

Requirements and Use Cases are typically refined into system architectures, flowcharts, state diagrams, class diagrams and message flows, which ultimately lead to Code and systems that behave as the Use Case intended.

With Low Code, the focus is on small bits of functionality at a time and usually, flowcharts are sufficient design, which means that system architecture, system diagrams, class diagrams, state diagrams, and sequence diagrams are typically not needed because a good Low Code platform would have taken care of that.

Let us assume we want to build a solution that automatically congratulates a person on their birthday. The person that interacts with the system is called a user, and there can be many types of human and system users using a solution. In this example, every user is a regular natural person with a birthdate.

Happy Birthday Use Case Diagram. Image created using LucidChart.

The solution will need some way of communicating with the user, collecting information from, and transmitting information, the user; which is performed via a user interface and provided by your favorite Low Code platform (see Full Stack below).

The only thing needed to complete the solution is some Low Code to generate the message.

Flowcharts

Flowcharts are great tools for designing software and process flows. Every computer programmer or business analyst knows how to read and create flowcharts. They are widely understood and are often used as a communication tool by technical people, to explain how things work, to non-technical people.

Flowcharts are handy to design flows, relative to conditional logic. However, they do not contain visual components for defining logic and often make use of high-level Pseudo Code (see below) inside flowchart components, like decision nodes and loops.

Flow Chart for Happy Birthday Use Case. Image created using Gliffy.

A flowchart is usually interpretable by humans, meaning if you gave a complete stranger this flowchart, they should understand how the process works in general. It sets the logical boundaries using expressions and defines the flow with decision nodes, processes, and arrows.

Flowcharts typically focus on functionality, and you may often find that some details are omitted. For example in the diagram above, it is not clear where the birthdate of the user comes from. That is ok for now, as it all becomes clear by using some Pseudo-code after using Low Code.

Pseudo Code

When coding new functionality, it is a good idea to start with Pseudo Code created from a flowchart. Psuedo Code makes it easier to structure the code and to start identifying what logic and data structures are needed, to process inputs into outputs.

purpose - determine a message based on dateinput - birthday - the value from the user interfaceinput - today - today's dateuses - momentjs to make working with dates simplerreturns - a customized birthday messagedo not calculate for futureinput validationget today and birthdate as momentsformat today and birthdate as stringsif birthday  assign message variable with default  if it is the user’s birthday today    calculate age       if user if less than 40 years old      set message to 'Congratulations on your birthday'  else    set message to 'Sorry to hear you aged another year'    return message

Pseudo means almost, or fake, or kind of in-between. It’s like code, but not quite. It is not as rigid or precise as real code, but also not as soft as paragraphs of prose.

There is no real standard for pseudo code, and we all do it our own way. It is how code would look like if it was written for people and not machines. To me, it is just indented English, and I see it as the picture of a flowchart in words.

Note how Pseudo Code is often more detailed and structured and resembles the actual details of the project rather than a flowchart, and the Code is already starting to take on a structure.

Pseudo Code is often where the real magic happens, and has a benefit that you can use it to frame your code, and you can use it for comments as well.

JavaScript

There are an estimated 21 million software developers in the world and amongst them, JavaScript is the most popular high-level computer language for the 8th year in a row.

The point is that if 21 million people can develop software professionally, then almost anyone should be able to do some of it, and the best way would be to use JavaScript.

JavaScript is simple to use and easy to master the basics needed for Low Code purposes, yet it is also powerful and complex in that it can take years to master the entire language.

In addition to the accessibility of the language, there is a vast open source community of libraries and platforms, which means there is usually an example of the Code you need. If you do get stuck, just do what software developers do, Google it or head over to Stack Overflow, a vast community of developers helping each other solving problems.

Most Low Code snippets deal with conditional logic, expressions, dates, lists, mathematics, formatting, search, and storage. These basic operations are easy to master in JavaScript, especially when using guides like:

I usually start by taking my Pseudo Code as comments and frame the code structure according to indent using functions, variables, and flow structures, before fleshing it out into a fully functional Low Code.

This framing step creates a valid JavaScript Code. However, it is still missing the actual logic and does not do anything useful yet. This approach is also very helpful when using test-driven development, to unit test, while you Code, incrementally adding the logic.

// purpose - determine a message based on date// input - birthday - the value from the user interface// input - today - today's date// uses - momentjs to make working with dates simpler// returns - a customized birthday message

// do not calculate for futureif (data.options.isFuture) {  return 'fake';}

// input validationif () {  return '.';}

// get today and birthdate as momentsvar timeZone = undefined;var todayMoment = undefined;var birthMoment = undefined;

// format today and birthdate as stringsvar todayString = 'MMDD';var birthString = 'MMDD';var isBirthday = todayString === birthString;

// if birthdayif () {  return true;}

// assign message variable with defaultvar message = '';

// if it is the user’s birthday todayif (isBirthday) {

  // calculate age  var age = 0;     // if user if less than 40 years old  if (age < 40) {        // set message to 'Congratulations on your birthday'    message = '';  }     // else  else {

    //set message to 'Sorry to hear you aged another year'    message = '';  }}

// return messagereturn message;

JavaScript dates are a little trickier than simple natural numbers, the current date being a number of milliseconds, days, months, different time zones, and all at the same time. We also have to consider that time is relative to the user, and that the user is possibly in another time zone than the server, where the calculation is performed.

Our Happy Birthday logic is only concerned about days months and years in order to calculate the age of a human being. So rather than going crazy with mathematics on raw dates, we use Momentjs to make dealing with time, date and duration easy.

// purpose - determine a message based on date// input - birthday - the value from the user interface// input - today - today's date// uses - momentjs to make working with dates simpler// returns - a customized birthday message

// do not calculate for futureif (data.options.isFuture) {  return 'fake';}

// input validationif (!todayDate || !birthDate) {  return 'There is a 1/365 chance it is your birthday today.';}

// get today and birthdate as momentsvar timeZone = data.session.region.timeZone;var todayMoment = api.moment.tz(todayDate, timeZone);

var birthMoment = api.moment.tz(birthDate, timeZone);

// format today and birthdate as stringsvar todayString = todayMoment.format('MMDD');var birthString = birthMoment.format('MMDD');var isBirthday = todayString === birthString;

// if today is after birthif (birthMoment.isAfter(todayMoment)) {  return 'You are not born yet.';}

// assign message variable with defaultvar message = 'Today is not your birthday.';

// if it is the user’s birthday todayif (isBirthday) {

  // calculate age  var age = todayMoment.year() - birthMoment.year();     // if user if less than 40 years old  if (age < 40) {        // set message to 'Congratulations on your birthday'    message = 'Congratulations on your birthday!';  }     // else  else {

    //set message to 'Sorry to hear you aged another year'    message = 'Sorry to hear you aged another year!';  }}

// return messagereturn message;

None of us are perfect, and perhaps you made a mistake somewhere, that’s alright, there are plenty of excellent free tools out there to help you test snippets of JavaScript.

Testing in itself is considered by many to be a science and too broad a topic to cover here, but here is how I tested the Low Code above using jsfiddle.net.

That is all there is to it. You are done with your professional grade Low Code. Problem solved.

By this time your logic is sound and does what it is designed to do. All you need now is a good solid Stack and you’re ready to go.

That was Easy! Image Source ExpertBox.com.

Do you Want a Full Stack with That?

Run the Low Code example (above), or your own Low Code, on any device, for free. Here is a video of how to strap the Happy Birthday Low Code to a cross-platform responsive material design GUI in less than two and a half minutes, for free.

You can interact and inspect the design of the Happy Birthday Construct in real time.

Take your Low Code everywhere instantly with our (free) Full Cross Platform Stack on ExpertBox.com.


Written by Mozfet | Cross Platform Full Stack Developer, Payments and Security Expert, Entrepreneur.
Published by HackerNoon on 2018/10/22