Carbide Alpha

Carbide là môi trường lập trình đột phá:

  • Không cần cài đặt
  • Hỗ trợ Javascript/ES2015
  • Tự thêm module từ NPM hoặc GitHub
  • Tự động save load trực tiếp từ Github Gists

Còn gì hay nữa nào…

  • Comments trực tiếp với Rich Text sidebar #LiterateProgramming
  • Carbide thể hiện kết quả giữa các dòng code – cho phép bạn thấy được data trong thực tế
  • Kết quả hiển thị có thể được log, đồ họa hóa, và chi phối trực tiếp bằng widget mạnh mẽ (và bóng bẩy)
  • Carbide không phân biệt giữa input và output, sử dụng công nghệ machine learning chuẩn hóa để chạy ngược chương trình

Carbide vẫn còn khá “khùng” (dù gì đây cũng là công cụ mới), bởi vậy, bạn ít nhất cũng nên đọc lướt qua Quick Start Guide trước khi sử dụng.

Quick Start

Running Code

Chạy code trong Carbide cực kỳ đơn giản, chỉ việc nhẩn nút “Run” nằm ở phía đáy phải của cell bất kỳ. Bạn còn có thể chạy nhanh cell hiện tại với tổ hợp Cmd-Enter.

Hiện Carbide có hỗ trợ phiên bản JavaScript mới nhất, được biết đến với tên ES2015 thông qua hỗ trợ BabelJS built-in. Bạn thậm chí còn có thể sử dụng tính năng phi đồng bộ/chờ đợi, mà không cần phải gói code trong function.

Bên cạnh khả năng chạy code cục bộ trong editor, bạn có thể chọn chạy code ở một cửa sổ riêng biệt (rất tiện lợi khi phát triển ứng dụng cần truy cập DOM). Để chuyển sang model này, hãy click vào language dropdown ở đầu trang, và lựa chọn “Javascript (Separate Window)”.

Vẫn chưa có hỗ trợ cho các ngôn ngữ khác (nhưng chắc chắn sẽ có trong tương lai).

T9wM8QO - Imgur

 

Attaching Probes

Trong Carbide, Bạn thấy kết quả chạy chương trình trên “probes”, được hiển thị giữa các dòng code.

Bạn có thể xem kỹ bất cứ biểu thức nào, bằng cách lựa chọn biểu thức và nhấn Cmd-I.

Với Carbide, bạn cũng có thể dễ dàng xem trước tất cả giá trị khi chúng chảy qua chương trình.

Tiện lợi hơn nữa, biểu thức ở ngoài cùng ở mỗi hàng sẽ được log tự động, và hiển thị widget cho biểu thức cuối của cell.

Vk78cX5 - Imgur

Widgets đồ họa hóa

Nếu muốn thông tin chi tiết hơn probes mặc định, bạn có thể click bất kỳ probe nào để mở “widget”, xuất hiện ở bên phải code.

Khi rơ chuột trên widget, tab bar mới sẽ xuất hiện, cho phẹp bạn chuyển đổi nhiều cách thể hiện dữ liệu khác nhau. String “orange” có thể được thể hiện dưới dạng màu sắc, text thuần, hoặc JSON, bạn có thể chuyển đổi dễ dàng bằng widget.

Không chỉ đơn thuần nhìn vào một đoạn dữ liệu, widget đồ họa hóa cũng có thể tích hợp thông tin cây cú pháp trừu tượng của code.Như vậy, ta còn có thể đồ họa hóa array[0] dưới dạng selector vào array, hoặc “house” == “horse” dưới dạng bộ so sánh string tương tác, chứ không phải false thiếu thông tin.

Trong phần Widget Menagerie, bạn có thể tìm thêm nhiều widget dạng này.

Uo4qOGj - Imgur

Widgets chi phối

Chính những widget đồ họa hóa này còn có thể được sử dụng để chi phối data. Đây cũng là ý tưởng độc đáo, cốt lõi của Carbide: không còn là “đồ cúng” như những công cụ đồ họa hóa khác, chỉ nhìn được chứ không thể động vào.

Ví dụ như, chúng ta có thể hiển thị sô “42” dưới dạng thanh trượt với hai đầu ở mức 0 và 100. Khi được đồ họa hóa, ta sẽ phần nào hình dung được con số này là thấp hay cao. Khi ta kéo thanh trượt, phần code nào liên quan đến số “42” được hiển thị sẽ được thay thế bằng giá trị mới.

Như vậy, khi giá trị “42” không “lồ lộ” trong code mà là giá trị tính toán, khó khăn xuất hiện từ đây. Để giải quyết nan đề này, Carbide sẽ chạy ngược chương trình – thay đổi outputs, và rồi tính toán cho ra inputs. Cách tính toán này đòi hỏi Carbrige phải sử dụng backpropagation, công nghệ từ machine learning. Nếu muốn tìm hiểu thêm về công nghệ này, bạn có thể truy cập vào đây.

DKmHYUJ - Imgur

Multiple Cells

Carbide là môi trường lập trình notebook, code được sếp vào từng hộp nhỏ gọi là cell. Mỗi cell là một “sân chơi” nho nhỏ để bạn thoải mái vọc vạch với sự giúp đỡ của nhiều công cụ hữu dụng.

Để thêm cell, chỉ việc click vào khu vực liền trước hoặc liền sau một cell nào đó.

Khác với những hệ thống lập trình notebook khác, bạn sẽ tạo ít cell hơn trong Carbide. Vì bạn không cần phải break chương trình thành nhiều cell khác nhau để hình dung được chương trình.

Với cấu trúc nhiều cell, bạn có thể cùng lúc thử nhiều cách giải quyết khác nhau cho cùng một vấn đề mà không cần phải commit nhiều thay đổi quá lớn.

Mỗi cell có chứa file name, được thể hiện trên cell toolbar ở đáy cell. Filename này sẽ thể hiện vai trò của mình khi bạn chia sẻ thông tin giữa các cell với cú pháp import/export.

// cell0.js
export default 420
--------------------------------------------------
// cell1.js
import data from './cell0.js'
data + 2

GzhZ5kP - Imgur (1)

Saving and Sharing

Hiện nay, mọi Carbide notebooks được thể hiện dưới dạng public Github Gists.

Nếu bạn không được logged in, nhấn Cmd-S hoặc nhấn nút “Save” để tạo Gist mới với tên tài khoản carbide-public, Nếu bạn được logged in, gist sẽ được lưu dưới tên tài khoản cá nhân của bạn.

Notebook được hiển thị ở dạng text thuần dễ đọc: mỗi cell tương ứng với một file khác nhau, với markdown header, file sẽ chứa tất cả metadata dưới dạng comment.

HicROIa - Imgur

Ví dụ Notebooks

Smiley Face Vẽ mặt cười

Neural Network XOR Kéo thanh trượt để biến neural network hai lớp gần như exclusive hoặc function.

THREE.js Cubes Demo Một đống hộp 3D, bay quanh con trỏ chuột

GRAIN Data Cleaning Import file excel và tự dọn dẹp theo lịch trình

React TodoMVC Phiên bản es của ứng dụng mẫu TodoMVC nổi tiếng từ todomvc.com

Tạo Youtube Widget Thêm widget vào notebook, giúp nhận dạng URL video Youtube URLs

Empty Notebook Cho những ai “yêu thích” cảm giác “bí ý tưởng”

Widgets

Trải ngiệm ngay Widget trực tiếp với Widget Menagerie

Numbers

slider

integer

scrubber

Strings

string

string_diff

color

buffer

Data

chart

surface
ndarray

matrix

Objects

regexp

date

json

json_diff

Basic Widgets

date

html

map

object

react

regex

selector

Miscellaneous

buffer

chart

color

date

html

json

json_diff

map

matrix

object

regex

selector

slider

string

string_diff

Tự chế Widgets 🎂

Carbide widget chỉ đơn thuần là thành tố react (thành tố react là gì?) với tính chất class tĩnh title và member function tĩnh được gọi là match, vớt match(value, ast) đặc trưng. mỗi khi bạn mở một widget trên biểu thức nào đó, carbide sẽ chạy giá trị của biểu thức và ast qua tất cả match function của widget đã cài đặt để biết được widget nào nên được hiển thị trên tab. Nếu bạn có thành tố react với title tĩnh và match function, bạn có thể thêm thành tố này vào notebook như sau:

import React from 'react'
class YOLOWidget extends React.Component {
    static title = '#YOLO'
    static match(value, ast){
        return value === '#YOLO'
    }
    render(){
        return 
            https://en.wikipedia.org/wiki/YOLO_(motto)
        
    }
}

doc.kernel.widgets.push(YOLOWidget)

Backpropagation

Numbers

Đối với những “đầu óc toán học”, các bạn có thể diễn dịch cả chương trình thành function, nếu argument của function là literal (hệ số chữ) trong cương trình, và output của function là biểu thức (đã kiểm tra) cụ thể. Kế tiếp, thách thức là phải tìm assignment cho các argument làm sao để output càng gần với giá trị mong muốn càng tốt. Khi đã giải quyết được nan đề này, các bạn có thể thay thế các literal này trở lại trong code, và bạn đã xây dựng được chương trình có output tại điểm biểu thức ngẫu nhiên đúng như bạn mong muốn.

Nói cách khác, Carbide đang cố gắng giải quyết vấn đề đảo số của function. Một khung vấn đề tương tự (cụ thể hơn) là Carbide vẫn đang tối ưu cost function (khoảng cách giữa output và output mục tiêu) trên một khoảng tham số.

May mắn thay, có một lượng lớn tài liệu sẵn có xoay quanh vấn đề tối giản (không) ràng buộc. Carbide hiện đang sử dụng phiên bản uncmin function của NumericJS. Function có tích hợp method quasi-newton (tương tự L-BFGS) – phiên bản khái quát của method root-finding (phương thức tìm ẩn số) của Newton đến nhiều tham số.

phương thức Quasi-Newton cần phải tính toán gradient của một function tại mỗi bước để xác định phải đi theo hướng nào. Hiện tại, entail (suy luận) này đánh giá function một vài lần với một số tinh chỉnh nhỏ đến các tham số đã có (trong tương lai ta có thể tưởng tượng việc thực thi automatic differentiation – vi phân tự động, từ đó chỉ cần đánh giá một lần mỗi bước).

Trong trường hợp engine tối ưu bị kẹt với gradient zero, tham số vận hành trước đó sẽ được ghi nhớ, vì vậy mỗi lượt tương tác có thể bắt đầu với điểm hợp lý được biết đến gần nhất (Carbide gọi bằng tên gọi trùi mến: Memoization của Guillermo “Memo”).

Strings

Tối ưu số học, dù đã trải qua hàng thập kỷ nghiên cứu và cải tiến không ngừng, vẫn chưa thể giải quyết được bài toán chuẩn hóa khái niệm của các cấu trúc dữ liệu khác.

Technology

Carbide có sử dụng một lượng lớn kỹ thuật và công nghệ khá mới, khó có thể giới thiệu hết trong bài viết. Hy vọng trong tương lai, Carbide có thể đi chi tiết hơn về những kỹ thuật này trên blog của họ.

SystemJS/JSPM

NPM có thể là một trong những package manager lớn nhất và thành công nhất (dù vẫn còn một số xung đột). Nên việc import module từ NPM khá quan trọng.

Mới đầu, đội ngũ Carbide tự viết phần tích hợp NPM của mình, chạy trên trình duyệt (call NPM API endpoint chính thống, xác định tarballs, unpack chúng trên trình duyện, và load file tương ứng). Bên cạnh đó, họ còn dùng đến Babel và Webpack để phát triển ứng dụng.

Nhưng vài tháng gần đây, họ phát hiện ra SystemJS, và cuối cùng dùng đến JSPM để xử lý mọi công việc. Trong thực tế, hiện nay chế độ “Current Window” của Carbide dùng chung một Systém loader cho cả editor và code được thực thi trên đó. Như vậy, “Current Window” (về mặt kỹ thuật) có thể self-host, hot-reload, và tự giám sát nhiều phần của chính nó. Vô cùng gọn gàng.

BabelJS

Đa số trình duyệt không hỗ hợ những tính năng mới nhất và tiềm năng nhất mà developer muốn mang đến người dùng. Nên để sử dụng những cấu trúc và cú pháp mới nhất, hay nhất, ta phải sử dụng một chương trình mang tên “transpiler”, giúp dịch source code từ ngôn ngữ này sang ngôn ngữ khác.

Nhưng quan trọng hơn hết – với Carbide, họ chỉ cần tiếp cận được với cây cú pháp trừu tượng của một đoạn mã là đủ, và có thể giám sát một số phạm vi nhất định nữa.

Top-Level Async/Await

Carbide cho phép bạn sử dụng keyword await ở cấp độ cao nhất, như thể bạn đang viết async function. Nguyên lý chính của tính năng này là từ việc xác định awaits cấp cao nhất, và bao toàn bộ cell trong async function nếu tìm được.

Hot Reloading

Hot reloading đang nhanh chóng trở thành chuẩn mực trong lập trình JavaScript hiện đại. Đây cũng là mấu chốt để có được môi trường lập trình tương tác thú vị – có thể thay thế module mà không phải chạy lại tất cả từ đầu.

Để đạt được mục tiêu này, đội ngũ Carbide đã phải tự xây dựng Hot Reloading engine ngay trên JSPM. Có thể reload dependents nhẹ nhàng hơn SystemJS hot reloader và hệ thống thay thế module Webpack Hot. Hot Reloading engine lợi dụng việc trong ES, reference đều là “live” để import có thể được cập nhật chỉ bằng việc call getter.

Tuy nhiên, đôi khi bạn lại muốn quá trình reload dependents “mạnh mẽ” của Webpack, lúc này bạn có thể export biến __forceReload.

export const __forceReload = true

Để dọn sạch stateful code để chuẩn bị cho reload, export function mang tên __unload,(tùy ý) nhận module được complie từ code mới hơn.

export function __unload(new_module){
    cancelAllEventListeners()
}

CodeMirror

Khi nảy ra ý tưởng biến Carbide thành self-hosting, cả team nhận ra rằng quá trình self-hosting phải được “xào nấu” để có thể xử lý notebook có trữ lượng lớn. Thật không may, nếu bạn sử dụng cơ chế bố cục tự nhiên của HTML để bố cục cell, mọi thứ vẫn cần phải render trên mỗi keystroke – không có cách nào để tối ưu như chỉ render các dòng visible (vì khi đó trình duyệt có thể nhận biết dòng visible là ở đâu).

Quá trình thực thi hiện tại của Carbine khá kỳ lạ ở khoản này vì chúng ta có một instance CodeMirror khổng lồ duy nhất, có document thể hiện tổng concatenation của tất cả cell trong document. Đội ngũ Carbide có thuật toán bố cục đặc biệt để thêm vertical space khi cần thiết để có thể có đủ khoảng trống chồng thêm nhân tố giao diện lên trên.

Như vậy, chúng ta có thể tận dụng khả năng render lười biếng, gọn gàng, của CodeMirror chỉ để render những thành phần hiện hữu trên màn hình

Nondeterministic Layout Engine

Để thực hiện các tính năng mới (như xem text contour là thành phần có khả năng bock floating widgets), layout engine của Carbine sử dụng một dạng AMB operator đặc thù của McCarthy. Hơn nữa, vì Carbide cần phải tính toán layout rất nhiều, nên layout đôi khi phải tồn tại ở siêu vị trí gồm hai trạng thái, vấn đề này chỉ có thể được giải quyết bằng cách tính toán layout nhiều hơn nữa.

Future

Preview: Adding Custom Kernels

Tuy Carbine uy tiên Javascript trên hết, nhưng parsing, compiling, và running code lại được tích hợp toàn bộ dưới dạng external module. Đồng nghĩa với việc ta hoàn toàn có thể xác định javascript module thay thế cho carbide kernel để chạy code trên ngôn ngữ khác. Sau đây là ví dụ về minimal kernel:

export async function parse(code){
    // Return some AST
}

export async function match(ast, code, start, end){
    // Return closest valid expression
}

export async function evaluate(ast, cell){
    // Evaluate the cell
}

Preview: Watlab Kernel

Watlab là ngôn ngữ compile-to-javascript được lấy cảm hứng từ Matlab. Hầu như mọi cú pháp đều giống với ES2015, có thêm postfix function application operator, matrix literals, và matrix operators chuẩn.

Preview: Python Kernel

Kernel bé tẹo giao tiếp với local python REPL. Ưu điểm: filesystem access, thư viện python hay ho. Khuyết điểm: cần npm install; npm start command.

Preview: MIT Scheme Kernel

Kernel bé tạo giao tiếp với local MIT Scheme REPL. Ưu điểm: filesystem access, arcane wizardry. Khuyết điểm: cần npm install; npm start command, arcane wizardry.

Preview: Time Traveling

Một trong nhiều tính năng không được đưa vào alpha release là Bret Victor Style program execution scrubber cho phép bạn có cảm giác trực quan hơn.

Advertisements