Jump to content
manlio

Advice for noob developer. Learn something like Svelte.js or Vue.js

Recommended Posts

Hi to everybody! I'm using PW from some years now and I really love it!

Developing website is not my primary job and usually I build website starting from web templates. I prefer to use developing tools that seems quick and easy to learn and for this reason I am interested in studying something like Svelte.js and Vue.js.

I need to rebuild a backend (with messages management,profile, ecc...) and I was thinking to start from a web admin theme and then add some interactions using one of these framework/compiler.

I'm not really confident with webpack, npm, ... but anyway I can use these. I would like to have an advice about one frontend framework that I could use easily together with PW with some advice about file structures. I know PW can work with anything, but maybe a framework can be easily integrated than another. 

I know about Vue boilerplate and I have already searched the forum, but I have still doubts if it worths using something new over Jquery or if it is a waste of time in my case 🙂

Thank you for any suggestions. Have a nice day!

 

Share this post


Link to post
Share on other sites
1 hour ago, manlio said:

I know about Vue boilerplate and I have already searched the forum, but I have still doubts if it worths using something new over Jquery or if it is a waste of time in my case 🙂

I can't properly compare Svelte vs. Vue as I've zero experience from Svelte (and not a whole lot from Vue either), but regarding this question: it depends a lot on how complex stuff you're planning to build. I'm still using jQuery — or just vanilla JS, since native features have mostly caught up with jQuery by now — for stuff I can do almost completely with plain HTML and CSS (with a PHP backend), while for "complex" front-end stuff where a lot of data is processed, sorted, filtered, displayed (possibly in different ways), etc. I would definitely go with Vue.

From what I have heard, the most common argument for Vue (vs. Svelte) seems to be that the Vue community is much more mature, and you'll find a lot more ready-made stuff for it. And, of course, more people with the same issues (which, as a relative newcomer to the JS scene myself, I've found really useful).

This is all very opinionated, but the way I see it, jQuery is great if you just want to sprinkle HTML with some added-on behaviour, while for bigger stuff it actually tends to get more complex than if you'd chosen a full-blown front-end frameworks in the first place. So again, it depends on what you're actually building 🙂

If you do decide to go with Vue, for admin UI's in particular you might want to check out https://vuetifyjs.com. With Vuetify you'll have to sacrifice some freedom in terms of UI design, but once you get up to speed with it, it's pretty amazing — in many cases seemingly complex stuff gets done in a matter of minutes 😅👌

  • Like 6

Share this post


Link to post
Share on other sites

Thank you teppo for your quick reply and useful information with which I agree completely.  😀

Any other point of view is still appreciated.

Share this post


Link to post
Share on other sites

@manlio

If you want to enhance PW's backend, you're free to use whatever you find useful. Depending on the actual task / use-case, adding Vue.js or a similar SPA framework may be overkill. But if you need to build a fancy dashboard / complicated admin pages, then Vue can perhaps add some nice extras.

8 hours ago, manlio said:

some advice about file structures

Care to elaborate on this? You mean "where should these extra frontend assets be stored?" Typically under site/templates. Static assets maybe rather in site/assets/.

Make sure to check out @bernhard's epic tutorial about building your own PW module / dashboard. There's a lot of stuff "under the hood" to discover, with functionalities already available out of the box. So if you think about building something along those lines, adding a big JS framework might be overkill, too. Generally speaking it's best to get a solid grasp of vanilla JS. Frameworks tend to make you lazy - e.g. when you're using frameworks to solve problems that vanilla JS can solve just fine by itself.

A little recommendation: Here's an excellent tutorial where you learn (among other things):

  • Nuxt
  • Vue.js
  • Dynamic routing (pages, categories)
  • Axios
  • Frontend communicating with a headless CMS (I have re-written the relevant code-bits to work with PW instead of Cockpit)
  • Dynamically setting title tag + meta (stuff that some frontend devs often don't care about - but your customer surely will)
  • Deployment on Netlify (not that I would actually need that - but I guess it's nice to know what the fuss is all about)

I skipped several parts... Markdown, Tailwind... and I'm only done with half of it. But it's fun to see how easy it is to have PW generate one or two JSON files, and you're good to go (especially when you have a PW site already with lots of content to play around with). It depends if you really want to learn about all these things ("Developing website is not my primary job"), but it can't hurt.

  • Like 4

Share this post


Link to post
Share on other sites

Thank you Dragan. Actually I wanna build a fancy dashboard but not integrated in PW admin. 

Quote

Care to elaborate on this? You mean "where should these extra frontend assets be stored?" Typically under site/templates. Static assets maybe rather in site/assets/.

I'm sorry for my bad explanation but basically it is due to my lack of knowledge about this subject. I was thinking to build a SPA dashboard because it seems to be quick and reactive (lack of  SEO is not a problem). For what I have understood I should create a Vue App that manage all the pages and I should use PW just to send Json files. So in this case I was asking where to put Vue files because I'm not sure they are accessible if I put them under site/templates . Maybe outside of site/ folder? Or should I create a standard PW template which contains vue?

Please forgive my rough/orrible explanation, I will try to study more about this subject during these days starting from your provided links 🙂.

I want to try something new, but for sure, at first glance, it seems to me not so easy to start with and it seems to add a lot of layers and things to study.

Thank you!

Share this post


Link to post
Share on other sites
32 minutes ago, manlio said:

Actually I wanna build a fancy dashboard but not integrated in PW admin

Well, you can build just about anything with any (or without) frameworks.

33 minutes ago, manlio said:

and I should use PW just to send Json files

Now I'm even more confused. You certainly don't need PW just to "send JSON files".

Perhaps you'll get more productive tips and pointers if you describe what it is that you are actually trying to achieve.

12 hours ago, manlio said:

I need to rebuild a backend (with messages management,profile, ecc...)

That's as vague as it can get. So it's now PW, but... what?

Perhaps you should take some time and describe what you actually need to accomplish. And what this "backend" looks like (technically).

Share this post


Link to post
Share on other sites

I have already build a "reserved area" for logged users on my PW website some years ago. I developed the "reserved area" using front end tools (Jquery and HTML) and the users don't see PW admin backend.

Now I wanna extend and rebuild with modern tools this "reserved area" where users can modify their personal data, request certification cards for their students, publish courses, ecc... 

I was asking myself if I can have some big advantages using new frameworks, anyway your replies already cleared some doubts.

About this:

Quote

and I should use PW just to send Json files

I wrote bad and quickly, sorry. I was meaning "That’s why we went for a decoupled approach where we use only ProcessWire to edit data and then pass it to the frontend with a single request returning everything as JSON-data" taken from this article https://medium.com/icf-church-developers/processwire-vue-js-a-lovestory-d4d5bca365

 

Thanks for your patience

  • Like 2

Share this post


Link to post
Share on other sites
7 hours ago, manlio said:

I have already build a "reserved area" for logged users on my PW website some years ago. I developed the "reserved area" using front end tools (Jquery and HTML) and the users don't see PW admin backend.

Now I wanna extend and rebuild with modern tools this "reserved area" where users can modify their personal data, request certification cards for their students, publish courses, ecc...

Just an idea: it's not the most street credible way to use Vue, but if you've got an existing app and you want to give it a try to see how it would work for you, adding it via a CDN is always an option. You won't get the benefits of a build process or all of the benefits of a full blown JavaScript framework, but what you should get is a rough idea if Vue is the right fit for your needs.

Once you've (re)built a part of the admin side with Vue, you can decide to either dive in deeper, or just stick to good old jQuery+HTML 🙂

Even if you go with the full "vue create app" route, you don't have to rewrite your entire site. For an example I recently built a PW website with a single Vue app embedded within — a member catalogue with a lot of data, sorting, filtering, etc. involved. Would've been a major headache with jQuery+HTML, but Vue made it pretty easy. I used Axios and treated one path of the PW site as a simple JSON API, which was — apart from some head scratching related to Access-Control-Allow-* headers — basically a no-brainer. Would do it again.

Note: in the example above the page itself is served via PW (we've also done full-blown Vue SPA's with ProcessWire, but that's a very different route). Vue app is built in a separate location, generated JS file and required assets are moved to a directory within /site/templates/, and then the JS file is embedded within the page's markup. PW outputs a HTML element with an ID, which you then tell Vue to render the app in.

  • Like 3

Share this post


Link to post
Share on other sites

Thank you for all the precious advices! PW is an amazing software but community members like you and Dragan makes PW outstanding.

I will follow your advices and I will start rebuilding a small part of the reserved area and see what I am able to do with Vue.

Have a nice day

  • Like 1

Share this post


Link to post
Share on other sites
4 hours ago, teppo said:

Even if you go with the full "vue create app" route, you don't have to rewrite your entire site. For an example I recently built a PW website with a single Vue app embedded within — a member catalogue with a lot of data, sorting, filtering, etc. involved.

Would be very interested to get some details on this! 🙂 

  • Like 1

Share this post


Link to post
Share on other sites

You can take a look at this REST API site profile to see how the author integrated the Vue app and where he put the files within PW file structure. The small example Vue app is inside templates/client/. As always with PW, there are many different ways to accomplish things. This example is one valid route you can take.

Share this post


Link to post
Share on other sites

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...