8 lợi thế khi sử dụng Polymer so với Angular và React

2576

1. Template Engine

Sử dụng Polymer, Dev có thể tạo ra 1 yếu tố tùy chỉnh trong 1 file HTML mang lại cách nhìn trực quan hơn. Các component cũng sẽ dễ dàng hiểu hơn khi không cần phải mở nhiều file cùng 1 lúc. 

Xem ví dụ tại đây: https://www.polymer-project.org/1.0/docs/devguide/quick-tour Vậy template engine này có tốt hơn Angular (version 1) và React hay không?

  • Code sạch hơn
  • Angular 1 cho phép cấu trúc inline (định nghĩa trong 1 single file) nhưng đối với các app lớn, cấu trúc này vẫn còn lạ lẫm
  • Trong React, HTML Template được khai báo trong component definition (https://github.com/dimitardanailov/build-a-wiki-with-react-and-firebase/blob/master/src/components/App.js) Ý kiến cá nhân về template engine:
  • React có template engine tốt hơn Angular version 1 (Tôi thích mix Javascript với HTML hơn là HTML Javascript)
  • Polymer có template engine tốt hơn React (Sự tách biệt giữa HTML và Javascript là tự nhiên đối với mọi dev) Chú ý: Angular version 2 có template tương tự nhưng những định nghĩa quan trọng là:
  • Controller
  • Service
  • HTML file với template definition
  • External CSS file Example: https://plnkr.co/edit/ngN888w5uzpjMSu0ceh1?p=preview import { VehicleService } from ‘./vehicle.service’; 
    @Component({
'selector': 'my-vehicles',
'templateUrl': 'app/vehicles.component.html',
'styleUrls': ['./app.characters.component.css'],
'providers': [VehicleService]
})
export class VehiclesComponent {
constructor (private _vehicleService: VehicleService) { // Injection
}
vehicles = this._vehicleService.getVehicles();
}

 Polymer Summit 2016 đã chia sẻ biểu đồ về mức độ sử dụng HTML, CSS và JavaScript của Polyer, React, Angular và Ember

2. Behaviors

Polymer sử dụng các behaviors để chia sẻ code giữa các components khác nhau. Một behavior của Polymer có thể xác định như sau:

  • Lifecycle callbacks
  • Declared properties
  • Default attributes
  • Observers
  • Event Listerners Concept này tương tự với:
  • Angular 1 Service/ Factories
  • Angular 1 Directives
  • Angular 2 Providers/ Classes Angular version 1 cho thấy những phức tạp ảnh hưởng đến dev và product owner. Ví dụ, Angular 1 không có định nghĩa rõ ràng giữa Factory và Service ( Xem tại đây) Khi các định nghĩa không rõ ràng, điều này sẽ ảnh hưởng rất lớn tới Dev team cũng như deadline khi hoàn thành app. Polymer có một set các behaviors hữu ích như sau:
  • Polymer.IronA11yKeysBehavior — cung cấp giao diện chuẩn cho xử lý các lệnh bàn phím liên quan đến WAI-ARIA best practices.
  • Polymer.IronCheckedElementBehavior — Được sử dụng để thực hiện một element tùy chỉnh với property kiểm tra được sử dụng để xác nhận tính hợp lệ.
  • Polymer.IronFitBehavior — tùy chỉnh 1 yếu tố và 1 yếu tố khác sử dụng max-height và max-width, và tùy chọn tập trung nó trong cửa sổ hoặc một yếu tố khác.
  • Polymer.IronMenuBehavior — Thực hiện các hành vi menu có thể truy cập.
  • Use Polymer.IronOverlayBehavior để thực hiện một yếu tố có thể ẩn hoặc hiện và được hiển thị trên đầu nội dung. Nó bao gồm một backdrop tùy chọn và được dùng để thực hiện nhiều UI controls bao gồm cả hộp thoại và thả xuống. Ngoài ra, còn có thể hiển thị nhiều lớp phủ cùng lúc.
  • Polymer.IronRangeBehavior cung cấp hành vi chạy từ min đến max
  • Polymer.IronResizableBehavior là một behavior có thể được sử dụng trong các yếu tố Polymer để phối hợp lưu lượng của các sự kiện thay đổi kích cỡ giữa “resizers” (các yếu tố kiểm soát kích thước hoặc trạng thái ẩn của nhánh ) và “resizables” (các yếu tố cần được thông báo khi chúng được thay đổi kích thước hoặc không bị ẩn các nhánh trên để thực hiện các phép đo mới).
  • Polymer.IronScrollTargetBehavior cho phép một yếu tố phản hồi scroll event từ một scroll target được chỉ định.
  • Polymer.IronValidatableBehavior để thực hiện một yếu tố xác nhận user input. Sử dụng cùng Polymer.IronValidatorBehavior để add custom validation logic vào một iron-input.

Tham khảo việc làm React lương cao cho bạn

3. Kiểu dáng (Style)

Polymer hỗ trợ:

  • Khai báo Mixin (Tùy chỉnh CSS Mixin)
  • Biến số CSS Polymer vs Angular: Các tính năng này không được Angular và React hỗ trợ
  • React: Thêm hỗ trợ biến CSS ở tính năng style
  • Angular: Cập nhật các CSS style toàn cầu Project yêu cầu các chủ đề khác nhau với độ tương phản khác nhau. Nếu chọn Angular hay React thì sẽ có nhiều vấn đề khác nảy sinh. Polymer CSS variables: 
    XHTML
<link rel="import"  href="https://polygit2.appspot.com/components/polymer/polymer.html">
<dom-module id="custom-button">
<template>
  <!-- scoped CSS for this element -->
  <style>
    :host {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 32px;
    background-color: var(--my-custom-button-color, #ccc);
    cursor: pointer;
    }
  </style>
</template>
<script>
  Polymer({
    is: "custom-button",
    properties: {
      isActive: {
        type: Boolean,
        value: false
      }
    },

    listeners: {
      'tap': 'changeTheme'
    },

    changeTheme: function() {
      this.isActive = !(this.isActive);

      if (this.isActive) {
        this.customStyle['--my-custom-button-color'] = '#000';
      } else {
        this.customStyle['--my-custom-button-color'] = '#ccc';
      }

      this.updateStyles();
    }
  });
</script>
</dom-module>

    Example: https://plnkr.co/edit/eShHm4IukPwZ9Hoc7elJ?p=preview

4. Dễ làm việc với Native JavaScript Object hơn.

Polymer DOM layer rất khác biệt so với jQuery DOM layer hay Angular (Version 1) DOM layer. Polymer DOM layer có tính chất tương tự với DOM API layer. Ví dụ với querySelectorAll

var childnodes = Polymer.dom(element).querySelectorAll(‘my-custom-element’);

Và polymer có thêm 1 vài phương pháp để lựa chọn các yếu tố. Để thuận tiện, một số phương pháp tiện ích có sẵn trên các element mẫu:

  • getEffectiveChildNodes(): Trả về một danh sách các nodes con hiệu quả cho phần tử này
  • getEffectiveChildren(). Trả về một danh sách các phần tử con hiệu quả cho phần tử này.
  • queryEffectiveChildren(selector). Trả về phần tử con đầu tiên có hiệu quả, phù hợp với công cụ chọn.
  • queryAllEffectiveChildren(selector). Trả về một danh sách con hiệu quả mà chọn phù hợp. Source: https://www.polymer-project.org/1.0/docs/devguide/local-dom

Dữ liệu ràng buộc không phải là một vấn đề quá lớn đối với Angular và React, nhưng có sự khác biệt giữa điều khiển DOM và lựa chọn phần tử.

Polymer xây dựng map/collection với “quick” nodes (nếu một phần tử có thuộc tính id). Một nút được chỉ định trong các yếu tố template với một id được lưu trữ trên đây.


Hello World from <span id="name"></span>!

<script>
Polymer({

  is: 'x-custom',

  ready: function() {
    this.$.name.textContent = this.tagName;
  }

});

</script>

Đây là một lợi thế lớn nếu bạn là một JS/DOM Dev. Angular phấn đấu để cung cấp abstraction khác và sẽ áp đặt quan điểm từ model/stat và do đó mặc nhiên làm cho nó khó khăn hơn để làm việc trực tiếp với DOM

5. Onboarding

Angular/ React hay jQuery có thêm hướng dẫn và ví dụ so sánh với các dự án Polymer. Quan điểm của tôi về các tài liệu cho Polymer: Polymer có cấu trúc tốt hơn so với nhiều tài liệu và ví dụ từ Angular (Version 1) hoặc React. Tôi đã có cuộc trò chuyện với các junior và middle – level dev về Polymer và Angular liên quan đến onboarding. Tổng thể là:

  • Tài liệu Polymer có một cấu trúc và ví dụ tốt hơn hơn Angular hoặc React
  • Polycasts | Web Shows – Google Developers là một show tuyệt vời cho dev. Angular và React không có show này
  • Danh mục Polymer giúp các phân đoạn dễ dàng cho mỗi thành phần web. Ví dụ: Dự án của chúng tôi không sử dụng Material design (Paper element) hoặc payments (Gold element). Nó chỉ sử dụng Iron Elements (yếu tố chủ đạo của Polymer). Nhà phát triển chỉ cần đọc các tài liệu về nó.

6. Kết nối với thư viện của bên thứ 3 dễ dàng

Đối với chúng tôi, rất cần thiết việc kết nối các ứng dụng với một cầu nối / liên kết giữa d3js, Mathjax, text to speech (bên ngoài các mô-đun) và các thành phần nội bộ khác. Polymer không có extra layer và chia sẻ dữ liệu giữa các thành phần, và d3 hoặc Mathjax là rất dễ dàng.

7. Thư viện JavaScript tốt nhất khi làm

Progressive Web Apps và Lazy Loading

“Ba tính năng hiện đại của nền tảng web-Web components, HTTP/2 + Server Push và Service — tất cả công việc liền mạch với nhau để cung cấp một cách hoàn toàn mới và hiệu quả đáng ngạc nhiên để tạo ra các ứng dụng cho người dùng.”

Polymer App Toolbox và Polymer CLI làm cho nó dễ dàng để xây dựng progessive app. Kỹ thuật này có tên: “PRPL mẫu”:

  • Push: đẩy các thành phần quan trọng cho route ban đầu
  • Render các initial route ban đầu càng sớm càng tốt
  • Pre-cache các components
  • Lazy-load và tạo ra các routes theo yêu cầu Các blog app tôi tạo ra được xây dựng bằng cách sử dụng công cụ và PRPL pattern và xem nhiều progessive web app.

8. Rất nhiều set elements custom miễn phí

Dự án Polymer có một tập hợp lớn của các elements custom: https://vaadin.com/elements https://customelements.io/ https://beta.webcomponents.org trình bày tại Polymer Summit 2016 Dĩ nhiên Angular, jQuery và React có rất nhiều bên thứ ba như thư viện / widgets nhưng khi chúng ta nói về data grids, custom input elements, uploaders, icons, etc, uploaders, biểu tượng, vv trong nhiều trường hợp, những widgets này không miễn phí hoặc không được phép sử dụng.

Đây là lý do tại sao nhiều công ty đầu tư vào layer có khả năng tương tác: https://vaadin.com/blog/-/blogs/using-polymer-components-in-angular-2

Theo DIMITAR DANAILOV, Software Architect & Technology Futurist

Nguồn: techtalk.vn via mentormate.com 

RELATED ARTICLESMORE FROM AUTHOR