Seeing as how we will need to completely recode all the JS for the new theme it is a good time to discuss a way forward with JS. Currently, we are using a lot of very old code as well as some jQuery to simplify things using dom binding.
First, we need to standardize the approach and be consistent in this regard. Obviously, we will not be using old code/practices, but the question I propose we discuss is if we stick to using jQuery for everything, or really at all?
In recent years JS frameworks have been pushing the bar with the introduction of two binding frameworks like React, AngularJS, VueJS have hit the mainstream. These offer more dynamic capabilities then jQuery can on its own but with far different approaches to coding JS. One thing however that is not necessarily widely known is that most of these frameworks offer the same tooling and capability that jQuery does.
However, VueJS unlike the other two accomplishes all of this with a far smaller footprint than even jQuery. It also helps eliminate issues with binding ie do we bind to classes, ids, data-, etc... The answer with VueJS is no as it has its own binding attributes built-in which if used to just handle the simple things we perform now will set the stage going forward for transition into more robust interactive/ajax functionality in the future.
https://www.smashingmagazine.com/2018/0 ... design.com
So essentially I am suggesting that we switch to VueJS for our JS coding, we would still include jQuery as a dependency for extensions and compatibility with several libraries we may need, but code all our core code in VueJS.
I am going to work up some comparisons when I get some time to thoroughly test/compare things to help make the final determination, but want to get everyone's opinions and suggestions?
what is VueJS? here is a really good free video series https://laracasts.com/series/learn-vue-2-step-by-step
[NEW THEME] 4. JS frameworks & approach
Forum rules
Please do not post support questions regarding installing, updating, or upgrading phpBB or modifying styles of released phpBB versions. If you need support for phpBB please visit the Support Forums on phpbb.com.
If you have questions regarding creating styles please post in Styles Support & Discussion to receive proper guidance from our staff and community.
Please do not post support questions regarding installing, updating, or upgrading phpBB or modifying styles of released phpBB versions. If you need support for phpBB please visit the Support Forums on phpbb.com.
If you have questions regarding creating styles please post in Styles Support & Discussion to receive proper guidance from our staff and community.
- DavidIQ
- Customisations Team Leader
- Posts: 1904
- Joined: Thu Mar 02, 2006 4:29 pm
- Location: Earth
- Contact:
Re: [NEW THEME] 4. JS frameworks & approach
Isn’t VueJS a bit much for what we do in phpBB, same with AngularJS and React? They do a ton of things we won’t really ever do, specifically with the whole templating and component structure that is followed by them since we already have Twig. Also I think translations would be a tad difficult to work with in this type of environment. We would probably end up needing a translation API if we’re not going to have inline translation keys in JavaScript as we do now in some places.
Re: [NEW THEME] 4. JS frameworks & approach
just because you have VueJS does not mean you can not use vanilla js or jQuery. and to say that we will never use something like Angular/React/Vue is a false assumption. You can use them without the templating aspect also, but the real power of them is in the two-way binding. The template aspect of them is a separate feature. in fact you can use both twig and the templates very effectively and is really required. You would still rely on Twig for your page structure, you just use there templating to handle the individual dynamic components. Its more beneficial to use there templating over twig mixins for these cases specifically for the two way binded nature.
Re: [NEW THEME] 4. JS frameworks & approach
I would vote for droping jQuery, and using pure JS instead (basically jQuery shouldn't really have anything anymore that is harder to do in pure JS). For the more complicated stuff we could use Vue if there is a need for it.
Re: [NEW THEME] 4. JS frameworks & approach
not true pure js is getting better but still does not compare to jQuery and can not do anything vue can do
Re: [NEW THEME] 4. JS frameworks & approach
My point is that as far as I know, we only use jQuery to toggle classes and select elements. Not super sure about this, so I might be wrong, however, basically all the browsers we want to support should support JS features that would make it simple to do this (e.g. they have querySelector etc).
Vue is a different story, so I'm not agains using it if we need it. I'm not really against jQuery neither, I'm just saying we don't necessarily need it.
Vue is a different story, so I'm not agains using it if we need it. I'm not really against jQuery neither, I'm just saying we don't necessarily need it.
Re: [NEW THEME] 4. JS frameworks & approach
We use jquery chaining alot currently as well things like find, sibling, child, parent etc all these are not simple to do In pure js. It’s all about the amount of js we would have to write. With jquery it reduces it by 2/3. All I am saying is that the use of vue can possibly further reduce that load, but also provide some added benefits in interactivity where it is currently lacking as well.
Re: [NEW THEME] 4. JS frameworks & approach
Okay, seems reasonable, however, if vue can do what jQuery can then we could just use that, basically to only use as many libraries that we actually do need (so if Vue could replace jQuery then we could just write everything in Vue).
Re: [NEW THEME] 4. JS frameworks & approach
But remember that many extensions are written to use JQuery so just dropping it would end up "breaking" some extensions.
David
Remember: You only know what you know -
and you do not know what you do not know!
Remember: You only know what you know -
and you do not know what you do not know!