서버 측 vs. 클라이언트 측 vs 하이브리드에서 웹앱을 제작하십니까? [닫은]


27

웹 애플리케이션을 구축하는 방법에는 현재 여러 가지가 있습니다.

1. 서버 측만

이것은 Ruby on Rails, Django, Express, Play!와 같은 웹 프레임 워크로 서버에서 페이지를 렌더링하는 고전적인 접근 방식입니다. 프레임 워크 등

일반적인 워크 플로우 : 원하는 프레임 워크로 서버에서 모든 비즈니스 로직, 모델 및 뷰 템플릿을 구축하십시오.

2. 클라이언트 측 + REST API

비교적 오래 전에 웹 커뮤니티 전체가 Angular, Backbone, Ember 및 기타 수십 개의 다른 JavaScript MV * 프레임 워크에서 클라이언트 측 응용 프로그램을 구축하기 시작했습니다. 이제 React.js도 파티에 참여했습니다.

업데이트 : 오해가 없습니다. 내가 클라이언트 측에서만 의미하는 것은 우려의 완전한 분리입니다. REST API 서버와 해당 서버와 통신하는 클라이언트 측 애플리케이션이 있습니다. 사용 사례에 따라 인증 또는 데이터 지속성을 위해 백엔드에 연결되지 않는 진정한 클라이언트 전용 응용 프로그램은 없을 것입니다.

일반적인 워크 플로 : Angular vs Backbone vs Ember vs X를 결정하는 데 몇 시간을 소비 한 다음 클라이언트에서 경로, 모델, 뷰, 컨트롤러를 구축합니다. 완료 한 후에는 서버에서 모델, 컨트롤러 및 라우트를 빌드하십시오. 어떤 식 으로든 당신은 두 배의 일을하고 있습니다.

3. 하이브리드

이 방법을 사용하는 방법에 대해서는 잘 모르지만 추측을하려면 서버에서 뷰 (MVC 프레임 워크보기)를 렌더링합니다. 결과적으로 SEO 지원과 더 빠른 페이지로드가 제공됩니다.

하이브리드 프론트 에어 비앤비의이 rendr 가정 백본을 결합하고 함께 표현한다.

에릭 Florenzo은 오늘 자신의 블로그에 올렸습니다 : 반작용 : 마지막으로, 좋은 서버 / 클라이언트 웹 스택 .

웹 응용 프로그램을 구축하는 방법은 매우 압도적입니다. 그리고 웹 개발을 배우는 사람에게는 이것이 문제가 될 수 있습니다. 다음 애플리케이션을 구축하기 위해 어떤 접근법을 사용할지 어떻게 결정합니까?


1
"클라이언트 측만 해당 : ... 완료된 후에는 서버에서 모델, 컨트롤러, 라우트를 빌드하십시오." 이것은 구문 분석하지 않습니다.
user16764

@ user16764가 내 질문을 업데이트했습니다.
정격 R

답변:


13

"고객 측만"을 완전히 잘못 이해했다고 생각합니다.

먼저 "클라이언트 중심"이라고 표시해야합니다. Angular와 같은이 프레임 워크의 핵심은 MVC의 "VC"부분이 브라우저에서 완전히 자바 스크립트로 구현된다는 것입니다. "M"부분의 "M"상위 레벨 논리 (모델)는 브라우저에서 구현되고 하위 레벨 "CRUD"논리는 서버에서 구현됩니다.

비즈니스 로직은 한 번 개발되었습니다. 뷰 로직은 한 번 개발되었습니다. 제어 로직은 선택한 Javascript 프레임 워크에서 한 번 개발되었습니다. 데이터 액세스 로직은 한 번만 개발되었지만 이번에는 서버 측에서 선택한 RESTy 또는 SOAPy 프레임 워크에서 수행됩니다.

극단적 인 경우 한 시스템의 한 브라우저에서만 데이터에 액세스 할 수 있고 "쿠키 지우기"옵션을 선택할 때마다 데이터를 휴지통에 버릴 수있는 경우 모델을 클라이언트에서 완전히 구현할 수 있습니다.


적어도 일부 비즈니스 로직을 두 번 개발하지 않는 것은 정말 어렵습니다. 좋은 사용자 경험을 위해서는 계속하려면 사용자가 이메일을 입력해야합니다. 그러나 클라이언트를 신뢰할 수 없으므로 서버에서 규칙을 구현해야합니다. 적어도 클라이언트에서 JS의 비즈니스 로직을 구현한다고 말하지 않기를 바랍니다.
Andy

@ 앤디 정확히 내 요점입니다. Ember 앱을 빌드 할 때 클라이언트에서 기본 양식 유효성 검사를 수행해야했지만 서버에서도 수행해야했습니다. 서버에서 내 데이터의 유효성을 검사하지 않고 클라이언트를 완전히 신뢰하여 심각한 문제가 발생했습니다.
정격 R

앤디 등-Google 문서를 살펴보십시오. 서버에서 문서, 스프레드 시트 등을로드하고 마지막에 저장하고 브라우저에서 다른 모든 항목 사이에서 가끔 백업을하는 것 외에도. Google 문서 도구 사이트는 데이터 저장소 및 인증 서버 역할을합니다.
James Anderson

3
@JamesAnderson Google 문서 도구는 온라인 상점과는 다릅니다. 데이터가 의미하는 바에 신경 쓰지 않고 저장하는 데이터 한 방울만으로도 자신의 문서를 편집하고 있습니다. 그러나 주문 유효성 검사가 클라이언트에서만 수행되어야한다고 생각합니까? 당신이 그런 앱을 만드는 방법이라면 사람들에게 무료 제품을 제공하라고 요구하는 것입니다. 실제로 Google이 서버 측에서 데이터 유효성 검사를 수행하지 않는다고 가정하는 것 같습니다. 실제로 무슨 일이 일어나고 있는지 알 수있는 방법이 없습니다.
Andy

9

질문에 대한 답변은 요구 사항에 달려 있다는 것입니다. "웹"개발의 역사를 적어도 한 번 살펴보면 이해 관계자, 고객, 요구 사항 수집과 종종 대화하는 카우보이 문화가 있음을 나타냅니다.

나는 몇 년 전에 나에게 정말로 붙어있는 무언가를 들었던 이야기에 참석하기에 운이 좋았다. 따라서 이와 같은 질문에 직면 할 때이 소프트웨어를 작성하도록 요청하는 사람들이 실제로 필요한 것을 찾아야합니다.

당신의 임무는 각 접근 방식의 장단점을 설명하는 것입니다.


1
감사. 당신이 말하는 것은 말이됩니다. 나는 "은 총알", 일을하는 진정한 방법이 있기를 바랐다. 2011 년에 Django라는 Python 웹 프레임 워크로 시작했습니다. 곧 Backbone, Angular, Ember와 같은 클라이언트 측 MV * 프레임 워크에 대한 큰 추진이있었습니다. 그리고 갑자기 웹 앱을 만드는 Rails와 Django 방식이 구식이되었습니다. 그러나 오늘날 우리는 더 나은 성능을 달성하기 위해 한 걸음 뒤로 물러서서 클라이언트 측과 서버 측을 다시 한 번 혼합하고 있습니다.
정격 R

안타깝게도,은 총알이 없습니다. :). 그러나 트릭은 작업에 가장 적합한 결과를 결정하고 무자비한 리팩터링 문화를 지원하여 초기 방향이 결실이 아니더라도 항상 변경 할 수 있도록 조각이 어떻게 어울리는 지 충분히 이해하는 것입니다.
RibaldEddie

1
이것은 좋으며 때로는 두 가지 접근 방식이 모두 가능 하며이 경우 결정을 내리기 위해 요구 사항 이외의 것이 필요합니다.
Ced

5

새로운 접근 방식과 프레임 워크의 핵심 포인트 중 하나는 프런트 엔드 기술과 백 엔드 기술 사이의 연결이 적다는 것입니다.

아이디어는 서버 측 프레임 워크에 관계없이 클라이언트의 프레임 워크를 사용하고 여러 소스에서 데이터 및 / 또는 뷰를 가져올 수 있다는 것입니다.

이를 통해 작업을 수행하기위한 최고의 도구를 선택할 수 있으며 선택은 독립적으로 발전 할 수 있습니다.

물론 Angular 또는 Backbone을 사용하지 않았으므로 경험이 풍부한 권장 사항을 만들 수 없습니다. 현재 기본 스택은 가장 얇은 서버 측 mvc 또는 내가 찾을 수있는 편안한 서비스로 구성됩니다. 주로 템플릿과 데이터를 제공합니다. 데이터는 주로 일반 자바 스크립트, jquery 및 CSS를 사용하여 렌더링되고 및 / 또는 후속 데이터가 클라이언트 측에서 검색됩니다.

나는 여기에서 시작해서 그것을 필요로했다. 이 접근 방식의 이점은 브라우저, 모바일 등 여러 클라이언트 플랫폼을 지원할 때 분명합니다. 클라이언트 별 렌더링이 필요한 경우 서버 측을 크게 변경할 필요가 없습니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.