Tại sao tôi không còn dùng D3.js

Bài viết được dịch từ https://medium.com/@PepsRyuu/why-i-no-longer-use-d3-js-b8288f306c9a Mình không rõ do trình độ tiếng anh kém cỏi của mình, hay cách hành văn của tác giả không rõ ý. Mình thấy khá khó hiểu, nhưng cũng đưa ra một số giải pháp. Đại khái là css, html đã phát triển đáng kể. Việc sử dụng D3 khá khó để hiểu và bảo trì code sau này. Trong khi css, html lại rất mạnh mẽ. Tác giả cũng đưa ra một số giải pháp về scale khi sử dụng canvas (bình thường sử dụng canvas khi zoom trình duyệt sẽ làm vỡ ảnh). Mỗi khi tôi tham gia vào một dự án visualisation, quản lý dự án thường tỏ ra ghê sợ khi tôi nói tôi không sử dụng D3. Tại sao lại phải lo lắng, và tại sao tôi chọn cách không sử dụng D3? Khi đang trả lời câu hỏi này, chúng ta phải hiểu được D3 được tạo ra như thế nào. D3 được release lần đầu năm 2011, và nó khá sáng tạo vào thời điểm này. Như bạn đã biết, nó là thư viện cung cấp các biểu đồ với rất nhiều các lựa chọn. Điều này là tốt, nhưng vấn đề là mỗi lần ai đó đưa ra yêu cầu mới, một tùy chọn phải đã được thêm và đã hỗ trợ rồi. Cuối cùng bạn phải đối mặt với một ngôn ngữ mà bạn sử dụng với rất nhiều đối tượng để định nghĩa một biểu đồ, nó cho bạn các hàm để tạo ra các component của chính bạn. Vào thời điểm này, thư viện như jQuery và Backbone rất phổ biến. Tạo biểu đồ sử dụng các thư viện này là cả một thách thức, đặc biệt nếu bạn muốn chúng dynamic. Trình duyệt chỉ nhận các chuẩn hiện đại như transitions, và các thuộc tính như flexbox mới đang trong thời kì bắt đầu cài đặt. D3 giải quyết được rất nhiều vấn đề, và nó chắc chắn là cách tiếp cận đơn giản nhất cho việc cài đặt visualisations ở thời điểm này. Tuy nhiên, có một vài thay đổi sau đó. Chúng ta có các framework hiện đại mới sử dụng linh hoạt hơn và các khái niệm ấn tượng như virtual DOM, và CSS có nhiều khả năng cho việc layout và animations. Hơn là việc nhảy vào D3, để tôi liệt kê một vài lý do tại sao bạn nên cân nhắc sử dụng nó.

The Learning Curve

Tôi làm việc với D3 nhiều lần trong vài năm, và đã cài nhiều loại visualisations với nó. Tôi hiểu các khái niệm về D3, và tôi vẫn đấu tranh việc làm việc với nó. Mỗi người tôi làm việc với, từ juniors tới senior, cũng đấu tranh với nó. Nhiều người, bao gồm cả tôi đều tìm các ví dụ online trông tương tự như thứ chúng tôi cần và xào nấu cho phù hợp. Nếu chúng ta muốn thêm một vài chức năng tùy chỉnh, chúng ta có lẽ phải làm nhiều thứ hơn việc tìm kiếm. Đầu tiên chúng ta sẽ tìm một vài loại phù hợp, cố gắng hiểu cách nó làm việc, và bắt đầu sửa đổi nó như chúng ta muốn. Nghe có vẽ quen thuộc, mặt khác lậ ptrinfh viên ngày này rất quen thuộc với các thư viện virtual DOM và họ cảm thấy thoải mái với các mẫu. Nó không phải là đòn bấy cho kĩ năng của chúng ta, hơn là giới thiệu một thư viện yêu cầu một cách nghĩ khác.

It’s easier than you think

Khi bạn lần đầu nghĩ về tự tạo biểu đồ từ đầu, ai cũng cảm thấy lo lắng và sợ hãi. Nó nghe có vẻ rất phức tạp, nhưng nó thực sự không như vậy khi bạn bắt đầu làm. Hãy xem một ví dụ về một line chart. Từ đó bạn có thể làm một line chart với D3: Có một ít code, nhưng tôi chỉ sử dụng các công cụ tôi quen thuộc, trong trường hợp này view library là Preact (có thể là bất cứ thứ gì, React, Vue, Angular), và css như flexbox. Ví dụ D3 yêu cầu học rất nhiều khái niệm về D3. Sau cùng chỉ yêu cầu sử dụng kiến thức bạn biết về view library. Tôi muốn nói rằng nó dễ dàng hơn việc maintain với D3. Ai cũng biết rằng view library là dễ dàng để nhảy vào và sửa code.

Don’t forget about the bundle size

Phụ thuộc vào kiểu chart và việc optimise buldle, D3 mất ít nhất 70+ KB code. Điều này có thể ảnh hưởng đến tốc độ load trang.

Canvas and HTML are often better than SVG

Hãy cùng xem lại ví dụ trước, chúng ta sử dụng HTML và SVG. Với vài lý do, nhiều người dùng cài đặt cả charts sử dụng SVG nhưng điều này là không cần thiết.CSS là more powerful hơn SVG ngày nay. Ví dụ, SVG không hỗ trợ natively text wrapping. Nếu chúng ta muốn text wrapping, chúng ta phải tính toán nó trong Javascript. Với HTML, sử dụng white-space:normal, nó sẽ wrap. Các đối tượng như vòng tròn và hình chữ nhận đều có thể sử dụng HTML và CSS. Bạn có thể sử dụng transform và border-radius và tạo tất cả các hình dạng. Nếu bạn muốn làm bar chart trong D3 với two rounded corners, bạn không thể sử dụng rect bởi vì nó sẽ bo tròn cả 4 góc, thay vào đó bạn muốn chỉ 2 góc. Lựa chọn của bạn chỉ có thể sử dụng path. Chỉ có một nguyên nhân tôi muốn sử dụng SVG tags, là bởi vì path tag. Nó vẫn là cách tốt nhất để tạo các hình dạng tùy ý so với HTML. Nếu bạn cần nâng cao hiệu suất, cũng nên cân nhắc canvas tag. Với canvas bạn sẽ phải tự code các tương tác, nhưng nó

But Canvas doesn’t scale like SVG? [update]

Một thứ mà tôi được nghe thường xuyên, là canvas không thích hợp cho visualisation bởi vì nó không thể scale như SVG. Trường hợp bình thường với canvas, nếu bạn zoom in zoom out trang sử dụng một trình duyệt sẽ có hiển thị cao hơn, your canvas thì bị vỡ và nhòe/ Điều này xảy ra bởi vì khi bạn tạo canvas, bạn phải định nghĩa nhiều pixels bạn muốn your canvas draw. Khi chúng ta thiết lập các thuộc tính width và height nó trông giống như chúng ta cài đặt trong css size, nhưng chúng thực sự cài đặt cho canvas space. Điều này không giống nhau. Bình thường your css pixel được thiết lập cùng kích cỡ với canvas, nhưng khi bạn zoom in/out với browser, bạn sẽ nhìn thấy vấn đề này. Giải pháp là sử dụng window.devicePixelRatio và scale your canvas drawing space.

onResize() {
let canvas = this.base.querySelector(‘canvas’);
let ctx = canvas.getContext(‘2d’);
let PIXEL_RATIO = window.devicePixelRatio;
canvas.width = canvas.offsetWidth * PIXEL_RATIO;
canvas.height = canvas.offsetHeight * PIXEL_RATIO;
ctx.setTransform(PIXEL_RATIO, 0, 0, PIXEL_RATIO, 0, 0);

this.props.onDraw(ctx, canvas.offsetWidth, canvas.offsetHeight);

}

Sử dụng pixel ratio chúng ta sẽ tăng drawing space cho canvas. Nhưng giảm drawing space là không đủ chúng ta cần nói với canvas rằng phải scale pixel ratio. Điều này sẽ được giải quyết được các vấn đề về scaling.

Conclusion

Như chúng ta đã thấy có vài lý do tại sao D3 đã lỗi thời cho nhiều trường hợp sử dụng ngày nay. Web đã phát triển đáng kể từ khi nó bắt đầu. Nếu bạn làm một charts đơn giản như donuts, bar charts, line charts, scatter plots, etc, cân nhắc xem nếu bạn có thể cài đặt chúng sử dụng các framework đã tồn tại.