앞뒤 분리 워크플로우를 시도해 본 적이 없다면, 먼저 다음과 같은 프로세스 변화를 상상해 보십시오.
프로세스를
팻: "저는 이 기능을 원합니다."
백엔드: "먼저 프런트엔드를 찾아 템플릿으로 만들어라."
프런트엔드: "템플릿 완료"
백엔드: "내가 도킹할게, 여기 스타일이 맞지 않아."
프런트 엔드: "나 끝났어"
백엔드: "기능 제공"
팻: "설 기간에는 이 행사를 추가해야합니다."
백엔드: "먼저 프런트엔드를 찾고 템플릿을 변경하십시오. 클릭합니다
프런트엔드: "템플릿 완료"
백엔드: "내가 도킹할게, 여기 스타일이 맞지 않아."
프런트 엔드: "나 끝났어"
백엔드: "기능 제공"
되다
팻: "저는 이 기능을 원합니다."
프런트 엔드: "인터페이스가 필요합니다."
백엔드: "인터페이스 완료"
프런트 엔드: "도킹, 기능 제공"
팻: "설 기간에는 이 행사를 추가해야합니다."
프런트 엔드: "인터페이스 추가 필요"
백엔드: "인터페이스 완료"
프런트 엔드: "도킹, 기능 제공"
프런트 엔드 분리의 주요 개념은 백그라운드에서 API 인터페이스만 제공하면 되고 프런트 엔드는 AJAX 를 호출하여 데이터 렌더링을 수행한다는 것입니다.
현상과 차이
프런트 엔드 개발자로서, 새로운 기술을 시도하고, 모든 세부 사항을 개선하고, 끊임없이 자아를 돌파해야 한다. 프런트 엔드 분리는 참신한 기술이나 아이디어가 아니지만, 현재 많은 백그라운드 개발자들은 프런트 엔드 개발자와 접촉한 적이 없다.
제 개인적인 이해에 따르면, 한 부서에서 모든 부서 직원이 백그라운드 개발자이고, 일부 프런트 엔드 페이지도 백 오피스 인력에 의해 수행되는 경우, 프런트 엔드 분리는 그들에게 알려지지 않은 영역일 수 있습니다. 대부분의 프로젝트는 프런트 엔드와 강하게 결합되어 있으며, 프런트 엔드 개념도 없습니다.
프런트엔드를 중시하지 않는 회사나 부서에서는 프런트엔드와 백엔드의 분리를 이해하지 못하는 것은 이해할 수 있다. 창업형 회사는 대부분 한 부서에서 한두 개의 프런트 엔드를 가지고 있고, 한 사람이 몇 개의 프로젝트를 담당하며, 한 프로젝트를 공동으로 완성하는 경우는 드물다. 표준이 없기 때문에 (여기서 기준은 코드 조직 구조를 참조), 프런트 엔드 직원이 도면을 잘라 페이지를 작성 하 고 백 엔드에 던져, 백 엔드 코드 구조는 표준입니다. 어떤 회사들은 전후분리의 의식을 가지고 있지만 어떻게 실천해야 할지 모르겠다. 당시 부서 백그라운드 직원들은 프런트 엔드 분리가 더 이상 HTML 과 JS 를 쓸 필요가 없고 프런트 엔드에 맡길 수 있다는 것을 의미한다고 생각했다. 그러나, 이것은 단지 프런트 엔드 분업이라고 할 수 있을 뿐이다.
이것은 한 가지 상황이다: 앞뒤 분리를 모르고, 어떻게 연습해야 할지 모르겠다. 또 다른 상황이 있다: 나는 앞뒤가 분리되는 상황을 알고 있지만, 나는 시도하고 싶지 않다.
두 번째 상황에 대해 많은 사람들이 그에 따라 설명했는데, 사실 이것은' 프런트 분리의 장단점' 문제를 포함한다. 많은 무대 뒤 직원들은 자신이 한 일이 잘못이 없다고 생각할 것이다. 프런트엔드의 html 을 백그라운드에서 적용해도 흔히 볼 수 있으며, 항상 대세의 추세이다. 무대 뒤의 MVC 프레임워크도 추천되고 합리적이다. 이때 프런트 엔드 개발자의 부서에서 발언권이 부족하거나 백 엔드 개발자의 의견이 항상 옳고 주관적이지 않다고 생각하는 경우가 많다.
반대로, 무대 뒤 개발자가 프런트 엔드 분리를 적극 추천하는 반면 프런트 엔드 개발자는 실천하고 싶지 않을 수도 있다. 이때 프런트엔드는 백그라운드 개발자가 장난을 치고 있다고 생각할 것이다. 프런트 엔드와 백 엔드의 프로젝트는 모두 순조롭게 진행되었지만 분리는 자신에게 추가적인 업무량과 학습 비용을 가져다 줄 수 있는데, 이는 프런트 엔드의 기술적 능력과 지식에 달려 있다.
물론 이것은 또한 내가 개인적으로 프런트 엔드 분리에 약간의 현상과 차이가 있다고 생각하는 것이다.
시나리오 및 요구 사항
전면 분리 응용 프로그램 장면의 경우 모든 장면이 적합한 것은 아니지만 대부분의 항목은 전면 분리를 통해 수행할 수 있습니다.
저는 주로 엔터프라이즈급 백그라운드 응용 프로그램의 프런트 엔드 개발에 종사하고 있기 때문에, 저는 개인적으로 프론트 엔드 분리가 백 엔드 응용 프로그램 개발에 미치는 이점이 단점보다 훨씬 크다고 생각합니다.
대부분의 백그라운드 응용 프로그램은 SPA 응용 프로그램 (단일 페이지 응용 프로그램) 으로 만들 수 있습니다. 단일 페이지 응용 프로그램의 주요 특징은 로컬 새로 고침입니다. 프런트 엔드 제어 경로를 통해 AJAX 를 호출하고 백그라운드에서 인터페이스를 제공하면 됩니다. 이렇게 하면 사용자 체험이 더욱 우호적이고, 웹 페이지 로드가 빨라지고, 개발 유지 관리 비용도 낮아지고, 효율성이 크게 향상됩니다.
마찬가지로 프런트 엔드 분리도 전시 클래스 사이트와 휴대폰 앱 페이지에서 시도됐다. 전면 백엔드가 분리되지 않은 상태에서 서버는 웹을 단독으로 처리하고 완전한 HTML 을 반환해야 하므로 서버의 복잡성과 서비스 용이성이 떨어질 수밖에 없습니다. 그러나 웹은 전체 HTML 을 로드해야 합니다. 이는 웹 페이지의 성능에 어느 정도 영향을 미치며 이동측 성능이 왕인 곳에는 매우 불친절합니다.
프런트 엔드 기술의 발전과 반복에 따라 프런트 엔드 MVC 프레임워크가 등장했습니다. React, Vue, Angular 등과 같은 주요 프런트엔드 프레임워크와 함께 제공됩니다. , 서버측 렌더링 없이 표시할 수 있는 웹 사이트를 쉽게 만들 수 있습니다. 이와 동시에 이러한 프레임워크는 프런트 엔드 라우팅 기능을 제공하며, 백그라운드는 더 이상 라우팅 점프를 제어할 수 없으며, 원래 프런트 엔드에 속해 있던 비즈니스 논리를 모두 프런트 엔드에 던지기 때문에 프런트 엔드 분리가 가장 철저하다고 할 수 있습니다. 다음은 프런트엔드 제어 라우팅 코드입니다.
엄격한 "내보내기 기본 기능 (라우터)" 사용 {
Router.map ({'/':{구성요소: function (resolve) {require (['). /PC.vue'], 해결)
}
},'/m/:params': {구성요소: function (resolve) {require (['). /Mobile.vue'], 해석)
}
},'/p': {구성요소: function (resolve) {require (['. /PC.vue'], 해결)
}, 하위 라우팅: {'/process/:username': {component: function (resolve) {require (['. /components/Process.vue'], 해결)
}
}
}
}
}) 을 참조하십시오
프런트 엔드 분리의 실현은 기술자, 특히 프런트 엔드 인력에 대한 요구를 높인다. 프런트 엔드의 작업은 페이지를 자르고 템플릿을 작성하거나 간단한 js 논리를 처리하는 것뿐만 아니라 서버가 반환하는 다양한 데이터 형식뿐만 아니라 일련의 데이터 처리 논리, MVC 사상 및 다양한 주류 프레임워크를 파악하는 것입니다.
장점과 의미
프런트 엔드 분리의 의미에 대해서도 프런트 엔드 렌더링의 의미로 간주할 수 있습니다. 나는 주로 다음 네 가지 사항을 요약한다.
프런트 엔드를 철저히 해방시키다
프런트엔드는 더 이상 백그라운드에 템플릿을 제공하거나 백그라운드가 프런트 엔드 html 에 백그라운드 코드를 포함할 필요가 없습니다. 예를 들면 다음과 같습니다.
& lt! -서버측 렌더링-> & lt 선택>
& lt 옵션 값 =''>- 소속된 기업을 선택하십시오-
P in p _ list%}< 옵션 값 = "{{p}}">{ {p}} & lt/option & gt；;
{%endfor%} & lt/select & gt；; 이것은 앞뒤가 결합된 것이기 때문에 읽을 수 없다.
& lt! -전면 렌더링-> & lt 템플릿>
& ltselect id = "rander">
& lt 옵션 값 =''>- 소속된 기업을 선택하십시오-
& lt 옵션 v-for= "목록의 목록": value = "list" v-text = "list" ></option >
& lt/select & gt；; & lt/template & gt；; & lt 스크립트 & gt export default {data: {return {lists: ['옵션 1',' 옵션 2',' 옵션 3',';
}
},
준비: function () {this. $http({ url: '/demo/', 메서드:' POST',
}) 을 참조하십시오
。 그런 다음 (function (response) {this.lists = response.data.lists//get 서버측 데이터를 가져와 렌더링합니다.
}) 을 참조하십시오
}
}
& lt/스크립트 > 다음은 프런트 엔드 렌더링의 코드 조각입니다. 프런트엔드는 AJAX 를 통해 백그라운드 인터페이스를 호출하고, 데이터 로직은 프런트엔드에 위치하며, 프런트엔드에서 유지 관리됩니다.
업무 효율을 제고하고 분업이 더욱 명확하다.
전면 및 후면 분리 워크플로우를 통해 프런트 엔드는 프런트 엔드에만 관심을 갖고 백 엔드는 백그라운드 작업에만 관심을 가질 수 있습니다. 양자의 발전은 동시에 진행될 수 있다. 백그라운드에서 인터페이스를 제공하지 못할 경우 프런트엔드는 먼저 데이터를 쓰거나 로컬 JSON 파일을 호출할 수 있으며, 페이지 증가와 라우팅 수정은 백엔드를 귀찮게 하지 않고 보다 유연하게 개발할 수 있습니다.
로컬 성능 향상
프런트 엔드 라우팅 구성을 통해 웹 사이트의 모든 리소스를 처음부터 로드할 필요 없이 필요에 따라 페이지를 로드할 수 있으며, 서버는 더 이상 프런트 엔드 페이지를 구문 분석할 필요가 없어 페이지 상호 작용과 사용자 경험을 향상시킬 수 있습니다.
유지 관리 비용 절감
현재 메인스트림 프런트 엔드 MVC 프레임워크를 통해 신속하게 문제를 파악하고 파악할 수 있으며, 클라이언트 문제는 더 이상 백그라운드 직원의 디버깅 참여, 코드 재구성 및 서비스 기능 향상이 필요하지 않습니다.
경험과 경험:
처음부터 백그라운드 제어 라우팅 및 백그라운드 렌더링 페이지부터 현재 프런트 엔드 제어 라우팅 및 프런트 엔드 렌더링 데이터에 이르기까지 워크플로우 및 방법이 크게 변경되었습니다. 다음과 같은 상황이 발생할 때마다 앞뒤 분리의 이점에 감개합니다.
1. 프로젝트가 시작될 때 홈페이지를 만들었는데, 더 이상 백그라운드가 필요하지 않아 서버 환경을 구성할 필요가 없습니다.
2. 프로젝트의 프런트 엔드 파일은 백그라운드 인터페이스를 호출해야 할 때 서버에 던질 수 있어 미리 넣을 필요가 없습니다.
3. 프로젝트 페이지를 추가하는 경로를 구성해야 할 때, 당신의 백그라운드 동료가 나에게 추가할 필요가 없습니다. 당신 자신이 프런트엔드에 있으면 됩니다.
4. 프런트 엔드 파일은 더 이상 백그라운드 코드 논리와 섞이지 않아 훨씬 편안해 보입니다.
5. 페이지 점프는 이전보다 더 부드럽고 로컬 렌더링 및 로컬 로드가 매우 빠릅니다.
6. 페이지 템플릿은 재사용할 수 있으며 프런트 엔드 구성 요소 개발은 개발 효율성을 높입니다.
잠깐만요. 프런트 엔드의 급속한 발전에 직면하여, 우리는 그것이 가져오는 작업 방식과 프로세스의 변화에 적응해야 한다. 현재의 전후 분리의 작업 방식은 반드시 미래의 추세일 것이다. 프런트 엔드 개발자로서 우리는 새로운 프런트 엔드 지식을 보급하고 현상 유지를 바꾸는 책임을 져야 한다.
이 사건을 다 보고 나면, 너는 이미 방법을 익혔다고 믿는다. 더 흥미 진진한 Gxl 의 다른 관련 웹 문장!
관련 읽기:
Angularjs 는 mvvm 스타일의 탭 페이지를 어떻게 구현합니까? 사례 목록+코드
Vue2.0 프로젝트는 매우 유용한 코드 모음입니다.