source

ExtJS 철학이란?한 페이지 어플리케이션?

ittop 2023. 3. 13. 20:51
반응형

ExtJS 철학이란?한 페이지 어플리케이션?

ExtJs를 사용하여 다음 프로젝트를 작성해야 합니다.멋진 Javascript lib이지만 그 뒤에 있는 아이디어를 완전히 이해하지 못합니다.문서 페이지를 예로 들어 보겠습니다.

그런 extj로 웹 어플리케이션을 작성해야 하나요?새로고침이 필요 없는 페이지 한 장이면 AJAX에서 모든 작업을 수행할 수 있습니까?

올바른 장소에 도달하는 데 많은 '클릭'과 작업이 필요할 경우 이러한 응용 프로그램을 디버깅하려면 어떻게 해야 합니까?브라우저에서 오류를 수정하고 새로 고침을 눌러 결과를 볼 수 없습니다.

좋은 의견이라도 있나?

내 웹 어플리케이션을 그런 ExtJ로 작성해야 하나요?새로고침이 필요 없는 페이지 한 장이면 AJAX에서 모든 작업을 수행할 수 있습니까?

ExtJS 문서와 같이 애플리케이션을 작성할 필요가 없습니다.ExtJ 예제 페이지를 보면 개별 페이지에서 많은 HTML과 Ext 위젯이 혼합되어 있는 것을 볼 수 있습니다.제 작업에는 ExtJ를 사용하는 두 개의 다른 앱이 있습니다. 하나는 위젯을 사용하여 페이지를 단장하는 레거시 사이트이고 다른 하나는 프런트 엔드에 ExtJ만 사용하는 완전한 웹 애플리케이션입니다.확실히 익숙해지면 후자를 선호하지만, 학습 곡선이 상당히 가파르다.

올바른 장소에 도달하는 데 많은 '클릭'과 작업이 필요할 경우 이러한 응용 프로그램을 디버깅하려면 어떻게 해야 합니까?

여기서 중요한 것은 애플리케이션을 모듈화하는 것입니다.각 구성 요소를 개별적으로 조립하고 진공 상태에서 테스트합니다.어플리케이션 전체를 포함하는 거대한 JavaScript 파일이라고 생각하지 마십시오.대부분의 웹 앱에서 소스에는 배포 목적으로만 결합된 수십 개 이상의 JavaScript 파일이 있습니다.

테스트 및 디버깅을 위해 반드시 필요한 것은 firebug입니다.Ajax 요청 검사, JavaScript 라이브 디버깅 등을 할 수 있습니다.

다음은 ExtJ를 사용한 대규모 앱 구성에 대한 일련의 기사입니다. 좋은 정보가 많이 포함된 꽤 괜찮은 읽을거리입니다.

ExtJS 샘플 어플리케이션 구축 4 Part 1 Part 2 Part 3

ExtJ 3.3 이하의 경우 Part 1 Part 2 Part 3

어떤 방법으로든 ExtJ를 사용하는 것은 괜찮다고 생각합니다.시작하는 동안 가장 편한 작업을 수행하고 ExtJ를 추가하는 것이 더 합리적일 수 있습니다.단, 한 페이지 앱을 만드는 데 사용하기 시작하고 백엔드는 JSON 이외에는 아무것도 출력하지 않으면 웹 앱의 이전 방식을 되돌아볼 수 없을 것입니다.

최신 AJAX 기반 앱이 수행하는 작업을 수행할 수 있으며 URL 해시를 사용하여 앱을 심층 링크할 수 있습니다.

Gmail은 이것이 어떻게 작동하는지 보여주는 좋은 예입니다.받은 편지함에 액세스하려면 다음 페이지로 이동합니다.

https://mail.google.com/mail/?shva=1#displays

연락처 매니저로 이동하려면 다음을 참조합니다.

https://mail.google.com/mail/?shva=1#displays

이 두 "페이지"는 같은 페이지에 있으며, 앱을 사용하는 동안 내비게이션이 실제로 다른 페이지로 리디렉션합니다.변경되는 것은 해시뿐입니다.

로딩될 때 할 은 체크박스를 켜는 입니다.window.location.hash앱 상태를 업데이트하기 위해 사용합니다.

1페이지가 아니라 페이지 수가 적은 어플리케이션

저는 다음과 같은 복잡한 프로젝트에 관여하고 있었습니다.

  • Asp.net 3.5
  • WCF 웹 서비스
  • ExtJ 2.1
  • DAL + DAO용 .netTiers(CodeSmith 포함)
  • SQL 2005 + OLAP Cubes (일부 서드파티제 컨트롤을 사용하여 어플리케이션 내에서 악몽 같은 회피책을 실행해야 했습니다.UpdatePanels를 부분적으로 지원하며 이것만으로 어플리케이션의 기본적인 처리가 중단되었습니다.)
  • 기존 ExtJ에 대한 커스텀 룩 앤 필 - 이것은 ExtJ 코스튬화의 가장 어려운 부분이기 때문에 제공된 테마 중 하나를 고수할 것을 권장합니다.

실제로 한 장짜리 접수는 하지 않았지만, 페이지 수가 크게 줄어든 것은 사실입니다.애플리케이션내의 각 작업 영역은, 통상은 다른 페이지였습니다.모든 인터페이스 처리는 ExtJ를 사용하는 클라이언트 또는 ExtJs 클라이언트인터페이스에 데이터를 제공하는 WCF 서비스 내의 서버측에서 실시되었습니다.

잘 됐어요.

오늘 한 가지 변화를 줄 수 있을 것 같아Asp.net + WCF에서 Asp.net MVC로 이행하고 싶습니다.이런 종류의 시나리오에 더 적합합니다.

디버깅에 관해서는 다른 개발자와 마찬가지로 Firebug(Firefox 플러그인)를 광범위하게 사용했습니다.

하지만 ExtJS 라이브러리를 사용하는 것은 큰 성공이었다.이것에 의해, 데스크탑과 같은 대량의 데이터 Web 애플리케이션을 간단하게 작성할 수 있게 되었습니다.모든 전문 인트라넷 웹 애플리케이션 개발에 적합한 통합 라이브러리입니다.jQuery와 그 플러그인을 사용하면 커뮤니티에서 제공하는 다양한 플러그인이 항상 혼자 남게 됩니다.ExtJS는 이 점에서 매우 통일되어 있으며, 개봉 후 매우 멋진 외관과 느낌을 제공합니다.

웹 환경에서 응용 프로그램의 데스크톱 느낌을 맞추기 위한 아이디어라고 생각합니다. 즉, 거의 모든 것이 Ajax에서 작동한다는 뜻입니다.

디버깅에 관해서는 firebug가 당신의 친구입니다.그러나 데스크톱 애플리케이션을 디버깅하는 것도 크게 다르지 않을 것입니다.이 어플리케이션에서는 클릭을 많이 하면 버그를 얻을 수 있습니다.

extjs 화면을 로드하기 위한 "closure" 형식과 함께 OnHashChange 청취자를 사용할 수 있습니다.싱글 페이지 extjs 어플리케이션 작성 방법에 대한 기사를 작성했습니다.

ExtJ 테스트에 관해서...

다음은 ExtJs 구성 요소를 테스트하는 테스트 도구입니다(이 도구는 ExtJs로 만들어졌습니다!).

ExtJ를 테스트하기 위한 Siesta 테스트 도구

아직 개인적으로 써본 적은 없지만 데모 비디오를 봤는데 꽤 달콤한 것 같아!

커뮤니티 구성원은 ExtJ를 테스트하는 대체 도구를 알고 있을 것입니다.

추신: 저는 Sencha(ExtJs)나 Bryntum(Siesta)과는 전혀 관계가 없습니다.고객 차원에서 ExtJ를 사용하고 있습니다.

그렇게 쓸 필요 없어요.이렇게 하면 보기 좋고 빠를 수 있습니다(새 페이지를 새로 고칠 필요가 없습니다).

javascript에 대한 자동 녹음을 수행할 수 있으며, 자동 테스트 툴을 사용하거나 직접 작성할 수 있습니다.보통 페이지 전체를 디버깅하는 것은 좋지 않습니다.모듈식으로 쌓이면 더 쉬워집니다.문제를 분리하면 더 쉬워집니다.

또한 Firebug를 사용하여 디버깅하는 것이 도움이 될 수 있습니다.

제안:네가 뭘 하냐에 달렸어.인터랙티브한 페이지를 작성하는 경우는, 그러한 방법으로 작성하는 것이 좋을지도 모릅니다.서버의 부하를 줄일 수 있어 고속입니다.다른 쪽에서는 그렇게 하려면 시간이 더 걸릴 것이다.

ASP를 사용하고 있습니다.ExtJ를 사용한 Net MVC한 페이지 앱이 아니라 한 페이지 앱처럼 가깝습니다.

또한 수백 페이지의 웹 폼 어플리케이션이 있으며, 이 어플리케이션에 ExtJS UI 위젯을 적용했습니다. IFrame을 많이 사용해도 작동도 잘 되고 보기에도 좋습니다.하지만 저는 웹 폼 모델을 즐겨 사용하지 않기 때문에 되도록 피하려고 합니다.

IMHO;

  1. 웹폼 플랫폼보다 asp.net mvc 플랫폼이 더 좋습니다.
  2. 컨트롤러는 액션 처리에 매우 적합합니다.
  3. HTML 콘텐츠 생성에 유용한 부분(여기서는 스크롤이 큰 도움이 됩니다)

ExtJS

  • 네비게이션,
  • 리스트,
  • 검색,
  • 콘텐츠 편집,
  • 알림,
  • 다른 건 거의 다...

전체적인 ExtJ는 훌륭한 프레임워크입니다.

어플리케이션에서는, 「페이지」간의 전환을 처리하는 커스텀 페이지 클래스를 작성했습니다.페이지는 클래스를 반환하는 ExtJS 컨테이너로 구성되어 있으며 URL 끝에 #hash 값을 설정하여 이력을 유지합니다.

이 접근방식을 사용하면 ExtJs 라이브러리와 모든 자산을 한 번 로드하면 성능 및 앱의 유동성을 유지할 수 있습니다.

언급URL : https://stackoverflow.com/questions/1589027/what-is-extjs-philosophy-single-page-application

반응형