GALAXY TECH
Chuyên gia Công nghệ
Thứ hai, 08/05/2017 | 00:00 GMT+7

Giới thiệu nhẹ nhàng về Cycle.js

Cycle.js là khung công tác FRP dễ tiếp cận nhất cho JavaScript mà ta chưa có cơ hội bị kinh ngạc và bối rối. Kết quả là nó có rất nhiều bánh xe đào tạo để đưa bạn đi trên con đường chông chênh của bạn . Điểm yếu: dễ thực hiện hơn là hiểu và tài liệu không giúp ích được gì nhiều.

Cách tốt nhất để di chuyển là sử dụng ứng dụng tạo chu trình của riêng Cycle (cài đặt theo tên thông qua NPM hoặc Yarn, tùy bạn). Bạn sẽ kết thúc với một cái gì đó giống như những gì bạn thấy bên dưới, nhưng với tất cả các giàn giáo cần thiết tại chỗ để kích hoạt server nhà phát triển hoặc triển khai một bản dựng. Ta đã đơn giản hóa nó một chút để minh họa.

import {run} from '@cycle/run';
import {div, makeDOMDriver} from '@cycle/dom';
import xs from 'xstream';

const main = function(sources) {
  const vtree$ = xs.of(
    div('My Awesome Cycle.js app')
  );
  const sinks = {
    DOM: vtree$
  };
  return sinks;
};

const drivers = {
  DOM: makeDOMDriver('#app')
};

run(main, drivers);

💡 Nguồn? Chìm? Chu kỳ lưu lượng truy cập trong biệt ngữ thương mại của lý thuyết môi trường như một sự trừu tượng. Thành thật mà nói, nó không phải là một sự trừu tượng sẽ giúp được nhiều. Hãy coi các nguồn là hiệu ứng đọc, sản phẩm của Ý định và chìm là hiệu ứng ghi, sản phẩm của Mô hình.

“Chu kỳ” chính hiệu trong Cycle.js đề cập đến stream stream theo chu kỳ giữa giao diện user và logic trình bày của ứng dụng. Giao diện user là một đầu vào cho logic. Logic là đầu vào cho giao diện user . Nghịch lý, không? Mẹo hay của Cycle là nó biết cách seeding ouroboros có lập trình này và làm cho các bánh xe quay theo phương pháp run mà ta đã nhập ở trên.

Đầu ra bắt đầu của ứng dụng tạo chu trình tạo ra nhiều điều mong muốn, không phải là ta không đánh giá cao sự đơn giản. Chỉ là một chút khó khăn để nắm được vị trí tiếp theo từ một đoạn văn bản tĩnh không có định dạng. Vì vậy, để minh họa những điều cơ bản cần thiết, ta đã tạo phiên bản Chu kỳ của ứng dụng trình chiếu lâu năm của bạn . Hãy sao chép repo hoặc phối lại nó trên Glitch để kích hoạt lốp xe.

Những gì sau đây là một chuyến tham quan nhanh trong mã về những gì làm cho Cycle quay.

Dòng

const width$ = sources.DOM.select('.width').events('input')
  .map(e => e.target.value).startWith(410);
...

Đây là một dòng suối. Nó được tạo thành từ các sự kiện input nhận được trong nguồn DOM trên lớp width . Hãy coi nó như một mảng, nhưng thay vì chứa các giá trị trong không gian, nó chứa các giá trị theo thời gian. Ta startWith đầu Với giá trị 410 bởi vì nếu không, ta sẽ chuyển null xuống dòng xuống bất kỳ thứ gì đang sử dụng width$ . $ Không làm gì cả. Đó chỉ là quy ước đặt tên cho các stream .

💰 FYI: $$ là quy ước cho một stream stream .

xstream

const vtree$ = xs.combine(index$, width$).map(([index, width]) =>

Đó là thị trường của người mua cho các thư viện stream phản ứng. Ứng dụng tạo chu trình đi kèm với xstream , một thư viện gọn nhẹ, có mục đích dành cho người sáng tạo của Cycle by Cycle. Đơn giản nhất, nó có thể làm cho các stream như

const vtree$ = xs.of(
  div([div('A virtual DOM tree stream?'), div('Yup.')])
);

Nó được ghi chép đầy đủ và bạn có thể làm cho nó hoạt động đủ tốt cho hầu hết các mục đích mà không cần học một nửa trong số 26 phương pháp mà nó có. Điều đó nói rằng bạn có thể sử dụng bất kỳ thư viện nào bạn thích thay cho nó.

Hyperscript

import {input, div, p, img} from '@cycle/dom';

Cycle sử dụng thư viện trừu tượng DOM được xây dựng trên Hyperscript . Việc nhập ở trên sẽ cảm thấy thoải mái cho bất kỳ ai đến từ React. Việc thực hiện bên dưới… có thể ít hơn một chút.

div({style: {
  textAlign: 'center',
  fontFamily: 'sans-serif',
  fontWeight: '300'
}}, [
  div({style: {marginBottom: '20px'}}, [
    p({style:{color: '#858576', fontSize: '32px'}},
      assets.captions[index]
    ),
    input(
      {
        style: {width: '100px', cursor: 'pointer'},
        attrs: {
          class: 'width',
          type: 'range',
          min: 40,
          max: 720,
          value: width
        }
      }
    )
  ]),
  div([
    img({
      style: {borderRadius: '12px', cursor: 'pointer'},
      attrs: {
        src: assets.slides[index],
        alt: assets.captions[index],
        width: `${width}px`
      }
    })
  ])
])

Không, bạn không cần phải sử dụng kiểu nội tuyến. Có, bạn cần xuất cây giảm dần từ một phần tử duy nhất.

element(opts, children)

Nó trực quan hơn so với vẻ ngoài lúc đầu, cực kỳ linh hoạt và hỗ trợ mọi thứ về cơ bản dưới ánh nắng mặt trời HTML . Và có, bạn có thể sử dụng JSX để thay thế, nhưng vì điều này đã được bao gồm tại sao không thử.

Trình điều khiển

Hãy coi các trình điều khiển là cầu nối giữa ứng dụng Cycle và thế giới xung quanh nó, cho dù đó là kết nối với user thông qua trình điều khiển DOM hay XHR qua trình điều khiển HTTP.

import {makeDOMDriver} from '@cycle/dom';
...
const drivers = {
  DOM: makeDOMDriver('#app')
};

Ứng dụng boilerplate đi kèm với trình điều khiển DOM, nhưng bạn có thể cài đặt nhiều ứng dụng khác . Ngoài ra bạn có thể cuộn của bạn .

🚴🏼‍ Cycle.js rất khác biệt về mặt triết học so với các framework khác và vốn dĩ rất sâu sắc đến mức không có vòng tay nào bao quanh nó trong một lần kéo dài. Ta sẽ đi sâu vào các chủ đề này và nhiều chủ đề khác với tính cụ thể hơn trong thời gian, nhưng điều này sẽ đủ để bạn bắt đầu.

Tags:

Các tin liên quan