강력한 PWA
개발 중에 웹 애플리케이션을 디버그하는 데 사용하는 도구가 프로그레시브 웹 앱 자체라는 것을 알고 계셨습니까? PWA에 대해 아직 들어보지 못했다면 여기 요점이 있습니다. 기능 면에서 기본 앱에 필적하는 최신 웹용 경험을 구축할 수 있는 차세대 웹 응용 프로그램입니다.
따라서 Google의 DevTools가 당신이 생각하는 것처럼 "네이티브 코드"가 아니라 프로그레시브 웹 앱으로 작성되었다는 사실은 매우 흥미롭습니다! 이는 복잡하고 리소스 집약적인 작업도 처리할 수 있는 PWA의 힘을 보여줍니다.
DevTools는 항상 PWA였습니까?
사실 아닙니다. DevTools 애플리케이션은 원래 Backbone.js라는 프레임워크로 작성되었습니다. 이 프레임워크는 jQuery가 여전히 지배적인 라이브러리였을 때 서버에 대한 긴밀한 바인딩을 통해 웹 앱용 MVC 패턴을 구현할 수 있게 해주었습니다. 오늘날에는 최신 프로그레시브 웹 앱과 같이 Backbone.js를 관련 없는 옵션으로 만들 수 있는 다른 옵션이 있습니다. Backbone.js의 개념은 예를 들어 Meteor.js와 같은 프레임워크와 함께 여전히 살아 있고 활발하게 사용되고 있습니다.
DevTools는 처음에 사용자 정의 모듈 형식도 사용했는데, 사용자 정의 python 스크립트로도 처리해야 했습니다! 오늘날 플랫폼은 개발 중 마찰을 줄이기 위해 Typescript 및 ECMAScript와 같은 일반적으로 사용되는 표준을 사용합니다. 사용자 지정 솔루션은 DevTools의 경우 실제로 발생한 기술 부채를 유발할 수 있기 때문입니다. 또한 사용자 지정 python 스크립트를 사용하는 대신 DevTools는 이제 Google에서 개발한 최신 개방형 번들러인 Rollup을 통해 번들로 제공됩니다.
150,000줄의 코드
2020년에 DevTools는 총 150,000행의 자사 코드로 구성되어 상당히 큰 애플리케이션으로 표시됩니다. 이는 최신 웹 앱의 핵심 측면을 강조합니다. 최신 도구를 사용하여 코드 분할과 같은 언어 기능을 활용하면 PWA를 통해 애플리케이션 크기를 필요한 만큼 확장할 수 있습니다.
테스트하지 않으면 고장난 것입니다.
보시다시피 DevTools는 완전히 마이그레이션되어 실질적으로 전체 프로세스를 뇌 이식으로 만듭니다. 메인 프레임워크뿐만 아니라 모듈 시스템과 언어까지 교체하면서 개발자들은 통제할 수 없는 회귀와 혼란 상태를 피하기 위해 안전 우선 접근 방식이 필요했습니다.
따라서 팀은 지침 중 하나로 "테스트되지 않으면 고장납니다."라고 말했습니다. 또 다른 핵심 문장은 "지루한 코드가 최고의 코드입니다."입니다. 처음 읽을 때는 이 문장이 마음에 들지 않을 수도 있지만 개발자의 목표는 프로그램을 가능한 한 자체 설명하고 이해하기 쉽게 만드는 것이었습니다. 따라서 멋진 언어 기능을 사용하는 대신 최고의 가독성을 제공하는 것이 가장 중요합니다.
결론
이 사이트의 다른 기사를 알고 계시다면 제가 PWA에 관해 상당히 팬이라는 것을 알고 계실 것입니다. 브라우저에서 모두 뛰어난 성능을 제공합니다. DevTools는 무엇보다도 시각화하기 위해 많은 데이터를 처리하기 때문에 가장 흥미로운 예 중 하나입니다. 이 모든 정보의 출처는 DevTools 팀이 업로드하고 이 페이지 끝에 있는 부록에 링크된 YouTube 비디오입니다.
