Create SVG React components using Adobe Experience Design

Creating beautiful and responsive web designs is a challenging task. HTML5 and CSS3 are out there for a while and are powerful tools for creating responsive web designs, but there’s another great technology for creating responsive designs as well: SVG! ūüôā

I’m not going to show you all the things you can do with SVG, if you like a very good introduction I can recommend Sarah Drasners Talk SVG can do that?!.

Instead I’m going to show you how you can use Adobe Experience Design as a starting point to create svg graphics, which you than can easily mold into a reusable and configurable react component. This could basically work with any other design tool, such as Sketch, Figma etc, you named it – as long they allow you to export graphics as svg.

So, let’s start. First off, we need an Adobe XD Prototype containing elements we could turn into react components. For this blog post, I’m going to use something from www.uplabs.com.

For example Nandu G created a good looking Dashboard:

Pro Stats Dashboard

Pro Stats Dashboard from Nandu G

Especially the Profile View Diagram looks like a good candiate for a svg react component. So, lets start:

To export the elements as svg we need to select the group containing the elements, right click and then “Export…”.¬† As Format we must choose “svg”, The other options are not relevant for this example. After clicking export we can open the svg.

The svg is straight forward, now custom namespaces or anything like that. We can take this and put it into a React Stateless Functional Component:

But this will throw some errors, for example, JSX doesn’t support xml namespaces (like xlink:href) – Namespace tags are not supported, ReactJSX is not XML. Gladly, react allow to use camelCase notation, which will render the correct xml namespace. So all we have to do is to replace xmlns:xlink with xmlnsXlink and xlink:href with xmlHref.

The next problem comes from the style tag. The style definition contains curly braces, which causes some problems because JSX uses them to insert values from the component. The best way to solve this is to simply put the css style definitions where they belong, in a css file. One other workaround is described here: https://github.com/facebook/react/issues/2250#issuecomment-229468253

So, after this little modification our react components look like this:

This will render the demo component. All we have to do now is replace static text with real values. For example, the linear gradient offset should be adjusted to show how many profile views are from new users and how many are from people who follow us already. Also, the percentage at the bottom of the component should be updated accordingly to our users. The same goes for the “New User” counter in the center circle.

So let’s add some math and curly braces and voil√†:

Usage:


A next step could be to add some nix hover effects or animations.

As mentioned at the beginning, this exported assets are only a starting point for creating components. To make this workflow a little bit smoother here some tips:

  1. Before exporting a group from Adobe XD, create a new canvas with the height and width of this group and align the canvas to the 0,0 coordinates.
    Alignment of a canvas

    Alignment of a canvas in Adobe XD

    This yields much better translation coordinates in the exported svg. As in the example above the viewbox of the exported svg is set to¬†viewBox=”12137 3868 440 430″, Also the Translation of “translate(12137 3868)” the first group is somewhat weird. Instead they should be¬†viewBox=”0 0 440 430″ and¬†translate(40 54). This trick is very helpful if you need to calculate translation in your component.

  2. The Naming of the group in the svg correlates directly to the naming in Adobe XD.  Creating the react component is a lot easier if you structure your prototype in Adobe XD nicely and give every element a descriptive name РI know, naming is a hard thing.

I created a codesandbox for this blog post sample, if you like, you can play a little bit with it.

 

Authenticate against an Azure Mobile Service app with ADAL.js

In one of my current projects I was trying to access a Azure Mobile Service from within a HTML Angular app. “Great!” I thought, let’s use ADAL.js and let the magic happen! So I installed ADAL.js, configured it and…..nothing, ADAL.js injects the Bearer token but I got a “401 unauthorize” from the Azure Mobile Service. After some research on the web I was able to get Azure Mobile Service authentication to work with an ADAL.js acquired authorization token.

The Setup

As mentioned above there are 2 “apps”, an HTML Angular app and an Azure Mobile Service app with a .NET backend. Both apps uses Azure Active Directory as the authentication backend, the following image shows this setup.

architecture

Azure Mobile Service app

We will start with the Azure Mobile Service app. Microsoft provides a detailed explanation on how to configure the windows azure active directory authentication for azure mobile service in this article.

After configuring the Azure Active Directory application for the Azure Mobile Service you only need to add the following configuration to the web.config of your Azure Mobile Service:

This options allows us to call the azure mobile service from the specified host (e.g. localhost). This option is only necessary if you like to call an Azure deployed Mobile Service app.

HTML app

After Creating the Azure Mobile Service AAD application we create a new AAD app for the HTML app with the following settings:

htmlapp_aad_1htmlapp_aad_2

Note: The APP-ID Url must not be a real URL, it’s more a unique identifier for your app. More Information about this¬†here

After creating the Azure Active Directory app we can configure out HTML Angular app to use this AAD app with ADAL.js:

You can get the ClientID from the Azure Active Directory app:

htmlapp_aad_clientid

The redirectUri should also match the reply url you’ve configured in your Active Directory app:

htmlapp_aad_replyuri

For more information about how to use ADAL.js with Angular take a look at Vittorio Bertoccis blog post.

Another important step is to configure “oauth2AllowImplicitFlow” option in the AAD app Manifest. You can download this manifest from the “Configure” page of the AAD application:

manage_manifest

After downloading the manifest open it and set “oauth2AllowImplicitFlow” to “true”. This enables the OAuth client flow which is needed for client side (=javascript) authentication.

The last configuration we need to apply allows our HTML app to request access tokens for the Azure Mobile Service app. To do this we need to add the Azure Mobile Service app under “permissions to other applications” and delegate the “Access” permission:

access

Note: After clicking “Add application” you have to select “all Apps” to list all available apps.

Authenticate against Azure Mobile Service

Now that we have configured Azure AD for our HTML and Azure Mobile Service app we can extend the HTML app to authenticate against the Azure Mobile Service. To do this, we need to tell ADAL.js that we want to authenticate against this endpoint, so we need to add an endpoint configuration to out ADAL.js config:

The first part of the endpoint is the url of the endpoint, the second part is the APP-ID URI of the Azure Mobile Service AAD application. ADAL.js now injects into every call to the specified endpoint url a bearer token. Sadly Azure Mobile Service doesn’t use this token for authentication. Instead it uses its own token provided in a “X-ZUMO-AUTH” header. To get the token we can use the¬†client-directed login operation¬†. This allows us to get an Azure Mobile Service auth token for an already obtained AAD token. So we need to obtain an OAuth token for our Azure Mobile Service AAD app and present this token to Azure Mobile Service to get a valid Azure Mobile Service token. A little bit complicated but OK, let’s try this:

Summary

After this long post here are the key points:

  • Create a Azure Active Directory application for the Azure Mobile Service app and the HTML app
  • The HTML AAD app must have the set the “oauth2AllowImplicitFlow” option to “true” in the manifest
  • The HTML AAD app must have access to the Azure Mobile Service app (under “permissions to other applications)
  • The HTML App must have ADAL.js be configured with a endpoint for the Azure Mobile Service app
  • You have to use the¬†client-directed login operation¬†in your HTML app

If you find a more elegant solution for this problem or need further help, please let me know.

 

IF-Blueprint Hackathon im Juni 2015

Du hast Spa√ü am Programmieren, interessierst dich f√ľr Microsoft Technologien oder Internet of Things? Dann bist du recht herzlich zu unserem IF-Blueprint Hackathon eingeladen!

Was?

  • Wir haben zwar unseren Schwerpunkt auf Microsoft Technologien, wie C#, Visual Studio, ASP.Net, Office 365, Azure usw. aber man kann auch mit Java, Node.js etc. Office Apps und Co. entwickeln
  • Apps f√ľr IoT Devices

Wo?

IF-Blueprint AG Leipziger Straße 16 82008 Unterhaching

Wann?

13. Juni 2015 ab 10:00 Uhr

Was bieten wir?

  • Essen, Snacks und Getr√§nke
  • XBOX Ecke zum Chillen
  • Verschiedene Hardware wie IoT Devices (Arduino, Netduino, Intel Edison/Galileo) inkl. Sensoren und Lumia Phones f√ľr Windows Phone App Entwicklung

Agenda

  • 10:00 Begr√ľ√üung und Vorstellung
  • 11:00 Vorstellung der Projektideen
  • 12:00 Coding & Hacking
  • 23:00 Pr√§sentation der Ergebnisse

Du hast Interesse?¬†Hier geht’s zur Anmeldung. Anmeldeschluss ist der 7. Juni. Du ben√∂tigst nur einen Laptop mit Deiner Entwicklungsumgebung. Bei Fragen stehen wir Dir unter¬†events@if-blueprint.de

IF-Blueprint Hackathon im März 2015

Du hast Spa√ü am Programmieren, interessierst dich f√ľr Microsoft Technologien oder Internet of Things? Dann bist du recht herzlich zu unserem IF-Blueprint Hackathon eingeladen!

Was?

  • Wir haben zwar unseren Schwerpunkt auf Microsoft Technologien, wie C#, Visual Studio, ASP.Net, Office 365, Azure usw. aber man kann auch mit Java, Node.js etc. Office Apps und Co. entwickeln
  • Apps f√ľr IoT Devices

Wo?

IF-Blueprint AG
Leipziger Straße 16
82008 Unterhaching

Wann?

14. März 2015 ab 10:00 Uhr

Was bieten wir?

  • Essen, Snacks und Getr√§nke
  • XBOX Ecke zum Chillen
  • Verschiedene Hardware wie IoT Devices (Arduino, Netduino, Intel Edison/Galileo) inkl. Sensoren und Lumia Phones f√ľr Windows Phone App Entwicklung

Agenda

  • 10:00 Begr√ľ√üung und Vorstellung
  • 11:00 Vorstellung der Projektideen
  • 12:00 Coding & Hacking
  • 23:00 Pr√§sentation der Ergebnisse

Du hast Interesse? Hier geht’s zur Anmeldung.
Anmeldeschluss ist der 2. M√§rz. Du ben√∂tigst nur einen Laptop mit Deiner Entwicklungsumgebung. Bei Fragen stehen wir Dir unter events@if-blueprint.de zur Verf√ľgung.