<aside> <img src="/icons/row_lightgray.svg" alt="/icons/row_lightgray.svg" width="40px" />
SECTIONS
</aside>
<aside> <img src="/icons/book_yellow.svg" alt="/icons/book_yellow.svg" width="40px" />
CONTENTS
Step 4: Your First Visual Code
Step 7: Meet the Essential Nodes
</aside>
<aside> ✅
CHECK
You can build, test, publish, and use a simple app
</aside>
Strap in, this is going to be a long page!
But you’ll have a one-stop-shop for all the basic building blocks you’ll use to build Remix Flows of (almost) any complexity. You won’t be able to build vector graphics intense 2D or 3D games, but we’ll gladly accept the challenge of empowering you to build anything else you dream up.
It’s all for nothing if you don’t have freedom. William Wallace
WHAT
🟦 Blue Nodes are Cards or Components — ways to render infomation, layout, and design on the screen
🟨 Yellow Nodes are Data — ways to declare and move data values through the system
🟢 Dark Green Nodes are Queries — ways to interact with the database and get Data from it
🎾 Light Green Nodes are Logic Devices — ways to represent conditional Decisions or States
🔶 Orange Nodes are Functions and Code — ways to include textual Code in our visual system
💗 Pink Nodes are Actions — ways to Do things, click, navigate, save something, call an API…
You’ve met this one already in Step 5: Edit a Card! But we will get into a few more details here…
<aside> 👉🏼
TASK
Our layouts are expressed using flexbox which comes from the HTML/CSS world. This fun and clever game is one of the best ways to get familiar enough with flex layouts to be quite dangerous in our Card Editor. Enjoy https://flexboxfroggy.com/ for about 20 minutes and then come back here to put it in play!
</aside>
<aside> 🔧
HOW
video coming soon…
</aside>
WHAT
A Card is a nested tree of Cards and other display elements.
Layouts are determined by Containers, and other basic Card Primitives render a range of atomic visual elements of different types, like Text, Icons, Dates, Images, and various User Inputs
<aside> 💡
HINT
You’ll notice that each tree element has a slim placeholder “dropzone” on either side. You can select one of these to indicate where you would like to insert a new element from the list of card primitives, or insert an entire card from the list of results in the library.
You can grab and drag portions of the Card tree around to rearrange things within the layout you have, and of course delete elements from your tree (you’ll see a delete icon when you hover on any tree node).
</aside>
This one’s a real hero. The Best Amongst the Primitives in fact. It’s a Module in its own right!
<aside> 🔧
HOW
video coming soon…
</aside>
WHAT
A Component is a self-contained sub-graph of the main Nodegraph.
You can can have a Component in a Component in a Component in a…
A Component comprises a full Nodegraph of its own, with use of all the Node Types, and has almost the same anatomy as a Screen graph or an Agent graph — these are all Modules
A Component exposes In Bindings via its In Params node (that Data node at the top-left of your Component graph) to send Data & Event Triggers into the Component.
The Component then projects its results, i.e. Data, Cards, Events as Out Bindings via its Out Params node.
In this way a complex Component can be a black-box “function” reused by anyone as long as they send in the right info, and get back the right info for their purposes.
Today you’re using a nifty Component someone put in a Library, tomorrow you’re contributing your own Components to a Library!
A generic Webcomponent, and three Remix ones
Skip ahead here too if you’re here for the first time. What’s exciting about this one is that this is one of the 3 escape hatches we mentioned at the top of this page, so you’re never constrained by what Remix provides out of the box.
<aside> 🔧
HOW
video coming soon…
</aside>
WHAT
A Webcomponent is a well known standard in web programming. You’ve probably seen and used one before and would never have known, which is exactly as intended.
Traditional web development is like building a house from scratch every time. Web Components are like having prefabricated rooms you can easily plug into any house design. It’s like LEGO for web apps.
If you’re familiar with HTML, a Webcomponent is used by merely placing a custom tag in your HTML page with all the magic contained in the JavaScript package that renders that tag. In other words you can write as complex of a mini-programme as you want, or get someone to write one for you, and register it in our system, and embed that directly in your Remix view.