웹 디자이너 및 개발자를위한 새로운 리소스 (2018 년 1 월)
2018 년 새해가 왔습니다. 5 년 전 웹 개발의 진보를 살펴보면 오늘날과 완전히 다릅니다. 오늘날에는 새로운 방법, 도구 및 완전히 새로운 패러다임 오늘날 웹 사이트를 구축하는 방식이 바뀌고 VirtualDOM이 그 중 하나입니다..
DOM (문서 개체 모델)은 웹 사이트 구성 방법을 정의하는 트리 모델. DOM을 선택, 이동 및 조작하는 것은 매우 비싼 조작 일 수 있으며 사이트의 렌더링 성능을 방해합니다..
그러나이 글에서는 VirtualDOM이 다른 툴과 어떻게 작동하는지에 대해서는 논의하지 않을 것이며, VirtualDOM을 구현할 수있는 라이브러리 곧. 그들을 체크하자..
마켓
안 VirtualDOM 구현 사용자 인터페이스를 구축하여 주변 데이터로 업데이트 할 수 있습니다. 그것은 순수한 자바 스크립트와 미공개의 라이브러리가 가능하므로 CoffeeScript, TypeScript 및 JSX와 같은 합성 언어와 함께 사용하십시오.. React.js의 훌륭한 대체 라이브러리. MaquetteJS는 크기가 훨씬 작습니다 ( 3kb) comparably.
ReDOM
이것은 내가 좋아하는 VirtualDOM 라이브러리 중 하나이다. 구문을 살펴 봄으로써 쉽게 찾을 수있다.. 단지 2Kb로, 빠른 렌더링 웹 페이지 또는 사용자 정의 HTML 구성 요소를 빌드 할 수 있습니다. 라이브러리는 다음과 같이 구성됩니다. 두 가지 기본 기능 엘자, 요소를 만들거나 조작하기, 과 산 선택한 요소에 추가합니다. NodeJS를 사용하여 브라우저 및 서버 측에서로드 할 수 있습니다..
ReactiveJS
템플릿 화 인터랙티브 한 웹 애플리케이션을 구현하는 UI 라이브러리. 원래 TheGuardian 용으로 제작 된 ReactiveJS는 브라우저와 모바일 장치에서 작동하도록 제작되었습니다. 그래서 당신은 그 신뢰성에 의존 할 수 있습니다. ReactiveJS도 함께 제공됩니다. 최신 웹 응용 프로그램에 필요한 많은 기능을 즉시 사용할 수 있습니다., 스코프 CSS, 맞춤 구성 요소, SVG 및 애니메이션.
RiotJS
RitoJS는 사용하기가 즐겁고 초보자를위한 라이브러리를 훨씬 쉽게 배울 수 있습니다. HTML 요소를 사용하여 사용자 지정 구성 요소 정의 및 HTML 속성을 사용하는 반면 이전 라이브러리는 순수한 JavaScript 구문을 사용해야합니다.
RiotJS는 Node.js 환경 또는 브라우저와 호환되며 similarties를받는 Vue.js의 위대한 대안.
HyperHTML
하이퍼 HTML, 이름에서 알 수 있듯이, DOM을 렌더링하고 조작 할 때 성능이 향상됩니다.. 이를 사용하여 사용자 지정 요소 및 웹 구성 요소를 만들 수 있습니다. 브라우저에서 jQuery처럼 쉽게 사용할 수 있습니다. CDN에서 스크립트를로드하고 hyperHTML에 액세스합니다.. 복잡한 필요 없음 압형.
미스릴
그것이 소리가 나는만큼 시원한 미스릴은 강력한 JavaScript 라이브러리. VirutalDOM과 Components를 제외하고, Mithril은 Routing과 XHR도 갖추고 있습니다. 다른 라이브러리에 의존하지 않고 단일 페이지 웹 애플리케이션을 구축 할 수 있습니다.. Benchmark는 Vue.js, React.js 및 Angular와 같은 인기있는 라이브러리보다 성능이 우수함을 보여줍니다..
SlimJS
SlimJS는 자바 스크립트 라이브러리입니다. 네이티브 Web Component API를 사용하여 사용자 지정 웹 구성 요소 만들기. SlimJS는 기본 브라우저 구성 요소를 중심으로 구축되었으므로 폴리필 API를 아직 지원하지 않는 브라우저에서 API를 shims합니다.. 네이티브 방식을 채택하기를 원한다면 훌륭한 프레임 워크입니다..
VSVG
HTML과 비슷한 문법을 가지고 있지만, SVG는 또 다른 종류의 짐승이다. 이 라이브러리는 이름에서 알 수 있듯이 SVG를 즉시 생성하고 조작 할 수 있습니다..
EmotionSH
EmotionSH is VirtualDOM으로 웹 사이트를 구축 할 때 필요할 수도있는 CSS-in-JS 프레임 워크. 이렇게하면 사이트에 필요한 CSS 만 제공 할 수 있습니다. 스타일을 동적으로 업데이트 스타일이 적용되는 Component로만 스와핑됨에 따라 클래스 이름 지정 및 구체화로 전환되지 않고.
반응 스타터 키트
지난 2 년 동안 웹을 따라왔다면, 거의 모든 곳에서 React (거의)를 찾을 수 있습니다. 이것은 5 개의 짧은 비디오 코스 소개 React. 업계와 계속 일하기를 원한다면, 이것들은 시작하기에 적합한 장소 일 것입니다..
집단
요소는 Sketch에서 iOS 앱 프로토 타입을 만드는 iOS 구성 요소. 그것은 Sketch에 의해 사람들에 의해 만들어졌고 iPhone X UI로 업데이트되었습니다..
Modaal
Modaal은 접근성을 염두에두고 개발 된 JavaScript 라이브러리입니다. 그것은 확인 된 “WCAG 2.0 레벨 AA 지원” 그 (나는) 생각한다. 얻기 쉬운 “모달” 오늘 도서관. 그 가볍고 jQuery와 호환되며 이미지, 비디오 및 Instagram에도 사용할 수 있습니다.. 또한 Google에서 제공하는이 짧은 과정을 통해 웹 접근성을 시작하고 그 중요성을 알 수 있습니다..
WordPressify
NPP 패키지로 WordPress 개발 환경을 몇 분 만에 실행할 수 있습니다. 그것은 모두 함께 설정됩니다. Gulp, LiveReload, PostCSS, Babel과 같은 현대적인 도구 따라서 튜닝 - 업 구성보다는 프로젝트 개발에 집중할 수 있습니다..
란도
Lando는 또한 개발 환경을 쉽고 빠르게 개발할 수있는 편리한 도구입니다. WordPressify 우리가 위에서 언급 한 것입니다. 하지만 Node.js 대신에 Docker의 장점 경량 컨테이너 화 기술을 지원하며 개발시 사용할 스택의 유연성을 제공합니다..
예를 들어 다음과 같이 할 수 있습니다. PHP 버전을 지정하고, XDebug를 활성화하고, Composer를 설치하십시오..
WP- 도크 라인
WP-Docklines는 지속적인 통합 및 전달을 수행하기위한 기준으로 사용할 수있는 이미지 모음 Bitbucket, CircleCI 및 Gitlab과 같은 서비스에서 WordPress 테마 및 플러그인을 사용합니다. 각 이미지는 번들로 제공됩니다. WordPress 개발시 일반적으로 필요한 도구 PHP 코드 스니퍼, PHPUnit, WP-CLI 등.
WP- 로커
WP-Locker는 단 몇 분만에 WordPress 개발 환경을 돌리는 Docker Compose 구성입니다. 그것은 아파치, MySQL, phpMyAdmin으로 설정 WP-Docklines 이미지를 확장하므로 이미지에서 추가 도구를 즉시 사용할 수 있습니다.
간단히 유형 bin / start 그것을 허용하기 위해 로컬 호스트 플러그인 설치하기 및 구성 파일에서 구성한 테마.
도코 사우루스
Facebook의 또 다른 오픈 소스 이니셔티브, Docusaurus는 프로젝트의 문서 웹 사이트를 만드는 도구입니다. React와 Markdown으로 제작되었으므로 문서를 쉽게 작성하고 관리하며 사이트의 블로그를 만들 수도 있습니다. Github Pages에 게시하십시오..
VSCode Yo
Yeoman은 프로젝트를 신속하게 시작할 수있는 Node Package입니다. 프로젝트에 적합한 사전 제작 된 스캐 폴딩 선택. Visual Studio Code를 사용하는 경우,이 플러그인을 사용하면 시작 워크 플로가 더욱 능률적으로 진행되므로 실행하다 “에야디야” Visual Studio 코드 창에서 바로 명령.
BluebirdJS
자바 스크립트 라이브러리 너를 사용할 수있게 해준다. 약속, 기다리다, 비동기 오늘 모든 브라우저에서; 넷스케이프에서도 작동한다고. 약속 최신 자바 스크립트 사양에서 가장 강력한 점 중 하나입니다. 코드를 더 가볍고 읽기 쉽고 유지하기 쉽도록 만드십시오..
예쁘다
예쁘게하는 도구는 언어의 코딩 표준을 준수하도록 코드의 형식을 지정하십시오.. 그것은 당신과 당신의 팀을 허용 규칙을 따라 scracth에서 코드를 다시 작성합니다 코드 작성 스타일에 대한 논쟁 대신 생산성 향상.
