App development has stagnated between two extremes: over-simplified & restrictive drag-and-drop platforms, and traditional (and somewhat tedious) native app programming. Here's how we're trying to bridge the gap with completely customizable 'visual coding' that allows you to skip over writing simple logic and scripts, while still allowing total control & customization.









Visual coding blog post header



When learning to develop in a new language or on a new platform there's never a shortage of barriers to entry. First, you've got syntax and the language's "big ideas." After that, you'll get the "pleasure" of spending hours and hours (and hours and hours and hours) learning how to use its built-in frameworks and functions.  It's a predictable, necessary evil of learning to create something new.  






As a developer who's worked primarily with web development for many years now, I remember struggling when I ran into Objective-C for the first time. The syntax was strange and at odds with other languages I'd learned, and that was just the tip of the iceberg.


You've probably been there:  Hunting down resources every time you hit a bump in the road, spending more time on Youtube tutorials and reference sites than within your actual development environment.

Plus, if you're anything like me, your first creations in a new language leave a lot to be desired; you get to feel like a noob all over again.

My less-than-optimal first clash with Objective-C was about 10 years ago now, but you know what?  It's still the reality of learning new languages that most people in my industry exist in.  Many app ideas get made only through blood, sweat, tears, and an obscene number of hours spent hunting down other people's code snippets and stitching them together.
 

Me learning a new programming language, even after more than a decade of experience. 
Alright, pardon my long pre-amble, but it sets up something important:  Our entire mission at Aquro has been predicated on changing this reality, especially as we enter a time period where developers left, right, and center are shifting their attention to mobile app creation.  How could we create a platform for development that didn't require weeks and weeks of study to learn, but that also still left devs with complete control over the customization and behavior of their apps?

We looked at the solutions available, briefly shook our heads, and then put those heads down at our desks and worked until we'd developed what we like to call 'Visual Coding'.

The basic concept is to create apps using ready-to-use coding blocks that have very specific built-in tasks, which you can then visually connect in a flow chart.  These blocks can be combined with your own HTML, CSS, and JavaScript as well, so any functionality you can't quite get right with the pre-written scripts, you'll be able to execute yourself with web dev languages.  When you're done or when you need to release an update, our hardware compiles and packages your app in a native shell ready to roll out on both the iOS App Store and Android's Google Play.


Lets walk through what a simple example of this might look like:

Let's say we want to create a script that checks if the sum of two values are equal to 10.   If they are, you want the app to show a message to the user.  Bear with me, I know we're starting really simple here.

The steps needed to accomplish this would be...
1. Summarizing the two values
2. Checking if the sum is equal to them
3. Displaying a message

In just a few seconds we can use visual coding to create the progression, and take a few more minutes to customize our values and conditions:
 visual coding blog post screenshot 

A quick glance will tell you that the blocks above are all set to accomplish the simple sequence we just specified.  

We can also see that the "Message.Show" block will only be executed if the values compared in the Condition.IF step equal our desired values, as the arrow to the message block can only come from the Condition.IF block's "Equal" section (and we could go on from here to very easily setup a different reaction should the values NOT be equal).

Once our flowchart is designed, we simply have to configure the values and messages our blocks will handle. For example the Numeric.Add block needs to know which two numbers to add. This is done by double clicking on the coding block and then mapping values from elsewhere in our app to appropriate fields in the function.  
Image2



In the above example I’ve connected the text field named Number1 to the Value1 parameter of the coding block and the text field named Number2 to the Value2 parameter of the coding block.

I have also connected the Result value from the coding block to a variable named "sum". This variable will then be used later in our script when checking against the value of 10.


In the same way we can build scripts that execute more advanced tasks such as getting the GPS position, taking a photo or storing data in our backend - all made without having to learn any specific coding syntax or, for that matter, writing a single line of code.

Already built into Aquro are over 100 ready-to-use coding blocks, but, again, you may at any time add your own blocks that execute your custom JavaScript code (and save them for use on other projects on your account).  Later on, we'd even love to open up a sharing marketplace where users can share and use app elements and scripts that other users have created.
And that's just one of the many pieces of the puzzle we're working hard to add - there's a lot of work to be done, to put it lightly!



That said, here are a couple benefits we're happy to tout today (even for those who are already experienced developers):

The visual coding system we've created...

  • Helps you save a lot of time. You can reuse all of your coding blocks time and time again. Plus, most of the time you'll be able to use pre-written elements from the get-go.
  • Makes your code will be accessible and easier to explain to and be understood by those around you.  No more need for excessive commenting and explaining technical peculiarities of code to other departments or management.
  • Eliminates stupid typos. Coding blocks are connected by arrows, not syntax, greatly reducing the chances that you'll run into bugs created by typos or silly mistakes.


Plus, let's be real: writing simple logic is boring and time-consuming, and we think it's good to work in a dev environment that minimizes the boring and the time consuming.

Finally, you won’t have to remember (and correctly spell) various actions and values to call on them. Instead, Aquro categorizes and organizes everything you make into an easy-to-see tree view.



We won't claim to be perfect, but we're pretty darn proud of what we've created and look forward to helping to change how app development is approached in the near future.

Oh yeah, and you always try out Aquro for your own app project, if you're so-inclined ;)

About the author
Johan is our lead developer and has extensive experience from product development. If someone knows about MADP it's Johan!

Johan Nordström
+46 (0)8-124 506 10
johan.nordstrom@aquro.com