In this first lesson series you will learn the basic concepts of Noodl.
Every lesson will build on the previous one, and in the end you will have a fully functioning task manager app.
Once you learn these fundamentals and how to combine them you will be able to build powerful web applications.
The building blocks of Noodl are called nodes. They are all arranged as graphs in the Node Canvas.
A node represents an element of your app. It can be a visual element, like a button, or a block of logic, like performing a navigation between the pages of your app.
We will take a closer look at the nodes in a minute, but first let's look at the other essential parts of the Noodl editor.
You can navigate around the Node Canvas by panning around with space + left mouse drag, or scrolling on a trackpad.
The Node Canvas can also be zoomed with Ctrl/Cmd + scroll, or pinch on a trackpad.
Every node graph lives inside a component. When you select a component, its node graph is shown.
You can see all of your components in the Component Panel.
Try to select the page component called Start Page in the Component Panel.
During this lesson, you will be given multiple tasks. Spot them in the lesson timeline by the Task label.
If you get stuck you can get a hint by clicking the card in the timeline.
Some of the nodes graphs will already be set up for you beforehand. This is to keep the lessons short so that you can focus on learning one concept at a time. If it feels like magic at times, don't worry. It's just a concept you will learn in a later lesson.
The Preview Canvas is showing your app in real time. All changes done to the node graph will be shown instantly. This canvas has two modes:
The default is the preview mode, letting you interact with the app.
Switching to design mode lets you inspect the elements of the UI and quickly jump to the underlying node.
Every app needs a visual user interface.
For that we use visual nodes, like the Group or Text nodes. Visual nodes are blue and are arranged in a hierarchy called the DOM tree. The top node acts as the root, and all visual nodes nested within it will be a part of the interface of your app.
You can move nodes with a left mouse drag. Visual nodes can be dragged in and out of the visual hierarchy. Visual nodes outside the hierarchy won't be a part of your interface.
Dragging the last text node away from the hierarchy using the left mouse button. This will make the text disappear from the preview.
You can add a node as a child to another node by dragging it onto that node. This will place it as the last child. Drag the text node onto the root group using the left mouse button. The text will reappear in the preview.
The Node Picker is where you can browse all the nodes in Noodl. They are arranged in categories. Hovering a node will show you a quick summary of how to use it.
Clicking a node in the Node Picker will add it to the graph that is currently open in the Node Canvas.
Open the Node Picker by clicking the "plus" icon in the top bar, or right click an empty space in the Node Canvas.
All nodes have properties that you can edit to make them behave the way you want. For instance, visual nodes have parameters that affect their appearance like size, color and position.
Clicking a node will show you its properties in the sidebar.
With the visual alignment property we can control how a visual element should be aligned inside of its parent.
This is easier shown than explained, so see the video above how the button can be aligned.
With dimension modes, we can set rules for how visual elements should take up space.
If we want our button to have a fixed height (in pixels), but take up 100% of the available width, we can set the dimension mode of the Button node to Explicit width & height in the Property Panel.
As you build your app it's a good practice to give the nodes descriptive names. This makes it easier for you (and any potential collaborators) to understand what the different nodes are doing.
Select the Button node and change its name by pressing the enter key. You can also double click the node title in the Property Panel, or click the edit icon as shown in the video.
Right click an empty space in the Node Canvas. Find the Text Input node, click to create it and then drag it above the Button node in the DOM tree.
Click the Text Input node that you created to open its Property Panel. Find the Label property and change it to read Username. Remember that property values are case sensitive.
A UI is nice, but it also needs to be interactive. In Noodl you do this by creating connections between nodes.
When you hover over a node in the Node Canvas a small dot appears in its top right corner. Click and drag from the dot to start creating a connection.
Drag the connection on top of another node and release to bring up the Connection Panels. Pick an output from the source node, then select an input on the target node. This will create a connection between them.
Let's see this in action by finishing up the navigation flow. In this lesson we've set all the nodes up for you, so you can focus on the connections. You will learn more about how the navigation nodes work in a later lesson.
Hover the Button node, Click and hold the dot, Drag the connection to the Navigate node and release. Choose the Click property in the first panel and then the Navigate property in the second panel.
Hover the Text Input node, Click and hold the dot, Drag the connection to the Navigate node and release. Choose the Text property in the first panel and then the User Name property in the second panel.
There are two types of connections in Noodl. Data connections and signal connections.
Data connections are used to pass data between nodes, like strings, numbers or objects. These connections are colored orange in the node graph.
Signal connections are used to trigger events. They can be triggered by the user (like clicking a button), or by the app itself (when a visual component mounts, when a data request is successful, etc). These connections are colored green in the node graph.
A powerful feature of Noodl is how data and signals are visualized.
Hover over a connection to see the current value. Clicking the tooltip pins it in place, so it stays visible even when you stop hovering. This makes it easy to debug your app.
When data or a signal is passed through a connection it lights up, letting you see the data flow in real time.
You've completed this lesson, we hope you liked it!
In the next lesson we will dive deeper into building layouts in Noodl. We hope to see you there.
Happy Noodling!