Launch HN: Haystack (YC S24) – Công cụ trực quan hóa và chỉnh sửa mã trên canvas vô hạn

 (github.com/haystackeditor)
2 điểm bởi GN⁺ 2024-09-27 | 1 bình luận | Chia sẻ qua WhatsApp
  • Haystack Editor là sản phẩm kết hợp sự đơn giản của trình soạn thảo mã với UI canvas, giúp dễ hiểu mã nguồn trong nháy mắt, và được phát triển cùng cộng đồng tại kho lưu trữ này
  • Kho lưu trữ công khai không chỉ mã nguồn và issue mà cả roadmap; mã nguồn được cung cấp theo PolyForm Strict License 1.0.0
  • Bản phân phối sản phẩm dựa trên kho lưu trữ này và có thêm một số tùy chỉnh cụ thể, được cung cấp theo điều khoản dịch vụ riêng
  • Ví dụ tính năng gồm Canvas Workspaces, Explorer View, Keyboard Navigation, Generate Function; bao gồm hỗ trợ toàn diện cho chỉnh sửa, điều hướng và hiểu mã, debug nhẹ, mô hình mở rộng, cũng như tích hợp nhẹ với các công cụ hiện có
  • Haystack được cập nhật hằng tuần với tính năng mới và bản sửa lỗi, có thể tải xuống cho Windows, macOS và Linux

Vai trò của kho lưu trữ Haystack Editor

  • Kho lưu trữ này là nơi Haystack Software cùng cộng đồng phát triển sản phẩm Haystack Editor
  • Không chỉ công khai công việc về mã nguồn và issue, dự án còn công khai roadmap
  • Mã nguồn được cung cấp theo PolyForm Strict License 1.0.0

Sản phẩm Haystack Editor

  • Haystack Editor là bản phân phối của kho lưu trữ Haystack Editor và bao gồm một số tùy chỉnh cụ thể
  • Bản phân phối được phát hành theo terms of service riêng
  • Sản phẩm kết hợp sự đơn giản của trình soạn thảo mã với UI canvas, giúp dễ hiểu mã nguồn trong nháy mắt
  • Phạm vi hỗ trợ bao gồm:
    • chỉnh sửa mã toàn diện
    • Điều hướng mã
    • Hỗ trợ hiểu mã
    • Debug nhẹ
    • Mô hình mở rộng phong phú
    • Tích hợp nhẹ với các công cụ hiện có
  • Haystack được cập nhật hằng tuần với tính năng mới và bản sửa lỗi
  • Có thể tải xuống phiên bản cho Windows, macOS và Linux từ trang web Haystack

Xem trước tính năng

  • Cung cấp tính năng Canvas Workspaces
  • Cung cấp tính năng Explorer View
  • Cung cấp tính năng Keyboard Navigation
  • Cung cấp tính năng Generate Function

Cách đóng góp và gửi phản hồi

Dự án liên quan và extension đi kèm

  • Nhiều thành phần cốt lõi và extension của Haystack nằm trong các kho lưu trữ riêng trên GitHub
  • Ví dụ, node debug adapter và mono debug adapter là các kho lưu trữ riêng biệt
  • Một ví dụ khác là Pixi repository
  • Haystack bao gồm nhiều extension tích hợp sẵn trong thư mục extensions
    • Bao gồm grammar và snippet cho nhiều ngôn ngữ
    • Các extension cung cấp hỗ trợ ngôn ngữ phong phú như hoàn thành mã hoặc Go to Definition dùng hậu tố language-features
    • Ví dụ, extension json cung cấp tô màu JSON, còn extension json-language-features cung cấp hỗ trợ ngôn ngữ phong phú cho JSON

Bài viết liên quan

1 bình luận

 
GN⁺ 2024-09-27
Ý kiến trên Hacker News

  • Ý tưởng này đã tuyệt vời từ hàng chục năm trước. Tôi hy vọng Haystack sẽ thành công như nhiều nỗ lực trước đây, và cách triển khai ban đầu trông có vẻ hứa hẹn.
    Tuy nhiên có lẽ sẽ có nhiều trở ngại, như khó nắm bắt caller/callee hoặc mỗi lập trình viên lại có sở thích UX khác nhau. Tôi luôn nghĩ rằng nó có thể mạnh mẽ hơn trong một không gian rộng hơn nhiều so với màn hình 2D, chẳng hạn như môi trường kiểu kính VR.

    • Tôi rất thích ý tưởng về thế giới Haystack VR. Thật tiếc là phần mềm VR vẫn ở trạng thái bất ổn vì các yếu tố sinh học, nhưng tôi tin một ngày nào đó đó sẽ là tương lai.

  • Rất hay. Tôi đã tưởng tượng toàn bộ codebase của một tổ chức được ánh xạ như thế này, hiển thị xuyên qua nhiều framework và ngôn ngữ.
    Không biết trong video tôi có bỏ lỡ không hay hiện vẫn chưa làm được, nhưng việc nối các node thủ công sẽ quá nhiều thao tác, nên sẽ rất tốt nếu có một bot đơn giản chạy trên thư mục repository để tự động hóa việc trực quan hóa. Tôi đã thêm vào danh sách quan tâm.
    Nếu là tôi, tôi sẽ nhắm đến các tổ chức doanh nghiệp lớn hoặc nhóm CNTT của chính quyền địa phương đang thực hiện hoặc lên kế hoạch chuyển đổi số. Vì họ cần định hướng và hiểu ý nghĩa giữa công việc legacy và công việc mới.
    Nếu mọi chuyện thuận lợi, trong vòng một năm Salesforce có thể tìm đến. Nó có vẻ khá phù hợp với tầm nhìn và bộ sản phẩm của họ.

    • Tôi thích khái niệm thấy trong video. Nhưng tôi muốn thấy nó lớn hơn, có nhiều cửa sổ hơn, và tất cả đều được kết nối.
      Tôi không biết khi ở trạng thái đó liệu có thực sự dùng được không, nhưng có vẻ sẽ thú vị nếu thử. Cảm giác như một sơ đồ UML thể hiện toàn bộ codebase với hàng nghìn mũi tên.
      Khi đó ta có thể nói với đồng nghiệp rằng file cần sửa nằm đâu đó ở góc trên bên phải, và diff của Git cũng hiển thị trực quan nên có thể phóng to xem các phần bị thay đổi rải rác.
    • Khi di chuyển theo file hoặc symbol, các liên kết sẽ được thêm tự động. Tôi không chắc đây có đúng là điều bạn muốn nói không, nhưng chúng tôi đang cố cung cấp cho người dùng một “luồng” dựa trên truy vấn ngôn ngữ tự nhiên.
      Ví dụ như xử lý câu hỏi kiểu “chuyện gì xảy ra từ khoảnh khắc nhấn chuột vào nút đăng ký cho đến backend”.
    • Sẽ rất thú vị nếu có thể “kết nối” cả các lời gọi API sang những service khác.

  • Tôi tò mò liệu dự án này có lấy cảm hứng từ Light Table không.
    Về yêu cầu tính năng, tôi mong phần trực quan hóa được mở rộng vượt ra ngoài 2D. Các hệ thống thật sự phức tạp thường là những đồ thị tinh vi, nói vui là như một mớ chỉ rối, nên tôi từng thấy chỉ trực quan hóa trên mặt phẳng 2D là không đủ.
    Sẽ rất hay nếu có kiểu trực quan hóa bằng các khối cầu đồng tâm, với lớp ngoài là các service biên, lớp trong là các service lõi/domain.

    • Nhiều người đã nhắc đến Light Table, nhưng chúng tôi chỉ biết đến nó sau khi ra mắt.
      Điểm bạn nói về một góc nhìn gần với 3D hơn thật thú vị. Chúng tôi từng nghĩ đến ý tưởng này, nhưng để làm nó đúng theo cách người dùng có thể hiểu được thì thật sự khó. Dù vậy, nó chắc chắn nằm trong tầm nhìn tương lai.
      Sửa: đã xóa suy đoán về Light Table vì không đúng.
    • Tôi hy vọng các bạn không chỉ biết Light Table của thập niên 2010, mà còn biết cả Oberon cuối thập niên 1980. Oberon cũng có chức năng đặt mã trên một canvas không biên giới.

  • Hỏi hơi lạc đề nhưng có infinite canvas mã nguồn mở nào tiêu biểu và dùng được không? Tôi đang làm một game bài và cần một infinite canvas nhiều người chơi. Rất mong được gợi ý.

  • Nếu là extension của VSCode thì có lẽ tôi đã thử. Tôi muốn dùng thử, nhưng dạo này tôi sống trong Cursor.

    • Có vẻ đây là một vấn đề ngày càng lớn.

  • Tôi tò mò vì sao không thể làm thành extension. Ý tưởng thật sự rất hay, và tôi hoàn toàn có thể hình dung nó nằm trong một tab của vùng editor.
    Như vậy cũng có thể mở nhiều tab Haystack, giúp chuyển ngữ cảnh dễ hơn nhiều. Dù dựa trên VSCode, việc phải cài thêm một IDE khác vẫn hơi tiếc. Dù sao cũng mong các bạn tiếp tục làm tốt.

    • Extension của VS Code khá hạn chế. Có thể thay renderer của tab editor, nhưng việc khiến nhiều thành phần trong một giao diện tùy chỉnh được toàn bộ môi trường và hệ sinh thái extension xem như các tab editor hạng nhất về cơ bản là khó. Miễn là không bị tụt lại, fork là một lựa chọn hợp lý.
    • Tôi hiểu sự khó chịu đó. Như đã nói ở bình luận khác, làm Haystack đủ tốt dưới dạng extension khá khó, nhưng cuối cùng chúng tôi cũng có kế hoạch khám phá hướng đó.
    • Nếu extension có hạn chế, một cách обход hợp lý có lẽ là tính năng bật/tắt canvas view. Người dùng sẽ muốn chuyển qua lại giữa canvas và view VSCode tiêu chuẩn; nếu làm được điều đó bên trong Haystack thì không cần cài cả hai.

  • Nó làm tôi nhớ đến môi trường Kansas của ngôn ngữ lập trình Self. Sun có một video làm năm 1995.
    https://www.youtube.com/watch?v=Ox5P7QyL774
    Sau video này còn có thêm các tính năng tìm kiếm thú vị hơn.

  • Rất tuyệt. Nó gần giống quy trình tôi làm khi xem một codebase lớn, nhưng gọn gàng và có tổ chức hơn nhiều.
    Thường tôi mở năm sáu terminal trỏ tới nhiều file nguồn khác nhau rồi cố tạo bản đồ trong đầu. Cuối cùng cũng nắm được, nhưng đó là quá trình khá vất vả; một công cụ như thế này chắc sẽ giúp cực nhiều. Giờ chỉ còn việc kết hợp với màn hình ultrawide nữa thôi.

  • Có vẻ sẽ hữu ích vì giảm bớt thứ phải giữ trong đầu, nhưng UI hiện tại phụ thuộc vào chuột quá nhiều. Sẽ tốt nếu có phím tắt và làm cho các cửa sổ “tiling” như trình quản lý cửa sổ dwm, để không phải chỉnh kích thước thủ công.

    • Thực ra chúng tôi đang cố để có thể điều hướng canvas bằng bàn phím nhiều nhất có thể. Nút “Keybindings and Help” ở góc dưới bên phải có danh sách keybinding.
      Về việc chỉnh kích thước thủ công, chúng tôi đang thử tiling trong viewport. Nếu bạn cho biết điều gì khiến bạn phải chỉnh kích thước, có lẽ chúng tôi có thể sửa.

  • Đây có vẻ là một cách tiếp cận tiện lợi để lập trình viên trải rộng và ánh xạ mã trong không gian hai chiều. Nó tương tự phương pháp loci[1], trong đó lập trình viên mã hóa tinh vi các đoạn mã và liên kết theo không gian để tăng cường trí nhớ và cải thiện mức độ hiểu.
    Vì vậy tôi mạnh dạn đề xuất thêm tùy chọn họa tiết nền không gây phân tâm nhưng cung cấp chút thông tin. Tôi không có mẫu cụ thể, nhưng nếu nền là bản đồ thế giới, người dùng có thể nhớ vị trí cần tìm nhanh hơn và cũng xác định vị trí của mình nhanh hơn.
    Theo cùng mạch ý tưởng, cũng đáng cân nhắc cho phép người dùng định nghĩa màu viền tab hoặc thêm nhiễu khác nhau cho từng tab. Nhiễu có thể mờ dần theo mức zoom và khoảng cách so với tâm viewport.
    https://en.wikipedia.org/wiki/Method_of_loci

    • Chúng tôi có kế hoạch thêm minimap để giúp người dùng định hướng.
      Ý tưởng dùng khác biệt màu sắc nhẹ hoặc âm thanh cũng thú vị. Chúng tôi sẽ suy nghĩ thêm.