ReactJS versus VueJS for Apps Script add-on

[Hugues Gallier]

Hey all,

Just wanted to know which one of React or Vue I should use to build an add-on. 

I have started building an add-on without them, but reached pretty quickly the limit of what is achievable like this with reasonable efforts.

 

I am thinking to move to VueJS, as I have seen it to be the recommended way (I saw several chats from Alex Ivanov and Bruce mcpherson, with really good examples).

Nonetheless, I have some experience in React and was considering React like in here. This nonetheless seems more complicated than Vue.

Additional question: I am always surprised that GAS forces us to code our client-side Javascript inline in HTML files... Are they planning to change this? I guess a reason could be that functions in GAS are available everywhere by default, and so would maybe cause some side-effect between backend and frontend. But this seems not so difficult to handle no? Like having a definition at the beginning of the file... There might of course be also a lot of other reasons that I'm not seeing!

Thanks a lot for your time and answers,

Hugues

[Hugues Gallier]

Note: For the additional question, I am not very experienced in Front-end development. In particular, I am not very familiar with compiling my code in a dist folder, which might be the answer to the problem.

[Bruce Mcpherson]

Hi Hugues

I use both outside apps script but I find react a little too heavy.

I write all my code as server side scripts and pull it into html service as required. That allows me to use the same coffee server and client slide if required, but also to use the ide properly for both. That could be problematic with jsx, so I stay away from react with apps script.

Here's how i use Vue.

https://ramblings.mcpher.com/vuejs-apps-script-add-ons/

--
You received this message because you are subscribed to the Google Groups "Google Apps Script Community" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-apps-script-c...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-apps-script-community/43d651ec-9696-4ab0-8180-3129b57a55d8n%40googlegroups.com.

[Hugues Gallier]

Hi Bruce,

Thank you very much for your answer. I really liked your blog post, and the one on Fiddler too.

It is confirming for me that Vue is the right way to go, I started using this, as I like the structure of it.

Have a great day

[cwl...@gmail.com]

Thanks for bringing up this topic. I haven't settled on a single framework/library that I want to dedicate myself to learning. Since I'm more of a hobbyist and don't code for a living, I do get to chose which one makes sense. 

Vue has a better "feel" and ease (and dare I say 'gracefulness'?) to it. But I hesitate diving in since the better approach might be Svelte. Since all my stuff resides on the Google servers as scripts or served html, to me it makes sense just to compile it all first anyway.  
So I guess that is my question: when using React and/or Vue (or something else), do you compile and then upload to Google? or do you let the user's browser do the work? Or am I not understanding how things work? lol

Thanks,

[Emerson Maia]

Good morning, I use react and I use parcel to package the project, I like it very quickly and it always solves it.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-apps-script-community/b9125698-7bbe-4098-a69b-0779c9a1f4b0n%40googlegroups.com.

[Bruce Mcpherson]

For Apps Script, I just use the vue/vuetify/vuex cdn and let the browser pick it up. Probably quite a bit of code for the apps script project to lug around. In normal operation id' use node/vue/webpack to compile

To view this discussion on the web visit https://groups.google.com/d/msgid/google-apps-script-community/b9125698-7bbe-4098-a69b-0779c9a1f4b0n%40googlegroups.com.

[Bruce Mcpherson]

Yes - that's a good approach too, especially if you are using clasp/node etc already. 

My solution is aimed for those that are just working in the IDE.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-apps-script-community/93c50c2e-2736-4767-98ea-0ead58546f7en%40googlegroups.com.

[Hugues Gallier]

I didn't know about Svelte nor parcel, I'll have a look as well.

Thanks to all of you for your answers

[Alex]

I've used AngularJS, Angular2+, Vue1,2,3, React10+ and I want to say -- It's a pain!

If you really need to use this tons of code you need to think again. 

If you still decide, I advise you to use:

• google/clasp
• AlpineJS
  • or AngularJS
  • or Vue2
• I'm using gulp to wrap all this zoo. There is my Start Kit

Cheers!

[Alex]

Bruce, 

unfortunately your resource ramblings.mcpher.com is not avaible from Russia.

This site can’t be reachedramblings.mcpher.com took too long to respond.
Try:

Checking the connection
Checking the proxy and the firewall
ERR_CONNECTION_TIMED_OUT

[Hugues Gallier]

After quite some time spent to adapt this and make it up-to-date (with Vue3 and node 18), I must admit this is definitely not an easy task.

Your starter kit looks great Alex, thank you for sharing it.

If I'm able to make the Vue project up to date I'll share it here too.

Note: I think that one does not necessarily need this much code for building an add-on in one shot, but adding features one after the other and improving based on user feedback requires it according to me. Even alone on the project, managing things with inline Javascript becomes quickly messy and hard to maintain...

[Alex]

@Hugues

That's cool!

It would be great if you could share. I don't use Vue at the moment but I was thinking about making a startkit for that in future.

It would be interesting to see your experience.

[Hugues Gallier]

Hey @Alex

It's been 10 days I have been working on this project. I was hesitating between React and Vue and:

- I went with React - main reasons being personal taste and a prefect React project template for my usecase.

- I have final minified HTML files up to 150kB => probably less with Vue..?

Details:

I went with React for the following reasons:

- This base repository is very good

- (personal reason) I have some experience in React

I first had a look at your base project @Alex, but had a hard time adapting it to my purpose :/

For Vue, there is also this base project, but :

• it has outdated dependencies (webpack3, Vue2, and html-webpack-inline-source-plugin, a crucial plugin, is not maintained)
  
• its structure is more designed for a WebApp (with only 1 frontend) but not for an add-on (multiple dialogs / sidebars etc).
  A webpack pro would probably be able to solve this, but I had a hard time adapting the Vue project to the add-on case.
  After researching, I think that Vite and this plugin can be used to solve this issue.

(Just wanted to state that GAS open-source projects are great, and that I am really thankful to everyone releasing them. 

If it took me too long to adapt some of them, it's 100% on me, I'm still quite new to Front-end Development.)

I'll share here the final add-on when it will be listed.

Cheers!

[Serge K.]

In case you like python + fastapi or flask

I develop an opensource project to help you build Google Workspace addons using CardService. This is what I use for my addons.

here the link: https://github.com/skoudoro/gapps

and here an example using the cats tutorial from google : https://github.com/skoudoro/gapps/blob/main/docs/examples/cats.py

Cheers !

[Alex]

@Serge

Is it for self-hosted addons?

[rupam.p...@gmail.com]

Over the years, I've built an over-engineered package/framework to use React in apps-script add-ons. The current version is built with Pnpm + Vite + Rollup.

Rollup is used to bundle server-side code (apps script) and Vite for bundling client side html (Sidebar / modal) code.

It's inspired by two other starter kits ( this and this ).

Initially I was using Parcel (switched to vite now) to bundle client side code (outputs .html files with inlined js & css codes).

Later I added a way to upload js and css assets automatically to CDN during build.

As it's using Vite, any frameworks (supported by vite) should work.

Here's my workflow:

During development, I run "pnpm run gas:dev". It bundles server code and uploads to apps script, starts a local server to serve client code ... (it's actually complex). I can make updates to both server side and client side code and it will sync automatically in background.

To deploy, I run "pnpm run gas:deploy:staging" or "pnpm run gas:deploy:production" (I use two separate apps script projects). It will bundle and upload to apps-script and to the CDN.

Any add-ons built with this ?

Yes, Mailway Mail Merge (React + Chakra UI) and currently I'm working on Tenwrite (React + Tailwind + Flowbite)

It's currently not open-sourced. I was planning to open-source it, but never felt encouraged enough as there's already a lot of starter kits out there.

Also, it would be overkill for beginners.

[Alex]

@rupam 

show your code

[Alex]

@Hugues

Now I'm thinking I need a GAS+Vue3 app. And I'd like ask you how are you? Did you run the workflow? 

[H]

Hey @Alex,

In the end I went for the React approach.

I am using MUI and this repository.

I was a bit concerned for the bundle size, but with CDN it stays fine, and does not take too long to charge.

[Alex]

I see!

Thank you!

I'm going to use gas-client and Google-Apps-Script-Webpack-Dev-Server from https://github.com/enuchi for Vue3 implementation for my next project.

[Steven Bazyl]

Tossing in my take for consideration :)

https://github.com/sqrrrl/apps-script-typescript-rollup-starter

Example is using Lit, but should be easy to adapt to React, Vue, etc.

--
You received this message because you are subscribed to the Google Groups "Google Apps Script Community" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-apps-script-c...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-apps-script-community/d654b751-382b-440a-af0d-4f4cff8152c6n%40googlegroups.com.

[Alex]

Thank you so much!

Can I use this with live reloading develop?

[rupam.p...@gmail.com]

@Alex,

All right. I'll open source it after doing some cleanup. Will let you know.

[Steven Bazyl]

Sort of. It will auto deploy changes to apps script as you save, but I haven't enabled hot-reloading of HTML/JS.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-apps-script-community/a552f1f4-99e0-4aa0-8e93-7819541d20f0n%40googlegroups.com.

[Alex]

OK

Thanks so much for your answers.

As for me, I don't see any problems in the assembly. I'm mainly interested in development processes in production mode, where I can locally update the interface in the iframe and all that.

[rupam.p...@gmail.com]

Sorry for the delay guys. Here it is : https://github.com/rupampoddar/apps-script-template . The readme file is not ready yet. I'll add a step-by-step guide tomorrow. In the meantime, if you want to use it, here's a short guide:

1. clone the repo

2. Install pnpm and mkcert

3. Install the dependencies (pnpm i)

4. Enable apps script api ( https://script.google.com/home/usersettings )

5. Go to apps/gas-root folder and rename the .example files (remove the .example extension)

6. Go to apps/gas-backend folder and rename the .example files (remove .example extension)

7. Create 2 apps script project. One for dev/staging and another for prod. Copy the script ids and fill in the apps/gas-backend/.clasp.json files

8. From project root, run "pnpm run gas:dev". Open the project in apps script and test the deployment

9. To run "pnpm run gas:deploy:staging/production", you'll need to create a Cloudflare pages project and fill the credentials in apps/gas-cdn/package.json file

[Alex]

I'd like to try this on next weekend