Javascript에서 UI 100 %를 수행하고 API를 통해 데이터를 제공하는 것이 좋습니다.

나의 주된 일은 HTML 응용 프로그램을 만드는 것입니다. 즉, 내부적으로 편집 가능한 그리드 뷰, 텍스트 상자, 드롭 다운 등이 많은 CRUD 유형 응용 프로그램을 사용했습니다. 현재 ASP.NET 웹 양식을 사용하고 있습니다. 필요한 것을 얻기 위해 농구대를 뛰어 넘어야합니다. 천장에 매달리고 불을 Ho 후프.

따라서 모든 UI를 JavaScript 측으로 옮기는 것이 좋은 아이디어인지 궁금합니다. 우리의 요구에 맞게 특별히 설계된 강력한 재사용 가능한 컨트롤 세트를 개발하고 서버와 데이터를 교환하십시오. 예, 저는 "제어"(일명 "위젯") 패러다임이 마음에 듭니다.이 패러다임은 그러한 응용 프로그램에 매우 적합합니다. 따라서 서버 측에서는 현재 ASPX 마크 업과 비슷한 기본 레이아웃을 유지하지만 클라이언트에 한 번만 전송되며 Javascript 부분은 모든 후속 UI 업데이트를 처리합니다.

문제는 이전에이 작업을 수행 한 적이 없으며이 작업을 수행하는 사람을 본 적이 없기 때문에 문제가 무엇인지 모릅니다. 특히, 나는 걱정하고 있습니다 :

• 여전히 성능 . 벤치마킹은 AJAX 업데이트 후 브라우저가 대부분의 페이지를 다시 렌더링하려고 할 때 현재 주요 지연이 클라이언트 측에 있음을 보여줍니다. 생성 된 ASP.NET webforms 마크 업은 "web"이라는 단어에 새로운 의미를 부여하고 풍부한 Devexpress 컨트롤은 고유 한 Javascript 복잡성 계층을 추가합니다. 그러나 Javascript 측에서 필요한 모든 변경 사항을 다시 계산 한 다음 업데이트해야 할 항목 만 업데이트하는 것이 더 빠릅니까? 필자는 편집 가능한 그리드 뷰, 텍스트 상자가 많고 각 항목에 반 정도의 필터링 가능한 항목이있는 많은 드롭 다운이있는 양식에 대해 이야기하고 있습니다.
• 개발 용이성 . 이제 훨씬 더 많은 자바 스크립트가있을 것이며 아마도 페이지의 HTML 마크 업과 혼합 될 것입니다. 그 또는 어떤 종류의 새로운 뷰 엔진이 생성되어야합니다. Javascript 용 Intellisense도 C # 코드보다 훨씬 나쁩니다. Javascript의 동적 특성으로 인해 더 나아질 것으로 기대할 수 없습니다. 코딩 관행은 약간 향상시킬 수는 있지만 크게 향상시킬 수는 없습니다. 또한 대부분의 개발자는 주로 C # 개발자이므로 학습 곡선과 초기 실수가 있습니다.
• 보안 . 많은 보안 검사를 두 번 수행해야하고 (서버 측과 UI 측), 데이터 처리 서버 측에는 더 많은 보안 검사가 포함되어야합니다. 현재 서버 쪽에서 텍스트 상자를 읽기 전용으로 설정 한 경우 클라이언트 왕복을 통해 변경되지 않는 값에 의존 할 수 있습니다. 프레임 워크에는 이미 viewstate 암호화를 통해 충분한 코드가 있습니다. 데이터 전용 접근 방식을 사용하면 모든 것을 수동으로 확인해야하기 때문에 더 어려워집니다. 반면에 걱정할 데이터 만 있기 때문에 보안 취약점을 쉽게 발견 할 수 있습니다.

대체로 이것이 우리의 문제를 해결하거나 악화시킬 것인가? 아무도 이것을 시도한 적이 있으며 결과는 무엇입니까? 이런 종류의 노력에 도움이되는 프레임 워크가 있습니까 (jQuery 및 도덕적 등가물 제외)?

링크드 인은 자신의 모바일 사이트 ( http://engineering.linkedin.com/nodejs/blazing-fast-nodejs-10-performance-tips-linkedin-mobile 4 부 참조)를 위해이 작업을 수행합니다 . 성능 관점.

그러나 여러 가지 이유로 동일한 작업을 수행하지 않는 것이 좋습니다.

첫 번째는 유지 보수성입니다. C # / ASP.net은 클라이언트와 무관 한 서버 측 프레임 워크이기 때문에 Javascript는 그렇지 않습니다 (jQuery와 같은 프레임 워크의 경우에도 브라우저 간 호환성은 100 %가 아닙니다) 미래 보장이 아님). 또한 동적 유형의 응용 프로그램보다 정적 유형의 응용 프로그램 기능을 확인하는 것이 더 쉽다고 말합니다. 이는 대규모 사이트를 구축하는 경우 반드시 고려해야 할 사항입니다.

두 번째는 전체 웹 사이트를 운영하는 데 필요한 복잡한 종류의 순수 자바 스크립트 응용 프로그램 (상대적인 찾기 쉬움과 비교)을 구축 할 수있는 (그리고 기꺼이) 다른 사람들을 찾기가 어렵다는 것입니다. NET 프로그래머). 이것은 직접적으로 당신의 관심사가 아닐 수도 있지만, 확실히 장기적인 관점에서 생각할만한 것입니다.

세 번째 문제는 클라이언트 호환성입니다. 대중을 대상으로하는 웹 사이트를 구축하는 경우 인터넷의 합리적인 부분에 여전히 JS가 활성화되어 있지 않으므로 (다양한 이유로) 큰 부분을 배제하지 않을 것을 절대적으로 확신해야합니다. JS 기반 웹 사이트로 전환하여 사용자 기반의

총알 우려에 관해서는 :

• 보안 측면에 대해 너무 걱정하지 않아도됩니다. 보안이 필요할 때 패러다임을 혼합하고 서버 측 처리를 수행 할 수있는 이유가 없습니다 (HTML을 반환하는 곳에 뷰 렌더링 코드가 있습니다) 필요한 경우 대신 AJAX 호출을 해제 할 수있는 이유는 없습니다.

• 개발의 용이성도 실제로 문제가되지 않습니다. 제 생각에는 JS 개발에 사용할 수있는 매우 유용한 도구가 있습니다. (예를 들어 JetBrains WebStorm을 사용해보십시오).

• JS보기 엔진의 성능은 대부분의 경우 (내 경험에서) 절대적으로 훌륭합니다. 매일 사용합니다. 내가 제안하는 것은 knockout.js 등과 같은 더 무거운 프레임 워크를 피하고 Jon Resig의 마이크로 템플릿 엔진과 같은 것을 대신하는 것입니다. 이렇게하면 빠르고 신뢰할 수있는 방식으로 지원 코드를 연결할 수 있습니다.

내가 당신이라면 내가하고 싶은 것은이 스위치의 원인을 실제로 조사하는 것입니다. .NET을 효과적으로 활용하지 않고 게임을 향상시켜야 할 수도 있습니다. WebForms는 기본적으로 느린 프레임 워크가 아니기 때문에 사용중인 타사 라이브러리 중 일부일 수 있습니다. 렌더링 속도가 느려집니다.

로드 테스트 및 프로파일 링 도구를 사용하여 응용 프로그램의 성능 프로파일을 작성하고보다 급진적 인 솔루션에 많은 시간과 노력을 기울이기 전에 병목 현상이 발생하는 위치를 확인하십시오. 당신의 속도 저하에 대한 범인!

그런 식으로 가고 싶다면 ExtJS를 사용 하고 바퀴를 재발 명하지 마십시오. 그러나 준비하십시오. 이것은 완전한 패러다임 변화를 의미합니다. HTML 기술은 거의 쓸모가 없습니다. 서버는 대부분 AJAX API를 제공합니다. 당신은 그 어느 때보 다 더 많은 자바 스크립트를 작성할 것이므로, 당신이 정말로 자바 스크립트에 잘 맞는지 확인하십시오.

내가 속한 팀은 2008 년 말 ExtJS로 마이그레이션하기로 결정했습니다. 그 시점에서 프런트 엔드 문제로 어려움을 겪은 200.000 라인 PHP 앱이있었습니다. 실제로 상황이 좋지 않은 핸드 롤 폼 컨트롤 프레임 워크를 사용하고 페이지의 섹션을로드하기 위해 iframe을 많이 사용했습니다 (비주얼 아키텍처는 2005 년으로 거슬러 올라갔지 만 팀은 알지 못했기 때문에 우리 상황은 훨씬 나빴습니다) 초기 아약스). 어쨌든 코드를 리팩터링해야했기 때문에 코드베이스를 주로 클라이언트 측으로 재구성하는 것이 더 쉬워졌습니다.

현재이 앱은 300.000 라인이며 그 중 60.000 라인은 extjs 코드이며 기능의 약 3/4이 ExtJS로 마이그레이션되었습니다. extjs 코드는 모두 단일 페이지 앱이지만 여전히 iframe 안에 일부 레거시 양식이 포함되어 있습니다. 먼저 탐색 컨테이너를 포팅 한 다음 여러 기능 영역을 단편적으로 마이그레이션했습니다. 이 접근 방식을 통해 우리는 extjs 마이그레이션을 일반 기능 개발 프로세스로 전환하여 너무 느려지지 않았습니다.

• 공연

  ExtJS 코드는 레거시 코드보다 훨씬 빠릅니다. 이전 코드는 물론 성능 측면에서는 좋지 않았지만 결과에도 만족합니다. UI 코드는 모두 정적 자바 스크립트이므로 캐시가 잘됩니다 (CDN에 던질 계획 단계에 있습니다). 서버는 프런트 엔드 렌더링에 관여하지 않으므로 작업 부하가 줄어 듭니다. 또한 ExtJS가 UI의 수명주기 (지연 렌더링, 보이지 않는 UI 요소를 쉽게 언로드)를 제어 할 수 있도록 도와줍니다. 일반적으로 코드가 부트 스트랩 (온 디맨드 로딩 아키텍처)되면 스크린의로드 시간의 대부분이 웹 서비스 호출에 사용되어 데이터를 가져옵니다. ExtJS 그리드는 특히 스크롤로 보이는 행을 렌더링하기 위해 버퍼링 된 뷰를 사용할 때 정말 빠릅니다.

• 개발의 용이성

  솔직히 말해서, 이것은 혼합 가방입니다. ExtJS는 DSL이며, 전통적인 의미에서 웹 개발이 아닙니다. 개발자가 프레임 워크의 API를 실제로 배우는 데 오랜 시간이 걸렸으며 다른 클라이언트 측 프레임 워크에서는이 곡선이 덜 가파른 것으로 보지 않습니다. 팀의 모든 사람은 "고급"자바 스크립트 개발자 여야합니다 (일반적으로 crockford의 책 에는 비밀이 없어야 함). 클라이언트 측 전문 지식이 생각만큼 널리 퍼지지 않았고 extjs 전문 지식이 거의 없습니다 (벨기에에서는 우리가있는 곳).

  다른 한편으로, 일단 당신이 최신 상태가되면, dev 경험은 매우 좋습니다. ExtJS는 매우 강력하므로 홈 화면에 있으면 놀라운 화면을 매우 빠르게 채울 수 있습니다. IDE 측면에서 우리는 ExtJS 코드와 충분히 유능한 PHPStorm을 사용합니다.

• 보안

  보안은 클라이언트 측 UI를 수행하는 주요 이유 중 하나입니다. 이유는 간단하다. 공격면 축소. ExtJS 코드에서 사용하는 웹 서비스 API는 서버 측 UI 계층보다 훨씬 작은 공격 영역입니다. OWASP의 ASVS는 사용하기 전에 서버의 모든 입력이 올바른지 확인하도록 지정합니다. 웹 서비스 아키텍처에서 입력 유효성 검사를 수행하는시기와 방법은 명확하고 쉽습니다. 또한 클라이언트 측 UI 아키텍처에서 보안에 대해 추론하기가 더 쉽다는 것을 알게되었습니다. 인코딩에서 HTML로 해결되지 않았기 때문에 여전히 XSS 문제로 어려움을 겪고 있지만 전체 코드는 이전 코드베이스보다 보안에 훨씬 좋습니다. ExtJS를 사용하면 양식 필드의 서버 측 유효성 검사를 쉽게 수행 할 수 있으므로 코드를 두 번 작성해야하는 번거 로움이 없습니다.

스크립트없는 사용자를 지원할 여유가없고 검색 엔진이 관심을 끌지 않는다면 완벽하게 실행 가능한 방법입니다. 장단점은 다음과 같습니다.

장점 :

• 한 곳에서 모든 것 (자바 스크립트)
• 마크 업이 아닌 서버에서 데이터를로드 할 수 있으므로 올바르게 수행하면 많은 대역폭을 절약 할 수 있습니다
• 반응 형 응용 프로그램을보다 쉽게 ​​얻을 수 있습니다 (네트워크 대기 시간은 여전히 ​​존재하지만 사용자 입력에 대한 초기 응답이 더 빠릅니다)
• 웹 서버는 HTML을 렌더링하거나 템플릿을 확장 할 필요가 없습니다 (즉, 처리 노력이 서버에서 클라이언트로 이동 됨)

단점 :

• 모든 것이 자바 스크립트 여야합니다 (문제 일 수도 있고 아닐 수도 있음)
• 서버에서 중요한 로직을 복제해야합니다
• 클라이언트와 서버에서 상태를 유지 관리하고 두 서버간에 동기화해야합니다.
• 악의적 인 사용자가 클라이언트 측 코드의 내용을 조작하는 방법을 고려하여 보안을 제대로 얻기가 더 어려울 수 있습니다.
• 코드베이스의 많은 부분을 노출합니다 (서버에서 실행되는 코드는 외부에서 볼 수 없음)

개인적 으로이 경로를 사용하면 ASP.NET UpdatePanels가 올바른 방법이 아니라고 생각합니다. 기존 웹 응용 프로그램을 부분적으로 아약스 화하는 데는 좋지만 여전히 AJAX를 통해 HTML을 전송하며 이러한 방식으로 상태를 관리하는 것은 매우 털이 있습니다. 정적 HTML 문서 만 제공 한 다음 자바 스크립트 템플릿 라이브러리를 사용하여 HTML 렌더링을 수행하는 것이 좋습니다. 서버는 동적 HTML을 전혀 제공하지 않으며 대신 클라이언트가 비즈니스 논리 수준의 호출을 서버로 만들어 원시 데이터를 수신합니다.

네 그렇습니다 ..

응용 프로그램의 중요한 부분이 여전히 Javascript없이 작동 할 수 있도록 우아한 "성능 저하"가 있는지 확인해야합니다.

이것이 대부분의 앱 "HIJAX"스타일을 구축하는 방법입니다.

내 사이트는 아직 초기 단계이지만 100 % js ui는 지금까지 괜찮 았습니다. 프론트 엔드에 존재하는 유일한 서버 로직은 모델 맵핑과 아약스 URL입니다. 서버에는 ui에 대한 지식이 전혀 없으므로 유지 관리가 매우 쉽습니다. 관심이 있으시면 ExtJS http://coffeedig.com/coffee/ 로 작성된 내 사이트를 확인 하십시오 . 내 사이트에는 실제로 보안 문제가 없지만 클라이언트는 간단한 유효성 검사를 통해 일반 사용자를 돕습니다. 악의적 인 사용자가 서버에 모든 아약스를 보낼 수 있으므로 모든 "보안"논리가 서버에서 수행된다는 것을 알고 있습니다.

나는 당신에게 가장 큰 문제는 당신이 당신의 팀이 익숙한 것에 대한 완전한 반전을하고 있다는 것입니다. 가파른 학습 곡선이있을 것입니다. 가장 좋은 방법은 일부 js 프레임 워크를 실험하고 간단한 화면을 작성하여 느낌을 얻는 것입니다.