It’s been a month since we . We are trying to maintain a steady release cycle of shipping updates every two weeks… And so far, we are on schedule ( . So, today it’s time for version 1.0.2! launched React Studio 1.0 knocking wood) 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 and rhymes with )… 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? “Word” “chess” 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 (macOS 10.9+). https://reactstudio.com The noteworthy changes are as follows: Previously this was done using buttons on the toolbar. Now there’s a new 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 UI layout for adding items to Project Map. Components 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 interaction. Reveal/Hide 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 element. Embed Content Demonstrates 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 menu > > Intermediate level templates. New sample project: One page template File New from Template 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 settings for an element, under the 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 . (The name of this rule will be determined by React Studio). The “animation” text box becomes the content for a . 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 and React Studio will replace it with the name at export time.) New animation type. Custom CSS Interact Animation Triggers @keyframes CSS rule CSS animation property $KEYFRAMES , particularly toolbars in the Canvas and Elements panels. UI look & feel tweaks Previously separate “Import Image” and “Import Vector Graphics” into one function. toolbar buttons have been combined , so that commands relating to the editing canvas are not shown if the canvas is not visible. Toolbar is now context-sensitive The Elements+States list now displays a . small preview for component instances is now smarter and prevents the component from taking a non-practical size. Resizing a component Fixed style customization options for . text fields Fixed in both CSS export and Studio preview (previously the text would get a small offset when shadow was applied). text shadows 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 feature. This will be a personal library where you can save your components and access them easily. The new 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. Presets Components With presets, you’ll be able to start building a 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! design language library Another major feature we’re working on is support. A few months ago, 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: WordPress API WordPress 4.7 introduced a standard API 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 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…!) make a modern front-end using a tool like React Studio 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 ) hello@neonto.com 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 . It is 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…!) Neonto Native Studio not 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 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. Expo ReactXP by Microsoft Another very interesting and brand-new development is , a library created by the Skype team at Microsoft. ReactXP (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 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. explains the rationale 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 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. our design compiler 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 . 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 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 allow you to extend and inject custom code as needed. we keep track of all this exciting new stuff so you don’t necessarily have to encapsulation safety clean plugin and scripting interfaces Well, that’s it for now. See you in two weeks for our next release, I hope! We’re also hosting a . The topic will be on core tools and different ways to use components for modelling apps. You are most welcome to join — ! webinar on 20 April sign up here Keep an eye on our and for news — and of course, if you haven’t yet ? Medium posts Twitter downloaded React Studio, why not do it now

Google

Microsoft

Mozilla

Target

Twitter

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

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

Too Long; Didn't Read

People Mentioned

Companies Mentioned

React Studio

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

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

Too Long; Didn't Read

People Mentioned

Companies Mentioned

React Studio

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES