프로세스 지향적 관점에서의 프론트엔드 엔지니어링 시스템

一.什么是前端工程？

유사한 용어로 소프트웨어 엔지니어링（Software Engineering）이 있습니다:

Software engineering is the systematic application of engineering approaches to the development of software.

엔지니어링 방법론을 체계적으로 소프트웨어 개발에 적용하는 것을 소프트웨어 엔지니어링이라고 합니다. 그렇다면, 이어지는 두 가지 질문이 있습니다:

엔지니어링 방법론이란 무엇인가?
체계적이라는 것은 어떻게 이해하는가?

엔지니어링 은 과학적 원리를 사용하여 기계, 구조물 등을 설계하고 제조하는 것을 말합니다. 예를 들어, 다리 수리, 도로 포장, 터널 건설, 자동차 제조, 집 건축 등:

Engineering is the use of scientific principles to design and build machines, structures, and other items, including bridges, tunnels, roads, vehicles, and buildings.

소프트웨어 분야에 구체적으로 말하면, 시스템적이고 엄격한, 정량화 가능한 방법으로 소프트웨어를 개발, 운영, 유지보수하는 것을指하며, 소프트웨어 엔지니어링에는 이러한 방법론의 적용과 연구가 포함됩니다:

Software engineering the application of a systematic, disciplined, quantifiable approach to the development, operation and maintenance of software and the study of these approaches.

소위 체계적이라는 것은, 소프트웨어 라이프사이클에서 사용되는 이러한 엔지니어링 방법론이 상호 보완적이며, 각각이 일부 문제를 해결하고, 연합하여 소프트웨어의 품질, 전달 속도 등을 보장한다고 이해할 수 있습니다

이상을 종합하면, 프론트엔드 엔지니어링은, 엔지니어링 방법론을 체계적으로 프론트엔드 개발에 적용하여, 시스템적이고 엄격한, 정량화 가능한 방법으로 프론트엔드 애플리케이션을 개발, 운영, 유지보수하는 것으로 정의할 수 있습니다

二.前端工程的演进历程

마찬가지로 먼저 소프트웨어 엔지니어링을 보면, 그 발전 역사는 이��한 중요한 포인트를 경험했습니다:

컴퓨터 하드웨어를 폰 노이만 아키텍처 로 추상화하고, 이로 인해 소프트웨어와 하드웨어의 구분이 생김
소프트웨어 복잡도의 상승에 따라, 모듈화와 정보 은닉의 이념이 제기됨
소프트웨어 개발 프로세스를 이해하고 관리하기 위해, 소프트웨어 엔지니어링은 전문 분야가 됨
소프트웨어 개발 팀의 능력을 평가하기 위해, 성숙도衡量基準 (CMMI-DEV) 이 형성됨
현대 소프트웨어 엔지니어링의 모범 사례를 기반으로, 사람들이 보편적으로 수용하는 소프트웨어 엔지니어링 지식 체계가 구축됨

프론트엔드 엔지니어링도 유사한 프로세스를 경험했습니다:

B/S 아키텍처가兴起하고, 이로 인해 프론트엔드, 백엔드의 구분이 생김
프론트엔드 복잡도의 상승에 따라, 모듈 재사용, [실천 규범](/articles/前端优化：雅虎 35 条/) 이 점점 더 중요해짐
프론트엔드 개발 프로세스를 관리하고 단순화하기 위해, 프론트엔드 프레임워크, [자동화](/articles/js 自动化/), [빌드 시스템](/articles/grunt 教程/) 이 탄생하고 급속히 발전함
업계 모범 사례를 기반으로,开箱即用的 프레임워크 (예: dva), 툴 시스템 등이 점차 구축됨

프론트엔드는 점점 더 무거워지고, 복잡도는 높아지며,配套의 프론트엔드 엔지니어링 시스템도 끊임없이 발전하고完善되며, 개발, 구축, 릴리스의 3 가지 메인 라인으로 간단히 분류할 수 있습니다:

프론트엔드 프레임워크: 플러그인화 (jQuery) -> 모듈화 (RequireJS) -> 컴포넌트화 (React)
빌드 도구: 태스크화 (grunt/gulp) -> 시스템화 (webpack)
CI/CD: 도구화 (Jenkins) -> 자동화 (Web Hook)

3 가지 메인 라인이 프론트엔드 엔지니어링 시스템을 지탱하며, 프론트엔드 개발의 메인 플로우를 체계적으로 커버하고, 그 중의 엔지니어링 방법론도 서로 보완하고 상호 영향을 미칩니다. 구체적으로는:

빌드 도구를 통해百花繚亂한 프론트엔드 프레임워크, 라이브러리가 원활하게 협력할 수 있음
프론트엔드 프레임워크, 라이브러리도 일정 정도로 빌드 도구 (예: 모듈 로딩, CSS 전처리), 심지어 CI/CD(예:SSR) 에 영향을 미침

三.面向过程视角下的前端工程体系

[caption id="attachment_2277" align="alignnone" width="625"] dev workflow[/caption]

（Book of Modern Front-end Tooling 에서 인용）

전형적인 프론트엔드 워크플로우는 5 단계로 나뉩니다:

개발
테스트
구축
배포
모니터링

스캐폴딩부터 모니터링 시스템까지,配套의 프론트엔드 엔지니어링 시스템은 프론트엔드 워크플로우의 각環節에 녹아들어가,很大程度上로 프론트엔드 생산 효율을 결정합니다

P.S.개발環節전의 분석, 설계 단계는 여기서 전개하지 않습니다. 전통적인 소프트웨어 엔지니어링 방법론도 마찬가지로 적용 가능하며, 프론트엔드 프로젝트는 이 단계에서 큰 특수성이 없기 때문입니다

开发阶段

개발 단계의首要任務는 샘플 프로젝트를 생성하는 것 (함께 프론트엔드 프레임워크, 라이브러리를 선택) 이며, 다음으로修改 - 検証의 메인 루프를 시작합니다. 주로 이러한 엔지니어링 시설을 포함합니다:

스캐폴딩: 프론트엔드 애플리케이션의 디렉토리 구조를 생성하고, 샘플 코드를 생성
공공 라이브러리: 재사용 가능한 UI 컴포넌트, 툴 모듈 등의 공공 리소스를 유지
패키지 매니저: 서드파티 라이브러리/컴포넌트를 도입하고, 이러한 의존항목을 추적 관리
에디터: 구문 하이라이트, 스마트 힌트, 참조 점프 등의 기능을 제공하고, 개발 경험을 향상
빌드 도구: 구문 검증, 컴파일, 패키징, DevServer 등의 기능을 제공하고, 워크플로우를 단순화
디버깅 스위트: 미리보기, DevTools, Mock, 성능 분석 진단 등의 디버그 기능을 제공하고, 修改 - 検証의 메인 루프를 가속

测试阶段

개발 완료 후, 테스트 단계에 들어가, 먼저 전체 기능에 대해 충분히自測을 수행한 후, 전문 테스트 담당자에게 검증을 이관합니다. 과정에서 사용하는 엔지니어링 시설은 다음과 같습니다:

유닛 테스트 프레임워크: 컴포넌트, 로직에 대한 테스트 지원을 제공
정적 스캔 도구: 코드 품질, 구축 산출물 품질, 모범 사례/개발 규약 등 여러 차원에서 정적 검사를 수행
자동화 테스트 도구: UI 효과와 비즈니스 플로우에 대해, 테스트 지원을 제공
성능 테스트 도구: 비교적 정확한 성능 데이터를 모니터링 및 통계

构建阶段

개발 단계와 달리, 구축 단계에서는 더 많은 극한 최적화와 플로우 연동을 수행해야 하며, 다음을 포함합니다:

패키징 스크립트: 구문 검증, 컴파일, 패키징의基础上에서, 결합, 압축, 코드 분할, 이미지 처리, SSR 등의 극한 최적화를 수행
구축 서비스: 멀티태스크 병렬 패키징, 알림을 지원

部署阶段

마지막으로 충분히 테스트된 프론트엔드 애플리케이션을 프로덕션 환경에 배포합니다. 이러한 엔지니어링 도구가 필요합니다:

릴리스 플랫폼: 프론트엔드 리소스를 CDN 또는 SSR 렌더링 서비스에 업로드, 또는 오프라인 패키지 형태로 모바일 클라이언트에 통합
반복 관리 플랫폼: CI/CD 지원을 제공

监控阶段

프론트엔드 애플리케이션이 온라인된 후,还需要 지속적으로 온라인의 실제 효과와 이상 상황을关注해야 합니다. 이러한 엔지니어링 시설에 의존합니다:

-埋点 플랫폼: 비즈니스 데이터를 통계·분석하고, 성능 지표를 추적

모니터링 플랫폼: 온라인의 이상 정보를 관찰. 에러, 백화면, 트래픽 이상 등을 포함

四.过程之间的衔接

워크플로우 각 단계의 엔지니어링 시설之外에, 프론트엔드 엔지니어링의 또 다른 부분은프로세스 간의衔接입니다. 전자는 생산 효율 향상을 목표로 하고, 후자는 경험 문제 해결을 목표로 합니다

전체적으로 보면, 프론트엔드 엔지니어링의 진화는 2方面에 체현됩니다:

협업 모드: 새로운 이념, 새로운 아키텍처로 나타나는 경우가 많음. 예: BFF/SFF
개발 모드: 새로운 추상층, 새로운 워크플로우에 체현됨. 예: [Sass](/articles/我们一起学 sass/), React, webpack, 심지어 Cloud IDE

역할 분담의 변화든 구체적인 작업 내용의 변화든, 개발자에게 있어, 더 많은 학습, 이해 비용을 의미하며, 최종적으로 개발 경험에 나타납니다. 프로세스 간의衔接面向의 엔지니어링 시��은 바로 이러한 변화로 인한 업그레이드 적응 비용을 완화하고, 더 원활하게 과도기를 벗어나기 위한 것입니다

예를 들어:

codemod:新旧프론트엔드 프레임워크를衔接하고, 업그레이드 적응 비용을 낮춤
dva:React 에코시스템 중의 각종 우수한 이념 (redux, redux-saga 등) 을衔接하고, 학습 비용을 낮춤
[IDE](/articles/定制化 ide 的核心价值/): 한편으로는全套의 엔지니어링 시설을 패키징하고, 착수 비용을 낮춤. 다른 한편으로는 워크플로우의 각 단계를衔接하고, 개발 경험을 향상

이상적으로는, 프론트엔드 엔지니어링은 지속적으로 협업 모드를 최적화하고, 개발 효율을 향상시킬 뿐만 아니라, 开箱即用的 착수 경험,一气呵成的衔接 경험,无缝切換의 업그레이드 경험을 보장해야 합니다

五.总结

프로세스 지향적인 관점에서 보면, 프론트엔드 엔지니어링은 프론트엔드 애플리케이션 라이프사이클 전반에 걸친 일련의 엔지니어링 시설이며, 프론트엔드 애플리케이션의 개발 경험, 품질, 전달 속도를 보장하는 데 사용됩니다

구체적으로, 프론트엔드 엔지니어링은 개발, 구축, 릴리스의 3 가지 메인 라인을 중심으로 전개되며, 도구화, 자동화 등의 수단으로 각環節에서 마주치는 문제를 해결합니다. 한편으로는 프론트엔드 개발의 복잡도를 제어하고, 프론트엔드 생산 효율을 향상시키며, 다른 한편으로는 아키텍처 업그레이드, 협업 모드 변화 등으로 인한 이전, 적응 비용을 낮추고, 개발 경험을 향상시킵니다