프런트 엔드 관점에서 답변 :
1996 년에 공동 저술 한 샌프란시스코 주립대 학교 웹 서비스는 몇 년 전 인터넷 천국에 갔으며 그 당시에는 단일 브라우저 호환성 수정이 필요하지 않았기 때문에 모든 사람의 말을 듣지 마십시오. ; 40 년 목표의 거의 절반입니다. 그리고 1998 년 스탠포드 연구소 (Stanford Research Institute) 프로젝트를 위해 만든 이 JavaScript 기반 프론트 엔드 는 몇 년 후에 더 화려하게 바뀌었지만 오늘날의 UI가 여전히 약간의 호환성 수정으로 실행될 수 없었습니다.
비결은 앱이 광범위하게 지원되는 W3C / ECMA 표준 만 사용 하고 통제하에 깔끔한 디자인 을 갖도록하는 것 입니다. 트렌디 한 90 년대 기술로 작성된 많은 웹 앱이 제대로 작동하지 않거나 오늘날에는 효과가 없지만 주요 표준으로 작성된 90 년대 웹 앱은 여전히 그렇습니다. 그들은 passé처럼 보일지 모르지만 작동합니다.
여기서 목표는 서버에 올라가서 다시는 손대지 않고 40 년 동안 웹 응용 프로그램을 작성하는 것이 아닙니다. 그것은 수십 년 동안 계속 사용할 수있는 기반을 구축하는 것입니다.이 기반은 처음부터 다시 작성하지 않고도 새로운 기능을 지원하도록 성장할 수 있습니다.
우선, 공식 표준 과 공식 표준 에만 코딩해야 합니다. 비준 된 ECMAScript 표준에 포함되지 않은 JavaScript 기능은 없습니다. ES5.1은 현재 버전이며 일반적으로 지원되므로 안전하게 타겟팅 할 수 있습니다. 마찬가지로 HTML5, CSS 및 유니 코드의 현재 버전이 좋습니다. 실험적인 JavaScript, CSS3 또는 HTML 기능 (공급 업체 접두사가 있거나 브라우저간에 100 % 동의하지 않은 기능)이 없습니다. 브라우저 별 호환성 해킹이 없습니다. 표준에있는 새로운 기능을 사용하기 시작하면 접두사없이 모두 지원할 수 있습니다.
ES5 지원은 IE8 또는 이전 버전을 제거하는 것을 의미합니다. 어쨌든 몇 년 동안 쓸모없는 브라우저 관련 해킹이 필요하기 때문에 제안합니다. 나는 ES5의 엄격한 모드를 장수했을 때 최상의 기회로 삼을 것을 제안합니다. 실제로 IE10과 다른 모든 사람들의 최신 버전 에서 기본 브라우저 호환성을 설정합니다 . 또한 이러한 브라우저는 HTML5의 여러 가지 양식 유효성 검사 및 자리 표시 자 기능을 기본적으로 지원하므로 매우 유용합니다.
ECMAScript의 새 버전은 이전 버전과의 호환성을 유지하므로 코드가 현재 표준에 따라 작성된 경우 향후 기능을 훨씬 쉽게 채택 할 수 있습니다. 예를 들어, 다음 class
구문을 사용하여 정의 된 클래스는 현재 constructor.prototype
구문으로 정의 된 클래스와 완전히 호환됩니다 . 따라서 개발자는 5 년 안에 클래스 단위로 파일을 기반으로 ES6 형식으로 클래스를 다시 작성할 수 있습니다. 물론 단위 테스트도 훌륭하다고 가정합니다.
둘째, 최신 JavaScript 앱 프레임 워크를 피하십시오 ( 특히 앱 코딩 방식이 변경되는 경우). 백본은 모든 분노 였고, SproutCore와 Ember는 이제 모든 사람들이 홍보하는 것을 좋아하는 프레임 워크입니다. 유용 할 수도 있지만 공통점이 있습니다. 새로운 버전이 출시되고 수명이 의심되는 경우 종종 앱을 중단하고 코드를 변경해야합니다. 최근에 Angular 1.1 앱을 1.2로 업데이트했으며 꽤 많이 다시 작성해야했습니다. 마찬가지로 Backbone 2에서 3으로 변경하려면 많은 HTML 변경이 필요합니다. 표준은 이유가 느리게 진행되지만 이러한 프레임 워크는 빠르게 이동하며 정기적으로 중단되는 것은 비용입니다.
또한 새로운 공식 표준은 종종 오래된 프레임 워크를 사용하지 않는 경우가 많으며, 이러한 프레임 워크가 발생하면 변경 사항이 변경되거나 변경됩니다. ECMAScript 6이 비준되고 모든 브라우저가 표준화 된 Promise 클래스를 지원하면 세계의 모든 경쟁 약속 라이브러리에 어떤 일이 일어날 지 알고 있습니까? 더 이상 사용되지 않으며 개발자가 업데이트를 중지합니다. 올바른 프레임 워크를 선택하면 코드가 충분히 적응할 수 있으며 잘못 추측하면 주요 리팩토링을 보게됩니다.
따라서 타사 라이브러리 또는 프레임 워크를 채택하려는 경우 향후 제거하기가 얼마나 어려운지 자문 해보십시오. Angular와 같은 프레임 워크 인 경우 앱을 처음부터 다시 작성하지 않고는 제거 할 수 없다면 40 년 아키텍처에서는 사용할 수 없습니다. 일부 사용자 정의 미들웨어로 추상화 한 써드 파티 캘린더 위젯 인 경우 교체하는 데 몇 시간이 걸립니다.
셋째, 좋은 앱 구조를 제공하십시오. 앱 프레임 워크를 사용하지 않더라도 개발자 도구, 스크립트 작성 및 깔끔한 디자인을 활용할 수 있습니다. 저는 개인적으로 Closure Toolkit의 종속성 관리를 좋아합니다. 가벼우면서 앱을 빌드 할 때 오버 헤드가 완전히 제거 되었기 때문입니다. LessCSS와 SCSS는 또한 스타일 시트를 구성하고 릴리스 할 표준 기반 CSS 스타일 시트를 작성하는 데 유용한 도구입니다.
MVC 구조를 사용하여 자체 코드를 일회용 클래스로 구성 할 수도 있습니다. 그러면 앞으로 몇 년 동안 더 쉽게 돌아와서 무언가를 쓸 때 생각했던 것을 알고 필요한 부분 만 교체 할 수 있습니다.
또한 W3C의 조언을 따르고 프레젠테이션 정보를 HTML에서 완전히 제외시켜야합니다. 여기에는 "big-green-text"및 "two-columns-wide"와 같은 프리젠 테이션 클래스 이름을 제공하는 것과 같은 치트가 포함됩니다. HTML이 의미론적이고 CSS가 프리젠 테이션 인 경우,이를 유지 보수 및 적용하기가 훨씬 쉬워집니다. 앞으로 새로운 플랫폼으로 또한 시각 장애인이나 장애인을위한 특수 브라우저에 대한 지원을 쉽게 추가 할 수 있습니다.
넷째, 테스트를 자동화하고 거의 전체 범위를 커버하는지 확인하십시오. 서버 측이든 JavaScript이든 모든 클래스에 대한 단위 테스트를 작성하십시오. 프론트 엔드에서 각 클래스가 지원되는 모든 브라우저에서 스펙에 따라 수행되는지 확인하십시오. 모든 커밋마다 빌드 봇에서 이러한 테스트를 자동화하십시오. 현재 브라우저에서 버그를 가리더라도 버그를 조기에 발견 할 수 있기 때문에 수명과 안정성 모두에 중요합니다. Jasmine과 Google Closure의 JSUnit 기반 테스트 프레임 워크 모두 좋습니다.
또한 Selenium / WebDriver가 능숙한 전체 UI 기능 테스트를 실행하고 싶을 것입니다. 기본적으로 UI를 단계별로 실행하여 마치 마치 마치 테스트하는 것처럼 사용하는 프로그램을 작성합니다. 빌드 봇에도 연결하십시오.
마지막으로, 다른 사람들이 언급했듯이 귀하의 데이터는 왕입니다. 데이터 스토리지 모델을 고려하여 오래 지속되도록하십시오. 데이터 스키마가 견고한 지 확인하고 모든 커밋에서 철저히 테스트해야합니다. 또한 서버 아키텍처가 확장 가능한지 확인하십시오. 이것은 프런트 엔드에서하는 것보다 훨씬 중요합니다.