jQuery has been tightly integrated in the framework since Yii 1, and bootstrap has been the standard frontend css/js library for Yii 2. Now they are separated from the core in Yii 3.
So my question goes like this:
From what point are jQuery and bootstrap required and included in my Yii 3 project?
What should I do if I wanted to use the alternatives to them?
As for the first question, I’ve got some idea by reading the package list and the composer.json of some packages.
package
depends on jQuery
depends on bootstrap
yii-core
-
-
yii-web
-
-
yii-console
-
-
yii-api
-
-
yii-base-web
yes
yes
yii-base-cli
-
-
yii-base-api
-
-
yii-bootstrap3
yes
yes
yii-masked-input
yes
-
yii-bootstrap4
yes
yes
yii-captcha
-
-
So a web app in Yii 3 requires jQuery and bootstrap by default when you use “yii-base-web” template.
And since “ActiveForm” and the likes are not included in “yii-web” but in “yii-bootstrap4”, they are free from jQuery but still depend on bootstrap.they are not free from jQuery. Both bootstrap 3 and 4 require jQuery.
Is this correct?
As for the 2nd question, I’d like to know what I should do when I wanted to get rid of jQuery and bootstrap completely from my web app and use some alternatives. Do I have to modify yii-base-web template’s composer.json and require some alternative 3-rd party (or my own) packages?
I don’t have good answers for the first qestion but I think I can give insights for the second.
This sounds to me like you want Yii for only backend while doing frontend yourself. In that case I think Using Rest API template as JSON serving backend and choose one of front end JS framework like Vue.js or Ember.js.
That comes with assumption that you don’t want a PHP front end. If that’s the case I believe you need yii-view. I don’t know much of what it currently does as separate package as the Guide link inside Readme is broken. But I guess it’s necessary to render PHP templates.
What I have in mind is a PHP frontend without jQuery and bootstrap, but with some jQuery alternative like Cash and Umbrella, or just with vanilla javascript.
Dependencies aren’t final. Ideally we want our packages as less coupled as possible. Frontend-wise, we want to be decoupled from any particular JS-framework.
I see.
So “yii-bootstrap4” (and hence “yii-jquery”) will be a must item when you want a quick and easy development of a web app (in a traditional style) using Yii 3, at least at the moment, because ActiveForm requires it. Otherwise you have to make your own widgets using your favorite JS framework. Am I right?
I believe the reason (or one of the reasons) is client side validation or similar functionality. If it can be written with pure JS with easy then that will be better. If not I think of having “base” ActiveForm, which uses pure HTML with no JS at all and no client side thing and bootstrap/ActiveForm which will have the bells and whistles and will make use of Bootstrap classes and may be JQuery for client side stuffs.
That way you can just use “base” active form and style it with whatever classes and validate it whatever way you wish.
Guys, someone has to develop frontend bindings for altenative JS framework, if you don’t want to use jquery.
Since it’s pretty complex task, nobody has done it yet - you might be the first one …
I mean having source JS files that use require and module.exports (or ES6 native import and export with Webpack and/or Babel) so that it can be bundled in our own JavaScript, along JS files that are already browser-ready.
It’s similar to separating responsibilities of PHP into different files and then using the file. Then you can import them into another file as a dependency. Using a bundler like Webpack or Rollup can create a single file and/or smaller bundles, such as vendor files vs core application files.
Another advantage is that Webpack can tree shake to remove unused JS (I believe with the import/export statements only). So if we have a form we can import the Yii JS validator and just the validation rules needed for that form instead of loading all of the Yii JS, when much of it probably isn’t necessary for that page.
So a quick example would be (just to get the idea across, not meant to be 100% accurate)
import Validator from '/vendor/yiisoft/yii3/src/js/validation/Validator';
import LengthValidator from '/vendor/yiisoft/yii3/src/js/validation/LengthValidator';
var maxlength = new LengthValidator({max: 8});
var inputField = document.getElementById('someinput');
var validator = new Validator(inputField, maxlength);
// ...
Of course that’s a rough example thrown together, but it should convey the idea. And that would all be bundled and have a dist version ready to go without the developer(s) having to use Node, bundlers, or the like. However, those that do would be able to include in their own JS.
Well in the example above it would run through a bundler, I recommend Webpack. No polyfill needed. Webpack would bundle the files as configured by the developers (can code split to have multiple smaller bundles, vendor bundle, or one big bundle).
So it outputs it as a normal JS file with Webpack wrappers that don’t have the imports/require, or export statements, it’s converted to normal function calls.
I created this simple example:
So the source is comprised of three files, the entry file (index.js), a class Person, and what would be a config file with names (members of the Yii team ;D ).
The names.js and Person.js are imported into the the index.js and bundled as one file, built in /dist, with the magic of Webpack and some Babel (added a touch of ESLint stuff for preventing false positives with validation). Babel isn’t even necessary (but I’d recommend). Babel can handle transpiling code, especially experimental features into standard syntax, as well as provide necessary polyfills. The output in the dist file is browser-ready.
)