161

AngularJS is very powerful when it comes to interactive HTML5 and model binding. On the other hand, PHP frameworks like Yii enable quick, well-structured, safe and powerful web application development. Both technologies provide sophisticated means for data access, iteration and page layouting.

Is it good or bad practice to mix those two approaches (client-side and server-side "page setup") or is this rather against the meaning of interactive, seamless HTML5 AJAX web applications?

I am not talking about generating JS using PHP (See this question) - I'm talking about generating a view that will make use of AngularJS.

I also know that an AngularJS page should (or can) communicate with the server via REST services to get data (See this question) instead of retrieving it from for example PHP variables directly. But to me it seems more convenient to design the "frame" for the entire web application separately in PHP (e.g. build the main menu or handle authorization/ sessions etc.)

Community
  • 1
  • 1
Dani
  • 2,502
  • 2
  • 19
  • 25
  • 28
    Great question. I wish there was a StackExchange location designed for this type of question. I am used to PHP and have a cURL project for gathering a lot of data myself, and believe a JavaScript framework over library would be a good fit into my project. My problem is like yours, I want to know what is a good practice (upsides and downsides) along with what parts do you drop from original project (PHP) etc. I believe these conversations could solicit debate, but how can we get to the best merge of the two languages without a conversation. – Shane Apr 21 '13 at 22:08
  • I have some AngularJS projects that I am converting back to PHP/Jquery. I have had endless issues with getting angular to work with a wide variety of mobile devices and browsers. Angular is difficult to SEO and google is not its friend. I have seen sites with top ranking vanish out the SERPS due to switching over to angular... – HappyCoder Mar 27 '18 at 13:33

1 Answers1

180

It seems you may be more comfortable with developing in PHP you let this hold you back from utilizing the full potential with web applications.

It is indeed possible to have PHP render partials and whole views, but I would not recommend it.

To fully utilize the possibilities of HTML and javascript to make a web application, that is, a web page that acts more like an application and relies heavily on client side rendering, you should consider letting the client maintain all responsibility of managing state and presentation. This will be easier to maintain, and will be more user friendly.

I would recommend you to get more comfortable thinking in a more API centric approach. Rather than having PHP output a pre-rendered view, and use angular for mere DOM manipulation, you should consider having the PHP backend output the data that should be acted upon RESTFully, and have Angular present it.

Using PHP to render the view:

/user/account

if($loggedIn)
{
    echo "<p>Logged in as ".$user."</p>";
}
else
{
    echo "Please log in.";
}

How the same problem can be solved with an API centric approach by outputting JSON like this:

api/auth/

{
  authorized:true,
  user: {
      username: 'Joe', 
      securityToken: 'secret'
  }
}

and in Angular you could do a get, and handle the response client side.

$http.post("http://example.com/api/auth", {})
.success(function(data) {
    $scope.isLoggedIn = data.authorized;
});

To blend both client side and server side the way you proposed may be fit for smaller projects where maintainance is not important and you are the single author, but I lean more towards the API centric way as this will be more correct separation of conserns and will be easier to maintain.

Kenneth Lynne
  • 14,847
  • 11
  • 57
  • 75
  • 2
    To simple of an example. I myself was looking for more than just a super duper basic login everyone does. Big difference when you have PHP/HTML and variables $name over { { name } } and then 'app.run(function($rootScope) {$rootScope.name = "Ari Lerner";});' I myself am trying to see/find the upside of trying or attempting to have PHP make 'DYNAMIC' Angular Pages. And just not seeing it. Having a client wait to load each individual element and populate/change the templates. Just not keen on the idea of PHP generating a wall of javascript like that just yet, and easily viewable – Shawn Rebelo Jan 28 '15 at 17:05
  • 2
    @ShawnRebelo Can you clarify a bit what you mean by `a wall of javascript`? I'm new to the Angular / JS API world after years of PHP rendering, so this discussion is interesting to me. – Dan Nissenbaum Apr 02 '15 at 16:10
  • "Rather than having PHP output a pre-rendered view, and use angular for mere DOM manipulation..." - Let me introduce to you a [new-old concept](http://alistapart.com/article/understandingprogressiveenhancement). – Dissident Rage Sep 19 '16 at 19:19
  • That's exactly how it should be, a restful API from backend can be any language and an angular app for front-end can work regardless of the backend. – Amir Savand Jan 28 '17 at 01:36
  • 3
    What I cannot understand is why should I load a generic page with placeholders and then load some part with one or more async requets to get something that I already had in first page load like user/auth data? – Tobia Mar 21 '17 at 21:37