ReactJS and AngularJS 2.0 in the Yii 2.0 view as components

Dear All,

I am eager to keep up with the new technology. I see that AngularJS 2.0 and ReactJS as the leading technologies for front end. While yii 2.0 is my favorite framework.

I ever asked whether Angular JS 2.0 as component in the view of Yii 2.0 is such a best practice? Someone mentioned that it was not. Used yii 2.0 as rest provider and back end and Angular JS 2.0 as the front end.

FYI, I am new to yii 2.0, angular js and reactjs. I just have some experiences with yii 1.1.

My understanding so far is Angular JS 2.0 and ReactJS are kind of component or a page built using AngularJS 2.0 or ReactJS is actually a list of components inside components. They still need bootstrap, foundation or other similar theme frameworks.

Hence, I am thinking why we cannot use them inside Yii 2.0 view? Yii 2.0 provides bootstrap by default.

I do apologise if I have wrong understanding. That is why I am asking in this forum to get better understanding of them.

If it can be a best practice, can anyone suggest which one is better ReactJS or Angular JS in term of using it with yii 2.0? I believe ReactJS and Angular JS both are very good frameworks.

Thank you in advance for helping me.

Daniel

You can use Angular inside Yii view. The thing is that usually these are used for applications, not websites i.e. you have application loaded once and then it works via AJAX with REST backend made with Yii so Yii is not participating in rendering HTML at all.

It doesn’t really matter if Angular or React are chosen. Yii’s job in both cases is to provide data via REST API.

Nope, it’s just part of default project templates. Framework itself doesn’t provide it by default. It’s a separate official extension.

Hi samdark,

Thanks for the prompt reply.

Yes, I am talking about using yii2 as web application.

Do you think it is overkill to use yii2 and reactjs/angular?

Do you think is it better to use yii2 as rest provider and front end just reactjs/angular without yii2 as seperate project?

I just feel too convenience with yii such that moving to reactjs/angular will drive me further from yii and tempted to use nodejs (completely without yii).

On the other hand, I am afraid using reactjs/angular with yii will make the app slower since I need to load unused yii library.

TIA,

Daniel

If you want to make SPA (single page application) - there is no reason to use Yii2 for html rendering.

In this case you will need Yii2 for backend rest api only.

If you want to make website with many dynamic pages - you can use Yii2 with angular/react libraries for html rendering.

Nope. Yii is built with lazy loading in mind so unused parts are never loaded, cached or executed. So each time only used things are taking time and memory.

Hi samdark and mikezimin,

Thank you for your great explanations.

It is become clearer for me and I could not wait to use those great technologies in yii, and I do not need to move from yii.

I was wondering if someone could help me with understanding the request routing with a Yii2 app that uses ReactJS as it’s view component.

So I have built a ReactJS app using Webpack that produces the app.js and app.css bundles along with index.html (as the SPA). I will adding in the REST calls in componentDidMount() etc as I go progress with the dev.

So my Apache config and .htaccess directs to index.html to load the ReactJS SPA.




<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8">

    <title>Index page</title>

    <link href="app.css" rel="stylesheet">

  </head>

  <body>

    <div id="app"></div>

    <script type="text/javascript" src="app.js"></script>

  </body>

</html>



Now, how do I handle routing to the REST calls? I understand the best way to do this in terms of route structure is with using api in the url -> www.thewebsite.com/api/controller/action but I am unsure of how to config the system so it know when the HTTP request should be to load the index.html file and when it should simply be handled as a REST request simply return the JSON data.

I would greatly appreciate any advice.

you are on the right track suppose you have your index.html in app/web your apache is pointing to that folder to serve whatever contents are there, now when you hit your root url you will see your index.html provided you have setup index.html to be your index page.

you can use mod_rewrite to detect api prefix and route all that traffic to index.php to have clean urls or simply prefix all your api calls with index.php for example


http://localhost/index.php/api/controller/action