The latest update to React Studio is loaded with features and fixes! There’s a lot to cover, so let’s jump straight in.
One mandatory reminder: if you don’t have React Studio, go ahead and download a trial at reactstudio.com. And if you’re already a React Studio user, just restart the software to get the 1.1 update.
Also a shout-out to our React Studio webinars on YouTube! On the last show we built a live sign-up page from scratch, including saving the data to a third party API. (Many of the features described in this post can be seen in action in that video.)
Component presets
Presets are saved components. Once saved as presets, they become available to all projects. You can find them in the Components pane to the right of the Project Map.
This is a really important feature because it enables you to start building your own design library of React components. Find yourself always using that one nice “User’s avatar + tagline” component? Save it as a preset and reuse anywhere!
Presets are perhaps even more important for teams. Maybe you already have a style guide to communicate how your design system works. With component presets, you can turn that style guide into a living collection of React components! And with React Studio’s support for properties and component states, you can easily create components with a great deal of built-in flexibility.
To create a preset, just select any component in the Project Map and look in the Inspector on the right:
Next to the “Save as Preset” button, there is a “comment” field. Any text you enter there will be displayed in the hover info window in the Presets list. (If you need to add more instructions into a component presets, you can also use a custom properties UI. This works exactly like for React Studio plugins: using a JSON format, you can define the interface that gets shown when a component is used within a layout. It’s a fine place to put instructions for users of your component.)
Note that once you use a preset (by dragging from the Presets pane into a Project Map), it creates a copy of the component. So you can safely modify the new component without accidentally affecting the original preset from which it was created.
In a future post, we’ll show some ideas for how you might build a design system library using component presets — and also how React Studio’s Sketch plugin plays into this, so you keep using Sketch for vector drawing and still get the benefits of designing using live React components.
Responsive Swapper element
This is a cool building block for responsive designs. It’s easiest to explain with a live example: Menu using Responsive Swapper
The menu at the top swaps between a “hamburger” menu button for narrow screens and a three-element menu for wide screens. Here’s what it looks like in React Studio:
The Swapper element has a “base component” setting and lets you override specific sizes. In the above screenshot, the hamburger menu is set as the base, and there’s another component called “Wide menu” specified for tablet size screens.
Progressive Web Apps and React 15.5.4
React Studio’s project output has been updated to match Facebook’s Create React App version 1.0 which came out just last week (read more about that release here).
Thanks to the powerful base of Create React App, your projects are getting a number of cool features for free. All you need to do is re-export.
The most notable highlights are React 15.5.4, Webpack 2, and the addition of Progressive Web Apps (PWA) support as a default.
PWA is a specification created by Google to make web apps work more like native mobile apps. It’s going to be pretty big, and with React Studio you’re already prepared for this future. In upcoming releases, we’ll be working to add further support for PWA features like caching data locally to enable offline mode for web apps. With React Studio’s data management features, we’re planning to make this completely seamless. Just tick a box and your app gets offline support.
Transition animations
For interactions that navigate to a different screen, you can now specify an animation. The settings are in Interaction tab > “Go To” action.
Currently there are only a few animations available, but we’ll add the ability to specify custom CSS soon, so you’ll be able to provide whatever transition you like.
Plugin UI improvements
A lot of work has been done to enable more advanced plugins. New APIs include support for defining data linkage (as shown in the Rating plugin included in standard installation), as well as creating custom UIs for interactions (as shown in the Mailchimp and Send Mail plugins also available in standard installation).
The Rating plugin also demonstrates the new “component picker” UI element type, which plugins can use to access any components within the React Studio project. Within Rating this is used to specify components that act as the “full” and “empty” rating images. It’s easier to explain with a screenshot:
This is a component that visualizes data from the movie database API. See those yellow and white stars above the poster? That’s the Rating component. The star designs are provided as separate components. The plugin’s UI includes component pickers for the “full” and “empty” states, and that’s how the plugin gets access to these custom visual items. Pretty cool!
Checkbox element
The good old checkbox was missing from the set of default elements. It’s now there, and it has a ‘checked’ property that accepts data linkage so you can connect it to data.
Component dynamic height indicator
The height of a component’s flow content is now indicated with a blue line:
This is important because the component’s height can vary based on flow content. The presence of the blue line indicates that this component is going to resize.
Imagine a component that shows a message from a user: some will fit in one line, other messages are much longer. By placing the message element within the Scroll Flow group inside the component, you can tell the component’s container that you want this component to resize accordingly.
For some other components, you might not want this to happen (i.e. you want them to remain fixed in size), so in that case you should place everything in the Foreground group. The blue line indicator makes it easier for you to see whether this component resizes.
New data plugins
This topic is actually too big to cover in this “What’s new” kind of post! We’ve added many new capabilities to plugins and a new interface to more easily manage the data plugins within a project. You can still find it in the same place, Data tab and click “Data Plugin Setup”:
In the Setup window, all installed data plugins are listed on the left. The default installation includes the following:
- Generic JSON
- Wordpress API Posts
- Google Sheets
- Mailchimp
- RSS Feed
- Send Email
- Tumblr Photos
By the way, the source code for all of these is in JavaScript, so if you want to take a look at how they’re done, it’s easy to do. (In React Studio, open the Plugin Manager in the Plugins menu, then click “Show plugins folder in Finder”. You can then inspect any of the plugins by right-clicking [or Cmd-click] on a plugin file and choosing “Show package contents”. For more info, see this post.)
A Plugins can have multiple instances within a project — as an example, you might want to display multiple different news feeds using the RSS Feed plugin. For this reason, you need to create an instance of a plugin first. Click on the + button below the plugin list and choose the plugin type.
Once you have a data plugin instance, there are a several interesting things you can do with it, but two interfaces are most commonly used:
- Loading data into a data sheet. To easily test this, you could use the Tumblr Photos plugin — just drop a blog’s name into the plugin’s UI, then create a data sheet and link it to the plugin. The plugin will fill out the sheet in React Studio, and will also do the same in the exported app.
- Updating data through a plugin. Here’s a screenshot of how the Mailchimp plugin was used in a signup page:
The “Sign up” button has an “Update data” interaction selected. Its target is a Mailchimp plugin instance. Here, the plugin is providing a custom UI for this interaction: the user can specify important parameters like the mailing list’s identifier, which elements are used to collect the data, etc. (Our recent webinar shows how this project was built. You can see the live site here.)
API Bridge
Lastly, we have an entire new service available to support your web apps. It’s called the API Bridge, and its whole reason to exist is to help you more easily make rich web apps without having to do server-side work.
Consider the above screenshot of our webinar sign-up page. When the user enters their details, we’re using the Mailchimp plugin to add the user to a specific mailing list. This works using Mailchimp’s public API — but accessing that requires a valid API key from Mailchimp.
As a general rule, we don’t want to put such an API key into our client-side React app! The Mailchimp API key gives access to quite a lot of features, and we’d rather make sure that it’s not directly visible to someone who might look for it in our web app’s source code. Therefore the key needs to go on a server somewhere… But where? And who’s going to develop that server code?
Neonto’s API Bridge is a dead simple solution to this problem. We provide a web-based admin UI where you can enter your Mailchimp API key. Your key is stored on our server. Instead the API Bridge gives you a client key that you enter in your React Studio app. By using the client key, we have achieved a nice layer of protection because it doesn’t give access to the full Mailchimp API.
Still not sure how this works? Watch this webinar where we build the signup page live… It shows the API bridge in action as well!
When you subscribed to React Studio, you were sent an access key to the API Bridge server. We are contacting all users to give you more details on how to use this feature.
The API Bridge currently provides a couple of services:
- Google Sheets
- Mailchimp
- Send Email
We’re eager to add more, though! So let us know what APIs you’d like to see bridged, and we’ll be listening. Send your ideas to hello@neonto.com