React Studio 1.4: Tackling large projects with Map Sections, logins, “CRUD” data, and more

Welcome, fellow traveller of the uncharted wastelands between the realms of programming and UX! Hopefully your journeys have been safe from dragons and giant mutant project managers. Here, have a cup of warm tea, sit by the fireplace, and tell us your tale.

We at Neonto have been hard at work on improving React Studio, in the ardent hope it could be your new companion in your travels through these hazardous lands of adventure.

For this 1.4 release, we’ve been gathering feedback from users and focusing on improvements for real-world projects. There are important new organization tools, new ways to model standard components like Login, new tools to handle data and query parameters for back-ends, more plugin APIs so that you can make the generated React projects work exactly as you need… And a ton of fixes and small improvements.

To install, just launch React Studio and the update should be offered automatically. Or, you can download the app from reactstudio.com.

There’s also a new example project (in File > New From Template) that shows off some of these new organizational features in a simple way. And, if you’re interested in being a part of React Studio’s future, at the very end of this post we have a surprise. Let’s go!

Project Map Sections

Until now, it could be challenging to organize your React Studio project when it gets larger than one or two screenfuls. On a large project with a dozen screens and their associated components, the Project Map could stretch so large that it was difficult to find your way around.

The new Map Sections feature solves this problem. Sections are a lot like folders: you can move screens and their related components into sections to keep them together. On the top level of the Project Map, the section is shown as a large block with a preview of its contents (see screenshot above). You can also add a note to each section to better keep track of what each section contains.

To create a map section, select any blocks in the Project Map and choose “Make map section from selected” in the command menu that appears in the bottom-right corner of the Project Map.

To edit a map section’s contents, double-click on it. To move blocks out of a section back to the top level, or into another section, select them and use the command menu in the bottom-right corner. You can also “unpack” all blocks from a section by selecting the section and using the command in the inspector.

Sections are also going to be a useful tool for organizing React Studio’s code output to your liking. In the near future, we’ll add a feature that lets you decide how sections should be represented in the generated code — for example, you could have each section’s contents written into a separate source code folder, and top-level components placed into a folder named “shared”.

New example project: “FauxAir Check-in”

We’ve added a new project template that shows how map sections can be used in practice. It’s an app for those airport check-in consoles, made for a very fake airline called FauxAir. You can see the demo app here: https://neonto.cloud/u/checkindemo

(Note that this demo doesn’t work on a phone. It’s meant for a check-in console that has a tablet-sized screen. With some extra effort, we could of course make it fit on a phone too, but it wouldn’t really make sense for an app that has features like “passport scanner”…)

To explore this project, look in File menu > “New From Template”.

Sticky Notes

The FauxAir Check-in example project shows another new feature of the Project Map. You can now add little yellow “sticky notes” on the map. They’re pretty useful for keeping track of the intended use of your components, for example.

To create a sticky note, drag from the Components box on the right onto the Project Map.

Login Gate

Take a glance at the Components box and you’ll see another new addition, the Login Gate block. This is a special kind of screen that provides additional functionality for implementing logins.

Why add a new screen type for this? It’s because all logins tend to be very similar in function. Ideally there’s only one kind of login in the app, and the user shouldn’t even see a login screen if valid credentials are already available (e.g. with a browser cookie). Similarly, there should be only one implementation of the “log out” function. It’s much easier for React Studio to generate the right kind of code to handle all this logic when there’s a component that explicitly provides the visual part.

When you add a Login Gate into your project, you’ll see a group of settings in the Inspector:

The Login Gate has two modes, “Simple password” and “Web service”. The idea here is that you can start out prototyping the login using the simple password mode, and later seamlessly switch to a real implementation using a web service plugin.

For either mode, you can specify two paths within the app. “When unlocked” lets you pick the screen that will be shown if login is successful, and the “If unlock fails” of course lets you provide a screen for the other case.

For simple password mode, you can just write in a password here in the Inspector. You also need to do two things to make the login work:

• Place a text field in the screen and select it as the “Password field” in the Login Gate’s inspector.
• Place a button in the screen. In the Interaction tap, make it trigger the “Unlock gate” in its containing component, like this:

That’s all! Now you have a minimally functional login that checks the password.

It’s very important to note that you shouldn’t use the “Simple password” mode for production apps. The password is written into the web app’s JavaScript code in plain text, so it’s easy to hack: someone could just read the source code loaded in the browser to find the password. (The JS code that gets loaded in the browser is “minified” which makes it harder to read, but that doesn’t provide enough protection because the password is still out in the open.)

So, if you need a real secure login, you probably already have a back-end system that implements one. At that point you can implement a web service plugin for React Studio that implements the login check by calling to your back-end API. The plugin implementation is actually quite simple. React Studio plugins are just JavaScript programs with “hooks” that let you write whatever code you need in a specific context. In this case, your plugin needs to implement the “write code for login” hook, and it will get called to write all the necessary code for login. Your code can do whatever it likes — HTTP requests, state updates — as long as it finishes by calling either one of the “success” or “failure” callbacks that are provided by React Studio. There’s more information about plugins in the section “Plugin API improvements” below.

Update and delete within data sheets (a.k.a. full “CRUD”)

Data sheets in React Studio are like mini-databases that are easy to create, modify and link to a real back-end using plugins. Previously they were missing some methods that would allow a plugin to do all the necessary actions for a typical app.

Now you can create UI interactions for the full range of essential database actions: Create, Read, Update, Delete (“CRUD”). Let’s take a quick look at how these work:

• “Create” means adding a row to a data sheet. You can do this using the Update data interaction. The values for the row can be collected either from elements within the component or from data slots. The “Update data” UI lets you pick this for each column:

• “Read” happens automatically when a data sheet is accessed. When the data sheet is connected to a web service plugin, the plugin can also do regular “live” updates to get the latest data in realtime.
  Reads also happen if your data sheet is using a dynamic query parameter that depends on a data slot, and that data slot’s value changes. See below in the section “Query setting for data sheets” for further explanation.
• “Update” works the same way as Create: you just do an Update Data interaction. How does React Studio determine whether it should be a create or update? If there is an active data sheet row context, the action will be an update. In practice this happens when a component is used within a list, or a screen acts as a “details view” (properties were carried from a list item). If there isn’t a data sheet row context, the interaction will add a row instead.
  This is admittedly confusing because you need to know about the context of the interaction to understand what it actually does. We’re going to rework this part of React Studio to make it easier to understand and control.
• “Delete” is similar to Update in that it requires an active data sheet row context. If there is one, you can use the Delete action on the containing component to delete that data sheet row:

If your data sheet isn’t linked to a plugin, these actions will simply work on temporary data in the browser’s memory. You can add rows, modify them, delete them, but these changes don’t get registered anywhere. Once the browser window closes, the data is gone.

To get persistence, you need to use a web service plugin. We provide a few baselines: Generic JSON can be used with any server that provides a plain “REST-style” web API, and Google Sheets can be used with the spreadsheet app in Google Docs.

The latter is actually a really convenient way to create simple back-ends for apps that don’t need a full-fledged database. For example, if you have a bunch of items in a dynamic list that needs to be updated by someone with no tech skills, the Google Sheets plugin is often a great choice — very simple to set up and update. Similarly, if you need to collect data and store the responses in a spreadsheet for easy access, the Sheets plugin works great for that. An example use case might be something like a feedback/interview app that’s deployed to a limited audience: whe nyou know there are only going to be something like a few hundred respondents at maximum, it’s not worth building a real back-end to collect that data.

Query setting for data sheets

This new feature was briefly mentioned above in the context of data sheet “read” actions. Queries offer a way to make a data sheet depend on the contents of one or more data slots. That sounds rather abstract and complicated, so let’s look at a practical example.

Imagine your web app is localized in multiple languages. Thanks to React Studio’s built-in localization support, you’re able to easily create the various language versions for the texts within the UI. But what about content that comes from an external source?

Let’s say your app is a city guide. There is a list of recommended restaurants that is loaded from a web API provided by a third party. This API offers its content in several languages, but to load the correct content, you need to pass the selected language to the API somehow. Data sheet queries to the rescue!

The current language is stored in a data slot named “ds_activeLang”. (This is the default setup in React Studio.) To pass it to a web service plugin that loads the contents of a data sheet, you’d enter the following in the “Query” field for that data sheet:

language=$slot(‘ds_activeLang’)

This value will be passed to the plugin at runtime by React Studio, and the query expression will be parsed so that the end result will be: language=en (assuming the current language is English). The plugin can then send this value as part of its data requests. For a typical API, the query is included in the URL, although it’s really up to the plugin — it can use the query value in whatever way it sees fit. React Studio places very few limitations to what plugins can do in the generated projects.

Data linkage improvements

There are now more content types that can be linked to properties. For example, the FauxAir Check-in example project mentioned above (link to demo) has a button that is enabled based on the value of a data slot:

There’s a contract text that the user must accept to proceed. When the user clicks the “I agree” checkbox, the value of the data slot “ds_userAcceptedContract” gets set to true, and in turn this button gets enabled. This is a very typical case where you require the user to perform one action before she can perform another.

List/grid using component states (= making a grid without a data sheet)

Typically you want to use a data sheet to provide the content for a list or grid. However, there’s another common use case where the list/grid doesn’t need dynamic content, and it would be easier to just create different versions of content for each “cell” of the grid.

A new setting available in the List/Grid element lets you do that. It’s called “Take item values from nested component’s states”. That name is a real mouthful, but what it does is simple enough.

Imagine your app has six different sections, and a main menu that lets the user navigate to those sections. You’d like for the main menu to be a responsive grid of icons — sort of like a phone home screen. Making a data sheet to provide content for six unchanging icons feels like overkill. Instead, you can now make a component with six states. (The component’s size should match one icon, and then you’ll have each icon as a separate state.)

In the main menu screen, add a List/Grid element, set your six-state component as its list item component, and toggle the “Item component’s states” setting. You’ll now have a grid of six items easily editable as states within one component.

Plugin API improvements

The plugin interfaces have seen a lot of updates in this release. Here’s an overview of new plugin hooks and methods.

If you need help writing plugins, we’re happy to help you out! Just write to hello@neonto.com or reach out on the React Studio Slack channel (instructions for joining are in the app’s Welcome screen available through the Help menu).

• Web service plugins / handling login.
  New hook functions:
  writeReactWebCodeForLogin, writeReactWebCodeForStoredLoginCheck, writeReactWebCodeForLogout
• Web service plugins / handling data sheet add/update/delete actions.
  New hook functions:
  writeReactWebCodeForDataSheetInit, writeReactWebCodeForDataSheetWriteOverrides
  (See the “Generic JSON” plugin for a practical example)
• App service plugins / writing custom data into the generated project’s main HTML file.
  New hook function:
  getReactWebHtmlHeadElements
• All plugins / writing custom assets into the generated project’s “public” folder.
  New method on the exporter object passed to hook functions:
  exporter.writeCustomAsset()

CSS fixes

Generating correct CSS is a real bugbear. We’ve fixed a number of bugs related to centering, proportional positioning, etc.

If you find anything that doesn’t display correctly, please let us know at hello@neonto.com

Miscellaneous fixes

This release again includes a lot of smaller fixes to exporter bugs and UI inconveniences. We’ve tweaked the Project Map, fixed issues with Columns element’s weight values not saving correctly, resolved many instances where wrong characters in e.g. element names might cause invalid code to be generated, fixed issues with line breaks not displaying correctly within text elements, and more.

End surprise…

Thanks for reading all this way! If you’re interested in React Studio, we have a genuinely unique opportunity right now. Neonto, the company that develops React Studio, is raising a small amount of funds with a stock offering this week. It’s primarily directed at existing stockholders, but we would very much like to have some React Studio users participating as well.

So, would you like to become an owner in React Studio? Now is the chance. The company is based in Finland, so you don’t need to be an accredited investor (however you do need to provide a photo of your government-issued personal identification to be registered as a stockholder). The minimum investment is 390 euros, or about 480 USD. Binding commitments are required by Thursday 1st March 2018.
Please contact hello@neonto.com for further details.