What is the major difference in React (web app) and PHP being not a web app - or how do I decide what to use

#ELI5

  • AvgCakeSlice@lemmy.world
    link
    fedilink
    arrow-up
    1
    ·
    1 year ago

    React is a JavaScript framework. It is mainly used to make complex UIs for websites and apps with React Native. PHP is a server-side language that can communicate with databases, external API’s, other servers, etc. You could technically accomplish these same tasks with a front end framework as well, but generally a server-side application is used in practice as you would need to expose things like API keys, database connection strings, and so on that you wouldn’t want to pass to a client-side application, since they are inherently untrustworthy.

    In a lot of my applications I use the SPA approach which has two (technically three) layers. I use Vue (another framework like React) for the frontend application, and C# (a server-side language that can do many of the same things as PHP) for the backend with SQL Server as the database.

    Where it gets confusing is that you can actually just cut out the frontend framework entirely depending on the complexity of your application. PHP (And C#, and a bunch of other languages) can generate static assets like HTML and send them directly to the browser “pre-baked” This is known as server-side rendering. Essentially you fetch whatever data is needed for display on the page and then generate the page view on the backend, then send that entire view to the browser. With a single-page application using a framework like React, you would request the necessary data from the client-side app, and your backend code would process the business logic and send the data to display. The framework would then handle re-rendering the page with the updated data.

    • LilDestructiveSheep@kbin.socialOP
      link
      fedilink
      arrow-up
      1
      ·
      1 year ago

      @AvgCakeSlice hey there,

      If I get you right this means, that React basically calls the back-end from the client when needed - so potential risk for injection?

      And PHP or C# are doing it beforehand and send the stuff to the client?

      • AvgCakeSlice@lemmy.world
        link
        fedilink
        arrow-up
        0
        ·
        1 year ago

        No, not necessarily. React usually calls the backend through HTTP requests in order to fetch data. The backend code is written as an API, not a full-blown web application, that handles those requests, validates the request, permissions, business logic, etc, and then returns a response. The backend code is the gatekeeper between the client and any databases or external API’s in your application.

        Traditionally you would use REST API’s, although there are more modern ways of communicating with a backend like with graphQL. But if you’re just starting I would learn how to write a REST API using PHP, Python, Ruby, C#, etc and go from there. REST API’s are pretty straightforward. Essentially your server just exposes a bunch of “endpoints” which are URL’s that represent a resource (for example https://mycoolwebsite.io/api/users) and making certain calls to those endpoints prompts the server to perform some action (for example, an HTTP GET request to api/users/123 gives you the information of the user with the ID ‘123’) the server typically serializes the response data to JSON, so that the client can then receive the response from the server and do something with it. When writing your backend, you are responsible for defining these endpoints in your code and writing the logic that executes whenever a given endpoint is called. For example, when creating a new user (with an HTTP POST request to api/users), you may want to send an email to the newly-created user for them to validate their email address. You would do this by calling some external email service like SendGrid, Mailchimp, etc. and sending a validation email to the address that the user sent in the request body. After that you would create a new user record in the database and initialize the “is_account_verified” field of that user to false. In another endpoint (api/users/{id}/verify-email) you would then check if the verification email has expired or not, then change the verified flag in the DB if it is a valid link.