웹 프런트엔드에는 어떤 프레임워크가 있나요?

웹 프런트 엔드 프레임워크에는 다음이 포함됩니다. 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. 양방향 데이터 바인딩

• 3. . HTML 템플릿

• 5. 내장, 삽입 및 테스트 가능
장점:

1. 템플릿은 매우 풍부하고 풍부합니다.

2 서비스, 템플릿, 양방향 데이터 바인딩, 모듈화, 라우팅, 필터, 종속성 주입 및 기타 모든 기능을 포함하는 비교적 완전한 프런트 엔드 프레임워크입니다.

• 3. 지시어는 프로젝트에서 여러 번 사용될 수 있습니다.

• 4.ng 모듈화는 Java(의존성 주입)의 일부 기능을 대담하게 도입하여 재사용 가능한 코드를 쉽게 작성할 수 있게 하며 이는 민첩한 개발 팀에 매우 유용합니다.

• 5.angularjs는 인터넷 거대 Google에 의해 개발되었으며 이는 탄탄한 기반과 커뮤니티 지원을 갖추고 있음을 의미합니다.
단점:

1. Angular는 시작하기 쉽지만, 더 깊이 들어가면 개념이 많아 학습하는 동안 이해하기 어렵습니다.

2. 공식 문서에는 기본적으로 API에 대한 설명만 나와 있고, 구체적인 사용 방법은 Google에서 직접 문의하는 경우가 많습니다. Angular의 저자 Misko입니다.

• 3. 특히 IE6/7과 호환되지는 않지만 jQuery를 사용하여 자신만의 코드를 작성하여 일부 문제를 해결할 수 있습니다.

• 4. 지침 적용에 대한 모범 사례 튜토리얼이 거의 없습니다. Angular는 실제로 일부 작성자의 사용 원칙을 따르지 않으면 다른 코드를 작성하기 쉽습니다. js 또는 jQuery와 유사한 아이디어의 많은 DOM 작업.

• 5.DI 종속성 주입 코드 압축에 명시적인 선언이 필요한 경우.
• 2, React

React는 Facebook에서 제작한 공식 버전으로 Angle보다 4년 늦은 2013년에 출시되었지만 혁신적인 VirtualDOM 덕분에 성능 면에서 AngleJS를 압도했습니다. 화재는 엉망이었습니다. VirtualDOM, JSX, Diff 알고리즘 등을 포함한 많은 기능이 있으며 ES6 구문을 지원하고 함수형 프로그래밍을 사용합니다. 임계값은 약간 높지만 더 유연하여 더 많은 개발 가능성을 허용합니다.

특징

1. 선언적 디자인: React는 애플리케이션을 쉽게 설명할 수 있는 선언적 패러다임을 채택합니다.

2. 효율성: React는 DOM을 시뮬레이션하여 DOM과의 상호 작용을 최소화합니다.

• 3. 유연성: React는 알려진 라이브러리나 프레임워크와 잘 작동합니다.
이점:

1. 빠름: UI 렌더링 프로세스 중에 React는 가상 DOM의 마이크로 작업을 통해 실제 DOM에 대한 로컬 업데이트를 구현합니다.

2. 브라우저 간 호환성: Virtual DOM은 브라우저 간 문제를 해결하는 데 도움이 되며 IE8에서도 문제가 되지 않는 표준화된 API를 제공합니다.

• 3. 모듈화: 하나 또는 일부 구성 요소에 문제가 있을 때 쉽게 격리할 수 있도록 프로그램에 대한 독립적인 모듈형 UI 구성 요소를 작성합니다.

• 4. 단방향 데이터 흐름: Flux는 JavaScript 애플리케이션에서 단방향 데이터 계층을 생성하기 위한 아키텍처입니다. 5. 동형, 순수 JavaScript: 검색 엔진 크롤러는 JavaScript가 아닌 서버측 응답에 의존하기 때문입니다. -앱 렌더링은 SEO에 도움이 됩니다. 6. 우수한 호환성: 예를 들어 RequireJS는 로딩 및 패키징에 사용되는 반면 Browserify 및 Webpack은 대규모 애플리케이션 구축에 적합합니다. 그들은 그러한 어려운 작업을 덜 어렵게 만듭니다. 단점: React 자체는 완전한 프레임워크가 아닌 V일 뿐이므로 대규모 프로젝트를 위한 완전한 프레임워크를 원한다면 기본적으로 대규모 애플리케이션을 작성하려면 ReactRouter 및 Flux를 추가해야 합니다.

3, Vue

Vue는 마지막으로 출시된(2014) 프레임워크로서 이전 프레임워크인 Angle 및 React(예: VirtualDOM, 양방향 데이터 바인딩, diff 알고리즘, 반응형 속성)의 특성을 활용합니다. , 구성 요소화 개발 등) 및 관련 최적화를 수행하여 사용하기 쉽고, 시작하기 쉽고, 초보자에게 적합하지 않게 만들었습니다.

기능:

• 1. 경량 프레임워크

• 2. 양방향 데이터 바인딩

• 3. 플러그인

• 장점:

1. 단순함: 공식 문서는 Angular보다 매우 명확하고 배우기 쉽습니다.

• 2. 빠른: 비동기 일괄 처리로 DOM을 업데이트합니다.

• 3. 구성: 분리되고 재사용 가능한 구성 요소로 애플리케이션을 구성합니다.

• 4. 압축: ~18kbmin+gzip, 종속성 없음.

• 5. 강력함: 표현식은 종속 계산 속성을 선언할 필요가 없습니다.

• 6. 모듈 친화적: NPM, Bower 또는 Duo를 통해 설치할 수 있으며 모든 코드가 Angular의 다양한 규정을 따르도록 강요하지 않으며 사용 시나리오가 더 유연합니다.

• 단점:

1. 신규: Vue.js는 각도만큼 성숙하지 않은 새로운 프로젝트입니다.

• 2. 영향은 그다지 크지 않습니다. Google에서 검색한 결과 Vue.js의 다양성이나 풍부함이 다른 유명한 라이브러리보다 적습니다.

• 3.

• 4. Bootstartp

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 지원, CSS3

HTML5 시맨틱 태그 및 CSS3 속성이 잘 지원됩니다.

6) LESS 동적 스타일 지원

LESS는 변수, 중첩 및 작업 혼합 코딩을 사용하여 더 빠르고 유연한 CSS를 작성합니다. Bootstrap으로 잘 개발할 수 있습니다.

5. QUICK UI

QUICK UI는 기본 프레임워크, UI 구성 요소 라이브러리, 스킨 패키지, 샘플 프로젝트 및 문서로 구성된 완전한 엔터프라이즈급 웹 프런트 엔드 개발 솔루션입니다. QUICKUI를 사용하는 개발자는 작업량을 크게 줄이고 개발 효율성을 향상하며 강력하고 아름답고 호환 가능한 웹 애플리케이션 시스템을 빠르게 구축할 수 있습니다.

6. MDC Web

Material 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!