Jump to content

Loving the move to JS front end code


psy
 Share

Recommended Posts

Excited to be learning REACT/NextJS. It's so 'on-trend'. 

I can double my hourly rate, take 3x as long to deliver a website with 2/3 of the Google Lighthouse results and who doesn't love the spinner while the component content loads? 

Doing a well optimised PW site with minimal JS, fast page loads, accessibility, SEO and more built in is so old hat.

And even better, with JS frontends, the code maintenance goes on and on. No end to revenue possibilities.

FML

  • Like 7
  • Haha 8
Link to comment
Share on other sites

Unpoly 2 is promised to be released soon: http://triskweline.de/unpoly2-slides/#1

Powered with Bootstrap 5 it might be a game changer for me. I have never been a fan of Bootstrap but version 5 impressed me so far.

With the (optional) integration I can't wait to see what sort of productivity boost is possible for me by building upon both.

  • Like 2
Link to comment
Share on other sites

  • 2 weeks later...

Doing a little happy dance. Has only taken me a week to figure out how to match React/NextJS to work with @Sebi's amazing AppApi module with pages below the top level, ie routing. I'm sure many of you PHP/PW gurus would have figured it out sooner

  • Like 1
Link to comment
Share on other sites

Quote

Powered with Bootstrap 5 it might be a game changer for me

I always sticked to the golden rule: keep code separated from layout and it always served me very well.
Funny how fashions like tailwind and the ever next bootstrap invite people to break with the golden rule
and mix code again with layout

Quote

Unpoly 2 is promised to be released soon

Ajaxify is already replacing parts of a page without reloading the whole page for a long time and does it very easy

  • Like 1
Link to comment
Share on other sites

On 2/25/2021 at 9:00 AM, psy said:

Excited to be learning REACT/NextJS. It's so 'on-trend'. 

I can double my hourly rate, take 3x as long to deliver a website with 2/3 of the Google Lighthouse results and who doesn't love the spinner while the component content loads? 

Doing a well optimised PW site with minimal JS, fast page loads, accessibility, SEO and more built in is so old hat.

And even better, with JS frontends, the code maintenance goes on and on. No end to revenue possibilities.

FML

just out of curiosity, what do you think about JavaScript FullStack Dev ( the Node/Express) hype.. As a PHP developer, I am a bit confused as ' Should I jump into the Node camp or not ' :) 

Link to comment
Share on other sites

On 3/18/2021 at 11:01 PM, JeevanisM said:

Should I jump into the Node camp or not

If you are not in a hurry, I think you should not jump the Node camp, as sooner than we might think all this JSON juggling hype will become history, read: https://alistapart.com/article/the-future-of-web-software-is-html-over-websockets/

It is time to ask @ryan for support for the WebSockets-driven approach 😉 We do not want to lag behind Rails, do we?

  • Like 4
Link to comment
Share on other sites

I'm really hoping the "everything needs to be node/react/js" fad/hype dies off soon. Twice today on 'important' sites (one an airline booking site), the ajax/promise/whatever failed. Was left looking a never-ending spinner. Awkward as had no idea where my flight booking went.

Don't get me wrong, JS is useful but like most things in life, please use in moderation

  • Like 4
Link to comment
Share on other sites

On 3/19/2021 at 9:01 AM, JeevanisM said:

Should I jump into the Node camp or not '

@JeevanisM have no answer to that question. It's one I'm asking myself. I truly hope I don't simply to win business, especially for clients who don't need it but are being lemmings and following the hype. 

I Googled the "benefits of REACT" and every SERP article was written by a JS developer who confused "benefits" with "features". Eg: "It manages state" is a feature, not a clearly defined benefit to the user

  • Like 3
Link to comment
Share on other sites

9 minutes ago, 3fingers said:

I'll follow its updates for version 2 release.

According to this post: https://groups.google.com/g/unpoly/c/BUIGByZE3FE/m/7igAzadjBQAJ this is the todo file to keep an eye on: https://github.com/unpoly/unpoly/blob/hk/layers/design/todo_layers.txt

In which the "Remaining feature work" section keeps shrinking day by day, so I hope I can soon start to fiddle v2. The todo list does not tell too much about the state of readiness of the docs but I hope even exploring the new version will be fun 😄 

  • Like 1
Link to comment
Share on other sites

  • 2 months later...

Quick update...

Finally figured out to get React/NextJS to work with a basic (minimal field types to convert to JSON) PW site. Giving self a pat on the back when I discovered Svelte 💩

Svelte felt (I'm a poet & didn't know it 😝) so much more like PW - JS, HTML & CSS with 'state management' and no shadow DOM. The only problem was routing. I'd spent far too long figuring out React/NextJS routing and Svelte offered no immediate solution. The old (like 2yrs) way of routing was called Sapper. Development on Sapper has ceased with all efforts now focussed on the new way, SvelteKit which is in pre-beta (😳 ). Anyhoo, went with SvelteKit and got it working.

I've only scratched the surface on what's possible with React/NextJS and Svelte. Both offer Server Side Rendering (SSR) making the site SEO friendly & fast-loading. Given a choice, I'd choose Svelte every time.

With both React/NextJS and Svelte using @Sebi's AppApi with customisation depending on the framework, I:

  • created a home page that pulls the data from the PW home page
  • created a 'slug' page that pulls the data from the PW page url and displays it in a component based on the PW page template as returned in the page JSON, and shows the correct route in the URL from a nav menu

In both cases, the page layout is not a PW template but a conditional component file.

Anyone else tried Svelte with PW? Your thoughts & comments welcome

  • Like 4
  • Thanks 2
Link to comment
Share on other sites

  • 1 month later...
On 5/25/2021 at 5:59 AM, psy said:

Quick update...

Finally figured out to get React/NextJS to work with a basic (minimal field types to convert to JSON) PW site. Giving self a pat on the back when I discovered Svelte 💩

Svelte felt (I'm a poet & didn't know it 😝) so much more like PW - JS, HTML & CSS with 'state management' and no shadow DOM. The only problem was routing. I'd spent far too long figuring out React/NextJS routing and Svelte offered no immediate solution. The old (like 2yrs) way of routing was called Sapper. Development on Sapper has ceased with all efforts now focussed on the new way, SvelteKit which is in pre-beta (😳 ). Anyhoo, went with SvelteKit and got it working.

I've only scratched the surface on what's possible with React/NextJS and Svelte. Both offer Server Side Rendering (SSR) making the site SEO friendly & fast-loading. Given a choice, I'd choose Svelte every time.

With both React/NextJS and Svelte using @Sebi's AppApi with customisation depending on the framework, I:

  • created a home page that pulls the data from the PW home page
  • created a 'slug' page that pulls the data from the PW page url and displays it in a component based on the PW page template as returned in the page JSON, and shows the correct route in the URL from a nav menu

In both cases, the page layout is not a PW template but a conditional component file.

Anyone else tried Svelte with PW? Your thoughts & comments welcome

I loved Svelte too. For the routing part I mostly use Laravel and now ProcessWire (With the Inertia Module) with the https://inertiajs.com/

Inertia adapters. That simplify greatly the flow and you got the best of backend and frontend 🙂

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...