[NEW THEME] 4. JS frameworks & approach

Discuss requests for comments/changes posted in the Issue Tracker for the development of phpBB's style.
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.
User avatar
hanakin
Infrastructure Team
Infrastructure Team
Posts: 836
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

[NEW THEME] 4. JS frameworks & approach

Post by hanakin » Sat Mar 24, 2018 1:41 pm

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

User avatar
DavidIQ
Customisations Team Leader
Customisations Team Leader
Posts: 1778
Joined: Thu Mar 02, 2006 4:29 pm
Location: Earth
Contact:

Re: [NEW THEME] 4. JS frameworks & approach

Post by DavidIQ » Wed Mar 28, 2018 1:48 pm

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.
Image

User avatar
hanakin
Infrastructure Team
Infrastructure Team
Posts: 836
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: [NEW THEME] 4. JS frameworks & approach

Post by hanakin » Wed Mar 28, 2018 5:10 pm

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.

CHItA
Development Team
Development Team
Posts: 152
Joined: Thu Mar 12, 2015 1:43 pm
Location: Budapest, Hungary

Re: [NEW THEME] 4. JS frameworks & approach

Post by CHItA » Tue May 01, 2018 10:33 pm

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.

User avatar
hanakin
Infrastructure Team
Infrastructure Team
Posts: 836
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: [NEW THEME] 4. JS frameworks & approach

Post by hanakin » Wed May 02, 2018 1:08 am

💯 not true pure js is getting better but still does not compare to jQuery and can not do anything vue can do

CHItA
Development Team
Development Team
Posts: 152
Joined: Thu Mar 12, 2015 1:43 pm
Location: Budapest, Hungary

Re: [NEW THEME] 4. JS frameworks & approach

Post by CHItA » Wed May 02, 2018 6:29 am

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.

User avatar
DavidIQ
Customisations Team Leader
Customisations Team Leader
Posts: 1778
Joined: Thu Mar 02, 2006 4:29 pm
Location: Earth
Contact:

Re: [NEW THEME] 4. JS frameworks & approach

Post by DavidIQ » Wed May 02, 2018 9:01 am

We leverage jQuery for all things AJAX.
Image

User avatar
hanakin
Infrastructure Team
Infrastructure Team
Posts: 836
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: [NEW THEME] 4. JS frameworks & approach

Post by hanakin » Wed May 02, 2018 9:53 am

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.

CHItA
Development Team
Development Team
Posts: 152
Joined: Thu Mar 12, 2015 1:43 pm
Location: Budapest, Hungary

Re: [NEW THEME] 4. JS frameworks & approach

Post by CHItA » Wed May 02, 2018 11:05 am

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).

User avatar
david63
Registered User
Posts: 245
Joined: Mon Feb 07, 2005 7:23 am
Location: Lancashire, UK

Re: [NEW THEME] 4. JS frameworks & approach

Post by david63 » Wed May 02, 2018 1:30 pm

CHItA wrote:
Wed May 02, 2018 11:05 am
so if Vue could replace jQuery then we could just write everything in Vue
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!

Post Reply