Web Dev Bootcamp TIL Day-56(Frontend / Backend Separation)

• When building a web application, it is often the case that a team of developers will separate the frontend and backend logic.
• The reasons for doing so are as follows:
  • Modularity: the application can be developed at different paces.
  • Resourcing / Expertise: choosing a front-end and back-end language may be in part a choice of resourcing; who can you hire to work on these things? What's the expertise like in your area and in your budget?
  • Builds / Deployment: not only can you develop at different paces, you can now come up with testing, build, and deploy strategies that are wholly separate, allowing you to minimize disruption to user experience during deploys and focus on the right tool chains.
  • Evolution: by separating front and back-end, implementing different frameworks becomes easier.
  • API: forces develppers to think like an API developer which has tremendous benefits for your users and, potentially, external developers and businesses (depending on your product offering).

• There exists some disadvantages in separating backend and frontend logic as well:
  • Templating: you can't take advantage of the templating language provided by your web framework(such as Django's templates). Instead the back-end logic will be an API to whatever front-end you choose.
  • Builds / Deployments: independent testing, build, and deployment strategies becomes necessary for the separated application.
   

maintaining separate repositories for front and back-end

• ex) Using Javascript Fetch API to fetch serialized data from Django Rest API
  • notice how using asynchronous functions allow us to sequence the order by which functions are triggered

const backend_base_url = "http://127.0.0.1:8000" //Django server address
const frontend_base_url = "http://127.0.0.1:5555" //VSCode fire server address

async function auctionView() {
    const response = await fetch(`${backend_base_url}/auction/`, {})
    if (response.status == 200) {
        response_json = await response.json()
        auctions = response_json
        return auctions
    }
    else {
        return response.status
    }
}

// Using Query Paramters to obtain data filterd by category keyword
async function categoryView(category) {
    const response = await fetch(`${backend_base_url}/auction/?category=${category}`, {})
    if (response.status == 200) {
        response_json = await response.json()
        auctions = response_json
        return auctions
    }
    else {
        return response.status
    }
}