Create layout for PHP and . NET applications

Question

Work in a public body and we have numerous web applications in PHP and .NET.

I’m working on a standard layout so we can maintain visual identity across all systems.

Is there any way (tool/framework/API) where every developer, regardless of language, can use?

The structure we set up is: Header, PostCss, Navbar, Content, Sidebar, PostScript and Footer.

In the PHP for example, I give a include file and ready. I can still customize some variables like $tituloPagina.

We’d still like to create sections like the Laravel Blade, where I can use @yield and @section.

The idea was to create an API and that in the URL, the programmer already passed the value of the variables and then mount the layout with the result’s JSON, or something like that, for example: ?tituloPagina=loremipsum&corpoPagina=centralizado.

Answer 1

The solution to this is more or less what is already in the question.

Of course the ideal is not to use various technologies, if it did it would still be better to change all that, but it may be impossible to change everything now, so you have to change at least one part.

Each technology will try to make the best possible within its philosophy, will not worry about working with other so disparate.

Single Page Application

Depending on the case it is possible to do the layout all on the customer, using SPA. There are several frameworks disputing the market (the state of popularity is my perception at the time of the reply, do not take as absolute information):

• Angularjs is or was the most popular currently
• React is or was the fastest growing
• Vuejs is used by many and here closes the first division :)
• Ember.js still has strong participation
• Meteor is an option
• Extjs has resources that help
• Backbone.js has had more strength
• Knockout still have supporters
• Canjs runs on the outside
• Aurelia may interest certain people
• Polymer is one more option
• Mercury worth taking a look

If you want to use C# in the client you can now use Blazor.

Web API

The other way is to let one of these technologies take care of the layout and the other is used only as this API, as stated in the question. It has not much secret, it does not need anything special.

The . NET has something that facilitates the use of ASP.NET with Webapi. The new version integrated this technology within ASP.NET Core.

I don’t know any universally accepted tool for PHP. But in the background it’s just a standardization of how the data should be accessed.

There are no tools to help standardize between different technologies. The most that can be done is to create your own patterns, set up a library and a feedback mechanism that you can use in both technologies, but I doubt the work pays off. If it was something good to do someone would have already created something as a product.

If you have specific questions about what you need, ask specific questions.

Answer 2

From what you describe, what you need is a client-side template engine

To do so, use on both server(php and .net) receiving only the data of an API and yes, can customize

One of the most famous (I use) is Handlebars.js

Answer 3

The current proposal is the use of "javascript template engine".

There are several frameworks like angular.js, handlebars.js, mustache.js, Jquery template, Pure.js, Dust,js, Emblem.js, marckup.js, Plates.js, json2html, out of dozens.

The biggest difficulty you may have is when you need search engine compatibility.

Search bots do not compile Javascript. An implication of this is, for example, when the website loads the body of a page by ajax. Since the bot doesn’t run Javascript, it won’t even be able to make the requests unless it makes specific adaptations.

Answer 4

Complements the response of @bignow, you need to strategize and establish which tool pattern to use. You should ask yourself questions (and/or the team) about how to act, as there are currently many different ways to do what you want. Public bodies usually do this very well, I say this because I have already implanted applications contained in SPB - Public Software Portal and several of them use a strategy of creating layouts aiming at a standardization.

See a simple example, which refers to the idea raised by you. Using javascript technology, specifically the library pure.js.

<!DOCTYPE html>
<html>
<head>
  <title>PURE Unobtrusive Rendering Engine</title>
  <script src="http://pure.github.io/pure/libs/pure.js"></script>
</head>
<body>

   <!-- HTML template -->
  <ul>
    <li>
      <span></span>
    </li>
  </ul>

  <script>
    var data = {
      animals:[
        {name: 'mouse'},
        {name: 'cat'},
        {name: 'bird'},
        {name: 'dog'}
      ]
    };
    var directive = {
      'li':{
        'animal<-animals':{ //for each entry in animales name the element 'animal'
          'span': 'animal.name' //the dot selector, means the current node (here a LI)
        }
      }
    };
    $p( 'ul' ).render( data, directive );
  </script>
</body>
</html>