JavaScript 의존성 반발 : 신화 버스트 점진적 향상-JS 튜토리얼-php.cn

The JavaScript-Dependency Backlash: Myth-Busting Progressive Enhancement

코어 포인트

AngularJS와 같은 클라이언트 프레임 워크의 증가에도 불구하고 PE (Progressive Enhancement)는 광범위한 브라우저 지원, 유지 보수 및 향후 애플리케이션 개발과 같은 웹 개발 문제를 해결하기위한 최선의 선택입니다.

PE는 JavaScript를 비활성화하는 사용자가 아니라 특정 JavaScript 기능을 사용할 수있을 때 사용자 경험을 향상시키는 것입니다. 클라이언트 프레임 워크처럼 청중에 대한 가정을하지 않습니다.

PE 비평가들은 종종 이것이 오래된 브라우저를 지원하는 것을 의미한다고 주장하지만 실제로는 오래된 브라우저에 대한 낙하를 제공하는 것이 주요 목표가 아닌 PE의 장점입니다.

JavaScript 프레임 워크는 단기 혜택을 제공 할 수 있지만 방문자가 줄어들고 장기 유지 보수 어려움을 초래할 수 있습니다. 그들은 PE와 달리 현재에 단단히 머물며, 이는 애플리케이션을 깨지 않고 현대 API를 허용합니다.

진보적 인 향상은 유지 보수를 쉽게하기위한 컨텐츠, 레이아웃 및 기능을 분리하고 테스트 부담을 줄이며 다양한 장치를 지원하며 SEO 및 접근성을 보장합니다. 클라이언트 측 JavaScript 프레임 워크의 부상에도 불구 하고이 기술은 여전히 작동합니다.

루이스는 최근 포럼 주제에 "우리는 대본 종속성의 반등에 있습니까?"에 댓글을 달았습니다.

요컨대 - 동의합니다. 웹 전문가 ppk (), Jeremy Keith ( angular momentum

) 및 Jake Archibald (

진보적 인 향상은 여전히 중요하다)를 포함한 다른 사람들도 동의했습니다.

클라이언트 프레임 워크의 급속한 증가에도 불구하고 JavaScript 프레임 워크를 사용하는 데 적합한 웹 응용 프로그램이 상대적으로 적습니다.

진보적 인 향상은 광범위한 브라우저 지원, 유지 보수 및 향후 애플리케이션 개발과 같은 웹 개발 문제를 해결하기위한 최선의 선택입니다.

우리가 논의하는 용어를 정의하자 ... JavaScript 종속성은 무엇입니까?

클라이언트 프레임 워크 사용이 증가했습니다. MVC, 템플릿 뷰, 재사용 가능한 구성 요소, 양식 검증 등과 같은 서버 측 코딩 모드를 제공합니다. AngularJS는 아마도 가장 유명하고 인기가 있지만 유일한 해결책은 아닙니다. 서버 측 프레임 워크와 달리 클라이언트 대안은 최신 JavaScript가 활성화 된 브라우저에서 실행해야합니다. JavaScript가 없으면 실패합니다. 조석은 전형적인 예입니다. JavaScript를 사용할 수 없으면 빈 페이지가 표시됩니다. 콘텐츠, 오류 및 등록 양식이 없습니다. 메시지를 표시 할 이유가 거의 없지만 JavaScript 의존적 응용 프로그램에는 몇 가지 좋은 사용 사례가 있습니다.

프로토 타입 클라이언트 프레임 워크가 풍부한 구성 요소와 바로 가기를 제공하므로 웹 사이트 및 응용 프로그램을 신속하게 시뮬레이션합니다.
내부 엔터프라이즈 애플리케이션 청중과 사용하는 장치를 이해할 때 강제 JavaScript는 문제가되지 않습니다. Angular는 원래 엔터프라이즈 응용 프로그램을 위해 설계되었습니다.

다른 사례가 있지만 대부분의 공개 웹 사이트 및 응용 프로그램은 이러한 범주에 속하지 않습니다. 아무도 당신이 클라이언트 프레임 워크를 사용하는 것을 막을 수는 없지만 망치가 있으면 모든 것이 못처럼 보입니다. 루이스를 다시 인용하십시오 : & gt; 개발자들은 실제 문제를 해결하기 때문에 눈부신 새로운 도구를 사용하기 위해 그것들을 사용하는 것 같습니다.

점진적인 향상은 무엇입니까?

PE (Progressive Enhancement)는 기술이 아니라 개발 방법입니다. 2009 년에 몇 가지 튜토리얼과 예제를 썼지만이 개념은 2003 년부터 논의되었습니다. 기본 사용자 경험 수준을 구축하는 것으로 시작한 다음 브라우저가 지원할 때 고급 기능을 추가합니다. PE를 극한의 논리로 밀어 넣으십시오 :

순수한 HTML 응용 프로그램을 생성하고 모든 중요한 처리는 서버 측에서 수행됩니다. 모든 브라우저, Lynx, IE1.0 또는 사용하는 브라우저에서 실행할 수 있습니다.

CSS를 사용하여 레이아웃을 향상시킵니다. 브라우저는 이해하지 못하는 속성을 무시하기 때문에 CSS는 PE 준비가되어 있습니다. 미디어 쿼리 또는 @supports 규칙과 같은 옵션으로 더욱 향상시킬 수 있습니다. 이 앱은 여전히 어디에서나 작동하지만 최신 CSS 기능을 갖춘 브라우저에 대한 개선 된 경험을 제공합니다.

당신은 JavaScript 향상을 사용합니다. 언어 및 API 지원은 브라우저마다 다르므로 JavaScript는 가장 불안정한 레이어입니다. 실행된다고 가정하면 사용하기 전에 가용성을 테스트합니다. 예를 들어, 캔버스 또는 SVG가 지원되면 데이터 테이블을 아름다운 차트로 변환 할 수 있습니다.

모든 브라우저는 처리 할 수있는 최고의 앱을 수신합니다. 똑같은 경험을 제공하는 두 개의 브라우저가 없을 수 있습니다. 모바일 최초의 반응 형 디자인과 덜 사용되지 않은 오프라인 우선 순위는 점진적인 향상 기술의 예입니다. PE의 비판을 확인합시다.

신화 : 아무도 javaScript를 비활성화하지 않습니다 두 번째 사람들은 JavaScript가 무엇인지 알고 있습니다. 사용자가 JavaScript를 비활성화 할 수있는 브라우저는 거의 없습니다 (쉬운) 이것은 절대적으로 맞습니다. PE 비평가들은 다음과 같이 결론을 내 렸습니다.

JavaScript가 항상 어디서나 어디서나 신청에 필요한 수준에 도달한다고 가정하는 것은 위험합니다. 모두 JavaScript가 있습니다. 이것은 보여줍니다. 진보적 인 향상은 JavaScript를 비활성화하는 사용자를위한 것이 아닙니다. 특정 JavaScript 기능을 사용할 수있는 경우 사용자 경험을 향상시키는 것입니다. JavaScript가 비활성화되면 응용 프로그램은 잘못된 인터페이스를 제공 할 수 있지만 사용자는 여전히

무언가를 얻습니다. 신화 : 아무도 오래된 브라우저를 사용하지 않습니다 우리는 "오래된"이란 무엇을 의미합니까? 대부분의 개발자에게는 12 개월 이상 출시 된 브라우저입니다. 모든 사람이 최신 앱을 사용할 수있는 것은 아닙니다. 대규모 조직 및 정부 부서

비활성화 개발 도상국의 사람들

커뮤니티에서 덜 부유 한 계급

iPhone 5.0 또는 Android 4.0 이하를 사용하는 사람.

이 부서는 당신에게 중요하지 않을 수 있습니다. 그러나 그들은 중요하지 않습니까? 진보적 인 향상은 청중에 대한 가정을 만들지 않습니다. 클라이언트 프레임 워크의 경우에는 해당되지 않습니다. 응용 프로그램을 사용할 수없는 사람들은 서버 로그에서 사라집니다. 곧 자기 성취 예언으로 바뀔 것입니다. "아무도 오래된 브라우저에서 우리 앱을 사용하지 않으므로 계속 그렇게 할 수 있습니다 ..."

. 신화 : 진보적 인 향상은 반 자사 스크립트 입니다 웹 포함의 기본 장점을 점차적으로 향상시킵니다. 전 세계 어디에서나 네트워크 장치에서 실행할 수있는 사이트 또는 응용 프로그램을 개발할 수 있습니다. 장치가 더 좋을수록 사용자 경험이 좋습니다. 클라이언트 프레임 워크는 JavaScript를 절대적으로 의존성으로 만듭니다. 더 이상 웹을 인코딩하지 않습니다. 응용 프로그램은 웹을 특정 런타임 엔진의 전달 메커니즘으로 사용합니다. 브라우저는 운영 체제이며 업데이트는 응용 프로그램을 중단 할 수 있습니다.

신화 : 진보적 인 향상은 사용자와 장치에 대한 가정을 만듭니다 pe는

가정을하지 않는 것입니다. 당신은 아무것도 가정하지 않습니다 - 이것은이 기술의 핵심 전제입니다. JavaScript 프레임 워크를 사용하면 모든 사람이 강력한 장치에서 강력한 브라우저를 사용하고 있다고 잘못 생각하게됩니다. 우리는 전에 이러한 가정을 만들었습니다. 모든 사람이 광대역을 사용하고 있다고 가정하는 것과 어떻게 다른가요? 아니면 모두가 960 픽셀 이상인 17 인치 화면을 가지고 있습니까? 아니면 모든 사람이 지금과 미래에 IE6을 사용할 것인가?

신화 : 진보적 인 향상은 구식 브라우저에 대한 지원을 의미합니다 점진적으로 향상된 비평가들은 오래된 브라우저에서 모든 시간을 보내실 것이라고 생각합니다. 사실, 그것은 반대입니다. 적절한 폴백이 이미 제자리에 있기 때문에 오래된 브라우저를 다룰 필요가 없습니다. 오래된 브라우저를 지원하는 것은 Target 대신 PE -

의 장점입니다. 최악의 브라우저를 지원할 수 있지만 원하는 기준을 구축 할 수 있습니다. 예를 들어, 현재 AddeventListener가 대부분의 JavaScript 실행에 대한 요구 사항 인 응용 프로그램을 개발 중입니다. 따라서 IE8 이하는 기능 향상을 표시 할 수 없습니다. 이 문제를 해결할 수는 있지만 IE 사용자가없는 엔터프라이즈 애플리케이션이므로 투자 가치가 없습니다. 그러나 IE8 사용자는 여전히 시스템을 사용하여 필요한 경우 시스템을 개선 할 수 있습니다.

신화 : JavaScript 프레임 워크 응용 프로그램은 쿨러 입니다 PE 기술을 사용하여 동일하게 보이는 응용 프로그램을 만들 수 있습니다. 혼란의 이유는 대부분의 JavaScript 프레임 워크가 좋아 보이는 다양한 사전 개발 된 위젯을 제공하기 때문입니다. 이러한 동일한 위젯은 점차 강화 된 응용 프로그램에 사용될 수 있지만 JS 없이는 기본 HTML 대안으로 돌아갑니다. PE를 사용하면 아직 브라우저에 아직 나타나지 않은 최신 HTML, CSS 및 JavaScript API를 사용할 수 있습니다. XMLHTTPREQUEST의 최신 대안 인 Fetch API를 고려하십시오. 최소한으로 지원되지만 xmlhttprequest 또는 서버 요청으로 돌아갈 수 있으므로 문제없이 사용할 수 있습니다. JavaScript 프레임 워크는 미래가 아니라 현재에 단단히 유지됩니다. 신화 : 점차적으로 강화 된 웹 개발 또는보다 구체적으로 클라이언트 프레임 워크는 기술의 최전선에 서 웹을 발전시킵니다. 미안하지만 이것은 환상입니다. AngularJS와 유사한 프레임 워크는 마법의 기능을 구현하지만 더 깊이 파기해도 여전히 HTML, CSS, JavaScript 및 DOM 작업을 사용하고 있습니다. 기껏해야 그것은 추상화입니다. 최악의 경우, 그것은 산만합니다. 클라이언트 프레임 워크는 그것을 개발 한 브라우저만큼 우수합니다. AngularJS 1.X가 해제 될 때 Object.Observe () 및 웹 구성 요소와 같은 기능이 일반적이지 않았기 때문에 AngularJS 2.0은 완전히 다시 작성됩니다. 이 프레임 워크는 오래된 기술을 사용하도록 강요하지만 구현을 숨 깁니다. PE를 사용하면 애플리케이션을 중단하지 않고 최신 API를 사용할 수 있습니다. Angular 1에서 업그레이드하는 데 행운을 빕니다 신화 : JavaScript Framework는 개발이 더 쉬워집니다 이 부분은 정확하지만 응용 프로그램 구축을 시작한 경우에만 가능합니다. 초기 개발 시간을 줄이는 다양한 컨트롤에 액세스 할 수 있습니다. 그러나 프레임 워크의 범위 내에 갇혀 나중에 문제가 발생할 수 있습니다. 응용 프로그램이 잠시 동안 실행 중이며 고객에게는 지원이 필요하다고 가정합니다. 주요 고객이 사용하고 특히 오래된 브라우저, iPhone 4, Android 3.3 등이 아닙니다. 개발 시간이 며칠이 될 것으로 예상 할 수 있지만 JavaScript 프레임 워크가 호환되지 않으면 불가능할 수 있습니다. PE 기술을 사용하여 개발 된 응용 프로그램의 경우이 문제는 이미 브라우저를 지원할 수 있습니다. 주요 재 작성없이 추가 개선 사항을 추가 할 수 있습니다. 신화 : 진보적 인 향상은 워크로드의 두 배입니다
이것은 비평가들로부터 가장 인기있는 인용문입니다. PE가 과로한다고 말하는 유일한 사람들은 그것을 시도한 적이 없거나 어떤 식 으로든 실패한 사람들입니다. 처음부터 PE에 대해 생각하지 않았다면 두 배만 걸립니다. PE를 기존 애플리케이션으로 재건하려고 시도하는 것은 실패 할 수 있습니다. 특히 JavaScript에 의존하는 응용 프로그램의 경우. 검색 쿼리 결과 페이징 목록과 같은 간단한 예를 고려해 봅시다. 첫 번째 페이지로드는 모든 HTML을 반환합니다. 빠르고 JavaScript는 아무것도 할 필요가 없습니다. 무대 뒤에서 데이터베이스 쿼리를 사용하고 결과를 HTML 템플릿에 삽입합니다. 동일한 서비스를 신속하게 조정하여 제목 및 바닥 글이없는 JSON 데이터 또는 결과 HTML과 같은 결과를 반환 할 수 있습니다. 사용자가 "페이지 2"를 클릭하면 두 번째 페이지 결과가 표시됩니다.
JavaScript를 사용하면 클릭을 가로 채고 Ajax 기술을 사용하여 페이지 결과를 얻을 수 있습니다. innerHTML을 사용하여 HTML 데이터를 페이지에 삽입 할 수 있습니다. 또는 반환 된 JSON 데이터의 템플릿으로 1 페이지를 사용할 수 있습니다.
javaScript, XMLHTTPREQUEST 또는 FETCH를 사용할 수없는 경우 ( 또는 Ajax Call 실패
) 두 번째 페이지를 전체 HTML을 요청할 수 있습니다.

이것은 더 많은 작업이 필요하지만, 그것은 확실히 두 배의 작업량이 아닙니다. 우리는 브라우저 크로스 결함 내성 솔루션의 혜택을받습니다.
신화 : 점차적으로 무의미하게 향상되었습니다 - 웹 사이트 개발 또는 멸종 이 주장의 배후에있는 논리는 웹 사이트가 결국 쓸모 없게 될 것입니다. 따라서 특정 시점에서 특정 기술을 목표로하는 프레임 워크를 사용할 수 있습니다. 나는 그렇게 희망한다. 코드가 양호하면 예상보다 훨씬 오래 사용됩니다. 아무도 만지고 싶지 않기 때문에 나쁜 코드는 더 오래 살아남습니다. 그러나 점진적인 향상을 사용하면 웹 이외의 가정은 클라이언트/서버 기반 HTML 기반 시스템으로 계속 될 것입니다. 응용 프로그램이 실패하기 위해 웹은 근본적으로 변경해야합니다. 더 이상 웹이 아닙니다!
신화 : 진보적 인 향상은 이전 전임자들이 권장하는 오래된 기술입니다 <:> 인용 홀드 Z : & gt; 클라이언트 측 JavaScript 프레임 워크의 급증으로 인해 다른 "오래된 노인"과 함께 소수가되었습니다. 예, 감사합니다! JavaScript 리바운드는 꽤 오랫동안 웹에서 개발 한 사람들이 이끌었습니다. 새로운 기술을 두려워하고 시대와 보조를 맞출 수없는 우리 모두는 완고한 사람들입니까? 아마도. 아니면 우리가 많은 역사적 실수로부터 몇 가지 교훈을 배웠기 때문일까요? JavaScript 프레임 워크는 친숙한 질문을 제기합니다
일부 사람들은 html과 와 같은 클릭 핸들러를 사용했던 것과 같은 기능을 혼합합니다.

그들은 특정 브라우저를 대상으로합니다. 의 "가장 좋은 방법을 탐색하는 가장 좋은 방법 ..." 메시지와 태그의 부활이있었습니다.

그들은 오늘날의 웹에 대해 가정합니다. 예를 들어 JavaScript는 어디에서나 작동하며 페이지 당 2MB는 합리적입니다.

그들은 미래에 대한 계획이 없습니다.

JavaScript 프레임 워크는 주로 사용자보다 개발자 -

에 도움이됩니다. 그들은 방문자 감소와 고통스러운 장기 유지 보수 비용으로 단기 혜택을 제공 할 수 있습니다. 그리고 SEO를 잊지 마십시오. Google은 JavaScript 페이지를 색인하지만 모든 논리적 지점을 추적 할 수는 없습니다. 코드를 신중하게 작성하지 않으면 특정 URL에 다시 연결하기가 어렵습니다. 진보적 인 향상은 웹의 장점을 보완합니다 : 는 유지 보수가 쉬운 내용, 레이아웃 및 기능을 분리합니다 당신은 브라우저 대신 웹에 대한 방어적이고 결함이있는 장치 독립적 코드를 쓰고 있습니다. 당신은 다양한 장치를 지원할 수 있습니다 실패가있을 때 애플리케이션이 계속 실행될 수 있으므로 테스트 부담이 줄어 듭니다. SEO 및 접근성은 내장되어 있습니다 (또는 노력이 적음) > 웹 사이트 및 응용 프로그램은 오늘, 어제 및 내일 출시 된 브라우저에서 실행됩니다. 아무도 점차 강화 된 기술의 장점을 반박하거나 더 나은 기술을 제안하지 않습니다.

단 하나의 단점 : 많은 개발자들이 여전히 진보적 인 향상을 신뢰하거나 이해하지 못한다는 것은 분명합니다. JavaScript 종속성의 반등을 Long!

JavaScript 종속성이란 무엇입니까?

JavaScript 종속성은 JavaScript 코드가 다른 JavaScript 파일 또는 라이브러리에 의존하여 정상적으로 실행됩니다. 예를 들어, JavaScript 파일이 다른 파일 또는 라이브러리에 정의 된 함수 또는 변수를 사용하는 경우 해당 파일 또는 라이브러리에 따라 다릅니다. 종속성은 코드를보다 효율적이고 관리 가능하게 만들 수 있지만 제대로 관리하지 않으면 복잡성과 잠재적 문제를 도입 할 수도 있습니다. JavaScript의 점진적 향상은 무엇입니까? Progressive Enhancement는 먼저 핵심 웹 컨텐츠를 강조한 다음 점차적으로 더 자세하고 복잡한 프리젠 테이션 및 기능 계층을 추가하는 설계 철학입니다. JavaScript의 맥락에서 이것은 모든 브라우저에 기본 기능을 제공하는 코드를 작성하는 동시에 지원할 수있는 브라우저에 고급 기능을 제공하는 것을 의미합니다.

JavaScript 종속성은 점진적인 향상에 어떤 영향을 미칩니 까?

JavaScript 종속성은 점차적으로 향상된 구현을 방해 할 수 있습니다. JavaScript 파일이 모든 브라우저가 지원하지 않는 다른 파일 또는 라이브러리에 크게 의존하는 경우 해당 브라우저에 기본 기능을 제공하지 않을 수 있습니다. 이는 모든 사용자에게 핵심 기능을 제공하는 것을 목표로하는 점진적인 향상의 원칙에 위배됩니다.

점진적인 향상의 장점은 무엇입니까?

진보적 인 향상은 많은 이점을 제공합니다. 브라우저의 기능에 관계없이 모든 사용자가 웹 페이지의 핵심 컨텐츠 및 기능에 액세스 할 수 있도록합니다. 또한 시맨틱 HTML 및 우려 분리와 같은 우수한 웹 관행을 촉진하고 웹 사이트가 JavaScript 또는 CSS의 잠재적 인 문제에 더욱 저항력을 갖습니다.

JavaScript 종속성의 단점은 무엇입니까?

JavaScript 종속성은 코드를보다 효율적이고 관리하기 쉽게 만들 수 있지만 복잡성과 잠재적 문제를 도입 할 수도 있습니다. 종속성이 제대로 관리되지 않으면 팽만감 코드, 로딩 시간이 느리고 다른 파일 또는 라이브러리 간의 충돌과 같은 문제가 발생할 수 있습니다. 또한 코드를 유지 관리하고 디버그하기가 더 어려워 질 수 있습니다.

JavaScript 종속성을 효과적으로 관리하는 방법은 무엇입니까?

JavaScript 종속성을 효과적으로 관리하기위한 몇 가지 전략이 있습니다. 이러한 전략에는 모든 종속성을 단일 파일로 묶을 수있는 웹 팩 또는 롤업과 같은 모듈 번들링이 포함됩니다. .

내 JavaScript 코드에서 점진적인 향상을 달성하는 방법은 무엇입니까?

JavaScript 코드에서 점진적 향상을 구현에는 코드 작성, 모든 브라우저에 기본 기능 제공,이를 지원할 수있는 브라우저에 더 고급 기능을 점차 추가합니다. 기능 감지를 사용하여 브라우저가 기능을 사용하기 전에 기능을 지원하고 특정 기능을 지원하지 않는 브라우저에서 코드를 우아하게 다운 그레이드 할 수 있는지 확인하여 수행 할 수 있습니다.

JavaScript 종속성과 클라이언트 측 프레임 워크의 관계는 무엇입니까?

클라이언트 JavaScript 프레임 워크는 일반적으로 JavaScript 종속성에 크게 의존합니다. 이러한 프레임 워크 (예 : React, Angular 및 Vue.js)에는 코드가 의존 할 수있는 많은 내장 기능 및 라이브러리가 포함되어 있습니다. 이로 인해 개발이 더 빠르고 쉽게 만들어 질 수 있지만 이러한 종속성이 제대로 관리되지 않으면 잠재적 인 문제로 이어질 수 있습니다.

클라이언트 JavaScript 프레임 워크에서 점진적 향상의 역할은 무엇입니까?

진보적 인 향상은 클라이언트 측 JavaScript 프레임 워크에서 중요한 역할을 할 수 있습니다. 이러한 프레임 워크에는 종종 개발자가 서버 측 렌더링 및 코드 세분화와 같은 점진적인 향상을 구현할 수있는 기능이 포함됩니다. 이러한 기능을 사용하면 웹 애플리케이션이 브라우저의 기능에 관계없이 모든 사용자에게 핵심 기능을 제공 할 수 있습니다.

웹 개발 프로젝트에서 JavaScript 종속성 및 점진적인 향상의 균형을 맞추는 방법은 무엇입니까?