React Studio: 1.0.2 update, roadmap, thoughts on Native, and a look at Microsoft’s ReactXP

It’s been a month since we launched React Studio 1.0. We are trying to maintain a steady release cycle of shipping updates every two weeks… And so far, we are on schedule (knocking wood). So, today it’s time for version 1.0.2!

In this post we’ll first look at the details of this update, then dive into some plans for the future, both on the short and long term.

Our next release will focus more on data and back-end services (hint — we’re working to support a platform that starts with “Word” and rhymes with “chess”)… And looking further at the horizon, we’ll take a look at the possibilities of React Native, as well as explore Microsoft’s brand new ReactXP: a very interesting library that smoothes over some of the differences between web ReactJS and React Native. Ready?

What’s new in React Studio 1.0.2

Let’s start with what we are shipping today! As usual, the update becomes automatically available once you restart the app. Or, if you don’t have React Studio, go download it at https://reactstudio.com (macOS 10.9+).

The noteworthy changes are as follows:

• 
  

  New UI layout for adding items to Project Map.Previously this was done using buttons on the toolbar. Now there’s a new Components pane on the right-hand side of the Project Map, and you can drag items from there onto the map. (By the way, this change was made in preparation for an upcoming “presets” feature. Soon you’ll be able to save your own components as presets, and they will show up in the Components pane. Hence the empty space right now!)

• 
  

  New Reveal/Hide interaction.You can use this to make elements visible or hidden in response to a button click (or any other interaction). This is very useful for pop-up menus, “more info” style buttons that reveal extra content, etc.

• 
  

  New Embed Content element.This allows you to place custom HTML code within the layout. Useful for embedding content from another website such as maps, social media buttons, etc. (However, you need to exercise some caution with this feature! By definition, custom HTML code can be unsafe… So only use this feature with code that you either wrote yourself, or you trust the original website where it was copied from.)

• 
  

  
  

  New sample project: One page templateDemonstrates how to create a so-called “landing page” style screen: one long scrollable page with responsive design, making use of components, grids, and the Columns element.You can find it in File menu > New from Template > Intermediate level templates.

• 
  

  
  

  New Custom CSS animation type.This feature lets you add completely custom animations to elements, although to get results, you need to know some CSS (that — or you could just google for CSS animation snippets like everybody else…? 😉)You can find this setting in the Interact settings for an element, under the Animation Triggers section. Create a trigger and choose “Custom CSS animation” as the action. Now you can enter custom values that will be written in the app’s CSS for this element. Specifically, the “keyframes” text box becomes the content for a @keyframes CSS rule. (The name of this rule will be determined by React Studio). The “animation” text box becomes the content for a CSS animation property. You can leave the “animation” value empty — in that case, React Studio will write a value that corresponds to the animation duration that you’ve entered in the UI. (If you do enter a custom animation property value, you need some way to refer to the keyframe rule: just enter $KEYFRAMES and React Studio will replace it with the name at export time.)

• UI look & feel tweaks, particularly toolbars in the Canvas and Elements panels.
• Previously separate “Import Image” and “Import Vector Graphics” toolbar buttons have been combined into one function.
• Toolbar is now context-sensitive, so that commands relating to the editing canvas are not shown if the canvas is not visible.
• The Elements+States list now displays a small preview for component instances.
• Resizing a component is now smarter and prevents the component from taking a non-practical size.
• Fixed style customization options for text fields.
• Fixed text shadows in both CSS export and Studio preview (previously the text would get a small offset when shadow was applied).
• Fixed horizontal/vertical spacing settings UI for Columns element.
• Miscellaneous CSS fixes.

Short-term roadmap

Assuming you read the change log above, you probably noticed the mention of an upcoming Presets feature. This will be a personal library where you can save your components and access them easily. The new Components pane, to the right of the Project Map, was built in preparation for presets: once we introduce presets, this is where you’ll find them listed. There will also be a search field so you can find your way around.

With presets, you’ll be able to start building a design language library of custom components. Always find yourself reusing that one “User” component that displays a user’s picture, name and status? How about that specific header style with a picture and headline positioned just right…? Save them as presets, and you’ll be building apps with your own building blocks in no time!

Another major feature we’re working on is WordPress API support. A few months ago, WordPress 4.7 introduced a standard API for WP-powered sites. These are called “REST content endpoints”, a very technical name for what is ultimately a fairly simple concept. The WordPress blog describes it thus:

Content endpoints provide machine-readable external access to your WordPress site with a clear, standards-driven interface, paving the way for new and innovative methods of interacting with sites through plugins, themes, apps, and beyond. Ready to get started with development? Check out the REST API reference.

What this means in practice is that you don’t have to write a WordPress theme/plugin to customize your WordPress site anymore! Instead, you can make a modern front-end using a tool like React Studio and access your content from WordPress through the standard API. It’s already available on every WordPress.com blog, as well as every self-hosted WordPress site that has upgraded to 4.7. (And if you’re running a WP installation, you really should update, as you hopefully know…!)

Our first iteration won’t cover the full WordPress API — simply because we want to get it out in two weeks if possible! But we’re hoping to offer a useful subset that will already let you build many kinds of interesting WordPress-powered web apps. (If you have any opinions about what WP APIs we should strive to support initially, we want to hear from you! Write to us at [email protected])

Thoughts on React Native

It’s a question we get asked all the time: is React Studio going to support React Native, and if so, when?

First off, it’s worth mentioning that there is a “sister product” to React Studio called Neonto Native Studio. It is not a React Native tool — instead, it outputs true native code for iOS and Android. It’s very different from other cross-platform solutions because there are no libraries, no frameworks, no webviews or even JavaScript, no extra layers included of any kind. (And actually Native Studio was created before React Native even existed, so the question of using React really wasn’t on the table back then…!)

So, on one hand we have a very substantial amount of experience in native mobile apps (in the form of Native Studio), and on the other hand we have a tool specifically designed for React JS (in the form of React Studio). It doesn’t take much more than a 1+1 level of arithmetic to deduce that React Native is well within our reach…!

As often happens in technology, the question has been one of timing and resource prioritization. Is React Native “ready”? It’s certainly young technology, but the progress has been impressive. Until recently the Android implementation was lacking, but contributors have made great strides on that side.

One of the things that has deterred us from React Native is the relative complexity of the toolchain. With “plain” ReactJS, it’s just a web app, so we can easily do things like the “Preview in Browser” and “Mobile Preview” features found in React Studio. With React Native, the app needs to get built on the Xcode / Android Studio toolchains… What we’ve learned over the years with Native Studio is that these tools, even though they’re accessible by developer standards, are still very scary for ordinary people.

However, the great thing about React Native is the powerful community, and so new interesting solutions keep popping up. In particular Expo has been doing tremendous work in making React Native more fully-featured and accessible, and they’re solving some of the problems related to toolchain complexity. Expo’s platform could be a tremendous foundation for a React Native “branch” of React Studio.

ReactXP by Microsoft

Another very interesting and brand-new development is ReactXP, a library created by the Skype team at Microsoft.

(Here XP stands for “cross-platform”; there’s no relation to Windows XP. It’s a rather confusing name for a Microsoft toolkit if you ask me…! Oh well.)

The ReactXP team’s blog explains the rationale behind this new library in detail. In short, it’s a set of components and best practices that lets you target both ReactJS (web) and React Native (iOS, Android, Windows 10) from a single JavaScript codebase.

This could be a great solution for React Studio too. We already have the concept of “UI framework plugins” that provide an abstraction layer between React Studio’s design environment and our design compiler which produces the actual code. It’s possible that we could simply implement ReactXP support as a UI framework plugin for React Studio, and that would open the door to React Native as well.

As you can see, there’s a lot of excitement in the React Native scene, and new developments almost every week! That’s why we’re keeping a very close eye on these new solutions. As the React Native community converges on what works the best, we’ll be sure to offer up our plan on how React Studio will be there to let you work in React Native too.

One of the great things about a tool like React Studio is that we keep track of all this exciting new stuff so you don’t necessarily have to. When we offer a new design compiler target, for example ReactXP or Expo, you will be able to just re-export your project and have it follow the best practices for that target. If you’d written your React UI in code, manually converting all that code to a new framework (or even a new React version!) can be a very tedious exercise — and also error-prone. This is a good example of the degree of encapsulation safety that React Studio’s design compiler approach can offer to your web app projects: UIs that are best represented in visual layouts are modeled in that form and maintain retargeting flexibility, while at the same time React Studio’s clean plugin and scripting interfaces allow you to extend and inject custom code as needed.

Well, that’s it for now. See you in two weeks for our next release, I hope!

We’re also hosting a webinar on 20 April. The topic will be on core tools and different ways to use components for modelling apps. You are most welcome to join — sign up here!

Keep an eye on our Medium posts and Twitter for news — and of course, if you haven’t yet downloaded React Studio, why not do it now?