#13 Developer Newsletter

[PennyScully]

Welcome to our latest newsletter. In this #13 edition, we bring you the latest updates and releases for Dynatrace apps, showcase new educational content, and announce upcoming events.

What can you expect to see in this post:

• News and events
• Useful resources
• Release highlights for app developers

🔊 News and events

Engage and elevate 💬

On July 16, we’ll hold our regular Dynatrace Office Hours: App development. As always, we’re happy to host you and look forward to answering the questions you face when developing Dynatrace apps. We'll also give you the latest updates and releases.

Register for the upcoming session

 

Dynatrace Apps: Upgrade to React 18 now

As you know, React version 18 comes with improved performance, new features, and enhanced stability. Allowing for an efficient and easy transition to the higher version, the Strato design system currently supports React versions 17 and 18. We encourage you to upgrade to version 18 to take full advantage of these enhancements and keep your projects running smoothly.

What do you need to do?

Follow these steps to update your Dynatrace app to React 18:

1. Ensure you have no local, uncommitted changes.

2. Check the version of the react and react-dom dependencies in your package.json file. If you already use an 18.x version, you’ve already updated and

3. Run npx dt-app update to update all your app's Dynatrace packages.

4. Run npm install react@18.3.1 react-dom@18.3.1 to update the React libraries to the latest 18.x version.

5. dapt the code in src/main.tsx to use ReactDOM’s new API. You can find more details for this step in the official React update guide. For example, the change from React 17 to 18 could be as simple as replacing a code block and looks like this:

   
   React 17 code block

   import React from "react";
   import ReactDOM from "react-dom";
   import { AppRoot } from "@dynatrace/strato-components";
   import { BrowserRouter } from "react-router-dom";
   import { App } from "./app/App";
   
   ReactDOM.render(
     <AppRoot>
       <BrowserRouter basename="ui">
         <App />
       </BrowserRouter>
     </AppRoot>,
     document.getElementById("root")
   );

   
   React 18 code block

   import React from "react";
   import ReactDOM from "react-dom/client";
   import { AppRoot } from "@dynatrace/strato-components";
   import { BrowserRouter } from "react-router-dom";
   import { App } from "./app/App";
   
   const root = ReactDOM.createRoot(document.getElementById("root")!);
   root.render(
     <AppRoot>
       <BrowserRouter basename="ui">
         <App />
       </BrowserRouter>
     </AppRoot>
   );​

6. Optional: If you use other libraries, you might need to update them as well to ensure they’re compatible with React 18. Check the documentation of these libraries for version compatibility and upgrade steps.

If you encounter any issues during the upgrade, let us know in the Developer Community.

📚 Useful resources

🎥 New Quickstart Video

We’re thrilled to announce that we’ve released a new version of our quickstart video, which shows you how to create a Dynatrace app in under five minutes. This video aligns written and audiovisual content in the Dynatrace Developer quickstart section to give you a better learning experience. Step by step, developer advocate Indermohan Singh guides you through setting up your environment and making your first changes.

🎥 Inside Dynatrace Apps: New episode

Next up is the latest episode of our Inside Dynatrace Apps series, which focuses on app functions. Do you want to learn more about or leverage the full power of app functions? If so, follow along with developer advocate Edu Campver as he explains what app functions are, why the Dynatrace JavaScript runtime is important, and when you should use app functions. Edu also takes you through a hands-on example of how you can implement them in your app.

💡 Release highlights for app developers

Metrics on Grail

For app developers using metrics within their apps, you’ll be happy to hear that Metrics on Grail is now in General availability. Metrics on Grail uses DQL to query metrics with the timeseries DQL command, allowing you to use metrics in conjunction with all the data in Grail, including logs and entities. You can see details in the SaaS 1.292 release notes.

Design System

Strato Components

Catch up with the latest improvements to the design system: The changes up until the current version 0.114.3 are available in the annotated release notes.

Dynatrace App Toolkit

Catch up with the latest improvements to the App Toolkit: The changes up until the current version 0.121.0 are available in the annotated release notes.