A visual interface aimed at simplifying front- and back-end development for web and mobile applications has been released by Amazon AWS. Amplify Studio was released as a preview during AWS re:Invent 2021, and is now generally available.

Amplify Studio is an extension to AWS Amplify, a set of tools and features Amazon released to help developers get started faster with configuring various AWS services to support uses such as user authentication, real-time data, AI/ML, and file storage.

Amplify Studio extends these tools for front-end developers, who can use it to work with prebuilt user interface components for those applications. It can also be used to work with backend services for development and configuration of the application’s backend services.

The Amplify Studio team says:

"A key feature of Amplify Studio is integration with Figma, helping designers and front-end developers to work collaboratively on design and development tasks."

Figma is a web-based graphics editor and prototyping tool that has Windows and Mac versions along with a mobile app for Android and iOS.

Amplify Studio has a library of prebuilt and custom UI components that can be set to use custom themes to match your own style settings. Components can also be bound to backend services with no cloud or AWS expertise. The tool can also be used to access AWS Amplify Hosting services, Amplify‘s fully managed CI/CD and hosting service for scalable web apps.

When you pull your component designs from Figma into your project in Amplify Studio using the amplify pull command, generated JSX code and TypeScript definition files that map to the Figma designs are added to your project. The idea is that you don't edit the generated code, but extend it to achieve any changes you need so you don't lose the changes if the component code files get regenerated. The options for modifying generated components are to modify the default properties of components, or to use JavaScript to override child UI elements. The code that’s generated exposes an overrides prop so that you can supply an object containing multiple prop overrides to extend the generated code.

Developers can also extend collection items with data using the overrideItems prop. You supply a function to this property, accepting parameters for the item and the item’s index in the collection. The output from the function is a set of override props to apply to that item.

A final option is to supply custom business logic for events, such as when an object is created, updated, or deleted in a datastore.

AWS Amplify Studio is available now.

More Information

AWS Amplify Studio Homepage

Figma Homepage

Related Articles

Amazon Amplify Adds Flutter And Vue Support

AWS Amplify Opens Cloud Services For JavaScript

To be informed about new articles on I Programmer, sign up for our weekly newsletter, subscribe to the RSS feed and follow us on Twitter, Facebook or Linkedin.

Comments

Make a Comment or View Existing Comments Using Disqus

or email your comment to: comments@i-programmer.info