Yii2: Improving the documentation how to use Yii with ReactJS and with other JS frameworks

[dabagab]

Improving the documentation how to use Yii with ReactJS and with other JS frameworks.
The JS frameworks become more mainstream, it would be get a best practice from you guys how to integrate React, Angular or Vue js into our Yii application.

[cebe]

Could you elaborate on what kind of integration you need and what specifically should be documented?

[dabagab]

Like in the Laravel documentation.

• Location of the js framework files where we should put the Vue/React/Angular code? (under the assets or create a new directory for it under the web folder?)
• Just a little code snippet how to write a React/Vue/Angular code with hello world example and how to work with the Yii render function to pass values to the React/Vue/Angular functions. (Or with the Yii Rest API) How to integrate wit the Yii/PHP template like in the Laravel documentation.

It would be fine if there will be an official suggestion from you and the yii team where we should put the files and how to connect with the Yii controllers to fetch data. For example like how to re-write the login page (of advanced app) into React

[samdark]

That sounds like a good candidate for a cookbook recipe but not so good content for the guide since it's more about JS frameworks than about Yii.

[dynasource]

It's about how to use Yii with JS frameworks so i.m.o. this should be part of the guide.

[samdark]

@dynasource any thoughts about where to put it?

[dynasource]

what about the integration topic? http://www.yiiframework.com/doc-2.0/guide-tutorial-yii-integration.html

[samdark]

Definitely not there. That is about integration with third party code. Angular/React stuff is closer to APIs.

[tunecino]

I agree with @samdark. Those are modern frameworks designed to consume API's. With service workers those JS apps can now live in browser, work offline, open their own thread for background synchronization. That new progressive programming approach, the ability to get your app working out of a browser by just grabbing your code into Electron or NativeScript or whatever they are doing now that you'd probably end up running it in a freezer :) I think giving official docs on how to force those app to be only hosted along with backend code or wait for server responses or whatever goes against their original design is something Yii Framework shouldn't do to avoid giving bad practices.

[tunecino]

Just a little code snippet how to write a React/Vue/Angular code with hello world example and how to work with the Yii render function

This mix of routing should be avoided IMHO. If any example to add I suggest to make it only about API's

[dynasource]

Definitely not there. That is about integration with third party code.

This topic is about integration and if that it not the place, the guide is lacking a chapter about integration of the Yii framework with its outer scope (which will become more and more common in the future)

I think giving official docs on how to force those app to be only hosted along with backend code or wait for server responses or whatever goes against their original design is something Yii Framework shouldn't do to avoid giving bad practices.

The guide is meant to give people useful information. Currently, there is none about integrating JS frameworks, so it is lacking. I too have searched for this topic in the guide. Whether or not it is advisible to use Yii for, it is not a reason to neglect the whole subject. The guide is an excellent tool to give developers pointers, tips and risk about using JS frameworks with Yii.

[tunecino]

Well it could be an extra topic about AssetBundle then like it is done in this tutorial to integrate Angular 1.x: http://blog.neattutorials.com/angularjs-yii2-part-1-routing/ while I don't like integrating Angular that way. Maybe other frameworks but not those.

Whether or not it is advisable to use Yii for

It is advisable to use Yii for. My point is Yii already implements RESTful Web Service APIs which is the correct way to communicate with those particular frameworks (React/Vue/Angular) without having to do any integration. Just 2 independent applications:

SERVER <-- Yii app to provide RESTful api
CLIENT <-- JS app to consume it

For example, I use this structure for a SERVER app: https://github.com/tunecino/yii2-app-advanced which is a fork from advanced template to which I have added api folder to provide resources and auth folder to provide refresh/access tokens as a simple OAuth2 implementation. Then CLIENT could be whatever frontend framework you want in that case as long as it supports REST.

The guide is an excellent tool to give developers pointers, tips and risk about using JS frameworks with Yii.

Good point. Such documentation could be useful if maybe integrates a different and simpler JS framework and as long as it will encourage using REST instead whenever possible. Angular2 for example have a great CLI to bootstrap templates and a tree shaking feature to exclude all the not used JS code from your files and even from core files. Those are features I don't know how we could use if we mix their code with Yii's assets.

[tunecino]

I just remembered this after seeing a case in slack chat about integrating vue.js in a single page for a specific propose in a Yii2/jQuery website. I think it make since after all, maybe you just need to integrate a plugin, a game or a drag&drop email template builder that someone made using angular in a specific page or module without needing to use REST or API or alter your website architecture.