Noodl 2.1 Release Notes

Backwards compatibility with Noodl 2.0

Noodl 2.1 is fully backwards compatible with Noodl 2.0, with the exception of a few features mentioned in the “Removed features” section. Due to updates in the layout system, 2.0 projects will be automatically updated when loaded in Noodl 2.1.

New Documentation Site

The documentation site has been updated with new guides and reference documentation. It is available at http://docs.noodl.net/. Among other updates, it is now possible to copy example nodes through the “Copy to Clipboard” button in the site and paste them right into a Noodl project.

Noodl web console for sign-in and management

A web console has been added where sign-in, account and workspace management is done. It can be reached at https://console.noodl.net/. When signing into Noodl, you will be redirected to the console to complete sign in. In the console you are also able to create workspaces and handle users within them. More features will be added to the console going forward.

Quick Add Menu

A quick add menu has been added to the component search menu to find the most common nodes faster. 

Revamped Javascript node

The Javascript node has an updated API to interact with inputs, outputs and signals. It makes it easier to listen for changes to a specific output, removes some inconsistencies when updating values on outputs, and more. Check out the new Javascript node in the documentation: http://docs.noodl.net/#/guides/javascript

Updated Layout System

The layout system has been updated to make it more intuitive.

Changes include:

• Alignment and size modes are now rendered as icons instead of dropdowns
• The Group node has a new layout: “none” property, which makes all the child nodes absolute positioned. In 2.0 you had to set “position” to “absolute” on every individual child to achieve the same effect
• The Image node now has a “Image Fit” property that can be set to Contain, Cover, Fill etc. Only available when the size mode is set to explicit.
• Position “Relative/Absolute” has been renamed “In Layout/Absolute” to make it more explanatory
• The Text node has a new vertical align property
• “Flex Wrap” has been renamed to “Multi Line Wrap”

• The scroll properties have been simplified
• Basic support for nested scrolling, e.g. a vertically scrolling card in a vertically scrolling list with multiple cards.
  

Read more about the layouting updates in the documentation: http://docs.noodl.net/#/guides/layouts

Models and Collections

Models and collections have been revamped to simplify working with dynamic data all the way from prototype to deployment. The data can be real-time synchronized and persist in the cloud, backed by a database or CMS. There’s a new UI panel for specifying schemas, inspecting and adding data, and much more.

• The old “Collection” and “Model” nodes have been renamed to “Array” and “Object”, and there are new Collection and Model nodes that include the new features.

Read more about the new models and collection in the documentation: http://docs.noodl.net/#/guides/models-and-collections

Page Navigation

The Navigation Stack with related nodes handle app-type navigation with animated transitions. 

Read more here: http://docs.noodl.net/#/guides/navigation

For Each - New features

The “For Each” node is now more powerful. It can now receive signals and data directly from the components it creates, so you don’t have to rely on custom events.

Check out how in the documentation: http://docs.noodl.net/#/guides/for-each?id=item-signals

Timing Editor

The transition curves are now visualized directly in Noodl for easier editing. There’s also a new “Delay” property added to individual transitions.

Quick add of component inputs and outputs

We’ve added a new interaction in the connection panel to make component inputs and outputs faster and more efficient to create.

Additional improvements

• Support for changing the title of the exported/deployed HTML page
• Vastly improved the performance of animating properties like Position X and Y, Opacity, Margins, Paddings, and many more
• New “Variable” node: http://docs.noodl.net/#/guides/variables-and-objects
• The State node has support for additional types beyond numbers, including colors
• Some layout errors that cause inconsistent behavior across browsers are now flagged as warnings
• The search feature in Noodl (Cmd/Ctrl+F) has been expanded to include all properties and nodes across the entire project, including code in Javascript nodes, static data, etc.

Removed features

• External brokers have been disabled for now and are being refactored
• The experimental Noodl Node runtime has been disabled
• The multi device feature has been disabled (cross device messaging still works like before, but the device menu has been disabled)