Gắn cờ trong JavaScript

Chúng tôi sẽ mở đầu bài đăng với một số nguyên tắc cơ bản, cung cấp cho bạn chế độ xem cấp cao về cờ tính năng là gì và lý do bạn muốn sử dụng chúng. Sau đó, bạn có thể xắn tay áo lên vì sau phần giới thiệu lý thuyết ngắn gọn, chúng tôi sẽ đi thẳng vào mã với hướng dẫn thực hành của chúng tôi. Bắt đầu nào

Mục lục

  • Cái gì và tại sao của cờ tính năng JavaScript

  • Cờ tính năng cơ bản cho JavaScript

  • Tại sao chúng ta cần quản lý cờ trong JavaScript?

  • Quản lý tập trung các cờ tính năng

  • Sức mạnh của cờ tính năng

 

Cái gì và tại sao của cờ tính năng JavaScript

Vì vậy, hãy bắt đầu bằng cách loại bỏ "cái gì". Cờ tính năng là cơ chế bạn có thể sử dụng để tắt/bật các phần mã trong ứng dụng mà không cần phải tự thay đổi mã và triển khai lại ứng dụng. Khả năng này rất mạnh và bạn có được rất nhiều khả năng bằng cách áp dụng nó

  • bạn có thể "ẩn" các tính năng đã hoàn thành một phần, vì vậy các kỹ sư có thể thoải mái tích hợp công việc của họ thường xuyên

  • đồng thời, bạn chỉ có thể cho phép một nhóm người dùng được chọn truy cập vào một tính năng, cho phép thử nghiệm trong môi trường QA hoặc thậm chí là sản xuất

  • bạn có thể cung cấp các phiên bản khác nhau của một tính năng cho hai nhóm người dùng khác nhau nhằm mục đích thử nghiệm

Danh sách trên không đầy đủ, nhưng nó đủ để cung cấp cho bạn ý tưởng về các loại kỳ công mà bạn có thể đạt được bằng cách áp dụng các cờ tính năng

Cờ tính năng cơ bản cho JavaScript

Trong ví dụ này, tôi đang sử dụng một ứng dụng mà tôi đã tạo có tên là Banker API. Bạn có thể lấy nó từ đây nếu bạn muốn sử dụng một bản sao cục bộ để theo dõi. API cho phép bạn xem số dư tài khoản và rút tiền (hiện tại). Nó đơn giản, nhưng nó đủ cho mục đích của chúng tôi
Bây giờ chúng tôi muốn thêm một tính năng mới vào ứng dụng của mình. Hiện tại, chúng ta sẽ đơn giản hóa khái niệm này. Chúng tôi sẽ thực hiện một thay đổi phức tạp hơn sau này khi chúng tôi sử dụng tính năng quản lý cờ mà tôi đã đề cập trước đó. Tính năng mới sẽ sử dụng các cờ tính năng để quyết định xem khách hàng có nhìn thấy nó hay không. Bây giờ, hãy trả lại một tin nhắn đơn giản để cho biết rằng cờ đang hoạt động
Giao diện người dùng cơ bản như nó được. Đó là một vài nút và khi bạn nhấp vào chúng, bạn sẽ thấy một thông báo. Đây không phải là khói và gương, vì các tin nhắn đến từ máy chủ. Nó đủ đơn giản để thể hiện khái niệm nhưng cũng đủ để phản ánh ứng dụng thực trông như thế nào. Giao diện người dùng trông giống như sau để bắt đầu

Bây giờ hãy thêm chức năng gửi tiền. Chúng tôi sẽ thêm một nút để gửi tiền và một phương thức vào mã máy chủ để xử lý việc gửi tiền. Chỉ lần này, chúng tôi sẽ kiểm soát xem tính năng này có khả dụng hay không bằng cách sử dụng cờ tính năng đơn giản. Đầu tiên, chúng tôi sẽ thêm nút vào giao diện người dùng

Bây giờ, chúng ta sẽ thêm mã vào mã máy chủ trong ứng dụng/ngân hàng/chỉ mục. js

deposit: function(req, res) {
        res.json({ newBalance: "Deposited $500!" });
    }

Được rồi, thời gian cho cờ tính năng. Chúng tôi sẽ bắt đầu ở phía máy chủ. Nơi tốt nhất để đặt mã này là trong máy chủ. js trong thư mục chính. Nó sẽ tắt chức năng gửi tiền dựa trên cờ tính năng. Chúng tôi sẽ thêm một cờ và đặt nó thành true, sau đó gọi nó từ ứng dụng khách để cho thấy rằng nó hoạt động

var depositTurnedOn = true;

if(depositTurnedOn){
  router.post('/deposit', function(req, res) {
    routes.deposit(req, res);
  });
}

Khi bạn nhấp vào nút gửi tiền, bạn có thể thấy rằng khoản tiền gửi đang hoạt động

Chúc mừng lá cờ tính năng đầu tiên của bạn. Nếu chúng tôi tắt nó trong mã và khởi động lại máy chủ, chúng tôi sẽ thấy rằng chức năng gửi tiền không khả dụng

var depositTurnedOn = false;

Bây giờ hãy xem chúng ta có thể làm gì với mã phía máy khách. Đặt cờ trở lại true ở phía máy chủ. Bây giờ, chúng tôi sẽ yêu cầu mã máy khách chỉ hiển thị nút gửi tiền nếu cờ tính năng được đặt thành true. Tôi đang sử dụng Bootstrap cho mã giao diện người dùng để đơn giản hóa mọi thứ và nếu bạn cũng đang sử dụng như vậy, bạn chỉ cần thêm lớp "vô hình" vào nút ký gửi để làm cho nó biến mất. Bây giờ, hãy thêm mã kiểm tra cờ tính năng trước khi hiển thị nút cho người dùng

var depositFeatureOn = true;
if(depositFeatureOn) {
  $('#deposit-btn').removeClass('invisible');
}

Vì vậy, có bạn có nó. Cờ tính năng cơ bản ở phía máy khách chỉ hiển thị nút nếu tính năng này được bật

Tại sao chúng ta cần quản lý cờ trong JavaScript?

Tôi chắc rằng nhiều bạn đang nghĩ, "Chờ một chút. Tôi phải thay đổi mã và khởi động lại máy chủ chỉ để lật cờ?" Bạn hoàn toàn chính xác. Đây chưa thực sự là một cờ tính năng được thực hiện đầy đủ. Chúng ta phải bóc thêm một lớp hành nữa và tìm hiểu sâu hơn về thế giới quản lý cờ tính năng. Mục tiêu cuối cùng của chúng tôi là khả năng bật và tắt các tính năng mà không cần chạm vào mã. Chúng tôi muốn tránh nợ kỹ thuật bổ sung của các biến ngẫu nhiên và điều kiện ném xung quanh mã mà không có bất kỳ sự quản lý nào. Chúng tôi sẽ đề cập đến phần quản lý ở mức độ tuyệt vời sau. Trong thời gian chờ đợi, chúng tôi vẫn có thể cải thiện mã của mình bằng một thay đổi tốt

Lấy cấu hình ra khỏi mã

Bước đầu tiên để quản lý cờ tính năng tốt là kéo cấu hình cờ tính năng ra khỏi mã. Đơn giản là các nhà phát triển không thể duy trì việc phải mở tệp mã và thay đổi mã để cập nhật cờ tính năng. Về phía máy chủ, điều này khá dễ dàng. Chúng tôi sẽ thiết lập một cấu hình. tệp json như thế này

{
  "depositTurnedOn": true
}

Đặt nó vào thư mục cấu hình của dự án và tham chiếu nó bằng cách sử dụng câu lệnh yêu cầu trong máy chủ. tập tin js. Cùng với đó, bạn đã sẵn sàng sử dụng nó trong mã bằng cách đọc cấu hình khi ứng dụng khởi động

config = require('./app/config/config.json');

var depositTurnedOn = config.depositTurnedOn;

if(depositTurnedOn){
  router.post('/deposit', function(req, res) {
    routes.deposit(req, res);
  });
}

Điều này di chuyển cấu hình ra khỏi mã cho mã máy chủ. Còn mã khách hàng thì sao? . Để mã máy khách lấy tệp cấu hình, bạn cần sao chép cấu hình. json trong thư mục chứa chỉ mục. trang html là. Sau khi cấu hình. json nằm trong thư mục máy khách, bây giờ bạn có thể lấy nó bằng cách yêu cầu tệp và phân tích cú pháp bằng lệnh $. hàm getJSON do jQuery cung cấp. Đằng sau hậu trường, đây chỉ đơn giản là một cuộc gọi ajax đến máy chủ để lấy tệp. Thêm phần này vào mã khách hàng của bạn

 var depositTurnedOn;
   var config = $.getJSON("http://localhost:3000/config.json", function(data){
   depositTurnedOn = data.depositTurnedOn;
   if(depositTurnedOn) {
      $('#deposit-btn').removeClass('invisible');
   }
});

Đừng quên thêm lệnh gọi removeClass vào chức năng gọi lại vì lệnh này đang thực thi không đồng bộ. Nếu không, bạn có thể không có giá trị của cấu hình trước khi câu lệnh if kích hoạt

Cách tiếp cận này có nhược điểm

Cá nhân tôi không thích lấy một tệp từ máy chủ như thế này để sử dụng làm tệp cấu hình. Nó cảm thấy rắc rối và nhà phát triển tiếp theo nhìn vào mã của bạn sẽ gặp khó khăn trong việc hiểu nó. Một vấn đề khác là cấu hình. json hiện phải nằm ở hai nơi. một nơi mã máy chủ có thể tiếp cận nó và một nơi khác có thể truy cập được qua internet. Đây là một cơn ác mộng bảo trì. Có một cách cấu hình. json có thể giữ nguyên vị trí của nó và khách hàng vẫn có thể tìm ra cờ tính năng nào sẽ kích hoạt. Chúng tôi sẽ tạo một điểm cuối REST mới với mục đích truy xuất thông tin cấu hình. Điều này sẽ cho phép máy khách hỏi máy chủ cấu hình hiện tại cho các cờ tính năng và đưa ra quyết định dựa trên đó

Một cách tốt hơn để lấy cấu hình cờ tính năng

Đầu tiên, chúng ta sẽ tạo một chức năng mới bên trong app/bank/index. js. Chức năng này sẽ chỉ trả về cấu hình từ vị trí an toàn trên máy chủ

________số 8_______

Tiếp theo, hãy hiển thị dịch vụ này bằng cách đặt tuyến đường cho nó trong máy chủ. tập tin js

routes = require('./app/bank')

router.get('/config', function(req, res){
  routes.config(req, res);
});

Bây giờ máy khách có thể hỏi máy chủ cấu hình cờ tính năng hiện tại là gì. Chúng tôi sẽ minh họa điều này bằng cách sử dụng Postman. Khi bạn truy cập URL này, bạn sẽ nhận được các cờ cấu hình JSON

Kỹ thuật này có một vài lợi ích. Đầu tiên, bạn không cần phải hiển thị cấu hình ứng dụng của mình trong một tệp tĩnh mà bất kỳ ai cũng có thể lấy từ máy chủ. Nếu bạn sử dụng một điểm cuối như thế này, bạn có thể sử dụng các kỹ thuật xác thực và ủy quyền để kiểm soát ai có thể yêu cầu thông tin cấu hình. Bạn cũng có tùy chọn sử dụng logic nghiệp vụ trong điểm cuối REST để thử nghiệm A/B. Khách hàng hỏi, "Khách hàng này có thể xem thử nghiệm này không?" . Điều này hữu ích để phân đoạn quần thể thử nghiệm dựa trên tiêu chí dành riêng cho doanh nghiệp

Quản lý tập trung các cờ tính năng

Tại thời điểm này, bạn đã tạo một cờ tính năng đơn giản được kiểm soát bằng cách thay đổi mã. Sau đó, bạn lấy cờ ra khỏi mã và đặt nó vào tệp cấu hình. Bạn đã tạo một dịch vụ để khách hàng có thể lấy thông tin cấu hình từ máy chủ ở một vị trí tập trung. Điều này có nghĩa là bạn đến một nơi để đặt tất cả các cờ và sau đó bạn không phải lo lắng về điều đó. Bây giờ chúng ta có thể bóc một lớp hành khác. Các công ty như Facebook thường xuyên sử dụng cờ tính năng để cung cấp "khởi chạy tối" hoặc các tính năng đang hoạt động nhưng chưa hiển thị cho khách hàng. Bằng cách sử dụng cờ tính năng ở phía máy khách và máy chủ, bạn có thể thực hiện điều tương tự và bạn không cần phải là Facebook để làm điều đó. Những gì bạn vừa làm trong phần trước là một phiên bản đơn giản của quản lý cờ tính năng tập trung. Bạn không cần phải có tệp cấu hình ở một số vị trí cho máy khách và máy chủ. Chúng tôi có thể thực hiện việc này trong JavaScript bằng cách sử dụng Quản lý tính năng của CloudBees

Bắt đầu với Quản lý tính năng của CloudBees

Bạn có thể tạo miễn phí tài khoản Quản lý tính năng CloudBees để bắt đầu. Vì chúng tôi có máy khách và máy chủ, nên chúng tôi sẽ cần hai ứng dụng trong Quản lý tính năng của CloudBees. Tạo một ứng dụng mới và chọn JavaScript làm ngôn ngữ và Nút. js làm nền tảng trên màn hình ứng dụng mới

Tiếp theo, trang web sẽ hướng dẫn bạn cách cài đặt CloudBees Feature Management trong ứng dụng của bạn. Chúng ta sẽ đi qua nó một cách nhanh chóng ở đây

Đầu tiên chúng ta cài đặt CloudBees Feature Management

deposit: function(req, res) {
        res.json({ newBalance: "Deposited $500!" });
    }
0

Cấu hình máy chủ

Sau đó, chúng tôi yêu cầu mô-đun "rox-node" trong máy chủ của chúng tôi. tập tin js. Điều này sẽ cho phép chúng tôi thiết lập Quản lý tính năng CloudBees để sử dụng trong API của chúng tôi

deposit: function(req, res) {
        res.json({ newBalance: "Deposited $500!" });
    }
1

Giờ đây, trên màn hình quản trị của Quản lý tính năng CloudBees, chúng tôi đã kiểm tra tốt để cho thấy rằng mọi thứ đã sẵn sàng hoạt động

Cấu hình máy khách

Đối với máy khách, hãy cài đặt gói 'rox-browser'. Sau đó đặt trình duyệt rox. tối thiểu. js từ thư mục node_modules/rox-browser/dist trong thư mục máy khách có chỉ mục. html. Chúng tôi sẽ sử dụng nó trong một phút. Chúng tôi có thể tạo một ứng dụng thứ hai cho mã máy khách. Điều đó hoàn toàn hợp lệ, đặc biệt nếu ứng dụng khách nằm trong một kho lưu trữ riêng biệt hoặc được duy trì bởi một nhóm riêng biệt với nhóm duy trì mã API của chúng tôi. Đối với mục đích của chúng tôi, vì mã máy khách và máy chủ cùng nhau, nên chúng tôi sẽ có cả cờ tính năng máy khách và máy chủ được quản lý thông qua một ứng dụng. Trước tiên hãy tạo một cờ tính năng để xem nó hoạt động như thế nào. Thêm đoạn mã sau vào máy chủ. js

deposit: function(req, res) {
        res.json({ newBalance: "Deposited $500!" });
    }
2

Mã này tạo một vùng chứa để giữ các cờ tính năng được quản lý tập trung của chúng tôi. Bây giờ khi chạy ứng dụng, bạn sẽ thấy các cờ trong giao diện Quản lý tính năng của CloudBees. Tuyệt đấy

Bây giờ chúng ta sẽ yêu cầu khách hàng cấu hình từ máy chủ để truy xuất khóa API. Bằng cách này, mã máy khách có thể đưa ra quyết định dựa trên các cờ tính năng trong Quản lý tính năng của CloudBees. Tôi đang thiết kế hệ thống theo cách này để khóa API không nằm trong thư mục có thể đọc công khai, điều này sẽ phải xảy ra nếu khách hàng muốn lấy trực tiếp. Ngoài ra, lệnh gọi đến điểm cuối sẽ được thực hiện qua HTTPS trong một ứng dụng thực (mặc dù tôi sẽ bỏ qua điều đó ở đây) để khóa API có thể được chuyển an toàn sang mã máy khách. Bây giờ chỉ cần thêm một số mã vào máy khách để truy xuất khóa API và nói chuyện với Quản lý tính năng của CloudBees

deposit: function(req, res) {
        res.json({ newBalance: "Deposited $500!" });
    }
3

Mã này kết nối với API quản lý tính năng của CloudBees. Kết nối hoạt động tốt nhất khi được khởi tạo trước lệnh gọi jQuery. Nhưng điều này chưa thực sự làm bất cứ điều gì. Nếu bạn tải trang, nút sẽ biến mất. Vì vậy, hãy đi thay đổi điều đó ngay bây giờ. Quản lý tính năng CloudBees sử dụng khái niệm thử nghiệm để kiểm soát cờ tính năng trong sản xuất. Thử nghiệm cho phép bạn dễ dàng bật hoặc tắt cờ tính năng. Nhấp vào "Sản xuất" trong menu bên trái và chuyển đến "Thử nghiệm. "

Tạo thử nghiệm mới

Sẽ có nút "Thử nghiệm mới" ở cuối trang. Tiếp tục và nhấp vào đó để hiển thị cửa sổ hộp thoại nơi bạn có thể tạo thử nghiệm mới

Nhấp vào nút "Đặt đối tượng" để hoàn tất thiết lập thử nghiệm

Bây giờ trở lại mã. Ngay bây giờ, chúng tôi vẫn có một biến xác định xem chúng tôi có nên cho phép chức năng gửi tiền hoạt động hay không. Chúng tôi sẽ xóa điều đó và thay vào đó sử dụng cờ Quản lý tính năng CloudBees mà chúng tôi vừa tạo. Đầu tiên, hãy làm điều đó trên máy chủ

deposit: function(req, res) {
        res.json({ newBalance: "Deposited $500!" });
    }
4

Sau đó, chúng tôi sẽ làm điều đó trên máy khách

deposit: function(req, res) {
        res.json({ newBalance: "Deposited $500!" });
    }
5

Bây giờ, chúng tôi gọi hàm isEnabled() trên cờ Quản lý tính năng CloudBees để xác định xem chúng tôi có nên kích hoạt chức năng này cho người dùng hay không. Các cờ của tính năng Quản lý tính năng CloudBees mặc định là sai, vì vậy, hãy chuyển đến màn hình quản trị Quản lý tính năng CloudBees và bật cờ tính năng này. Đừng quên nhấn nút "Cập nhật đối tượng" để lưu lại

Bây giờ, hãy tải ứng dụng lên và xem cờ tính năng của chúng tôi có hoạt động không

Có nút của chúng tôi. Và khi chúng tôi nhấp vào nó, chúng tôi lại thấy thông báo vui vẻ của mình

Sức mạnh của cờ tính năng

Cờ tính năng có thể giúp nhóm phát triển của bạn theo nhiều cách. Bạn có thể sử dụng thử nghiệm A/B để tìm hiểu xem phương pháp xử lý giao diện người dùng nào sẽ hoạt động trước khi bạn thực hiện thay đổi vĩnh viễn. Bạn có thể thử nghiệm khói và thậm chí kiểm tra hiệu suất của các dịch vụ trong sản xuất trước khi người dùng nhìn thấy chúng. Nếu xảy ra sự cố, chỉ cần hoàn nguyên thay đổi bằng cách chuyển cờ trở lại sai. Bây giờ bạn đã biết cách các cờ tính năng hoạt động với JavaScript, cả trong trình duyệt và máy chủ. Chúng tôi đã thấy một cờ tính năng có thể đơn giản như thế nào. Nhưng hãy nhớ rằng, cờ tính năng có thể phát triển theo thời gian và trở thành sự cố bảo trì. Bóc vỏ hành tây và sử dụng lớp sẽ mang lại cho bạn lợi ích tốt nhất mà không gặp rắc rối. quản lý cờ tính năng tập trung với CloudBees Feature Management

Cờ trong lập trình là gì?

Cờ là một thành phần cấu trúc dữ liệu của ngôn ngữ lập trình . Máy tính diễn giải một giá trị cờ theo thuật ngữ tương đối hoặc dựa trên cấu trúc dữ liệu được trình bày trong quá trình xử lý và sử dụng cờ để đánh dấu một cấu trúc dữ liệu cụ thể. Do đó, giá trị cờ tác động trực tiếp đến kết quả xử lý.

Mục đích của cờ trong Python là gì?

flags xác định hệ thống dòng lệnh phân tán, thay thế các hệ thống như getopt() , optparse và xử lý đối số thủ công . Thay vì một ứng dụng phải xác định tất cả các cờ trong hoặc gần main(), mỗi mô-đun Python xác định các cờ hữu ích cho nó.

Cờ 0 trong C là gì?

Biến "cờ" chỉ đơn giản là một biến boolean có nội dung là "true" hoặc "false". Bạn có thể sử dụng kiểu bool với true hoặc false hoặc một biến số nguyên bằng 0 cho "false" và khác 0 cho "true".

Việc sử dụng trong JS là gì?

Toán tử JavaScript trong được sử dụng để kiểm tra xem một thuộc tính được chỉ định có tồn tại trong một đối tượng hoặc trong các thuộc tính kế thừa của nó hay không (nói cách khác, . Toán tử in trả về true nếu thuộc tính đã chỉ định tồn tại. Cấu trúc của một đối tượng JavaScript đơn giản.