Drag And Drop Angular Apps With Radzen And Azure

Since Jef Raskin over at Apple invented the concept of drag-and-drop, people have been trying to figure out how to drag and drop their way to an application. Creating visual interfaces with text isn’t intuitive. We want to build user interfaces the way that we consume them — visually.

There’s a new startup called Radzen that thinks that they can make it easy to build Angular apps visually, while still giving you full access to your code. When I learned the other day that they had added Azure publishing capabilities, I had to take a closer look.

Introducing Radzen

Radzen is a desktop application that generates Angular applications. Built on the Electron project, it is available for both Windows and Mac. Let’s take a look at how it works, and how quickly we can get from zero to hosted application.

First off, RadZen lets us select a theme and name our application. It’s got a few themes to choose from.

Once I create an application. I can create a new page and start dragging some components onto the design surface. Radzen has all of the ones that you would expect, like inputs and buttons and such, as well as the more complex UI controls like grids and charts.

I can even drag out common UI blocks, like a Login Form.

I created another page so that when the user clicks the login button, they are redirected to my page (assuming a good login). Every app needs data, so I can add that with the data tab and connected to a sample OData Data Source. Note that Radzen also supports plain REST, Swagger, SQL Server and MySQL.

.At this point, the app will also create CRUD pages to go along with this data source if you so choose.

If I select that option and then run the app, Radzen opens a browser tab and this is what my browser tab looks like…

That was pretty fast. I haven’t added any actual security or customization yet, but to get from nothing to a fully functional forms-over-data application, that was pretty impressive. That’s a lot of grunt work that I do not want to have to do. Configuring grids for editing has long been on my list of “stuff I prefer not to do”. BTW — that list is getting longer the older I get. I need a “Get Off My Lawn” sign.

MOVING ON.

I mentioned that Radzen is building Angular applications. Let’s be honest, we can drag and drop our way to some of our app, but we’re going to need to code as well. This idea that applications can be created entirely on canvas is the great lie of app development, and Radzen knows this. The unique thing about Radzen is that it gives you full access to the underlying Angular project.

If we take a look at the files that Radzen is generating, we can see that it is in fact and Angular application and I can open it in Visual Studio Code. For each component that Radzen creates, it generates a component and a component-generated file. All of the Radzen logic is in the component-generated file which is extended by the actual component.

This is really smart. This means that you can drop in and start coding on your project in the actual component files without ever having to see the generated code.

All this time Radzen is running a local server for you, so all you have to do is save in Visual Studio Code, and the page is reloaded automatically.

Deploying To Azure

As a Developer Advocate on the Azure team, it’s my job to make sure deploying your apps is the easy part. You’ve already done the hard work. You don’t need to fight with the deployment.

One of the things that I love about Radzen is that it “just works” with Azure FTP.

I’ve got to create a website in the Azure Portal first.

In Radzen, we need to provide the Publishing Profile settings for our new site, which can be found on the overview tab (they call them “blades”) under the “Get Publish Profile” button.

That will download a Publish Settings file. Mac doesn’t know how to open that file, so just choose Visual Studio Code, because what other text editor could you possibly be using?

You also want to stop the app during FTP publishing. It’s just so that we make sure no files are in use while we’re deleting and creating them during the publish process.

By default, VS Code doesn’t know what to do with a publishProfile file, so there is no code formatting. You can fix that by changing the language service to XML and then choose Format Document.

Now we fill in the information from that publish profile in Radzen by hitting the “deploy” button in the upper right-hand corner. You can’t miss it.

Here’s how the fields map — note that you want the FTP Publishing section of the publish profile

• Server = publishURL
• User = userName
• Password = userPWD
• Destination URL = destinationAppUrl

Now hit that deploy button! Do it now!

It looks like nothing happened, but if you look at the output in Radzen, you will see that it’s building the app for production (this means that bundling and minification are being done for you) and that takes some time.

Now we can start the app, and we’re LIVE on Azure…

That’s just entirely too cool for you not to check this out. Regardless of how you feel about drag-and-drop apps, the fact that Radzen is designed to let you write code when you need to and drag when you need to is something that sets it apart. Seamless FTP publishing to Azure means zero hiccups when it’s time to go live.

Check It Out

Check out Radzen by going to radzen.com. They’ve done brilliant and frankly disruptive work here that is worth your time if you are an Angular developer. Being able to see what you are creating while you create it is the ultimate destination for web developers. Are we there yet?