HN công bố: Haystack – IDE khám phá và chỉnh sửa mã trên canvas vô hạn

 (haystackeditor.com)
2 điểm bởi GN⁺ 2024-07-26 | 1 bình luận | Chia sẻ qua WhatsApp
  • Haystack được giới thiệu là công cụ review code đọc cùng lúc lịch sử hội thoại và thay đổi của PR, rồi chỉ chuyển cho reviewer những thay đổi thực sự cần phán đoán của con người
  • Các PR sạch sẽ được tự động hợp nhất, còn PR rủi ro được phân loại là đối tượng cần sàng lọc, với mục tiêu hướng tới quy trình gần như “human code review time to zero”
  • PR ví dụ đã song song hóa tenancyInit() và cacheWarmup() bằng Promise.all() để giảm cold start từ khoảng 4 giây xuống 2,4 giây, nhưng lại đảo ngược một quyết định về thứ tự thực thi trong quá khứ
  • Haystack tìm thấy trong lịch sử hội thoại căn cứ cho việc cacheWarmup phải chạy sau tenancyInit, và xác nhận trong sandbox rằng 31 trên 50 lần khởi động bị crash
  • PR có vấn đề được chuyển cho @maya, người đã quyết định thứ tự ban đầu, và quyết định thiết kế bị phá vỡ cùng kết quả thất bại được đính kèm vào PR để rút ngắn thời gian đưa ra phán đoán khi review

Quy trình tự động sàng lọc review PR

  • Haystack đọc lịch sử hội thoại và thay đổi của mọi PR để đánh giá mức độ rủi ro
  • Các PR rủi ro được chạy kiểm chứng end-to-end, và chỉ khi cần đến phán đoán của con người mới kéo reviewer vào
  • Trên màn hình xuất hiện cảnh Haystack đang sàng lọc 16 PR
    • Danh sách PR trải rộng trên nhiều ngôn ngữ như TypeScript, JavaScript, C, Python, Ruby, Go, C++
    • Mỗi PR đều được hiển thị ở trạng thái analyzing

Ví dụ thay đổi rủi ro: song song hóa bootstrap dịch vụ

  • PR ví dụ platform#3120 feat: parallelize service bootstrap là thay đổi song song hóa các bước bootstrap dịch vụ
  • Mã cũ chạy tenancyInit() rồi mới chạy tuần tự cacheWarmup()
  • Mã thay đổi chạy đồng thời hai tác vụ bằng Promise.all([tenancyInit(), cacheWarmup()])
  • Theo mô tả PR, cold start trước đó tăng lên khoảng 4 giây, và sau khi song song hóa giảm xuống còn khoảng 2,4 giây
  • Toàn bộ test hiện có đều pass nên bề ngoài đây trông như một cải tiến hiệu năng dễ được phê duyệt

Quyết định thiết kế lộ ra từ lịch sử hội thoại

  • Haystack đọc lịch sử phía sau PR và phát hiện thay đổi này đang đảo ngược một quyết định thiết kế trước đó
  • @maya đã yêu cầu tenancyInit phải hoàn tất trước để cacheWarmup không đọc cấu hình rỗng
  • Trong test suite không có mục nào kiểm tra thứ tự thực thi này nên lỗi hồi quy vẫn vượt qua được test
  • Haystack review đính kèm vào PR các thông tin sau
    • Quyết định còn lưu lại trong lịch sử hội thoại
    • Hành vi mà PR hiện tại thực sự đang thay đổi
    • Lý do vì sao test vẫn pass

Kiểm chứng thực thi và kết quả thất bại

  • Haystack không dừng lại ở việc đọc code mà còn trực tiếp chạy thay đổi
  • Khi lịch sử hội thoại chỉ ra một điều kiện race về timing không có trong test, hệ thống khởi động dịch vụ 50 lần trong sandbox
  • Trong 31 trên 50 lần, cacheWarmup đọc cấu hình rỗng trước khi tenancyInit hoàn tất
  • Kết quả là dịch vụ ném exception ở request đầu tiên và bị crash
  • Haystack QA cũng hiển thị ngay trên PR lý do chạy kiểm chứng, các bài test đã thực hiện và điểm bị phá vỡ

Điểm cần con người review

  • Haystack không tự động hợp nhất PR này mà khuyến nghị mời @maya, người đã quyết định thứ tự thực thi ban đầu, tham gia
  • PR hiển thị đồng thời quyết định thiết kế bị phá vỡ và kết quả khởi động thất bại
  • Màn hình review cung cấp các lựa chọn như “Request review”, “Chat with @maya”, “Doesn’t need review”
  • Quy trình của Haystack tập trung vào việc tự động hợp nhất phần lớn PR, và chỉ chuyển những thay đổi rủi ro như ví dụ này cho đúng người phù hợp

Bài viết liên quan

1 bình luận

 
GN⁺ 2024-07-26
Các ý kiến trên Hacker News

  • Tôi không rõ về tính năng AI, nhưng khái niệm làm việc với code trên canvas và dùng kèm UI lưu đồ là điều tôi đã mong muốn từ lâu
    Tôi chủ yếu làm xử lý dữ liệu, và thường vẽ rất nhiều lưu đồ để giải thích pipeline hoặc tự hiểu chúng
    Một UI phát triển theo hướng này có vẻ sẽ rất hữu ích khi phải xử lý những codebase khó đụng vào do những người không học chuyên ngành CS tạo ra

    • Ý bạn là các công cụ như LabView à?
      https://www.ni.com/en/shop/labview.html
    • Có giống cách BlueJ làm trong Java không?
    • Tôi tò mò vấn đề bạn gặp là thiên về trực quan hóa luồng dữ liệu hay trực quan hóa luồng điều khiển
    • Nếu có thể phác thảo sơ đồ và code cùng trong một canvas thì sẽ rất tuyệt
      Có vẻ việc tài liệu hóa bằng hình ảnh sẽ dễ hơn nhiều

  • Thật sự rất hay. Tôi thích việc khi nhảy tới một method hay khai báo, nó không mở toàn bộ file trong một tab phụ rồi cuộn tới vị trí định nghĩa, mà chỉ hiển thị đoạn code liên quan
    Tôi thường bị mất dấu method đang đọc vì phải so sánh vị trí gọi method với định nghĩa của nó, điều đó khá bực
    Tôi thích việc có thể “ghim” method bên cạnh và lướt qua nó trong một khung nhìn đã ghim mà không vô tình cuộn cả file
    Dùng thử một chút thì tiếc là nó khá thiên về chuột, và khi lần theo method bên trong các method khác thì có quá nhiều cửa sổ nổi phải quản lý
    Nếu có mũi tên hoặc đường nối để theo dõi cửa sổ nào là cửa sổ “cha”, có lẽ sẽ dễ tạo ra một kiểu lưu đồ hơn
    Cá nhân tôi vẫn có vài điểm tiếc, nhưng rất vui khi thấy một cách nghĩ khác trong mảng này và mong họ thành công

    • Tôi hiểu vì sao bạn thích, nhưng về dài hạn tôi nghĩ tác động ròng có thể là âm
      Tôi cho rằng việc biết ở mức nào đó thứ gì nằm ở đâu trong code là có ích
      Có thể nào sau vài năm làm một dự án, vì chỉ làm việc với các mảnh nhỏ, bạn lại rơi vào trạng thái không biết các file thực sự làm gì không?
    • Lập trình văn chương triển khai điều này theo một chiều, tức là cuộn dọc, và cung cấp hai kiểu xem
      Có mã nguồn gốc trộn với chú thích và văn bản, và một bản code được dàn trang đẹp mắt với văn bản định dạng sẵn cùng hyperlink để điều hướng
      http://literateprogramming.com/
    • Đúng vậy, cần làm để việc điều hướng bằng bàn phím dễ hơn
      Tôi tò mò bạn hình dung gì làm điểm tham chiếu cho “cửa sổ cha”
      Bạn muốn chỉ định một cửa sổ cụ thể làm anchor, hay muốn một heuristic nào đó tìm ra anchor như vậy?

  • Chúc mừng ra mắt. Dạo này tôi đang đi theo hướng hoàn toàn ngược lại, vì nó giúp giảm việc nhảy lung tung rồi bị quá tải do khả năng tập trung và xu hướng ADHD
    Một cửa sổ, thu nhỏ mọi thứ, và quan trọng nhất là bỏ hẳn trình duyệt cây
    Nếu cần chuyển tới file, tôi dùng menu mục gần đây của Intellij hoặc nhảy bằng file marker
    Điều đó nghĩa là tôi phải nhớ file marker và phải có chủ đích đi tới đó. Tôi đang dùng plugin IdeaVim cho phím tắt kiểu vim
    Với tôi, cách này khiến việc lập trình tập trung và thú vị hơn nhiều
    Đây là một phần của quá trình chuyển từ nhiều màn hình sang màn hình rộng rồi lại quay về một màn hình duy nhất
    Với các codebase lớn và trưởng thành như đã nhắc tới, tôi dùng LLM làm người dẫn đường

    • Bạn dùng như thế nào? Tôi cũng tò mò bạn xem codebase lớn và trưởng thành là ở mức nào
      Theo trải nghiệm của tôi, LLM mắc khá nhiều lỗi và giả định ngay cả khi chỉ xét một file
    • Tôi hiểu. Tôi tò mò bạn dùng LLM làm người dẫn đường như thế nào
      Theo trải nghiệm của tôi, khi hỏi LLM luồng của một tính năng nằm ở đâu, nó tạo điểm vào khá tốt, nhưng phần chi tiết thì tôi thường vẫn phải tự tìm hiểu, và đôi khi nó chỉ tới nơi có liên quan nhưng không phải chỗ tôi đang tìm

  • Thú vị. Tôi có vài ghi chú
    Obsidian có một tính năng tương tự tên là “Canvas”, nên có thể tham khảo workflow đó
    Với tôi, nó vô dụng nếu là công cụ độc lập; tôi cần nó như một plugin cho Idea
    Phần tạo layout là thứ tôi ghét nhất. Sẽ tuyệt nếu có AI nhận một Git patch hoặc bản sửa lỗi rồi tạo layout phù hợp với nó
    Việc chia sẻ layout phải thật dễ
    Sẽ tốt nếu tích hợp lịch sử Git như một chiều khác nữa. Có cả diff và chú thích blame ngay trong editor thì tốt
    Có dữ liệu có thể dùng để huấn luyện AI, tức là các commit Git
    Cũng nên tích hợp debugging như một chiều khác, và tích hợp cả dữ liệu profiler thì tốt

    • Xem video demo thì có vẻ nó không phải standalone mà chạy bên trong VSCode
      Nghĩa là bạn nhận được nguyên những gì được cung cấp ở đó
      Nếu dùng các công cụ họ Idea thì hiện tại có vẻ chưa có cách nào
    • Công cụ trông ổn và tôi muốn thử dùng cho công việc. Vì tôi làm Android/Kotlin nên thêm một phiếu cho tích hợp IDEA

  • Tôi đã muốn thử thứ như thế này từ lâu rồi. Có cách nào để nhận cập nhật không?
    Đặc biệt là dù chỉ mới thử lần đầu, tôi vẫn đang chờ tùy chọn tắt tính năng AI
    Tôi đặc biệt thích tính năng phóng to vào bên trong hàm và ẩn phần còn lại của file. Bất ngờ là đã có nhiều lúc tôi muốn có thứ như vậy
    Có vẻ cũng có thể dùng theo kiểu dễ dàng kéo các hàm đang làm việc trong cùng một file sang bên cạnh, tức là sắp xếp lại một file đơn theo cách ảo
    Ngoài giao diện chỉnh sửa, tôi nghĩ trong trình chỉnh sửa còn có rất nhiều cơ hội để trực quan hóa
    Có thể có tương tác giữa code của tôi và các phụ thuộc bên thứ ba, đồ thị phụ thuộc/gọi của code của tôi hoặc một phần của nó, đồ thị phụ thuộc ở cấp lớp hoặc module, đồ thị gọi lồng nhau cho phép drill down vào đồ thị gọi nội bộ của đối tượng
    Trong tất cả các trường hợp này, khả năng chuyển đổi mượt mà giữa trực quan hóa và chỉnh sửa dường như là tính năng sát thủ mà công cụ này đang hướng tới
    Chỉ cần đưa đồ họa vào trình chỉnh sửa thôi cũng có thể tạo ra nhiều trực quan hóa thú vị hơn, như heatmap tần suất thay đổi code, heatmap hiệu năng code, theo dõi sử dụng biến, v.v.
    https://adamtornhill.com/articles/crimescene/codeascrimescen...
    Cuối cùng, nếu chưa đọc The Programmer's Brain thì cũng nên nghe podcast này
    https://se-radio.net/2021/06/episode-462-felienne-on-the-pro...
    Có nhiều ý tưởng về trình chỉnh sửa liên quan đến cách bộ não chúng ta hoạt động, nhưng tôi chưa thấy chúng được hỗ trợ tốt trong editor
    Vì đã tiến một bước theo hướng đó rồi, có lẽ vẫn còn nhiều cơ hội hơn nữa

    • Tiếc là chúng tôi vẫn chưa tạo ra cách thông minh nào để đăng ký nhận cập nhật
      Tôi sẽ nghĩ xem cách tốt nhất là gì, và cuối cùng sẽ push cập nhật trực tiếp trong sản phẩm
      Hiện tôi vừa bắt đầu thêm opt-out cho copilot
      Các ý tưởng ở đây rất hay, và tôi muốn trao đổi thêm về một vài điểm. Nếu được, tôi sẽ gửi email/DM
      Nhìn chung tôi muốn trò chuyện với nhiều người, và có thể nhận phản hồi qua feedback@haystackeditor.com

  • Tôi rất thích cách điều hướng từ hàm sang hàm, từ file sang file, rồi quay trở lại
    Để hữu ích hơn, tôi nghĩ nên có một cửa sổ lịch sử điều hướng giống lịch sử truy cập của trình duyệt
    Khi di chuyển giữa file và hàm, nó sẽ hiển thị danh sách, cho phép đi tới/lùi hoặc nhảy thẳng đến vị trí bất kỳ trong lịch sử điều hướng mà không phải vất vả lục tìm trong các cửa sổ đang mở
    Lịch sử điều hướng nói ở đây hoàn toàn tách biệt với lịch sử chỉnh sửa
    Undo/redo chỉnh sửa không nên di chuyển tiến/lùi trong lịch sử điều hướng, và ngược lại cũng vậy
    Tất nhiên có thể có phím tắt bàn phím để đi qua lại trong lịch sử điều hướng

    • Ý tưởng hay. Tôi sẽ nghĩ cách triển khai tốt nhất

  • Tuyệt. Có liên quan đến Code Bubbles: https://dl.acm.org/doi/abs/10.1145/1753326.1753706

    • Đúng vậy, Bubbles rất tuyệt. Tôi đặc biệt thích khái niệm minimap

  • “Chúng tôi không lưu hoặc ghi log code. Chúng tôi gửi các đoạn code tới Open AI làm đầu vào cho copilot dùng để điều hướng. Chúng tôi sẽ sớm thêm tùy chọn để vô hiệu hóa điều này.”
    Khi có tùy chọn đó thì tôi muốn xem thử

    • Chúng tôi đã thêm opt-out cho copilot điều hướng trên Mac
      Mở command palette (CMD+SHIFT+P) và dùng lệnh “Opt out of navigational copilot” là được
      Windows/Linux cũng sẽ sớm được hỗ trợ
      Cũng xin lưu ý là dữ liệu chỉ được gửi tới Open AI khi có chẩn đoán rằng một hàm không tồn tại đang được gọi
    • Tôi cũng phản ứng như vậy. Tôi sẵn lòng hỗ trợ phát triển những công cụ như thế này, nhưng muốn một cách trực tiếp hơn
    • Đồng ý. Ngay từ đầu lẽ ra phải là opt-in
    • Với tình trạng hiện tại thì khó thử trong công ty được

  • Tôi đã công bố một bài báo so sánh thời gian điều hướng giữa editor dựa trên canvas (Code Bubbles), editor truyền thống dựa trên tab (Eclipse), và editor dựa trên carousel do tôi thiết kế (Patchworks)
    Kết quả cho thấy canvas có quá nhiều tự do
    https://austinhenley.com/pubs/Henley2014CHI_Patchworks.pdf

    • Thú vị thật. Tôi chưa từng nghĩ sâu về bố cục không gian của IDE
      Nhìn lại thì ngay cả trong VS Code tôi cũng không còn dùng tab nữa. Vì có quá nhiều file đang mở
      Tôi chỉ xem một file tại một thời điểm, và khi cần chuyển thì tìm bằng Cmd-P hoặc di chuyển giữa các file gần đây
      Cách đó hoạt động tốt, nhưng luôn phải giữ tên file/thư mục trong đầu
    • Tôi mới đọc lướt bài báo một chút, nhưng nhìn vào phần thảo luận về Eclipse, có vẻ người tham gia sẽ hiệu quả hơn nhiều nếu dùng nó đúng như một IDE thay vì như editor nhiều tab
      Việc tìm method hẳn đã bớt là vấn đề hơn nhiều nếu có outline view sắp theo thứ tự chữ cái
    • Rất thú vị. Tôi đã cân nhắc giữa grid và canvas, nhưng thực tế chọn canvas vì nghĩ điều hướng sẽ dễ hơn
      Nếu được, tôi muốn trao đổi thêm và sẽ gửi email
    • Thú vị. Patchworks khá giống cách tôi cấu hình Doom Emacs ở một mức nào đó
      Tôi đặt 4–6 panel code trên nhiều workspace và chuyển bằng SPC TAB số
    • Phân tích tuyệt vời. Với tôi, dù là dựa trên canvas hay carousel, nó đều giúp giảm gánh nặng phải giữ một lượng dữ liệu nhận thức đáng kể trong đầu khi xử lý codebase rất lớn
      Để dùng công cụ cho đúng, thực tế cũng cần đủ màn hình rộng
      Điểm cốt lõi là làm quen với việc xử lý file theo chiều ngang chứ không phải chiều dọc
      Lối tư duy theo chiều dọc này đã ăn sâu khá nhiều từ cách ta viết Hello World lần đầu

  • Chúc mừng ra mắt. Trông như một công cụ tuyệt vời và được triển khai tốt; rất mong được dùng thử.
    Nó khiến tôi nhớ đến một tính năng mà tôi đã muốn có từ lâu và cũng từng vài lần tự làm thủ công, nhưng chưa thể tạo ra ở dạng có thể chia sẻ: tính năng bung một đường đi của mã thành một script hoặc file nguồn duy nhất.
    Tôi muốn có thể đặt một thứ như breakpoint rồi nhấn nút “unravel”, sau đó nhận được một file đơn lẻ cho thấy mọi thứ diễn ra cho đến điểm đó.
    Lý tưởng hơn nữa là file đó có thể chạy được như một script độc lập.
    Về bản chất, nó giống như góc nhìn mà trình gỡ lỗi từng bước cung cấp, nhưng thay vì phải tham chiếu nhiều file và nhiều tầng, tôi muốn xem toàn bộ từ đầu đến cuối trong một file duy nhất.

    • Vì sao bạn cần điều đó? Bạn đang cố giải quyết vấn đề gì? Kết quả mong muốn là gì?
      Tôi nghĩ khi mọi người tập trung vào chi tiết triển khai cụ thể thay vì yêu cầu, tham số và kết quả, rất nhiều thứ sẽ bị mất trong quá trình truyền đạt.
      Tôi tò mò vì sao bạn muốn cách triển khai này, và nó cần phục vụ chức năng hay mục đích gì.