Allcancode Platform v5
  • Introduction
  • Getting started
  • Managing projects
    • The list of projects
    • Creating a project
    • Sharing projects with teams
    • Basic project settings
  • Creating UI layouts
    • The container
    • Basic components
    • Creating a component
    • Working with layout properties
    • Working with styling properties
    • Building responsive layouts
  • Writing frontend logic
    • Introducing Blockly
    • Handling data
      • Session
      • Variable
    • Binding inputs to data
    • Binding text to data
    • Visualizing a list
    • Handling events
    • Navigating between pages/screens
    • Sharing data between pages/screens/components
    • Using native components
    • Creating native components
    • Creating a library of functions
  • Creating a backend
    • Defining endpoints
    • Creating a library of backend functions
  • Testing and debugging
    • Previewing a web application
    • Previewing a mobile app
    • The build log
    • The debug panel
  • How-to Guides
    • Sync code with git
      • Sync with GitHub
      • Sync with Gitlab
      • Sync with Bitbucket
    • Publish web applications
      • Publish web apps to Vercel
      • Publish web apps to Netlify
    • Publish mobiles apps
      • Publish mobile apps to stores
      • Publish mobile apps to Expo Go
      • mobile app with Expo
    • Implementing authentication
    • Implementing authorization
    • Supporting multilingual UIs
  • Release Notes
    • Release notes
Powered by GitBook
On this page

Was this helpful?

  1. Writing frontend logic

Introducing Blockly

PreviousBuilding responsive layoutsNextHandling data

Last updated 2 years ago

Was this helpful?

One of the goals of the Allcancode platform is to enable users to build applications using popular frameworks such as Next.js or libraries such as React without having to learn how to use them. We need an abstraction of their concepts and a programming language agnostic of how those concepts are expressed in the respective framework/technology. Our decision was to use a block-based language that allows users to focus on algorithms instead of syntactic sugar and intricacies. In particular, we chose .

Blockly offers fundamental tools such as variables, functions, loops, conditions, and math expressions, data structures such as text (strings of characters in other languages), and lists (arrays or tables in other languages). The following screenshot presents an example of filling a list with five random integers between 0 and 100.

There is a great free online course by Codecademy that will teach you the basics of Blockly:

Blockly imposes no limitations on expressing algorithms however it is too essential to help with frontend logic, complex data structures, etc. To overcome that, the Allcancode platform extends the language by adding different types of blocks, such as those for handling nested objects with data exchanged with backends (APIs). The following screenshot builds a complex data structure and then prints one of its fields (prints end up in the debug panel of the platform and the debug console of the browser (for web apps) or device (for mobile apps).

You can also define your blocks by creating a library of standard functions that can be used within your components' logic or other libraries. A good practice is to separate all calls to the backend into such a library so that you have one place to make changes if something changes in the backend's API.

Blockly by Google
LogoLearn to Code with Blockly | CodecademyCodecademy