웹 프런트 엔드 프레임워크에는 다음이 포함됩니다. 1. 단일 애플리케이션 인터페이스를 생성하기 위한 프런트 엔드 프레임워크인 Angular 2. 사용자 인터페이스 구축을 위한 JavaScript 개발 프레임워크 3. 사용자 인터페이스 구축을 위한 도구 세트 프로그레시브 JavaScript 프레임워크 4. HTML, CSS 및 JavaScript 기반 프런트엔드 프레임워크인 Bootstartp 5. 엔터프라이즈 수준 웹 프런트엔드 개발 솔루션 세트인 QUICK UI .
이 튜토리얼의 운영 환경: Windows 7 시스템, Dell G3 컴퓨터.
"클라이언트"라고도 알려진 웹 프런트 엔드는 사용자가 보고 경험할 수 있는 웹 사이트의 시각적 측면, 즉 사용자가 볼 수 있는 내용을 포함하여 웹 브라우저에 표시되는 모든 내용을 의미합니다. 보고, 만지고, 경험하세요. 즉, 웹 프런트 엔드에는 웹 페이지의 구조, 웹의 시각적 모양 및 웹 수준의 상호 작용 구현이 포함됩니다.
1. Angular
AngularJS는 2009년 Misko Hevery 등이 만들었으며 나중에 Google에 인수되었습니다. 많은 제품에서 사용되는 뛰어난 프론트엔드 JS 프레임워크입니다. 고급 개념을 갖춘 프런트엔드 개발 프레임워크일 뿐만 아니라 엔드투엔드 솔루션이기도 합니다. 이는 아키텍처 설계의 MVC 패턴을 따르며 데이터와 논리적 처리 구성 요소의 느슨한 결합을 옹호합니다. AngularJS는 명령 기술을 통해 HTML의 자연스러운 확장을 실현하고, 컴파일 기술을 통해 데이터 모델과 디스플레이 뷰의 양방향 자동 동기화를 실현하여 복잡한 DOM 작업을 완화합니다. 또한 프런트엔드 자동화 테스트 기술에 대한 우수한 지원도 제공합니다.
Angular는 단일 애플리케이션 인터페이스를 생성하기 위한 프런트 엔드 프레임워크로 데이터 바인딩, 서비스, 지시문, 종속성 주입 등과 같은 많은 핵심 기능을 갖추고 있습니다. 강력한 모듈 기능을 갖추고 있으며 사용자 정의 명령의 장점이 있습니다.
1. 우수한 응용 프로그램 구조
2 서비스, 템플릿, 양방향 데이터 바인딩, 모듈화, 라우팅, 필터, 종속성 주입 및 기타 모든 기능을 포함하는 비교적 완전한 프런트 엔드 프레임워크입니다.
2. 공식 문서에는 기본적으로 API에 대한 설명만 나와 있고, 구체적인 사용 방법은 Google에서 직접 문의하는 경우가 많습니다. Angular의 저자 Misko입니다.
특징
1. 선언적 디자인: React는 애플리케이션을 쉽게 설명할 수 있는 선언적 패러다임을 채택합니다.2. 효율성: React는 DOM을 시뮬레이션하여 DOM과의 상호 작용을 최소화합니다.
2. 브라우저 간 호환성: Virtual DOM은 브라우저 간 문제를 해결하는 데 도움이 되며 IE8에서도 문제가 되지 않는 표준화된 API를 제공합니다.
4. 단방향 데이터 흐름: Flux는 JavaScript 애플리케이션에서 단방향 데이터 계층을 생성하기 위한 아키텍처입니다. 5. 동형, 순수 JavaScript: 검색 엔진 크롤러는 JavaScript가 아닌 서버측 응답에 의존하기 때문입니다. -앱 렌더링은 SEO에 도움이 됩니다. 6. 우수한 호환성: 예를 들어 RequireJS는 로딩 및 패키징에 사용되는 반면 Browserify 및 Webpack은 대규모 애플리케이션 구축에 적합합니다. 그들은 그러한 어려운 작업을 덜 어렵게 만듭니다. 단점: React 자체는 완전한 프레임워크가 아닌 V일 뿐이므로 대규모 프로젝트를 위한 완전한 프레임워크를 원한다면 기본적으로 대규모 애플리케이션을 작성하려면 ReactRouter 및 Flux를 추가해야 합니다.
3, Vue
Vue는 마지막으로 출시된(2014) 프레임워크로서 이전 프레임워크인 Angle 및 React(예: VirtualDOM, 양방향 데이터 바인딩, diff 알고리즘, 반응형 속성)의 특성을 활용합니다. , 구성 요소화 개발 등) 및 관련 최적화를 수행하여 사용하기 쉽고, 시작하기 쉽고, 초보자에게 적합하지 않게 만들었습니다.
기능:
장점:
1. 단순함: 공식 문서는 Angular보다 매우 명확하고 배우기 쉽습니다.
단점:
1. 신규: Vue.js는 각도만큼 성숙하지 않은 새로운 프로젝트입니다.
Bootstrap은 HTML, CSS 및 JavaScript를 기반으로 하는 Twitter의 오픈 소스 프런트 엔드 프레임워크입니다. 웹 애플리케이션의 신속한 개발을 위해 설계된 프런트 엔드 툴킷입니다. 반응형 레이아웃을 지원하며 V3 버전 이후 모바일 장치 우선순위를 준수합니다. Bootstrap은 동적 CSS 언어 Less로 작성된 우아한 HTML 및 CSS 사양을 제공합니다. Bootstrap은 출시 이후 큰 인기를 끌었으며 NASA의 MSNBC(Microsoft National Broadcasting Company) Breaking News를 포함하여 GitHub에서 인기 있는 오픈 소스 프로젝트였습니다. WeX5 프런트엔드 오픈소스 프레임워크 등 국내 모바일 개발자에게 친숙한 일부 프레임워크도 부트스트랩 소스코드를 기반으로 성능이 최적화됐다.
공식 주소: https://getbootstrap.com
중국어 주소: http://www.bootcss.com/
Bootstrap 기능Bootstrap은 매우 실용적인 기능과 특징으로 인해 매우 인기가 높습니다. . 주요 핵심 기능은 다음과 같습니다:
1) 교차 장치 및 교차 브라우저
더 많은 비판을 받는 IE7 및 8을 포함하여 모든 최신 브라우저와 호환됩니다. 물론 이 과정에서는 더 이상 IE9 이하의 브라우저를 고려하지 않습니다. 2) 반응형 레이아웃은 PC에서 다양한 해상도의 디스플레이를 지원할 수 있을 뿐만 아니라 모바일 PAD, 휴대폰 및 기타 화면의 반응형 전환 디스플레이도 지원합니다. 3) 포괄적인 구성 요소 제공 Bootstrap은 개발자가 호출하기 편리한 탐색, 레이블, 도구 모음, 버튼 및 일련의 구성 요소를 포함하여 매우 실용적인 구성 요소를 제공합니다. 4) 내장 jQuery 플러그인Bootstrap은 개발자가 웹에서 다양한 일반 특수 효과를 구현할 수 있도록 도와주는 실용적인 jquery 플러그인을 많이 제공합니다. 5) HTML5 지원, CSS3HTML5 시맨틱 태그 및 CSS3 속성이 잘 지원됩니다. 6) LESS 동적 스타일 지원LESS는 변수, 중첩 및 작업 혼합 코딩을 사용하여 더 빠르고 유연한 CSS를 작성합니다. Bootstrap으로 잘 개발할 수 있습니다. 5. QUICK UIQUICK UI는 기본 프레임워크, UI 구성 요소 라이브러리, 스킨 패키지, 샘플 프로젝트 및 문서로 구성된 완전한 엔터프라이즈급 웹 프런트 엔드 개발 솔루션입니다. QUICKUI를 사용하는 개발자는 작업량을 크게 줄이고 개발 효율성을 향상하며 강력하고 아름답고 호환 가능한 웹 애플리케이션 시스템을 빠르게 구축할 수 있습니다.
6. MDC WebMaterial Components for the web(MDC 웹)은 Google이 웹용으로 설계한 새로운 프런트엔드 프레임워크입니다. MDC 웹은 개발자가 머티리얼 디자인을 구현하는 데 도움을 주며, 구성요소는 Google의 핵심 엔지니어 및 UX 디자이너 팀이 개발합니다. 이러한 구성 요소를 사용하면 아름답고 기능적인 웹 프로젝트를 구축할 수 있는 견고한 개발 워크플로가 가능합니다.
7、순수Bootstrap, Patternfly 및 MDC Web은 매우 강력한 CSS 프레임워크이지만 매우 지루하고 복잡합니다. 가벼운 CSS 프레임워크를 원한다면 Pure.css를 사용하는 것이 좋습니다. 이는 CSS 프로그래밍에 더 가깝지만 좋은 웹 페이지를 구축하는 데도 도움이 될 수 있습니다. Pure는 최소한의 공간을 차지하는 경량 CSS 프레임워크로 Yahoo에서 개발되었으며 BSD 라이선스에 따른 오픈 소스입니다.
8. Foundation
Foundation은 세계에서 가장 발전된 반응형 프런트 엔드 프레임워크라고 주장합니다. 전문적인 웹사이트 구축을 위한 고급 기능과 튜토리얼을 제공합니다. 이 프레임워크는 많은 회사, 조직에서 사용되며 광범위한 문서가 제공됩니다.
9, Bulma
Bulma의 Flexbox 기반 오픈 소스 프레임워크는 MIT 라이선스에 따른 오픈 소스입니다. 하나의 CSS 파일만 필요한 매우 가벼운 프레임워크입니다. Bulma는 원하는 테마를 쉽게 선택할 수 있도록 간결하고 명확한 문서를 제공합니다. 디자인에 사용할 수 있는 웹 구성 요소도 많이 있습니다.
10. Skeleton
경량 프레임워크 Skeleton. Skeleton 라이브러리의 길이는 약 400줄에 불과하며 프레임워크는 일부 기본 CSS 프레임워크 구성 요소만 제공합니다. Skeleton은 빠르게 시작하는 데 도움이 되는 자세한 문서를 계속 제공합니다.
11. Materialize
Materialize는 머티리얼 디자인 스타일을 기반으로 하는 현대적인 반응형 프런트 엔드 프레임워크로, 가장 힘든 작업을 해결하고 사용자 정의 구성 요소를 결합하여 기본 스타일을 제공합니다. Materialise의 문서 페이지는 매우 포괄적이고 따라하기 쉽습니다. 구성 요소 페이지에는 버튼, 카드, 탐색 등이 포함됩니다.
12.BootFlat
BootFlat은 Twitter의 Bootstrap에서 파생된 오픈 소스 CSS 프레임워크입니다. BootFlat은 Bootstrap보다 간단하고 가볍습니다. 대부분 텍스트가 많지 않은 이미지입니다.
13. PatternFly
PatternFly는 Bootstrap과 달리 아름다운 웹사이트를 만들고자 하는 사람들을 위해 설계된 반면, PatternFly는 주로 막대형 차트와 같은 구성 요소에 중점을 둡니다. 차트, 탐색 등 Red Hat은 실제로 이를 사용하여 OpenShift를 만들었습니다. PatternFly는 정적 HTML 외에도 Facebook에서 개발한 인기 있는 JavaScript 프레임워크인 ReactJS 프레임워크도 지원합니다. PatternFly에는 엔터프라이즈 수준 애플리케이션에 적합한 막대 차트, 차트, 패턴 및 레이아웃과 같은 많은 고급 구성 요소가 있습니다.
14, flex
Flex는 아직 인큐베이션 단계에 있으며 아직 공식 Apache 프로젝트가 아닙니다. Flex4.8은 공식 Apache 버전이 아닙니다. , 이 버전은 Flex의 미래가 하나의 회사가 아닌 커뮤니티에 의해 주도되는 새로운 Flex 시대의 시작을 의미합니다. 개발자는 버그 수정, 기능 추가 등의 코드 기여를 통해 Flex를 개선하는 데 도움을 줄 수 있습니다.
위는 Xiaoqian이 공유하는 웹 프런트엔드 개발에 일반적으로 사용되는 프레임워크입니다. 프로그래머는 비즈니스 요구 사항에 따라 간단하고 직관적이며 강력한 프런트 엔드 개발 프레임워크를 선택하여 작업을 더 빠르고 쉽게 만들고 개발 효율성을 향상시킬 수 있습니다.
15. SUI
"SUI는 부트스트랩을 기반으로 개발된 프론트엔드 컴포넌트 라이브러리입니다. 디자인 스펙의 집합이기도 합니다. SUI를 통해 아름다운 페이지를 쉽게 디자인하고 구현할 수 있습니다." 물론, 자신의 뇌세포를 살리기 위해서는 지루한 공식 광고를 직접 인용하는 것이 더 좋습니다(囧...). 물론, 광고에서 말했듯이 이전에 Bootstrap을 사용해 본 적이 있다면 쉽게 SUI로 전환할 수 있습니다. Taobao가 프런트 엔드 패자에게 제공하는 것입니다. .
Github: https://github.com/sdc-alibaba/sui
공식 홈페이지: http://sui.taobao.org/sui/docs/index.html
(학습 영상 공유: 웹 프론트- 끝)
위 내용은 웹 프런트엔드에는 어떤 프레임워크가 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![자바스크립트 심층 분석 [웹 프론트엔드의 기본은 알아야 한다]](https://img.php.cn/upload/course/000/000/041/61d3ff1c83b43350.jpg)
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
