React Studio Public Beta 2

It has been one month since we launched Beta 1 of React Studio. Since then we’ve been hard at work on fixing bugs and finalizing new developments.

Today we’re releasing Beta 2 with a whole bunch of improvements, in particular for design and data management. On the export side, a lot of work has been done to make the JavaScript and CSS more succint and assets more streamlined. There are also three new sample projects to show how all this stuff works. We hope you’ll like it!

The update will be installed automatically when you run React Studio. (However, Beta 1 had a bug on some systems: the install update dialog might lose its mouse focus due to another hidden dialog box popping up. If this happens, you can use Tab and Enter keys to press the “Install” button. Or you can simply download again. Sorry for the inconvenience! Naturally it’s fixed in Beta 2, so you won’t have to do this again.)

Curious to know what’s new since last month? Let’s take a deep look!

New sample project: “USD Exchange Rate Dashboard”

This example app is a simple currency converter. Using exchange rate data from the European Central Bank’s open API (via Fixer.io), it shows latest rates for the U.S. dollar against three other currencies.

The design emphasises quick access to relevant information — the idea is not to show every currency in the world, but instantly give you the rates for a few major ones at a glance. (If you don’t like this choice of currencies, go ahead and add your own! It’s a fun way to learn React Studio.)

Check it out here: https://neonto.cloud/u/currencydemo/

(By the way, that link was published directly from React Studio using the “Publish to Web” feature.)

This sample shows off some important techniques: responsive design, gradients and shadows, a tab bar made using the Selector element, triggered animations, live data loaded from an API, and using JSON key paths to access data.

To explore this sample for yourself, take a look at the Templates tab in the Welcome screen (or access through File menu > New from Template).

In-place component editing

A simple feature, but really handy. When a component has been placed somewhere (in a screen, inside another component, used in a list or a selector), double-click to edit it. The component opens for editing with the background preserved from the previous context. This way you’ll see how your changes will look wherever your component was placed.

If you’d rather edit a component in a neutral context, double-click on it in the Project Map to open with the default checkerboard background pattern.

(Another useful tip: if you’d like your component to have a specific color background for easier editing, but you don’t want that background to get exported into code, just click on the background element’s ‘eye’ icon two times. It will show a red dot, which means that the element won’t be included in export.)

New sample project: Simple Layout Demo

This one is a starting point for learning about responsive layouts. It‘s just a single screen with a couple of elements:https://neonto.cloud/u/simplelayoutdemo

It demonstrates some essential layout concepts: scroll flow, layout alignments, overriding alignments for a specific device size (the text has different margins on tablet and higher screen sizes), and maintaining the aspect ratio of an image. It also includes an embedded font (Roboto Light), which brings us to the next item…

Text element overrides

Automatic font embedding

When you use custom fonts within your design, they are now copied into the exported app and included in the stylesheet. This doesn’t work for all font types — some standard fonts on macOS are in a format that can’t be embedded this way — but it’s super useful for using downloaded custom fonts! Nearly all fonts you’d find online are available in the supported Opentype/Truetype file formats and can be embedded.

(Note that commercial fonts may have licensing restrictions that do not allow embedding the font files into a web page. Please check with your font vendor if you’re unsure. In the future we’re planning to offer the ability to replace your design-time fonts with licensed webfonts from a commercial service such as Typekit.)

Data plugins and the “Generic JSON” plugin

JSON data plugin setup for Data Sheet

The default installation now includes a Generic JSON data plugin that you can use to connect to REST-style web services.

To configure data plugins, go to the Data tab and click on “Data Plugin Setup”. At the top of the window is a popup button that shows you all the installed plugins. On the left is a list of the plugin instances for the selected plugin type. Click on the + button to create an instance.

A plugin instance is simply a configuration for the plugin. The Generic JSON plugin has a few settings including the API URL (of course) as well as “image columns” and “custom HTTP headers”, which you can use to customize how the data is interpreted and what gets sent to the server.

Once you’ve created a plugin instance, you can connect a data sheet to it and load real data from the web service. In the data sheet settings, choose the plugin instance from the popup menu. You can also specify a sheet-specific service path. This will get added to the URL when accessing the web service. (For example, if the base API URL is api.example.com and you want to access data from api.example.com/feed/latest, just specify “feed/latest” as the service path.)

To get a better idea of how this works, check out the USD Exchange Rate Dashboard sample project. It loads fresh currency data from the Fixer.io API into a data sheet, which is then used as the data source within the main screen.

The “RSS Feed” data plugin

There is another plugin included in the default installation. It lets you access RSS feeds, which are a very common type of news feed data source. To show how it works, there’s an example project…

New sample project: “World News RSS”

This is simply a list of latest world news from a feed provided by Reuters. However there is one non-obvious item of interest here: to make the feed look cleaner, the news texts are trimmed of extra data.

The Reuters feed contains some HTML junk (for the lack of a better word): in each news item, there is a <div> element with some rather ugly buttons for sharing the link to social media and stuff like that. We don’t want to display those, so a value transformer script is used to remove the extra HTML after the actual news text.

You can find this script in the “News item” component. Click on the “description” element, and look under the Data tab on the right. The data linkage is specified here: this element’s text content comes from the property named “description” (which is one of the columns loaded from the RSS feed). Click on the “Edit Script” button, and you’ll see the few lines of JavaScript that are used to clean up the news items.

Major Sketch importer updates

Our Sketch plugin has become a lot more useful with some cool features that let you smartly translate your static designs into working React components.

To use these features, you should update the “Transfer to React Studio” plugin in Sketch. Download the plugin from this link and drag it onto your Sketch application icon.

The big news is that you can now map Sketch groups into components. It works through layer names. Just use the prefix “c:” on your group name (e.g. c:header), and the React Studio transfer plugin will know it’s supposed to be a component.

You can also create actual text input fields from your Sketch layers in a similar fashion. Use the prefix “input:” on a layer name, and React Studio will replace it with a live text field. (This should save a lot of time on forms!)

Animation triggers

Triggers let you control the animations applied to an element. To find these settings, look in the Interact tab.

For each trigger, you specify a condition (e.g. “when this element is displayed”) and an action (e.g. “fade in”). Each type of action can have special parameters, but typically you can control at least the duration and start delay of the animation.

The USD Exchange Rate Dashboard shows this in action. The currency rate values are displayed in a sequence of fades. This actually is not just eye candy: having a small delay and fade helps hide the fact that the data is not initially there because our app loads the currency data from an API… So animations can serve an important purpose in hiding delays!

At present the only available animations are fade in / fade out. We will expand this with more options and a plugin system for custom animations. Also, the selection of trigger conditions is similarly limited. The UI has already been built for something called scroll triggers, which you can use to make elements animate in response to user scrolling (for example, hiding a menu bar when the user scrolls down)… But this feature is not quite finished on the export side. It’s coming soon!

Element shadows

For image and vector graphics elements, you can now specify a shadow. This is great for creating an illusion of depth. In the future we’ll add this setting for other element types as well, so you can e.g. use individual shadows for instances of the same component (this would be useful for “card-style” UIs).

Data linkage improvements

Component State index setting

You can now link component states to properties, and optionally use a script to transform the value. Typically you might want to do a mapping of property values into component state indexes; e.g. in a weather app your property might contain values like “clear”, “rain”, “snow” which should be mapped to states 1, 2 and 3. This is easy to do with a script. We’ll publish a sample project soon that shows a practical example of this.

Screen data sourcing

It’s now possible to “carry” the contents of a data sheet row as properties into a screen. Well, that terse description may sound pretty confusing…! But this feature is actually a really simple way to link real data into your screen.

Find Carry Properties from Data sheet setting from the bottom right corner

The USD Exchange Rate Dashboard sample project again serves as a demonstration of this feature. Click on the Start screen and look for Data Source in the right-hand inspector. You’ll see that “Carry properties” is enabled, and the “USD Rates” data sheet is set as the source. With this setting, the screen gets all the values from the first row of the data sheet as properties, and we can link them into elements. (It doesn’t even have to be the first row of the sheet, there is a number field you can use to change the source row.)

Component layout improvements

You can now have more control over responsive layouts within components. By default, a component is in “fluid” mode, and you can use alignments and keylines to specify how things are placed within the component’s area.

For even more control, there is a setting called “Allow device-specific overrides”. When this is enabled, you have complete control over element placement for a particular screen size. (To create overrides, click on a screen in the Device Preview panel, and then drag elements or use the Layout tab.) This kind of complete control is very useful for components that should take on a different (narrower) layout on mobile, for example.

Image aspect ratio settings

For image elements, you can now specify that the content aspect ratio is always maintained. To find this setting, select the image and look in the Layout tab of the inspector on the right.

You can see this feature in action in the Simple Layout Demo sample project.

Export improvements

Our React+Webpack project export is continously being tuned for better performance and more compact code.

In this release, we’ve optimized asset export to save space on images with similar content. The JSX layout code and CSS created for components is now tighter — the goal is to include only the elements and styles needed to specify a particular layout setup, and we’re pretty close!

A lot of bugs around CSS export have been fixed, so if you previously saw weird behavior in your exports that didn’t match what you saw in React Studio, there’s a chance it’s gone (if not, do let us know!).

What next?

React Studio is still not done. We need your bug reports and feedback on features! Join us on the Slack channel and speak your mind. It’s a tremendous help in deciding what we should focus on.

Download React Studio Beta from www.neonto.com/reactstudio