Front end design for RESTful Web API

0
votes

I am developing a RESTful web API.

I want the frontend to look beautiful (i.e. professional and polished) - BUT I am NOT a designer, and most designers don't know what JSON is, or don't know what to do with the JSON output from my web API.

I am looking at using ReactJS or AngularJS to put together a frontend myself, but I'm not a designer, and this is a job best done by a designer - problem is that most designers don't know what to do with the JSON output, so it's like I'm in a vicious circle...

My question is this (assuming there are no professional website templates I can use for Angular/React - because I can't find any)

What is the practical way of solving the problem of not being a designer, and having to communicate with designers who don't grok JSON output?

2
angularjsuser-interfacereactjsfrontend
What's the scope of your designers? Do they simply provide the CSS and basic HTML markup, or are they going to be writing the React/Angular application too and simply pulling data from your API? - Tom
@Tom. They will simply providing the HTML/CSS. I think I'll get them to provide the HTML/CSS and then I will have to decide how to generate the static HTML from Angular/React. - Homunculus Reticulli
In that case I'm not sure why the designers need to know about your data - you'll be writing the app which will be retrieving the data from your API and displaying it to the page, the designers will just be concerned with how it's going to look. If they need some data for their mockups then you can provide them with sample data that doesn't need to be in a JSON format :) - Tom

2 Answers

1
votes
  1. If your Designer is ready to learn new things then you have to tell him
    learn JSON it's a very easy.
  2. if he is not ready no problem just tell him put the dummy data at the time of design and once the design is complete you can bind the API so you will get actual data

just simple example of second point suppose your designer design the Select Element like

Designer design 

<select class="XYZ">
 <option>Customer</option>
 <option>Client</option>
 <option>Users</option>
</select>

Developer Modification in React

<select className="XYZ">
    {Data} 
</select>

here {Data} is nothing but you have to bind the Option with API data like 

var Data=Object.keys(response).map(function(_res){
         return(
            <option>response[_res].Name</option>
            )
          });
0
votes

First of all being an angular/webapi developer, you will not be dealing with designing part as that will be done by designer.

If I have understood your question completely,I'd like to give an example of how you (being angular/webapi developer) and designer will work and communicate together.

Consider this approach,

There is one project that you and your designer have to work on. You have all requirement of client. Now designer starts his work. let's say at some point, he needs to make a list with ui-li tag. being angularjs/webapi developer, you have written a web api which returns list (json)

{"id":"1","name":"title1",
"id":"2","name":"title2",}

Now you designer doesn't understand this syntax. So, question is how would he make appropriate design of HTML? simple,

He will make or write pure html tags. Let's say he has written below pure html code to generate a list,

... (designer will write static code)

<ul>
  <li> something1 </li>
  <li> something2 </li>
</ul>

...

now what you will do is, you will take/consider/review his html code, and you will modify his html code accordingly in order to use it with ANGULARjs.

you will modify it as below, ... (angualr developer will write dyanmic code)

<ul>
  <li ng-repeat="title in titiles"> {{title.name}} </li>
</ul>

...

Note: I have written thousand of RESTful Web API in .net and being angualrjs developer too I have changed static code given by my designer.

I hope this will help you.